На прочтение этой статьи у вас уйдёт три минуты, и эти три минуты будут самыми информативными. Вебмастер, не владеющий навыками CSS, поймёт и осознает, как действует этот язык программирования и сможет самостоятельно, не прибегая к дополнительным плагинам.
CSS – это язык программирования, который используется во многих веб-приложениях, в том числе и в WordPress. CSS определяет внешний вид, дизайн. Файл со всеми стилями CSS хранится в шаблоне WordPress. Не зависимо от того, какой шаблон установлен, он будет называться style.css. Именно в нём можно производить редактирования. Но перед этим следует узнать основы CSS.
Синтаксис – это правила записывания стилей CSS. Синтаксис в CSS – это всё равно, что правила русского языка, если не соблюдать их в речи, то никто вас не поймёт. Если не соблюдать синтаксис CSS, то браузер не поймёт, что и как необходимо отображать, и появятся ошибки.
Синтаксис CSS состоит из трёх частей:
селектор {свойство: значение}
Это основы CSS, которые нужно запомнить. В этом синтаксисе следующие определения:
Как было сказано, основы CSS подразумевают появление селектора в трёх видах:
h1 { font- size: 20 px} – все заголовки с тегом H1 будут иметь размер 20 пискселей.
h1. big { font- size: 30 px }- все заголовки с тегом H1, с классом big будут иметь размер 30 пискселей, и чтобы подключить класс в HTML документе, делается следующая запись:
class=”
big”
>Заголовок с внешним отступом 10 пунктов.
#font{font-size: 10 px} – все элементы, имеющие идентификатор font будут иметь размер шрифта 10 px.
В WordPress могут применить все три вида селектора, Поэтому необходимо запомнить это как основу CSS.
Для удобства в CSS могут использоваться комментарии – записи, которые видны человеку, но игнорируются браузером. Для этого необходимо записать текст комментария, заключив его в символы /* и */.
Например:
/* Задаём размер шрифта */
h1 { font- size: 20 px
Комментарии помогают легче ориентироваться в файле CSS.
Кстати, легче всего ориентироваться будет, когда редактор файла style.css поддерживает синтаксис CSS. Стандартный редактор WordPress здесь не очень подходит, поэтому нужно использовать что-то другое, например, NotePad. Об этом мы писали .
(1 оценок, среднее: 5,00 из 5)
Всем привет!
В этом первом уроке я хотел бы познакомить вас, начинающих веб-мастеров, с основами
CSS
.
Здесь ничего сложного нет, для начала нужно просто понять, что такое CSS и для чего вообще он нужен.
Попробую все объяснить поэтапно и нормальным, доступным языком для начинающих.
○ Что такое
CSS?
CSS
(от англ. C
ascading S
tyle S
heets)
– это каскадные таблицы стилей, позволяющие управлять внешним видом сайта (цвет фона, размер и цвет текста, оформление ссылок, позиция блоков на сайте и др.).
Другими словами можно сказать так, что CSS это инструмент позволяющий сделать полный ремонт в вашем доме (покраска потолков и полов, клейка обоев, перестановка мебели).
Метафору вы поняли.
В общем, если дело касается оформления сайта, то в этом ваш лучший помощник CSS.
○ Чем же хорош
CSS, если оформление веб-документа можно осуществить и с помощью
HTML?
Если оформлять документ только с помощью HTML, то в случае каких-либо изменений, например, замена цвета заголовка в статье, вам придется угробить на это массу времени, так как по отдельности на 1000 страницах веб-документа нужно будет внести исправления.
В CSS же все довольно просто. Достаточно указать в одном css файле цвет к заголовкам, и на всех 1000 страницах веб-документа он изменится автоматически. Да, да, это огромноя экономия времени, и риск на инфаркт уменьшается.
Не буду вас нагружать с первого урока, скажу только, что css файл имеет расширение «*.css
» и зачастую файлу присваивают название «style.css
» (но это не обязательно).
Еще скажу, что файл CSS работает только в паре с HTML. Сам по себе CSS работать не будет. Так что если вы не знаете , рекомендую с ними ознакомиться прежде, чем вы откроете урок №2.
Приветствую, дорогие друзья! В этом уроке вы узнаете что такое CSS , для чего нужен и как его правильно использовать. Это базовый урок из серии "Для самых маленьких", в котором я постараюсь объяснить наиболее понятным языком основы стилизации документов посредством CSS - Каскадных таблиц стилей (C ascading S tyle S heets).
Класснуть
Запинить
Данный урок является логическим продолжением урока "Основы HTML для начинающих ", в котором я подробно объяснял, что такое язык разметки HTML, как он устроен и работает, базовые теги и правила верстки. В данном же уроке мы затронем стилизацию документа, созданного с использованием языка разметки, т.е. придание определенной формы, определенного цвета, последовательности, размеров различных элементов и текста на странице, рассмотрим наиболее эффективные приемы работы с каскадными таблицами стилей. Поняв основы, вы сможете самостоятельно правильно и эффективно стилизовать HTML документы.
Обращаю ваше внимание, что в данном руководстве мы будем рассматривать CSS только в контексте использования с HTML документами в веб-браузере. С помощью CSS можно стилизовать и другие документы, использующие различные языки разметки. Например, стилизовать XML в Android приложениях, SVG или различные Desktop Environment в Unix-подобных операционных системах.
Вообще, CSS довольно элементарный формальный язык, который придумали для описания внешнего вида документов. Это говорит о том, что он довольно прост и состоит из самобытных примитивных конструкций, которые не так сложны для изучения. Самое сложное не синтаксис, не правила написания конструкций, а огромное количество CSS свойств для запоминания, которые выполняют различные задачи. Благо, все правила англоязычные с соответствующей смысловой нагрузкой. Простой перевод на наш язык дает понятие о том, что это правило делает и наоборот - при переводе того, что мы хотим добиться определенным свойством на английский язык, велика вероятность того, что мы получим правильное свойство. Это значительно упрощает запоминание CSS правил на интуитивном уровне. Например, если нужно задать фоновый цвет достаточно сделать перевод на английский, в результате чего получаем background-color (отдельные слова в CSS пишутся через дефис).
CSS довольно просто использовать в HTML документах. Его можно:
Как я уже говорил ранее, CSS имеет довольно простой синтаксис. Давайте разберем его.
Правила объявлений настолько просты, что их можно описать в одном предложении. Сначала пишется селектор , который выбирает конкретный элемент на странице, после фигурных скобок пишутся свойства со значениями после двоеточия, а сами свойства отделяются друг от друга точкой с запятой . Это всё.
Просто, не правда ли?
Самое сложное в CSS объявлении - селектор. Подробнее узнать о том, как формируются и как используются селекторы вы можете в уроке Все CSS селекторы в одном уроке - это очень важная тема, так как здесь раскрывается вся магия выборки элементов на странице, рекомендую посмотреть этот урок в обязательном порядке всем новичкам.
Вкратце CSS селектор - (от слова select - выбирать) - это конструкция, с которой начинается каждый блок объявлений и которая служит для выборки элемента или однотипных элементов на странице для дальнейшей стилизации. Чаще всего в качестве селектора используется определенный класс тега, например:
//HTML:
//CSS: .my-class { background-color: #999; }Здесь селектором выступает класс my-class тега div, который получает необходимое оформление в CSS файле. В данном случае фоновый цвет - серый. Соответственно, если на странице есть несколько тегов (не только div) с классом my-class , все эти элементы получат одинаковое оформление - серый фон цвета #999.
Понять принцип каскадирования несложно. Давайте взглянем на пример:
//HTML
Из примера мы видим, что в CSS написан каскад, в котором класс .parent стоит на первом месте, после него через пробел указан дочерний класс .children , который отвечает уже за стилизацию только дочернего элемента. Дочерний тег обязательно должен быть вложен в тег с классом .parent . Если в HTML документе мы вынесем тег .children из тега div с классом .parent , он потеряет свое оформление, так как каскад уже не будет работать, структура нарушена.
Что мы получим в результате нашего примера. Тег с классом.children получит цвет текста #666, так как имеет более длинный каскад, а.parent покрасится в цвет #999. Родительский класс будет иметь внутренние отступы 10px, в то время, как дочерний этих отступов иметь не будет, так как свойство padding не распространяется на дочерние элементы. Однако если мы уберем color: #666; у селектора .parent .children , то его текст покрасится в цвет родителя color: #999;
Каскадирование и наследование позволяют стилизовать конкретные элементы на странице и определять приоритет применяемых стилей. Давайте рассмотрим иерархию приоритетов.
Далеко-далеко за словесными горами.
Находящийся в теге с классом.my-class получит значение свойства margin: 15px.
Стоит также отметить, что количество классов или идентификаторов, а также наличие дополнительных псевдоклассов и конструкций в селекторе повышают приоритет для стилизации:
My-class.class-2 { margin: 10px; } будет иметь больший приоритет, чем: .my-class { margin: 15px; }
И т.д. по логической цепочке.
И в завершение по приоритетам важно отметить, что стили, идущие в последующих объявлениях ниже по документу также имеют наибольший приоритет. Например:
My-class { margin: 10px; } будет иметь меньший приоритет, чем идущий после него точно такой-же селектор: .my-class { margin: 15px; }
В результате последний селектор в потоке документа получит значение свойства margin: 15px, так как является наиболее приоритетным. Однако если бы селектор первого объявления был длиннее, значния его свойств несомненно бы превалировали.
Что касается наследования, здесь всё просто. Все дочерние элементы наследуют некоторые свойства родителя. Какие именно свойства наследуются предстоит выяснить вам в процессе изучения различных свойств и применении их на практике. Например, цвет текста всегда наследуется потомками, а отступы - нет.
Я думаю нет смысла перечислять все CSS свойства, так как их очень много и практичней обратиться к справочнику всех CSS свойств. Я рекомендую изучить CSS свойства в справочнике на HTMLBook .
Однако рассмотрим 10 самых используемых CSS свойств в верстке. Я взял 10 больших CSS файлов из своих проектов и отсортировал свойства по частоте использования.
CSS Свойство | Частота использования | Описание |
| color | 960 раз | Цвет текста элемента:  |
| background-color | 755 раз | Цвет фона элемента:  |
| font-size | 524 раза | Размер шрифта:  |
| opacity | 435 раз | Уровень прозрачности элемента:  |
| padding | 372 раза | Размер полей внутри элемента:  |
| width | 356 раз | Ширина блочного элемента, не включая размеры границ и полей:  |
| margin | 311 раз | Внешние отступы элемента:  |
| height | 305 раз | Высота блочного элемента, не включая размеры границ и полей:  |
| font-weight | 280 раз | Насыщенность шрифта:  |
| text-align | 245 раз | Горизонтальное выравнивание текста:  |
Медиа-запросы в CSS - это база для создания отзывчивой верстки, позволяющая стилизовать элементы в зависимости от размера экрана или устройства, на котором отображается веб-сайт. Технически Медиа-запрос - это простое логическое выражение, которое может быть или истинным или ложным. Условиями для такого выражения являются либо параметры устройства, на котором отображается веб-страница, либо размер экрана в пикселах.
В данном руководстве мы рассмотрим базовые возможности медиа-запросов, которые необходимы для адаптивной верстки сайтов и практически полезны.
Медиа-запрос пишется в самом файле стилей или в теле документа (тег style) и начинается с объявления правила @media . Структура медиа запроса довольно проста:
Условием может выступать либо устройство - all (все устройства), screen, print, tv и т.д., либо медиа-функции, которые задают параметры устройства или разрешение экрана, на котором отображается документ.
Наиболее часто используемые медиа-функции определяют именно максимальное и минимальное разрешение экрана устройства:
Здесь устройства с максимальным разрешением экрана 480px или минимальным разрешением 320px будут отображать текст тега с классом.my-class серым. Данное условие я привел для примера, практически оно бесполезно. Чаще всего требуется указать либо только максимальное разрешение, либо только минимальное, в пределах которого будет прменяться свойство.
Кроме всего прочего, как мы видим из примера, функции могут содержать условия and (И) , not (НЕ) и only (Для старых браузеров, не поддерживающих медиа-запросы) . Нет логического оператора or (ИЛИ) , его роль выполняет запятая. Медиа-функции, как мы видим заключают в обычные круглые скобки.
Размещение свойств в медиа-запросе не дает никакого приоритета, поэтому логичней размещать медиа-запросы в конце CSS документа, либо загружать тегом link внешний CSS файл с медиа-запросами после загрузки основных стилей сайта для правильного переопределения последних на разных разрешениях или на различных устройствах.
В далеком 2011 году, когда я заканчивал 8 класс, учитель информатики и мой классный руководитель в одном лице, собрала 4-х заядлых геймеров, в числе которых был и Ваш покорный слуга. Собрала она нас для того, чтобы научить созданию сайтов, вот тогда-то я впервые познакомился и с , и с основами CSS, о которых Вы узнаете прямо сейчас.
CSS (Cascading Style Sheets, в переводе “каскадные таблицы стилей”) – язык управления внешним видом HTML-документов (страниц сайтов). То, что Вы видите каждый день в окне браузера создано таблицами каскадных стилей: цвет фона, различных элементов сайта задан специальными свойствами CSS; каким шрифтом написан текст задано специальными свойствами CSS; все, что Вы видите сейчас, читая этот урок, задано свойствами CSS.
Сразу же скажу Вам, что в уроке будут лишь самые базовые стили, для начинающих. Практики сегодня не будет, я хочу разобрать это в отдельном посте.
Таблица стилей CSS состоит из стилевых правил, а правила, в свою очередь, состоят из двух элементов:
В блок объявления входят: свойство и значение свойства, но об этом чуть позже.
Сейчас же подробнее остановимся на селекторах. Существует несколько видов:
На самом деле их гораздо больше, но углубляться мы не будем, так как основу всех других селекторов составляют вышеперечисленные.
Об оформлении правил CSS говорить не буду, все скажет картинка выше.
Все стилевые правила CSS находятся в файле style.css. Поищите его.
В одном CSS-правиле может быть указано несколько свойств и их значений. Перечисляются они через знак “точка с запятой” (;):
Block{width:100px; height:100px; background:#fff}
Для легкости восприятия информации, свойства буду перечислять по их назначению, то есть для фона – отдельно, для текста – отдельно и так далее.
Начнем с фона.
Для управления фоном сайта или отдельного элемента существует несколько свойств
background – основное свойство фона, с помощью которого можно установить до пяти характеристик (значений): цвет, изображение, будет ли прокручиваться фон или нет вместе со скроллом (прокруткой), управление повторением фонового изображения, начальное положение фонового изображения. За все эти характеристики также отвечают отдельные свойства, которые перечислены ниже;
background : url(images/hand.png ) repeat-y #fc0 ; /* Цвет фона, путь к фоновому изображению, повторение фона по вертикали */Первое основное свойство CSS разобрали.
Для управления внешним видом текста, как и фоном, существует несколько свойств.
Одной из основ CSS является управление свойствами текста: выравнивание, цвет, высота строки, расстояние между буквами.
Выравнять по правому или левому краю любой элемент сайта можно с помощью одного стилевого свойства – float . Значения: left (по левому краю), right (по правому краю).
Float: left;
С помощью стилевого свойства “border ” можно задать обрамление, видимые границы. Можно указать несколько значений: толщину границы (px, %), цвет границы (кодовое значение цвета), стиль границы. Значения стилей границы определяют ее внешний вид:
Также можно задать границы для отдельной стороны элемента следующими свойствами:
Значения для вышеперечисленных задаются точно также, как и для основного свойства.
Border: 1px solid #000;
Отступы между элементами задаются свойством “margin”.
Поля вокруг элемента устанавливаются свойством “padding “. Указывается точно так же, как и отступы (margin) и имеет свойства, устанавливающие поля по одной одной стороне: padding-left , padding-right , padding-top , padding-bottom .
Padding: 10px 10px 10px 10px;
Можно установить высоту и ширину элемента свойствами “width” – ширина и “height” – высота. В качестве значений выступают числовые значения в пикселях или процентах. Также можно установить максимально и минимально возможные значения ширины и высоты элемента с помощью свойств: max-width, min-width, max-height, min-height.
Width:100px; height:200px;
Вот и разобрали основы CSS. Я сам знаю только то, что перечислил выше, поэтому строго не судите.
Как видите, с помощью каскадных таблицей стилей CSS можно делать с элементами сайта что душе угодно и это еще не все свойства, их очень много. Если у Вас есть желание более подробно изучить свойства CSS, то воспользуйтесь справочником от HTMLbook .
Надеюсь, что я не зря сидел несколько часов над написанием данного материала.
Завтра мы попрактикуемся в редакторе Notepad++, будьте готовы.
До завтра!
Предыдущая статьяCSS (Cascading Style Sheets) — язык таблиц стилей, который позволяет прикреплять стиль (например, шрифты и цвет) к структурированным документам (например, документам HTML и приложениям XML). Обычно CSS-стили используются для создания и изменения стиля элементов веб-страниц и пользовательских интерфейсов, написанных на языках HTML и XHTML, но также могут быть применены к любому виду XML-документа, в том числе XML, SVG и XUL. Отделяя стиль представления документов от содержимого документов, CSS упрощает создание веб-страниц и обслуживание сайтов.
CSS поддерживает таблицы стилей для конкретных носителей, поэтому авторы могут адаптировать представление своих документов к визуальным браузерам, слуховым устройствам, принтерам, брайлевским устройствам, карманным устройствам и т.д.
Каскадные таблицы стилей описывают правила форматирования элементов с помощью свойств и допустимых значений этих свойств. Для каждого элемента можно использовать ограниченный набор свойств, остальные свойства не будут оказывать на него никакого влияния.
Объявление стиля состоит из двух частей: селектора и объявления . В HTML имена элементов нечувствительны к регистру, поэтому «h1» работает так же, как и «H1». Объявление состоит из двух частей: имя свойства (например, color) и значение свойства (grey). Селектор сообщает браузеру, какой именно элемент форматировать, а в блоке объявления (код в фигурных скобках) перечисляются форматирующие команды — свойства и их значения.
Рис. 1. Структура объявления
Хотя приведенный пример пытается влиять только на пару свойств, необходимых для рендеринга HTML-документа, он сам по себе квалифицируется как таблица стилей. В сочетании с другими таблицами стилей (одна фундаментальная особенность CSS заключается в том, что таблицы стилей объединяются), правило будет определять окончательное представление документа.
Внешняя таблица стилей представляет собой текстовый файл с расширением.css , в котором находится набор CSS-стилей элементов. Файл создаётся в редакторе кода, так же как и HTML-страница. Внутри файла могут содержатся только стили, без HTML-разметки. Внешняя таблица стилей подключается к веб-странице с помощью тега , расположенного внутри раздела
. Такие стили работают для всех страниц сайта.К каждой веб-странице можно присоединить несколько таблиц стилей, добавляя последовательно несколько тегов , указав в атрибуте тега media назначение данной таблицы стилей. rel="stylesheet" указывает тип ссылки (ссылка на таблицу стилей).
Атрибут type="text/css" не является обязательным по стандарту HTML5, поэтому его можно не указывать. Если атрибут отсутствует, по умолчанию используется значение type="text/css" .
Внутренние стили встраиваются в раздел
HTML-документа и определяются внутри тега . Внутренние стили имеют приоритет над внешними, но уступают встроенным стилям (заданным через атрибут style)....
Когда мы пишем встроенные стили , мы пишем CSS-код в HTML-файл, непосредственно внутри тега элемента с помощью атрибута style:
Обратите внимание на этот текст.
Такие стили действуют только на тот элемент, для которого они заданы.
Правило @import позволяет загружать внешние таблицы стилей. Чтобы директива @import работала, она должна располагаться в таблице стилей (внешней или внутренней) перед всеми остальными правилами:
Правило @import также используется для подключения веб-шрифтов:
@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);
Селекторы представляют структуру веб-страницы. С их помощью создаются правила для форматирования элементов веб-страницы. Селекторами могут быть элементы, их классы и идентификаторы, а также псевдоклассы и псевдоэлементы.
Соответствует любому HTML-элементу. Например, * {margin: 0;} обнулит внешние отступы для всех элементов сайта. Также селектор может использоваться в комбинации с псевдоклассом или псевдоэлементом: *:after {CSS-стили} , *:checked {CSS-стили} .
Селекторы элементов позволяют форматировать все элементы данного типа на всех страницах сайта. Например, h1 {font-family: Lobster, cursive;} задаст общий стиль форматирования всех заголовков h1 .
Селекторы класса позволяют задавать стили для одного и более элементов с одинаковым именем класса, размещенных в разных местах страницы или на разных страницах сайта. Например, для создания заголовка с классом headline необходимо добавить атрибут class со значением headline в открывающий тег
.headline { text-transform: uppercase; color: lightblue; }
Если элемент имеет несколько атрибутов класса, их значения объединяются с пробелами.
Селектор идентификатора позволяет форматировать один конкретный элемент. Значение id должно быть уникальным, на одной странице может встречаться только один раз и должно содержать хотя бы один символ. Значение не должно содержать пробелов.
Нет никаких других ограничений на то, какую форму может принимать id , в частности, идентификаторы могут состоять только из цифр, начинаться с цифры, начинаться с подчеркивания, состоять только из знаков препинания и т. д.
Уникальный идентификатор элемента может использоваться для различных целей, в частности, как способ ссылки на конкретные части документа с использованием идентификаторов фрагментов, как способ нацеливания на элемент при создании сценариев и как способ стилизации конкретного элемента из CSS.
#sidebar { width: 300px; float: left; }
Селекторы потомков применяют стили к элементам, расположенным внутри элемента-контейнера. Например, ul li {text-transform: uppercase;} — выберет все элементы li , являющиеся потомками всех элементов ul .
Если нужно отформатировать потомки определенного элемента, этому элементу нужно задать стилевой класс:
p.first a {color: green;} — данный стиль применится ко всем ссылкам, потомкам абзаца с классом first ;
p .first a {color: green;} — если добавить пробел, то будут стилизованы ссылки, расположенные внутри любого тега класса.first , который является потомком элемента
First a {color: green;} — данный стиль применится к любой ссылке, расположенной внутри другого элемента, обозначенного классом.first .
Дочерний элемент является прямым потомком содержащего его элемента. У одного элемента может быть несколько дочерних элементов, а родительский элемент у каждого элемента может быть только один. Дочерний селектор позволяет применить стили только если дочерний элемент идёт сразу за родительским элементом и между ними нет других элементов, то есть дочерний элемент больше ни во что не вложен.
Например, p > strong — выберет все элементы strong , являющиеся дочерними по отношению к элементу p .
Сестринские отношения возникают между элементами, имеющими общего родителя. Селекторы сестринских элементов позволяют выбрать элементы из группы элементов одного уровня.
h1 + p — выберет все первые абзацы, идущие непосредственно за любым тегом
h1 ~ p — выберет все абзацы, являющиеся сестринскими по отношению к любому заголовку h1 и идущие сразу после него.
Селекторы атрибутов выбирают элементы на основе имени атрибута или значения атрибута:
[атрибут] — все элементы, содержащие указанный атрибут, — все элементы, для которых задан атрибут alt ;
селектор[атрибут] — элементы данного типа, содержащие указанный атрибут, img — только картинки, для которых задан атрибут alt ;
селектор[атрибут="значение"] — элементы данного типа, содержащие указанный атрибут с конкретным значением, img — все картинки, название которых содержит слово flower ;
селектор[атрибут~="значение"] — элементы частично содержащие данное значение, например, если для элемента задано несколько классов через пробел, p — абзацы, имя класса которых содержит feature ;
селектор[атрибут|="значение"] — элементы, список значений атрибута которых начинается с указанного слова, p — абзацы, имя класса которых feature или начинается на feature ;
селектор[атрибут^="значение"] — элементы, значение атрибута которых начинается с указанного значения, a — все ссылки, начинающиеся на http:// ;
селектор[атрибут$="значение"] — элементы, значение атрибута которых заканчивается указанным значением, img — все картинки в формате png ;
селектор[атрибут*="значение"] — элементы, значение атрибута которых содержит в любом месте указанное слово, a — все ссылки, название которых содержит book .
Псевдоклассы — это классы, фактически не прикрепленные к HTML-тегам. Они позволяют применить CSS-правила к элементам при совершении события или подчиняющимся определенному правилу. Псевдоклассы характеризуют элементы со следующими свойствами:
:hover — любой элемент, по которому проводят курсором мыши;
:focus — интерактивный элемент, к которому перешли с помощью клавиатуры или активировали посредством мыши;
:active — элемент, который был активизирован пользователем;
:valid — поля формы, содержимое которых прошло проверку в браузере на соответствие указанному типу данных;
:invalid — поля формы, содержимое которых не соответствует указанному типу данных;
:enabled — все активные поля форм;
:disabled — заблокированные поля форм, т.е., находящиеся в неактивном состоянии;
:in-range — поля формы, значения которых находятся в заданном диапазоне;
:out-of-range — поля формы, значения которых не входят в установленный диапазон;
:lang() — элементы с текстом на указанном языке;
:not(селектор) — элементы, которые не содержат указанный селектор — класс, идентификатор, название или тип поля формы — :not() ;
:target — элемент с символом # , на который ссылаются в документе;
:checked — выделенные (выбранные пользователем) элементы формы.
Структурные псевдоклассы отбирают дочерние элементы в соответствии с параметром, указанным в круглых скобках:
:nth-child(odd) — нечётные дочерние элементы;
:nth-child(even) — чётные дочерние элементы;
:nth-child(3n) — каждый третий элемент среди дочерних;
:nth-child(3n+2) — выбирает каждый третий элемент, начиная со второго дочернего элемента (+2) ;
:nth-child(n+2) — выбирает все элементы, начиная со второго;
:nth-child(3) — выбирает третий дочерний элемент;
:nth-last-child() — в списке дочерних элементов выбирает элемент с указанным местоположением, аналогично с:nth-child() , но начиная с последнего, в обратную сторону;
:first-child — позволяет оформить только самый первый дочерний элемент тега;
:last-child — позволяет форматировать последний дочерний элемент тега;
:only-child — выбирает элемент, являющийся единственным дочерним элементом;
:empty — выбирает элементы, у которых нет дочерних элементов;
:root — выбирает элемент, являющийся корневым в документе — элемент html .
Указывают на конкретный тип дочернего тега:
:nth-of-type() — выбирает элементы по аналогии с:nth-child() , при этом берёт во внимание только тип элемента;
:first-of-type — выбирает первый дочерний элемент данного типа;
:last-of-type — выбирает последний элемент данного типа;
:nth-last-of-type() — выбирает элемент заданного типа в списке элементов в соответствии с указанным местоположением, начиная с конца;
:only-of-type — выбирает единственный элемент указанного типа среди дочерних элементов родительского элемента.
Псевдоэлементы используются для добавления содержимого, которое генерируется с помощью свойства content:
:first-letter — выбирает первую букву каждого абзаца, применяется только к блочным элементам;
:first-line — выбирает первую строку текста элемента, применяется только к блочным элементам;
:before — вставляет генерируемое содержимое перед элементом;
:after — добавляет генерируемое содержимое после элемента.
Для более точного отбора элементов для форматирования можно использовать комбинации селекторов:
img:nth-of-type(even) — выберет все четные картинки, альтернативный текст которых содержит слово css .
Один и тот же стиль можно одновременно применить к нескольким элементам. Для этого необходимо в левой части объявления перечислить через запятую нужные селекторы:
H1, h2, p, span { color: tomato; background: white; }
Наследование и каскад — два фундаментальных понятия в CSS, которые тесно связаны между собой. Наследование заключается в том, что элементы наследуют свойства от своего родителя (элемента, их содержащего). Каскад проявляется в том, как разные виды таблиц стилей применяются к документу, и как конфликтующие правила переопределяют друг друга.
Наследование является механизмом, с помощью которого определенные свойства передаются от предка к его потомкам. Спецификацией CSS предусмотрено наследование свойств, относящихся к текстовому содержимому страницы, таких как color , font , letter-spacing , line-height , list-style , text-align , text-indent , text-transform , visibility , white-space и word-spacing . Во многих случаях это удобно, так как не нужно задавать размер шрифта и семейство шрифтов для каждого элемента веб-страницы.
Свойства, относящиеся к форматированию блоков, не наследуются. Это background , border , display , float и clear , height и width , margin , min-max-height и -width , outline , overflow , padding , position , text-decoration , vertical-align и z-index .
С помощью ключевого слова inherit можно принудить элемент наследовать любое значение свойства родительского элемента. Это работает даже для тех свойств, которые не наследуются по умолчанию.
1) Стили могут наследоваться от родительского элемента (наследуемые свойства или с помощью значения inherit);
2) Стили, расположенные в таблице стилей ниже, отменяют стили, расположенные в таблице выше;
3) К одному элементу могут применяться стили из разных источников. Проверить, какие стили применяются, можно в режиме разработчика браузера. Для этого над элементом нужно щёлкнуть правой кнопкой мыши и выбрать пункт «Посмотреть код» (или что-то аналогичное). В правом столбце будут перечислены все свойства, которые заданы для этого элемента или наследуются от родительского элемента, а также файлы стилей, в которых они указаны, и порядковый номер строки кода.
Рис. 2. Режим разработчика в браузере Google Chrome
4) При определении стиля можно использовать любую комбинацию селекторов — селектор элемента, псевдокласса элемента, класса или идентификатора элемента.
div {border: 1px solid #eee;} #wrap {width: 500px;} .box {float: left;} .clear {clear: both;}
Каскадирование — это механизм, который управляет конечным результатом в ситуации, когда к одному элементу применяются разные CSS-правила. Существует три критерия, которые определяют порядок применения свойств — правило!important , специфичность и порядок, в котором подключены таблицы стилей.
Вес правила можно задать с помощью ключевого слова!important , которое добавляется сразу после значения свойства, например, span {font-weight: bold!important;} . Правило необходимо размещать в конец объявления перед закрывающей скобкой, без пробела. Такое объявление будет иметь приоритет над всеми остальными правилами. Это правило позволяет отменить значение свойства и установить новое для элемента из группы элементов в случае, когда нет прямого доступа к файлу со стилями.
Для каждого правила браузер вычисляет специфичность селектора , и если у элемента имеются конфликтующие объявления свойств, во внимание принимается правило, имеющее наибольшую специфичность. Значение специфичности состоит из четырех частей: 0, 0, 0, 0 . Специфичность селектора определяется следующим образом:
для
id добавляется 0, 1, 0, 0 ;
для
class добавляется 0, 0, 1, 0 ;
для
каждого элемента и псевдоэлемента добавляется 0, 0, 0, 1 ;
для
встроенного стиля, добавленного непосредственно к элементу — 1, 0, 0, 0 ;
универсальный
селектор не имеет специфичности.
H1 {color: lightblue;} /*специфичность 0, 0, 0, 1*/ em {color: silver;} /*специфичность 0, 0, 0, 1*/ h1 em {color: gold;} /*специфичность: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about {color: blue;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar {color: grey;} /*специфичность 0, 0, 1, 0*/ #sidebar {color: orange;} /*специфичность 0, 1, 0, 0*/ li#sidebar {color: aqua;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/
В результате к элементу применятся те правила, специфичность которых больше. Например, если на элемент действуют две специфичности со значениями 0, 0, 0, 2 и 0, 1, 0, 1 , то выиграет второе правило.
Вы можете создать несколько внешних таблиц стилей и подключить их к одной веб-странице. Если в разных таблицах будут встречаться разные значения свойств одного элемента, то в результате к элементу применится правило, находящееся в таблице стилей, идущей в списке ниже.
