Когда вы начнете заниматься HTML, вы, вероятно, будете заинтересованы в том, чтобы добавить больше возможностей своим веб-страницам. CSS — лучший способ сделать это. CSS позволяет применять изменения ко всей странице, не полагаясь на встроенные стили.
Вот несколько простых примеров CSS, чтобы показать вам, как внести некоторые базовые изменения стиля на вашей веб-странице.
1. Базовый код CSS для удобного форматирования абзаца
Стилизация с помощью CSS означает, что вам не нужно указывать стиль каждый раз, когда вы создаете элемент. Вы можете просто сказать «все абзацы должны иметь этот конкретный стиль», и все готово.
Допустим, вы хотите, чтобы каждый абзац (<p>, один из тегов HTML, который должен знать каждый ) был немного больше обычного. И темно-серый текст, а не черный. Код CSS для этого:
p { font-size: 120%; color: dimgray; } Просто! Теперь, когда браузер отображает абзац, текст наследует размер (120 процентов от нормального) и цвет («тусклый»).
Если вам интересно, какие цвета обычного текста вы можете использовать, ознакомьтесь с этим списком цветов CSS от Mozilla.
2. Изменить регистр букв
Хотите создать обозначение для абзацев, которые должны быть в маленьких заглавных буквах? Пример CSS для этого будет:
p.smallcaps { font-variant: small-caps; }
Чтобы сделать абзац полностью заглавными, мы будем использовать немного другой HTML-тег. Вот как это выглядит:
<p class="smallcaps">Your paragraph here.</p>
Добавление точки и имени класса к элементу указывает подтип этого элемента, определенный классом. Вы можете сделать это с помощью текста, изображений, ссылок и всего остального.
Если вы хотите изменить регистр набора текста на конкретный, используйте следующие примеры CSS:
text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;
Последняя заглавная первая буква каждого предложения.
3. Изменить цвета ссылок
Изменения стиля не ограничиваются абзацами. Ссылке можно назначить четыре разных цвета: ее стандартный цвет, посещаемый цвет, цвет при наведении и активный цвет (который отображается при нажатии на него). Вот код CSS для тех:
a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }
Со ссылками за каждым «а» следует двоеточие, а не точка.
Каждое из этих объявлений меняет цвет ссылки в определенном контексте. Нет необходимости менять класс ссылки, чтобы заставить ее менять цвет.
4. Удалить ссылку подчеркивания
В то время как подчеркнутый текст ясно указывает на ссылку, иногда кажется, что лучше отказаться от этого подчеркивания. Это достигается с помощью атрибута «text-украшение». Этот пример CSS показывает, как удалить подчеркивания на ссылках:
a { text-decoration: none; }
Все с тегом link («a») останется без подчеркивания. Хотите подчеркнуть это, когда пользователь наводит на него курсор? Просто добавьте:
a:hover { text-decoration: underline; }
Вы также можете добавить это украшение текста к активным ссылкам, чтобы подчеркивание не исчезало при нажатии на ссылку.
5. Сделайте кнопку ссылки с помощью CSS-кода
Хотите привлечь больше внимания к своей ссылке? Кнопка ссылки — отличный способ сделать это. Для этого требуется еще несколько строк, но мы рассмотрим их по отдельности:
a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }
Включение всех четырех состояний ссылки гарантирует, что кнопка не исчезнет, когда пользователь наводит на нее курсор или нажимает на нее. Вы также можете установить различные параметры для всплывающих и активных ссылок, например, изменить кнопку или цвет текста.
Цвет фона задается цветом фона, а цвет текста — цветом. Отступ определяет размер поля — текст дополняется на 10 пикселей по вертикали и 25 пикселей по горизонтали.
Выравнивание текста гарантирует, что текст отображается в центре кнопки, а не с одной стороны. Текстовое оформление, как мы видели в последнем примере, удаляет подчеркивание.
Код CSS «display: inline-block» немного сложнее. Короче говоря, он позволяет установить высоту и ширину объекта. Это также гарантирует, что он начинает новую строку, когда он вставлен.
6. Создайте текстовое поле
Простой абзац не очень захватывающий. Если вы хотите выделить элемент на своей странице, вы можете добавить рамку. Вот как это сделать со строкой кода CSS:
p.important { border-style: solid; border-width: 5px; border-color: purple; }
Это просто. Он создает сплошную фиолетовую рамку шириной пять пикселей вокруг любого абзаца важного класса. Чтобы абзац наследовал эти свойства, просто объявите его так:
<p class="important">Your important paragraph here.</p>
Это будет работать независимо от того, насколько большой абзац.
Есть много разных стилей границ, которые вы можете применить; вместо «сплошной» попробуйте «пунктирный» или «двойной». Между тем, ширина может быть «тонкой», «средней» или «толстой». Код CSS может даже определять толщину каждой границы по отдельности, например так:
border-width: 5px 8px 3px 9px;
В результате верхняя граница из пяти пикселей, правая граница из восьми, нижняя из трех и размер левой границы из девяти пикселей.
7. Центрирующие элементы
Для очень распространенной задачи центрирование элементов с помощью кода CSS на удивление не интуитивно понятно. После того, как вы сделали это несколько раз, все становится намного проще. У вас есть несколько разных способов центрировать вещи.
Для элемента блока (обычно изображения) используйте атрибут margin:
.center { display: block; margin: auto; }
Это гарантирует, что элемент отображается как блок и что поле на каждой стороне устанавливается автоматически. Если вы хотите центрировать все изображения на данной странице, вы даже можете добавить «margin: auto» в тег img:
img { margin: auto; }
Чтобы узнать, почему это работает таким образом, ознакомьтесь с объяснением блочной модели CSS на W3C .
Но что, если мы хотим центрировать текст с помощью CSS? Используйте этот пример CSS:
.centertext { text-align: center; }
Хотите использовать класс «centertext» для центрирования текста в абзаце? Просто добавьте этот класс в тег <p>:
<p class="centertext">This text will be centered.</p>
8. Примеры CSS для настройки отступов
Заполнение элемента указывает, сколько места должно быть на каждой стороне. Например, если вы добавите 25 пикселей отступа к нижней части изображения, следующий текст будет сдвинут на 25 пикселей вниз. Многие элементы могут иметь отступы, а не только изображения.
Допустим, вы хотите, чтобы у каждого изображения было 20 пикселей отступов слева и справа и 40 пикселей сверху и снизу. Самое основное исполнение это:
img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }
Существует сокращенный код CSS, который мы можем использовать для представления всей этой информации в одной строке:
img { padding: 40px 25px 40px 25px; }
Это устанавливает верхний, правый, нижний и левый отступы на правильный номер. Благодаря использованию только двух значений (40 и 25) мы можем сделать его еще короче:
img { padding: 40px 25px }
Когда вы используете только два значения, первое значение устанавливается для верхнего и нижнего, а второе будет слева и справа.
9. Выделите строки таблицы
Код CSS заставляет таблицы выглядеть намного лучше, чем сетки по умолчанию. Добавлять цвета, настраивать границы и адаптировать таблицу к экранам мобильных устройств — все это просто. Здесь мы рассмотрим только один интересный эффект: выделение строк таблицы при наведении на них курсора.
Вот код, который вам понадобится для этого:
tr:hover { background-color: #ddd; }
Теперь, когда вы наводите курсор мыши на ячейку таблицы, эта строка меняет цвет. Чтобы увидеть некоторые другие интересные вещи, которые вы можете сделать, посетите страницу W3C с фантастическими таблицами CSS .
10. Сдвиг изображений между прозрачным и непрозрачным
Код CSS также может помочь вам делать классные вещи с изображениями. Вот пример CSS для отображения изображений с полной непрозрачностью, поэтому они выглядят слегка «вычеркнутыми». Когда вы наводите курсор мыши на изображения, они становятся полностью непрозрачными:
img { opacity: 0.5; filter: alpha(opacity=50); }
Атрибут «filter» делает то же самое, что и «opacity», но Internet Explorer 8 и более ранние версии не распознают измерение непрозрачности. Для старых браузеров это хорошая идея, чтобы включить его.
Теперь, когда изображения немного прозрачны, мы сделаем их полностью непрозрачными при наведении мыши:
img:hover { opacity: 1.0; filter: alpha(opacity=100); }
10 примеров CSS с исходным кодом
С этими примерами кода CSS у вас должно быть намного лучшее представление о том, как работает CSS. Шаблоны CSS могут помочь, но понимание необработанных элементов является жизненно важным.
10 простых примеров кода CSS, которые мы рассмотрели:
- Простое форматирование абзаца
- Изменить регистр букв
- Изменить цвета ссылки
- Удалить ссылку подчеркивания
- Сделать ссылку buuton
- Создать текстовое поле
- Центрирующие элементы
- Отрегулируйте отступы
- Подсветить строки таблицы
- Сделать изображения непрозрачными
Рассматривая их снова, вы заметите несколько шаблонов, которые вы можете применить к будущему коду. И вот тогда вы знаете, что вы действительно стали мастером CSS. Но помнить это может быть сложно. Вы можете добавить эту страницу в закладки для дальнейшего использования. Вы также должны научиться проверять, очищать и оптимизировать свой CSS .
Чтобы быстро вспомнить некоторые вещи, которые вы узнали здесь, обязательно ознакомьтесь с нашей таблицей свойств CSS3.