Классы в CSS– удобный путеводитель

В сегодняшней статье мы рассмотрим классы в CSS и их взаимосвязь с языком гипертекста. HTML — теги и CSS связаны напрямую. Эта взаимосвязь позволяет определить, как выглядит тег или как он ведет себя при использовании его имени в таблице стилей:

Но зачастую требуется больше контроля, чем просто делать каждый экземпляр тега одинаковым. Если бы все ячейки HTML-таблицы были выполнены в одном стиле, это выглядело бы непрактично. К примеру, если вам нужно выделить определенные данные.

Поэтому CSS предоставляет нам два разных определения, которые мы можем использовать — CSS классы и идентификаторы.

CSS классы — когда их использовать

Когда у вас на странице есть повторяющиеся элементы, которые должны иметь одинаковое оформление, нужно использовать CSS классы . Для этого необходимо выполнить два шага:

Шаг 1 — добавить класс в HTML

Чтобы повлиять на внешний вид HTML-страницы , вы должны сначала разметить элементы с атрибутом class=»class-name» . Вот пример:

 
Контейнер 1
 
Контейнер 2
 
Контейнер 3
 

В данном примере я хочу создать три контейнера одинакового размера. Возможно, я захочу запустить галерею изображений, или поместить в них изображения в качестве HTML — ссылки для перехода на другие страницы. При этом все контейнеры должны быть одинаковыми.

Давайте посмотрим, что нужно сделать в нашем CSS :

Чтобы задать правило для определенного тега с CSS классом, а не просто определить tagname < >, мы используем tagname.classname < >. Точка между tagname и classname является тем, что определяет правило как CSS класс. Также обратите внимание, что там нет пробелов. Если поставить пробел в правиле, то оно не будет работать так, как вы планировали.

В этом примере использовалось свойство margin-right:10px . Эта строка гарантирует, что между тремя контейнерами сохраняется пространство в 10 пикселей. Свойство float со значение left обеспечивает, чтобы все контейнеры размещались слева.

Такое сочетание должно дать вам что-то вроде этого:

Если вы не укажете класс

Чтобы показать вам, что ваш CSS класс изображения box применяется только там, где вы хотите, поместите дополнительный элемент после « Контейнер 3 »:

Обновите страницу. Вы увидите, что ни одно из правил, установленных в div.box <> не применяется. Потому что вы не указали значение класса.

Вот почему этот вариант использования классов CSS более гибкий, чем простое tagname < >. На странице может быть много элементов , но стили будут применяться только к тем, в которых задано соответствующее значение атрибута class !

Использование более чем одного класса

В современном веб-дизайне для элемента иметь только один класс CSS — редкость. Давайте возьмем наши три квадрата и посмотрим, что произойдет, если вы захотите перекрасить каждый из них.

Чтобы указать, что вы хотите использовать в CSS несколько классов, нужно добавить следующий класс через пробел. Как здесь:

 
Контейнер 1
 
Контейнер 2
 
Контейнер 3
 

Расположение каскадом

Поскольку стили CSS используют каскадный порядок, вы размещаете свои классы по уровню важности. В данном случае мы хотим, чтобы класс class=»box» применялся перед class=»red» . Иначе class=»red» будет применяться до class=»box» . Надеюсь, это понятно!

div.box < height:200px; width:200px; text-align:center; font-size:14px; color:#090; background-color:#dddddd; margin-right:10px; >div.red < background-color:#ffcccc; >div.green < background-color:#ccffcc; >div.blue

Поскольку у каждого из трех контейнеров есть CSS класс .box , к ним всем применяются свойства, прописанные в div.box . Но к каждому применяется также дополнительный класс ( red , green , или blue ). Конечный результат:

Примечание: несмотря на то, что div.box определяет background-color:#cccccc ; « цветовые » классы определяются после него. Например, в box red свойство background-color , указанном в div.red , перезаписывает аналогичное свойство в div.box . Это то, что подразумевается под каскадом: в CSS логике определяется сверху вниз. А при определении классов HTML — слева направо.

CSS классы при создании макета сайта

Подумайте, для каких элементов нужно использовать CSS классы при верстке макета страницы. Вот некоторые мысли для подсказки:

• Любые изображения, которые вам захочется сделать иконками или изображением товара, придется сделать в форме квадрата: например img.thumbnail < width:200px;height:200px; >;
• Стили ссылок для кнопок должны определяться отдельно от стилей обычных ссылок. Например, a.button <> ;
• Нужно применить другой цвет при наведении курсора на ссылки в вашей навигации. Например, a.nav:hover < >a.nav: Hover <> .

Классы DR CSS; TL

Эффективное использование классов позволяет элементу страницы дать имя, которое понимает CSS . Используя эти «имена» можно применить один ряд правил для нескольких экземпляров элемента без повторного определения кода CSS .

И поскольку они располагаются каскадом, порядок в котором вы размещаете свои классы в HTML , действительно имеет значение, так что следите за этим.

Если у вас есть какие-либо вопросы, не стесняйтесь задать их в комментариях!

ВЛ Виктория Лебедева автор-переводчик статьи « Using CSS Classes – A Handy Guide »

Источник

How to Define a CSS Class Style

wikiHow is a “wiki,” similar to Wikipedia, which means that many of our articles are co-written by multiple authors. To create this article, volunteer authors worked to edit and improve it over time.

This article has been viewed 77,452 times.

Classes are a nice feature in HTML that allows you to assign a certain name to an element. They can be styled using CSS. If you don’t know how to use those features, this article will help you.

