CSS селекторы, свойства, значения
Каскадная таблица стилей состоит из CSS правил. Каждое CSS правило состоит из селектора и блока декларации.
CSS селекторы очень похожи на HTML теги. Селектор указывает на HTML элемент, для которого вы определяете визуальный стиль.
Блок декларации содержит одну или несколько деклараций свойств, разделенных точкой с запятой. Блок деклараций заключают в фигурные скобки.
Каждая декларация состоит из имени свойства и его значения, разделенных двоеточием.
Свойства – это ключевые слова, такие как color , font-weight или background-color , которым присвоены определенные значения:
body
В данном примере создается CSS селектор body , который соотносится с HTML тегом . В этом селекторе определяется два свойства – font-size и color , которым присваиваются соответствующие значения. Таким образом, если этот стиль подключить к HTML документу, то текст внутри элемента (что на самом деле весь контент в основном окне браузера) будет отображаться шрифтом размером 0.8em и темно-синим цветом.
Категории CSS селекторов
CSS селекторы можно разделить на пять категорий:
- Простые селекторы (элементы отбираются по имени, идентификатору или классу)
- Комбинированные селекторы (элементы отбираются по специфическим отношениям между ними)
- Селекторы псевдоклассов (элементы отбираются по определенному состоянию)
- Селекторы псевдоэлементов (отбирается и стилизуется часть элемента)
- Селекторы атрибутов (элементы отбираются по атрибутам или значениям атрибутов)
CSS селектор элемента
Селектор элемента или HTML селектор — это простой селектор, который отбирает HTML элементы по их имени.
В следующем примере отбираются все существующие на странице элементы
. Их текст будет красного цвета и выровнен по центру:
В данном учебнике основное внимание будет уделяться так называемым HTML селекторам, т.е. обычным именам тегов, которые используются в качестве селекторов стилей для изменения внешнего представления соответствующих HTML элементов.
CSS селектор идентификатора
Селектор идентификатора для отбора заданного элемента использует атрибут id HTML элемента.
Идентификатор элемента уникален в пределах веб-страницы, таким образом селектор идентификатора используется для выбора одного уникального элемента!
Чтобы определить селектор идентификатора, нужно написать символ решетки (#) и имя идентификатора элемента.
В следующем примере определяются стили для HTML элемента с идентификатором :
#para1
Внимание! Имя идентификатора не может начинаться с цифры!
CSS селектор класса
Селектор класса для отбора заданного элемента использует атрибут class HTML элемента.
Чтобы определить селектор класса, нужно написать символ точки (.) и имя класса элемента.
В следующем примере все HTML элементы с классом будут отображать текст красного цвета, который выровнен по центру:
.center
Так как один и тот же класс может присваиваться нескольким элементам, вы можете указать на какой именно HTML элемент должен влиять селектор класса.
В следующем примере только элементы
с классом будут отображать текст красного цвета, который выровнен по центру:
p.center
Также, HTML элементы могут иметь больше одного класса.
В следующем примере элемент
будет принимать стили, соответствующие селекторам класса и :
p.center < text-align: center; color: red; >p.large Этот параграф определен по двум классам.
Внимание! Имя класса не может начинаться с цифры!
Универсальный селектор
Универсальный селектор (*) отбирает абсолютно все HTML элементы на странице.
Следующее CSS правило окажет воздействие на каждый HTML элемент на странице:
Группирование селекторов
Группирование селекторов позволяет объединить одно и то же определение стиля для нескольких HTML элементов в одну декларацию.
Посмотрите на следующий код CSS (для элементов h1, h2 и p заданы одинаковые стили):
h1 < text-align: center; color: red; >h2 < text-align: center; color: red; >p
Чтобы уменьшить количество кода, мы можем сгруппировать эти селекторы в одну декларацию.
Чтобы сгруппировать селекторы, нужно в головной части перечислить их через запятую.
В следующем примере мы группируем селекторы из предыдущего примера:
Создание стилей CSS
Обычный формат определения стиля CSS иллюстрирует листинг 7.1.
Листинг 7.1
Вот основные правила создания стиля.
— Определение стиля включает селектор и список атрибутов стиля с их значениями.
— Селектор используется для привязки стиля к элементу Web-страницы, на который он должен распространять свое действие. Фактически селектор однозначно идентифицирует данный стиль.
— За селектором, через пробел, указывают список атрибутов стиля и их значений, заключенный в фигурные скобки.
— Атрибут стиля (не путать с атрибутом тега!) представляет один из параметров элемента Web-страницы: цвет шрифта, выравнивание текста, величину отступа, толщину рамки и др. Значение атрибута стиля указывают после него через символ: (двоеточие). В некоторых случаях значение атрибута стиля заключают в кавычки.
— Пары : отделяют друг от друга символом; (точка с запятой).
— Между последней парой : и закрывающей фигурной скобкой символ; не ставят, иначе некоторые Web-обозреватели могут неправильно обработать определение стиля.
— Определения различных стилей разделяют пробелами или переводами строк.
— Внутри селекторов и имен стилей не должны присутствовать пробелы и переводы строки. Что касается пробелов и переводов строк, поставленных в других местах определения стиля, то Web-обозреватель их игнорирует. Поэтому мы можем форматировать CSS-код для удобства его чтения, как проделывали это с HTML-кодом.
Но правила — правилами, а главное — практика. Давайте рассмотрим пример небольшого стиля:
Разберем его по частям.
— P — это селектор. Он представляет собой имя тега .
— color — это атрибут стиля. Он задает цвет текста.
— #0000FF — это значение атрибута стиля color. Оно представляет код синего цвета, записанный в формате RGB. (Подробнее об RGB-коде и его задании мы поговорим в главе 8.)
Когда Web-обозреватель считает описанный стиль, он автоматически применит его ко всем абзацам Web-страницы (тегам ). Это, кстати, типичный пример неявной привязки стиля.
Стиль, который мы рассмотрели, называется стилем переопределения тега. В качестве селектора здесь указано имя переопределяемого этим стилем HTML-тега без символов < и >. Селектор можно набирать как прописными, так и строчными буквами; автор предпочитает прописные.
Рассмотрим еще пару таких стилей. Вот стиль переопределения тега : EM
Любой текст, помещенный в тег , Web-обозреватель выведет зеленым полужирным шрифтом. Атрибут стиля font-weight задает степень «жирности» шрифта, а его значение bold — полужирный шрифт.
А это стиль переопределения тега :
Он задает для всей Web-страницы белый цвет текста (RGB-код #FFFFFF) и черный цвет фона (RGB-код #000000). Атрибут стиля background-color, как мы уже поняли, задает цвет фона.
А теперь рассмотрим совсем другой стиль:
Он задает красный цвет текста (RGB-код #FF0000). Но в качестве селектора используется явно не имя тега — HTML-тега не существует.
Это другая разновидность стиля CSS — стилевой класс. Он может быть привязан к любому тегу. В качестве селектора здесь указывают имя стилевого класса, которое его однозначно идентифицирует. Имя стилевого класса должно состоять из букв латинского алфавита, цифр и дефисов, причем начинаться должно с буквы. В определении стилевого класса его имя обязательно предваряется символом точки — это признак того, что определяется именно стилевой класс.
Стилевой класс требует явной привязки к тегу. Для этого служит атрибут CLASS, поддерживаемый практически всеми тегами. В качестве значения этого атрибута указывают имя нужного стилевого класса без символа точки:
Здесь мы привязали только что созданный стилевой класс redtext к абзацу «Внимание!». В результате этот абзац будет набран красным шрифтом.
Листинг 7.2
Стилевой класс требует явной привязки атрибутом тега CLASS!
В листинге 7.2 мы создали стилевой класс attention, который задает красный цвет и курсивное начертание шрифта. (Атрибут стиля font-style задает начертание шрифта, а его значение italic как раз делает шрифт курсивным.) Затем мы привязали его к тегу . В результате содержимое этого тега будет набрано полужирным курсивным шрифтом красного цвета; особую важность и связанную с ним «полужирность» текста задает тег , а курсивное начертание и красный цвет — стилевой класс attention.
В качестве значения атрибута CLASS можно указать сразу несколько имен стилевых классов, разделив их пробелами. В таком случае действие стилевых классов как бы складывается. (Подробнее о действии на элемент Web-страницы нескольких разных стилей мы поговорим потом.)
Листинг 7.3
Стилевой класс требует явной привязки атрибутом тега CLASS!
В примере из листинга 7.3 мы привязали к тегу сразу два стилевых класса:
attention и bigtext. В результате содержимое этого тега будет выведено полужирным курсивным шрифтом красного цвета и большого размера. (Атрибут стиля font-size указывает размер шрифта, а его значение large — большой размер, сравнимый с размером шрифта, которым выводятся заголовки первого уровня.)
Именованный стиль во многом похож на стилевой класс. Селектором этого стиля также является имя, которое его однозначно идентифицирует, и привязывается он к тегу также явно. А дальше начинаются отличия.
— В определении именованного стиля перед его именем ставят символ # («решетка»). Он сообщает Web-обозревателю, что перед ним именованный стиль.
— Привязку именованного стиля к тегу реализуют через атрибут ID, также поддерживаемый практически всеми тегами. В качестве значения этого атрибута указывают имя нужного именованного стиля, уже без символа #.
— Значение атрибута тега ID должно быть уникальным в пределах Web-страницы.
Говоря другими словами, в HTML-коде Web-страницы может присутствовать только один тег с заданным значением атрибута ID. Поэтому именованные стили используют, если какой-либо стиль следует привязать к одному-единственному элементу Web-страницы.
Это большой текст.
абзац «Это большой текст» будет набран крупным шрифтом.
Во всех рассмотренных нами разновидностях стилей был один селектор, с помощью которого и выполнялась привязка. Однако CSS позволяет создавать стили с несколькими селекторами — так называемые комбинированные стили. Такие стили служат для привязки к тегам, удовлетворяющим сразу нескольким условиям. Так, мы можем указать, что комбинированный стиль должен быть привязан к тегу, вложенному в другой тег, или к тегу, для которого указан определенный стилевой класс.
Правила, которые установлены стандартом CSS при написании селекторов в комбинированном стиле.
— Селекторами могут выступать имена тегов, имена стилевых классов и имена именованных стилей.
— Селекторы перечисляют слева направо и обозначают уровень вложенности соответствующих тегов, который увеличивается при движении слева направо: теги, указанные правее, должны быть вложены в теги, что стоят левее.
— Если имя тега скомбинировано с именем стилевого класса или именованного стиля, значит, для данного тега должно быть указано это имя стилевого класса или именованного стиля.
— Селекторы разделяют пробелами.
— Стиль привязывают к тегу, обозначенному самым правым селектором. Мудреные правила, не так ли. Чтобы их понять, рассмотрим несколько примеров. Начнем с самого простого комбинированного стиля:
— В качестве селекторов использованы имена тегов и .
— Сначала идет тег , за ним — тег . Значит, тег должен быть вложен в тег .
— Стиль будет привязан к тегу .
Этот текст станет синим.
А этот не станет.
Здесь слова «Этот текст» будут набраны синим шрифтом. Вот еще один комбинированный стиль:
Имя тега скомбинировано с именем стилевого класса mini. Значит, данный стиль будет применен к любому тегу , для которого указано имя стилевого класса mini. (Значение smaller атрибута стиля font-size задает уменьшенный размер шрифта.)
Маленький красный текстик.
И последний пример комбинированного стиля: P.selЭтот стиль будет применен к тегу , находящемуся внутри тега , к которому привязан стилевой класс sel.
В данном примере слово «Этот» будет выделено красным цветом.
Стандарт CSS позволяет определить сразу несколько одинаковых стилей, перечислив их селекторы через запятую:
H1, redtext, P EM
Здесь мы создали сразу три одинаковых стиля: стиль переопределения тега , стилевой класс redtext и комбинированный стиль P EM. Все они задают красный цвет шрифта.
Все четыре рассмотренные нами разновидности стилей CSS могут присутствовать только в таблицах стилей. Если указать их в HTML-коде Web-страницы, они, скорее всего, будут проигнорированы.
Стили последней — пятой — разновидности указывают прямо в HTML-коде Web-страницы, в соответствующем теге. Это встроенные стили. В сплоченном семействе стилей они стоят особняком.
— Они не имеют селектора, т. к. ставятся прямо в нужный тег. Селектор в данном случае просто не нужен.
— В них отсутствуют фигурные скобки, поскольку нет нужды отделять список атрибутов стиля от селектора, которого нет.
— Встроенный стиль может быть привязан только к одному тегу — тому, в котором он находится.
Определение встроенного стиля указывают в качестве значения атрибута STYLE нужного тега, который поддерживается практически всеми тегами:
Ранее мы упомянули, что в некоторых случаях значение атрибута стиля нужно заключать в кавычки. Но в определении встроенного стиля вместо кавычек используются апострофы.
Встроенные стили применяются сейчас довольно редко, т. к. нарушают требование концепции Web 2.0 разделять содержимое и представление Web-страниц. В основном их применяют для привязки стилей к одному-единственному элементу Web- страницы (очень редко) и во время экспериментов со стилями.
В главе 14 мы рассмотрим еще одну разновидность стилей CSS. А пока что закончим с ними и приступим к рассмотрению таблиц стилей.
Данный текст является ознакомительным фрагментом.
Продолжение на ЛитРес
Читайте также
Глава 2 Создание и применение таблиц стилей
Глава 2 Создание и применение таблиц стилей В предыдущей главе был представлен обзор XSLT. В этой главе мы начинаем детальную работу с ним. Мы собираемся научиться рассматривать документы в терминах XSLT, структурировать таблицу стилей XSLT и встраивать в документы таблицы
Создание стилей CSS
Таблицы стилей
Таблицы стилей Мы рассмотрели пять разновидностей стилей CSS. Четыре из них — стилевые классы, стили переопределения тега, именованные и комбинированные стили — могут присутствовать только в таблицах стилей. Это мы уже знаем.Таблицы стилей, в зависимости от места их
Таблицы стилей
Таблицы стилей Мы рассмотрели пять разновидностей стилей CSS. Четыре из них — стилевые классы, стили переопределения тега, именованные и комбинированные стили — могут присутствовать только в таблицах стилей. Это мы уже знаем.Таблицы стилей, в зависимости от места их
Панель стилей
Панель стилей Панель стилей Styles, показанная на рис. 2.7, предназначена для создания новых текстовых, размерных и табличных стилей. Рис. 2.7. Панель стилейПанель содержит следующие инструменты: Text Style… – создание новых и редактирование имеющихся текстовых стилей; Dimension Style…
Создание и применение стилей оформления
Создание и применение стилей оформления Для начала работы по оформлению потребуется всего два абзацных стиля: для заголовка и для остального текста (рис. 21.4). Рис. 21.4. Абзацные стили для верстки телепрограммыДля обоих стилей мы выберем гарнитуру Pragmatica. Почти всегда
Создание стилей оформления
Создание стилей оформления Для верстки текста нам нужны несколько разных стилей оформления. Прежде всего, потребуется создать абзацные стили для оформления заголовков разделов (два уровня) и обычного текста. Кроме того, в тексте произведения встречаются врезки с
Использование стандартных стилей
Использование стандартных стилей Стили представляют собой набор атрибутов форматирования, то есть могут включать гарнитуру, начертание и размер шрифта, выравнивание и др. К выделенному фрагменту текста все атрибуты форматирования стиля применяются одновременно. В
Создание пользовательских стилей
Создание пользовательских стилей Несмотря на то что в каждой версии Word количество заготовленных стилей увеличивается, весьма вероятно, что вы не найдете среди них именно то, что нужно вам в данный момент. По этой причине в Microsoft Word предусмотрена также возможность
Использование стилей
Использование стилей Вы можете быстро применить стиль оформления к выделенному диапазону ячеек. Стиль включает в себя цвет заливки, а также цвет и атрибуты шрифта.Чтобы применить к ячейке или диапазону готовый стиль, нужно предварительно выделить эту ячейку или
Панель стилей
Панель стилей Панель стилей Styles, показанная на рис. 2.6, предназначена для создания новых текстовых, размерных и табличных стилей. Рис. 2.6. Панель стилейПанель содержит следующие инструменты: Text Style… – создание новых и редактирование имеющихся текстовых стилей; Dimension
Панель стилей
Панель стилей Панель стилей Styles, показанная на рис. 2.7, предназначена для создания новых текстовых, размерных и табличных стилей. Рис. 2.7. Панель стилейПанель содержит следующие инструменты: Text Style… – создание новых и редактирование имеющихся текстовых стилей; Dimension Style…
Панель стилей
Панель стилей Панель стилей Styles, показанная на рис. 2.3, предназначена для создания новых текстовых, размерных и табличных стилей. Рис. 2.3. Панель стилейПанель содержит следующие инструменты: Text Style… – создание новых и редактирование имеющихся текстовых стилей; Dimension Style…
Создание стилей
Создание стилей Вы установили основные параметры текста для ввода технических требований. Однако прежде чем закрыть данное окно, сохраним эти настройки. Иначе каждый раз перед вводом технических требований на очередном листе вашего проекта придется вводить все
Использование встроенных стилей
Использование встроенных стилей С помощью стилей можно установить сразу несколько параметров форматирования символов и абзацев, что позволяет сэкономить время при форматировании больших документов и обеспечить единообразное оформление различных частей
Создание и редактирование стилей
Создание и редактирование стилей Если форматирование документа с помощью встроенных стилей вас не совсем устраивает, вы можете его усовершенствовать по своему усмотрению, изменив существующие стили и добавив новые. Например, вам нужно увеличить шрифт для заголовков
Селекторы в CSS: что это такое, как они работают и какие бывают
Большой гайд для тех, кто хочет правильно находить и выбирать элементы при вёрстке.
Иллюстрация: Оля Ежак для Skillbox Media
Антон Сёмин
Пишет об истории IT, разработке и советской кибернетике. Знает Python, JavaScript и немного C++, но предпочитает писать на русском.
Удачный выбор селектора не только позволяет избежать ошибок в коде, но и упрощает вёрстку, поэтому желательно знать разновидности селекторов и хорошо в них ориентироваться. Эта статья будет полезна как новичкам, так и опытным фронтенд-разработчикам и верстальщикам, которые хотят освежить знания.
Содержание
- Что такое CSS-селекторы
- Основные виды селекторов
- Селекторы отношений
- Селекторы по атрибуту
- Немного о псевдоклассах
- Как определить приоритет селектора
Что такое селекторы в CSS
Селектор (от англ. select — выбирать) — это шаблон, который позволяет обратиться к элементу или группе элементов веб-страницы, чтобы применить к ним стили CSS. Его указывают перед блоком со свойствами:
Есть ненумерованный список со ссылками, которые браузер по умолчанию выделяет синим цветом и подчёркивает. Если подключить стили, которые мы написали выше, то подчёркивание исчезнет:
CSS-селектор работает! Но это, конечно, далеко не единственный способ обращения к элементам.
О том, как подключить CSS к HTML, читайте в другой нашей статье.
Виды селекторов
Структура реальных проектов гораздо сложнее. Веб-страницы интернет-магазинов, корпоративных сайтов и блогов наполнены множеством вложенных и однотипных элементов — всем нужно задать уникальный дизайн. Если бы мы могли обращаться к ним только по названию, то даже с CSS веб оставался бы хранилищем скучного гипертекста.
К счастью, есть около 20 способов выбрать нужный элемент. Рассмотрим основные.
Универсальный селектор
Он применяет стили ко всем элементам страницы и обозначается символом * (звёздочка). С его помощью удобно сбрасывать отступы и задавать значение box‑sizing для всех блочных элементов:
Селектор по классу (class)
CSS-селектор по классу выбирает элементы, для которых назначен атрибут class с соответствующим значением. При этом один элемент может принадлежать нескольким классам — в таком случае их перечисляют через пробел:
А в следующем примере мы добавляем нижний отступ последнему параграфу-потомку контейнера («Параграф 3»).
Вот список основных псевдоклассов:
Название | Состояние элемента |
---|---|
:hover | Наведён курсор |
:focus | Элемент находится в фокусе (например, по нему кликнули мышью или его выбрали клавишей Tab) |
:visited | Ссылка, которая была посещена |
:active | Активный элемент (в промежутке времени между нажатием и отпусканием кнопки мыши) |
:checked | Элементы radio, checkbox или option, которые были выбраны |
:first-child | Первый потомок элемента |
:last-child | Последний потомок элемента |
:nth-child() | Каждый n-й потомок — число n передаётся в качестве аргумента |
:last-nth-child() | Последние n потомков — число n передаётся в качестве аргумента |
:read-write | Элементы, доступные для редактирования |
Посмотреть другие псевдоклассы можно на сайте Mozilla.
Вес CSS-селектора, или специфичность
Для одного и того же элемента веб-страницы можно прописать сколько угодно стилей. Если в разных местах CSS-файла какому-то его свойству заданы разные значения, то браузер должен выбрать одно из них.
Обычно подключается правило, которое определено последним, но так происходит не всегда. Дело в том, что одни селекторы обладают более высокой специфичностью, чем другие.
Специфичность — это показатель, по которому браузер определяет, какие стили применить к элементу. Её можно представить в виде четырёх чисел 0.0.0.0, где каждый разряд — это вес, определяемый специальными правилами.
Вот эти правила:
- Наивысший приоритет — у стилей, прописанных в атрибуте style (1.0.0.0).
- На втором месте — селекторы по идентификатору (0.1.0.0).
- Затем идут три равноправные группы: селекторы по классу, атрибуту и псевдоклассы (0.0.1.0).
- На четвёртом месте — селекторы по тегу и псевдоэлементы (0.0.0.1).
- Комбинаторы ~, >, + и универсальный селектор * веса не добавляют.
- Вес псевдоклассов :is(), :has() и :not() равен весу самого специфичного селектора внутри скобок.
Чтобы определить самый «тяжёлый» селектор, браузер сначала взвешивает каждый, а затем сравнивает их поразрядно.
Попробуем порассуждать как браузер. Допустим, на странице есть элемент, на который указывают два CSS-селектора:
.container div ul /**/> #our_team div.developers /**/>
Рассчитаем их вес:
- Класс .container добавляет 1 в третий разряд, а div и ul — по единице в четвёртый. Результат: 0.0.1.2.
- Идентификатор our_team добавляет 1 во второй разряд, тег div — 1 в четвёртый разряд, а класс .developers — 1 в третий. Получаем 0.1.1.1.
Браузер применит стили селектора #our_team div.developers, потому что он указывает на идентификатор (см. правило №2 в списке).
А если бы исследуемый элемент обладал атрибутом style, то и считать ничего бы не пришлось. Ведь, как мы уже знаем, style обладает наивысшим приоритетом:
"color: red;" class="article media code" style="color: rgb(168, 255, 96);">"definition">Программист — это.
А теперь секретный приём. Вы можете перебить любое правило, если добавите к нему ключевое слово !important. В таком случае стили намертво приклеятся к элементу:
a < font-weight: bold !important; >
После этого изменить начертание текста в ссылках можно будет, только если использовать !important в более специфическом селекторе. Например, таком:
#stronger a < font-weight: normal !important; >
Опытные разработчики не рекомендуют использовать !important, потому что это усложняет поддержку кода и ломает каскад. Поэтому просто помните о его существовании во время дебаггинга: возможно, это словечко спряталось где-то в документе styles.css.
Итог
CSS предоставляет большое количество селекторов для удобной стилизации веб-страниц. Запомните их и используйте всё разнообразие, чтобы писать понятный и легко поддерживаемый код. А закрепить знания можно в замечательной браузерной игре CSS Dinner.
Читайте также:
- Быстрый способ подключить CSS к HTML
- Тест: на какого айтишника из фильмов вы похожи?
- Что такое CSS — и как на этом верстать
Селектор класса (class)
При Web-разработке часто возникает необходимость в задании различных стилей для одного и того же типа элемента HTML. Для решения этой задачи используют селектор класса. Предположим, что в документе требуется два типа заголовков: более крупный заголовок должен иметь внешний отступ 10 пунктов, а второй — 20 пунктов. Вот как это можно сделать с помощью стилей: h1.stepleft < margin-left: 10pt>h2.stepright < margin-left: 20pt>Для применения этих стилей в документе HTML необходимо будет использовать атрибут класс: < h1 >Заголовок с внешним отступом 10 пунктов. < /h1> < h2 >Заголовок с внешним отступом 20 пунктов. < /h2>В тоже время не допускается следующее определение атрибута class: < h1 h2 >, т.е. можно определить только один атрибут class Можно также опустить имя тега в селекторе, чтобы определить стиль, который будет использоваться всеми элементами HTML, имеющими определенный class. .left < margin-left: 40pt>В следующем примере все элементы HTML, имеющие , будут иметь внешний отступ, равный 40 пунктам. В следующем коде элементы table и p имеют . Это означает, что оба элемента будут следовать правилам в селекторе «.left»: < table >Эта таблица будет иметь внешний отступ, равный 40 пунктам. < /table> < p >Этот параграф будет иметь внешний отступ, равный 40 пунктам. < /p>Для корректности обработки кода браузерами не рекомендуется начинать имя класса с числа, т.к. это не будет работать в Mozilla/Firefox.
Селектор идентификатора (id)
Стили элементов HTML можно определить также с помощью селектора идентификатора, который определяется символом #. Следующее правило стиля будет применимо к элементу, который имеет атрибут id со значением «fontsz»: #fontsz < font-size: 50%>Следующее правило стиля будет применимо к элементу ul, который имеет атрибут id со значением «first»: ul#first < list-style: disc; color: #ffffff >Для корректности обработки кода браузерами не рекомендуется начинать имя ID с числа, т.к. это не будет работать в Mozilla/Firefox.
Комментарии css Подключение таблицы стилей
- Подключение внешней таблицы стилей
- внешнюю таблицу стилей можно создать в любом текстовом редакторе;
- файл с внешней таблицей стилей не должен содержать никаких тегов html;
- файл с внешней таблицей стилей необходимо сохранить с расширением .css.
- Подключение внутренней таблицы стилей
- Встроенные стили
- Атрибут type=»» со значениями: button, checkbox, color, date, datetime, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week – указывает тип тега (text – по умолчанию).
- Атрибут src=»» – указывает url изображения-кнопки, применяется совместно с type=»image».
- Флажок checked=»checked» – устанавливает для примера одно из предложенных значений, применяется совместно с type=»checkbox» или type=»radio».
- Атрибут name=»» – присваивает имя элементу. Используется для идентификации полученной информации при обработке данных.
- Атрибут value=»» используется в различных целях: надписует кнопки (если применяется совместно с type=»submit» или с type=»reset»), хранит некоторые значения, которые отправляются на обработку (если применяется совместно с type=»checkbox» или с type=»radio»), устанавливает значения по умолчанию для текстовых полей ввода данных (если применяется совместно с type=»text» или с type=»password»).
- Атрибут size=»20″ – устанавливает длину текстового поля в символах.
- Флажок required=»required» – определяет обязательное для заполнение поле.
- Атрибут autocomplete=»» со значениями on, off – говорит браузеру сохранять или не сохранять введенные пользователем данные в поля формы. Другими словами, данные автоматически отобразятся в текстовом поле формы, при повторной попытке ввода, если установлено значение on.
- Флажок multiple=»multiple» – разрешает выбирать более одного значения из списка.
- Атрибут min=»6″ – устанавливает минимально допустимое количество вводимых символов.
- Атрибут max=»20″ – устанавливает максимально допустимое количество вводимых символов.
- Атрибут maxlength=»30″ – устанавливает максимально допустимое количество вводимых в текстовое поле символов.
- Атрибут height=»» – определяет высоту поля в пикселях или в процентах.
- Атрибут width=»» – определяет ширину поля в пикселях или в процентах.
- Атрибут form=»имя формы» – указывает имя формы, которой принадлежит элемент .
- Атрибут formmethod=»» со значениями get, post, put, delete – определяет метод отправки данных на обработку по обозначенному url. Имеет преимущество перед атрибутом method=»» тега .
- Атрибут formaction=»url» – определяет url, по которому будут отправлены данные. Имеет преимущество перед атрибутом action=»» тега .
- Атрибут list=»» – смотрите теги .
- integer
- string
- boolean
- double
- array
- object