Как сделать класс в html
Работа с классами в HTML и CSS. Урок 7.
Как вы наверное уже догадались, классы используются в том случае, когда нам нужно дать определённому абзацу свойства, которые присущи только одному ему. В html коде, чтобы какому-то тэгу назначить класс, нужно в атрибуте class прописать само название класса. К примеру class=’green’. По факту это будет выглядеть примерно вот так:
Но от того, что мы прописали элементу такой атрибут, сам текст зелёным от этого не стал. Потому что нужно задать ему CSS правило. А сделать это можно так:
Данное правило можно прочитать так: задай элементу p с классом green зелёный цвет. Теперь, если мы хотим добиться того, чтобы все абзацы, находящиеся у нас на странице были зелёного цвета, мы просто прописываем им соответствующий класс. И видим что те параграфы, которым мы дали данный атрибут, окрасились в зелёный цвет.
Для закрепления материала, можете другим абзацам назначить свои классы и прописать им собственные CSS правила.
С другими элементами абсолютно та же история. Вы можете точно так же, задать классы заголовку h1 или h2 и раскрасить их в иные цвета. Ну а вообще, сама суть не в самих цветах, а в том чтобы выделить те или иные элементы на странице с помощью классов. А правила вы им будете вольны задавать такие, какие вздумается.
Так же вы можете столкнуться с такой ситуацией, что вам понадобится сделать зелёным не только абзац, но и заголовок тоже. И тут у вас будет три варианта. Сделать так:
Прописать отдельно правила для заголовка и абзаца:
Использовать группировку селекторов:
Но можно сделать короче, указав так:
Здесь мы не указываем никаких селекторов, а даём понять, что работаем со всеми элементами, которые имеют указанный класс.
Кроме того, у нас так же есть возможность задать принадлежность элемента сразу к нескольким классам. Для этого достаточно указать у элемента второй класс через пробел. Например, вот так:
А уже в CSS для селектора big задать необходимые ему правила.
Где это может использоваться?
Ну к примеру, если вы хотите не только указать цвет вашему элементу, но так же ещё и установить размер шрифта. Но вы не хотите делать это для всех элементов с классом green, а хотите использовать данное правило только для определённого абзаца. Например, так:
На скриншоте видно, что определённому абзацу, среди остальных окрашенных зелёным цветом, я решил задать ещё больший размер шрифта. Но я не мог прописать правило font-size для селектора с классом green. Потому что в этом случае, у меня бы у всех абзацев, имеющих класс green, увеличился размер шрифта.
На сегодня пожалуй всё, потому что всё, что я хотел вам рассказать о классах, уже рассказал. До встречи в следующих уроках!
Классы в CSS– удобный путеводитель
В сегодняшней статье мы рассмотрим классы в CSS и их взаимосвязь с языком гипертекста. HTML — теги и CSS связаны напрямую. Эта взаимосвязь позволяет определить, как выглядит тег или как он ведет себя при использовании его имени в таблице стилей:
Но зачастую требуется больше контроля, чем просто делать каждый экземпляр тега одинаковым. Если бы все ячейки HTML-таблицы были выполнены в одном стиле, это выглядело бы непрактично. К примеру, если вам нужно выделить определенные данные.
Поэтому CSS предоставляет нам два разных определения, которые мы можем использовать — CSS классы и идентификаторы.
CSS классы — когда их использовать
Шаг 1 — добавить класс в HTML
В данном примере я хочу создать три контейнера одинакового размера. Возможно, я захочу запустить галерею изображений, или поместить в них изображения в качестве HTML — ссылки для перехода на другие страницы. При этом все контейнеры должны быть одинаковыми.
Давайте посмотрим, что нужно сделать в нашем CSS :
Чтобы задать правило для определенного тега с CSS классом, а не просто определить tagname < >, мы используем tagname.classname < >. Точка между tagname и classname является тем, что определяет правило как CSS класс. Также обратите внимание, что там нет пробелов. Если поставить пробел в правиле, то оно не будет работать так, как вы планировали.
Такое сочетание должно дать вам что-то вроде этого:
Если вы не укажете класс
Чтобы показать вам, что ваш CSS класс изображения box применяется только там, где вы хотите, поместите дополнительный элемент
Обновите страницу. Вы увидите, что ни одно из правил, установленных в div.box <> не применяется. Потому что вы не указали значение класса.
Вот почему этот вариант использования классов CSS более гибкий, чем простое tagname < >. На странице может быть много элементов
Использование более чем одного класса
В современном веб-дизайне для элемента иметь только один класс CSS — редкость. Давайте возьмем наши три квадрата и посмотрим, что произойдет, если вы захотите перекрасить каждый из них.
Чтобы указать, что вы хотите использовать в CSS несколько классов, нужно добавить следующий класс через пробел. Как здесь:
Расположение каскадом
Изменим наш код CSS :
CSS классы при создании макета сайта
Подумайте, для каких элементов нужно использовать CSS классы при верстке макета страницы. Вот некоторые мысли для подсказки:
Классы DR CSS; TL
Если у вас есть какие-либо вопросы, не стесняйтесь задать их в комментариях!
Классы
Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. При использовании совместно с тегами синтаксис для классов будет следующий.
Внутри стиля вначале пишется желаемый тег, а затем, через точку пользовательское имя класса. Имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах классов недопустимо. Чтобы указать в коде HTML, что тег используется с определённым классом, к тегу добавляется атрибут class=»Имя класса» (пример 8.1).
Пример 8.1. Использование классов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 8.1.
Рис. 8.1. Вид текста, оформленного с помощью стилевых классов
Первый абзац выровнен по ширине с текстом чёрного цвета (этот цвет задаётся браузером по умолчанию), а следующий, к которому применен класс с именем cite — отображается синим цветом и с линией слева.
Можно, также, использовать классы и без указания тега. Синтаксис в этом случае будет следующий.
При такой записи класс можно применять к любому тегу (пример 8.2).
Пример 8.2. Использование классов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат применения классов к тегам и показан на рис. 8.2.
Рис. 8.2. Вид тегов, оформленных с помощью классов
Классы удобно использовать, когда нужно применить стиль к разным элементам веб-страницы: ячейкам таблицы, ссылкам, абзацам и др. В примере 8.3 показано изменение цвета фона строк таблицы для создания «зебры».
Пример 8.3. Использование классов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 8.3. В примере класс с именем odd используется для изменения цвета фона строки таблицы. За счёт того, что этот класс добавляется не ко всем тегам
Рис. 8.3. Результат применения классов
Одновременное использование разных классов
К любому тегу одновременно можно добавить несколько классов, перечисляя их в атрибуте class через пробел. В этом случае к элементу применяется стиль, описанный в правилах для каждого класса. Поскольку при добавлении нескольких классов они могут содержать одинаковые стилевые свойства, но с разными значениями, то берётся значение у класса, который описан в коде ниже.
В примере 8.4 показано использование разных классов для создания облака тегов.
Пример 8.4. Сочетание разных классов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 8.4.
Рис. 8.4. Облако тегов
Вопросы для проверки
1. Какое имя класса написано правильно?
2. Какой цвет будет у слова «потока» в коде?
При использовании следующего стиля?
3. Как задать стиль у тега
4. Какое имя класса следует добавить к тегу
, чтобы текст был одновременно жирным и красного цвета, если имеется следующий стиль?
Учебник CSS. Бесплатные уроки по CSS. Изучаем каскадные таблицы стилей и пробуем красиво оформлять веб-сайты и страницы.
CSS классы и идентификаторы CSS. CSS селекторы
Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Я продолжаю рубрику Уроки CSS. В этой рубрике я уже писал о том, как создать простое CSS меню для сайта, как сделать горизонтальное и вертикальное CSS меню, о возможностях и функциях CSS, что такое CSS правила, CSS стили, CSS свойства и значения, а так же о том что такое CSS селекторы и какие они бывают. Сегодня я продолжаю тему CSS селекторов и данная публикация будет посвящена селекторам классов CSS и селекторам CSS идентификаторов.
CSS классы и идентификаторы CSS. CSS селекторы.
Стоит сразу сказать, что селекторы классов CSS и идентификаторов CSS можно будет использовать только если внести соответствующие изменения в HTML документа, добавить HTML атрибуты. В этой публикации мы как раз таки и поговорим про HTML атрибуты id и class, которые существенно облегчают оформление HTML страниц и позволяют выбирать и группировать HTML элементы в таблице стилей CSS более точно.
Селекторы классов CSS
В прошлой публикации я уже писал о том, что в каскадных таблицах стилей CSS можно группировать CSS селекторы и CSS объявления. В принципе, CSS классы и CSS идентификаторы предназначены для того, чтобы сгруппировать HTML элементы и разнообразить условия отбора нужных HTML элементов. Группировка, которая демонстрировалась в прошлой публикации, была очень простой и основывалась на выборе нужных элементов при помощи соответствующих селекторов. То есть мы обращались только к каким-то конкретным HTML элементам и задавали для них CSS стили.
Помимо простых CSS селекторов существует два специальных CSS селектора: селекторы классов CSS (class) и селекторы идентификаторов CSS (id). Данные селекторы позволяют задать CSS стили независимо от HTML элементов. Селекторы классов и селекторы идентификаторов можно применять независимо от селекторов элементов, а можно их использовать вместе. CSS селекторы классов, как и CSS селекторы идентификаторов будут работать только в том случае, если задать соответствующие атрибуты для нужных тегов в HTML документе.
Допустим, у нас есть HTML документ, есть текст про кошек и собак. Текст разбит на заголовками
на логические части, и нам нужно, чтобы заголовки, относящиеся к описанию кошек были синего цвета, а заголовки, относящиеся к тексту про собак были серыми. Получается, что мы не сможем разделить заголовки про кошек и собак простыми CSS селекторами, потому что:
Мы не сможем задать два цвета при помощи простых CSS селекторов одному и тому же HTML элементу, следовательно, нужно внести какое-то разнообразие в HTML документ и сделать HTML элементы более уникальными, чтобы разнообразить условия выбора при помощи CSS селекторов. Для этого мы можем использовать HTML атрибут id и HTML атрибут class, а затем использовать уже CSS селекторы классов и CSS селекторы идентификаторов.
CSS классы. CSS селекторы классов
Самой распространенной практикой оформления веб-страниц без использования простых CSS селекторов, является практика использования CSS селекторов класса. Но, чтобы использовать CSS классы требуется внести изменения в код HTML документа, добавить HTML атрибут class к требуемым HTML элементам. Например, вернемся к кошкам и собакам и создадим HTML документ:
Как вы можете видеть, у каждого тега
HTML страница без CSS стилей
Довольно скучная и невзрачная страница. Давайте добавим несколько CSS стилей к нашей странице:
HTML страница с добавлением CSS стилей
Мы видим, что стили соответствующих классов применились сразу ко всем элементам на HTML странице. Чтобы продемонстрировать то, как можно комбинировать CSS селекторы элементов с селекторами классов, давайте немного изменим пример:
Теперь у каждого HTML тега в документе используется класс со значением “cat”. Соответственно те CSS стили, которые мы задали ранее, будут работать не так, как нам требуется, вот что мы увидим (со старыми стилями):
В общем, мы увидим, что весь тест принял стиль, который мы создали для HTML заголовка в первом случае, давайте это исправим. Достаточно скомбинировать CSS селекторы:
Теперь мы скомбинировали селекторы CSS элементов и CSS классов и получили то, что нам нужно:
HTML страница с CSS стилями
Таким образом, получилось, что CSS стили, прописанные для селекторов h3.cat будут распространяться только на заголовки третьего уровня, у которых значения атрибута class равно “cat”, соответственно стили, которые написаны для селектора p.cat будут действовать только на все HTML элементы
Множественные классы CSS
Вы уже видели, что значение атрибута class может состоять из одного слова, но в HTML значение атрибута class может состоять из двух слов и более слов, в этом случае слова разделяются пробелами. Вернемся к собакам, например, мы описываем, какую-нибудь пароду собак, например немецкую овчарку и нам необходимо выделить это слово и как собака и как немецкая овчарка. Для этого мы можем использовать множественный класс, HTML атрибут class будет выглядеть следующим образом:
Порядок слов в данном случае не будет иметь никакого значения, можно было бы написать «shepherd dog». Создадим пример, в котором будут использованы три CSS класса, один из них будет множественным классом:
Теперь мы можем задать три различных стиля отображения для множественного CSS селектора и для двух селекторов классов dog и shepherd. Синтаксис для множественных CSS селекторов очень прост:
Обратите внимание: Internet Explorer до 7 версии не всегда правильно обрабатывает множественные селекторы CSS классов. В IE6 можно выбирать одно из нескольких слов, которые входят в состав множественного селектора. Если вы напишите два или более слов в CSS селекторе, то браузер IE6 выполнит выборку по последнему слову, то есть отберет все элементы, в значение атрибута class есть последнее слово.
Селекторы CSS идентификаторов
Еще одним селектором, который позволяет сделать HTML элементы более уникальными, соответственно, и более точную выборку элементов с веб-страницы, является селектор идентификаторов CSS. Селекторы идентификаторов чем-то похожи на селекторы CSS классов, но у них есть некоторые индивидуальные особенности, которые следует учитывать при использование CSS идентификаторов. Самой важной особенностью идентификаторов CSS является то, что идентификаторы должны быть уникальны, то есть два HTML элемента не могут иметь один и тот же идентификатор. Так же отличается синтаксис селекторов идентификаторов от селекторов классов. Вместе точки следует писать “#”, а затем значение идентификатора. Чтобы задать идентификатор для HTML элемента следует использовать атрибут id, а не атрибут class. Например:
Соответственно CSS правило будет выглядеть следующим образом:
Атрибут id, который присваивает идентификатор можно прописать практически для любого HTML тэга. Название CSS идентификатора может состоять только из символов латинского алфавита, тире, символов подчеркивания, цифр, но цифра не должна быть первой при именовании идентификаторов, регистр букв при именовании идентификаторов не имеет значение в случае HTML, но если мы создаем XHTML или XML документ, то регистр будет учитываться браузером. Аналогичные правила именования действуют и на имена селекторов классов CSS.
Что использовать? CSS идентификаторы или CSS классы
Как вы могли заметить: у селекторов идентификаторов и у селекторов классов CSS есть свои уникальные особенности, но что же лучше использовать? Однозначного ответа на этот вопрос дать невозможно, все зависит от ситуации или привычки разработчика. Из всего выше сказанного нужно было вынести следующее: CSS классы можно задавать любому количеству элементов на HTML странице. В примерах мы использовали один класс “dog” и для тега
, и для тэга
Идентификаторы CSS не могут объединяться, то есть, нет множественных идентификаторов, но есть множественные классы. При оформлении XML документов работа CSS классов не гарантируется, так как для обозначения классов используется точка. В свою очередь символ решетки разрешен к применению в любом языке разметки. То есть использовать CSS идентификаторы мы можем для любых документов, в любых языках разметки. Точнее не так, мы можем использовать символ # в любых языках, в которых существует атрибут, уникальность значения которого требуется в рамках одного документа. Это не обязательно будет атрибут id (в других языках разметки).
Часть 1. Селекторы CSS. Теги, классы, ID, группы
В предыдущей главе мы разбирали синтаксис CSS и упоминали о селекторах, с помощью которых мы указываем, какие элементы веб-страницы желаем изменить внешне. В этой части мы рассмотрим основные селекторы CSS:
1. Селекторы тегов
Если вам необходимо изменить внешний вид содержимого, которое находится в каком-либо теге, используйте CSS селекторы тегов. Допустим, вам нужно изменить шрифт и цвет всех тегов
, которые имеются на веб-странице. Для этого вам понадобится создать стиль, где селектором будет h3 (обратите внимание: в CSS угловые скобки <> тега не записываются, а используется только его имя):
Написав один такой стиль, вы измените шрифт сразу для всех тегов
2. Селекторы классов
Классы CSS – это отличный инструмент, который расширяет возможности создания стилей в разы. Для лучшего понимания мы будем рассматривать всё на примерах.
Итак, чуть выше мы применили стиль для всех тегов
на веб-странице – текст имеет шрифт Geneva и оранжевый цвет. Но что делать, если вам понадобилось изменить цвет одного из тегов
на зеленый? На помощь приходят селекторы классов. Всё что вам необходимо сделать, это создать стиль, где селектор – придуманное вами имя класса. Мы назовем класс greentext и запишем правило:
Но это еще не всё. Теперь, чтобы изменить цвет для одного из тегов
на странице, нужно отредактировать HTML-документ, применив класс greentext к необходимому нам тегу. Записывается это так:
Созданный класс можно применять к любым элементам веб-страницы. Вы можете придавать стиль не только целым заголовкам и абзацам, но и отдельным фрагментам страницы, например, словам (используя рассмотренный нами в первой и второй главе тег и присваивая ему класс).
Запомните несколько правил написания классов:
3. Селекторы ID
Идентификатор определяет уникальное название элемента. Записывается он почти так же, как и класс, только в CSS вместо точки ставится символ решетки # :
В HTML-документе идентификатор присваивается с помощью атрибута id :
Возможно, у вас возник вопрос: в чем разница между идентификатором и классом? Существует несколько отличий:
4. Селекторы групп
Но такой код занимает больше времени и места, чем это необходимо. Ведь всё можно записать намного проще и короче, перечислив имена через запятую и создав таким образом групповой селектор:
Конечно, в перечислении могут участвовать не только селекторы тегов, но и классы, и идентификаторы.
А если по какой-то причине вам необходимо создать стиль абсолютно для всех элементов веб-страницы, можно воспользоваться универсальным селектором CSS, для обозначения которого используется символ звездочки * :
Выводы
В этой части главы вы познакомились с четырьмя основными типами CSS селекторов. Они просты в использовании, и вам будет очень легко запомнить их. Подытожим пройденный материал:
Для изменения стиля содержимого тегов используйте селекторы тегов.
Если вам нужен более гибкий инструмент, который позволит создать стиль для одного конкретного элемента либо определенной группы элементов, используйте классы CSS.
Если есть необходимость создать стиль с высоким приоритетом для уникального элемента веб-страницы, а также обращаться к нему через скрипты, используйте селекторы ID.
Чтобы применить одинаковый стиль сразу к нескольким элементам веб-страницы, используйте групповой селектор. Если нужно стилизовать абсолютно все элементы страницы, можно задействовать универсальный селектор.
Вторая часть третьей главы посвящена псевдоклассам и псевдоэлементам CSS, а также селекторам потомков.