Create the basic HTML skeleton. As a reminder, it’s an opening HTML tag, an opening head tag, a closing head tag, an opening body tag, a closing body tag, and a closing html tag.

Give the HTML element a class. Do this by inserting «class=»classname» inside the opening tag for your element.

Expert Q&A

You can do the exact same thing with ID styles. To call an ID style in CSS, put «#idname < >» in your CSS document.

You Might Also Like

How to Insert a Hyperlink Using Rich Text or HTML: 3 Methods

Источник

CSS урок 2. Использование классов

Чтобы добавить класс, необходимо:

Для элементов (тегов) к которым будут применены свойства класса, нужно прописать атрибут class с придуманным названием класса в качестве значения атрибута:

h1 class="my_class">В моей душе/h1>

В отельном стилевом файле (style.css) или в области head текущего документа прописать свойства созданного класса

h1.my_class { color: RGB(215,40,40); text-align: center }

В данном примере класс my_class будет «привязан» именно к тегу h1 , т.е. для других тегов с аналогичным классом свойства работать не будут.

Можно написать без привязки к конкретному тегу:

.my_class { color: RGB(215,40,40); text-align: center }

В данном случае класс будет применен к любым тегом данного класса

Пример: Создать два класса с названиями red1 и class1 . Один класс применить для заголовков h1 , другой класс применить для тегов p

html> head> style type="text/css">

h1.red1 { color: RGB(215,40,40); text-align: center } p.class1{color:#3366FF; font-family:Arial}

/style> /head> body> h1 class="red1">В моей душе/h1> p class="class1"> Я хочу быть ребенком: наивным и смелым,br> Ничего не бояться и верить в добро.br> Я бы снова писала по черному белым:br> Два плюс два - ну, четыре, конечно равно! /p> p> Конец /p>

Ничего не бояться и верить в добро.
Я бы снова писала по черному белым:
Два плюс два — ну, четыре, конечно равно!

Конец

Я хочу быть ребенком: наивным и смелым,
Ничего не бояться и верить в добро.
Я бы снова писала по черному белым:
Два плюс два — ну, четыре, конечно равно!

Задание: скопируйте код страницы. Измените страницу меню сайта так, чтобы одни пункты меню были темного цвета (класс .dark ), а другие – светлого ( класс .light ).
Для гиперссылки добавить свойство: text-decoration:none;

html> head> title> Классы /title> style type="text/css"> . /style> /head> body> center>h3> Главное меню /h3>/center> ul> a href="#" class="dark">li>Введение/li>/a> a href="#" class="dark">li>Глава1/li>/a> a href="#" class="dark">li>Глава2/li>/a> a href="#" class="dark">li>Заключение/li>/a> /ul> center>h3> Дополнительное меню /h3>/center> ul> a href="#" class="light">li>Тест/li>/a> a href="#" class="light">li>Глоссарий/li>/a> a href="#" class="light">li>Литература/li>/a> /ul> /body> /html>

Примеры использования классов с тегами и просто классов:

Универсальные классы или CSS селектор ID

Универсальные классы необходимы для того, чтобы оформить определенным стилем один единственный элемент на странице (на разных страницах сайта).

#имя_класса{ свойство1: значение; свойство2: значение; }

Необходимо задать атрибут id с уникальным значением для того элемента, к которому будет применен универсальный класс:

Значение атрибута id придумывается самостоятельно и должно быть единственным таким значением id на всей веб-странице.

В стилевом файле (style.css) либо в области head текущей веб-страницы задается стиль для селектора id :

="text/css"> #steel { color: RGB(155,180,190); font-weight:bold } >

Пример: для первого заголовка h2 создать универсальный стиль, оформив его каким-либо цветом и увеличив жирность шрифта

html> head> style type="text/css">

#steel { color: RGB(155,180,190); /* изменили цвет в системе RGB */ font-weight:bold /* установили жирный шрифт */ }

/style> /head> body> h2 id="steel">Заголовок со стилем/h2> h2>Заголовок без стиля/h2> /body> /html>

Заголовок без стиля

Стиль универсального селектора также может быть определен для конкретного тега:

h2#steel { color: RGB(155,180,190); /* изменили цвет в системе RGB */ font-weight:bold /* установили жирный шрифт */ }

В таком случае стиль будет влиять только на селекторы h2 , другие теги с атрибутом id=»steel» оформлены стилем не будут.

Задание: Задайте уникальный стиль для главного заголовка сайта. Опишите стиль в отдельном файле style.css и подключите стилевой файл к странице. В качестве свойств созданного стиля желательно использовать следующие:

left

line-through

 text-transform:uppercase

 font-style:normal

Каскадирование css стилей

Каскадирование css стилей означает преемственность применения того или иного стиля в зависимости от используемого метода подключения css. Рассмотрим на примере:

На примере видно, что приоритетным является метод встраивания использования стилей. Следующим по приоритету следует метод вложения и только потом — метод связывания (стиль в отдельном файле)

Важно: В случае, если пользовательская таблица стилей содержит !important , то это правило имеет приоритет над любым правилом, описанным в таблице стилей:

P { font-size: 24pt!important; }

Пример: создать правило для дочернего класса .children , исходя из того, что тег данного класса вложен в родительский тек с классом .parent

Тег с классом .children будет иметь цвет #666 , а тег с классом .parent — #999 . Однако, если мы уберем свойство color: #666 у селектора .parent .children , то цвет дочернего элемента наследуется от родителя и станет равным #999 . В этом заключается особенность наследования.

CSS наследование стилей

Вложенность тегов или их иерархия распространяется и на наследование стилей. Рассмотрим на примере:

Источник