Вредоносное ПО (malware) - это назойливые или опасные программы,...
CSS содержит правила стиля, которые интерпретируются браузером, а затем применяются к соответствующим элементам вашего документа. Правило стиля состоит из трех частей:
- Селектор
- это HTML-тег, к которому будет применяться стиль. Это может быть любой тег, например,
или
и т.д.
- Свойство - это тип атрибута HTML-тега. Проще говоря, все атрибуты в HTML преобразуются в свойства CSS. Ими могут быть цвета, границы, отступы и т.д.
- Значение - задается свойству. Например, свойство цвета может иметь значение green, #008000 и т.д.
Синтаксис селекторов в CSS следующий:
Селектор { свойство: значение }
Пример. Вы можете задать границу таблицы следующим образом:
Table { border: 2px solid #FF8C00; }
Здесь синтаксис селектора такой: table - это селектор, а border - свойство, а 2px solid #FF8C00 - значение этого свойства.
Вы можете задавать селекторы различными способами, как Вам будет удобно. Ниже представлены виды селекторов.>
Стандартные селекторы
Это тот же самый селектор, который Вы видели выше. Опять же, еще один пример, чтобы дать цвет всем заголовкам первого уровня:
H1 { color: #8B4513; }
Универсальные селекторы
Вместо того, чтобы выбирать элементы определенного типа, универсальный селектор вполне просто соответствует имени любого типа элемента:
* { color: #808080; }
Это правило отображает в нашем документе содержимое каждого элемента в сером цвете.
Селекторы потомков или вложенные селекторы
Предположим, Вы хотите применить правило стиля к определенному элементу только тогда, когда оно находится внутри определенного элемента, то в этом Вам помогут вложенные селекторы или селекторы потомков. Как показано в следующем примере, правило стиля будет применяться к элементу только тогда, когда оно находится внутри тега
- .
Ul em { color: #CD5C5C; }
Селекторы класса
Вы можете задать правила стиля для элементов на основе атрибута class. Все элементы, имеющие этот класс, будут отформатированы в соответствии с определенным правилом.
Blue { color: #0000FF; }
class="blue" . Вы можете сделать селектор класса немного более конкретным. Например:
H1.blue { color: #0000FF; }
с атрибутом class="blue" .
Вы можете применить к одному элементу несколько селекторов класса. Рассмотрим следующий пример:
Этот абзац будет оформлен классами center и bold .
ID селекторы
Вы можете задать правила стиля для элементов на основе атрибутa id. Все элементы, имеющие этот идентификатор, будут отформатированы в соответствии с определенным правилом.
#blue { color: #0000FF; }
Это правило отображает в нашем документе содержимое в синем цвете для каждого элемента с атрибутом id="blue" . Вы можете сделать id селектор немного более конкретным. Например:
H1#blue { color: #0000FF; }
Это правило отображает содержимое в синем цвете только для элементов
с атрибутом id="blue" .
Истинная мощность id селекторов - это когда они используются в качестве основы для селекторов-потомков, например:
#blue h2 { color: #0000FF; }
В этом примере все заголовки второго уровня будут отображаться в синем цвете, когда они будут находиться в тегах с атрибутом id="blue" .
Дочерние селекторы
Вы уже знаете селекторы потомков. Существует еще один тип селектора, который очень похож на селекторы потомков, но имеет другую функциональность, это дочерний селектор. Рассмотрим следующий пример:
Body > p { color: #0000FF; }
Это правило будет отображать все абзацы в синем цвете, если они являются прямым дочерним элементом
. Другие абзацы, помещенные внутри других элементов типаилиСоседние селекторы
HTML-элементы, идущие друг за другом, называются соседними. Рассмотрим следующий пример:
Strong + em { color: #0000FF; }
Это правило будет отображать содержимое тега в синем цвете, если он идет после элемента . Другие теги , идущие не после тега , не будут иметь никакого эффекта этого правила.
Селекторы атрибутов
Вы также можете применять стили к HTML-элементам с определенными атрибутами. Ниже правило стиля будет соответствовать всем input элементам, имеющим атрибут type со значением text:
Input { color: #0000FF; }
Преимущество использования селекторов атрибутов заключается в том, что элемент не изменяется, а цвет применяется только к нужным текстовым полям.
Для селектора атрибутов применяются следующие правила:
- p - выбирает все элементы абзаца с атрибутом lang.
- p - выбирает все элементы абзаца, где атрибут lang имеет точное значение «ru».
- p - выбирает все элементы абзаца, где атрибут lang содержит слово «ru».
- p - выбирает все элементы абзаца, где атрибут lang содержит значения, которые являются точными «ru» или начинаются с «ru».
Несколько правил стиля
Возможно, Вам потребуется определить несколько правил стиля для одного элемента. Вы можете задать эти правила для объединения нескольких свойств и соответствующих значений в один блок, как показано в следующем примере:
H1 { color: #00CED1; letter-spacing: .2em; text-transform: lowercase; margin-bottom: 2em; font-weight: 700; }
Все пары свойств и значений разделяются точкой с запятой (;). Вы можете сохранить их в одной строке или нескольких строках. Для лучшей читаемости сохраняйте их в отдельных строках.
Не беспокойтесь о свойствах, упомянутых в вышеупомянутом блоке. Эти свойства будут объяснены в следующих уроках.
Группировка селекторов в CSS
Вы можете применить стиль для многих селекторов, если хотите. Просто отделите селектора запятой, как показано в следующем примере:
H1, h2, h3 { color: #00CED1; letter-spacing: .2em; text-transform: lowercase; margin-bottom: 2em; font-weight: 700; }
Это правило стиля будет применено к элементам h1, h2 и h3. Порядок списка при группировки селекторов не имеет значения. Все элементы в селекторе будут иметь соответствующие объявления, применяемые к ним.
Вы можете группировать различные id селектора вместе, как показано ниже:
#header, #content, #footer { position: absolute; width: 300px; left: 250px; }
Приветствую Вас, уважаемые читатели. В предыдущих статьях мы изучали, в основном, атрибуты стилей CSS. Их очень много. Одни задают параметры шрифтов, другие параметры фона, третьи параметры отступов и рамок.
В этой статье мы поговорим о селекторах стилей. В одной из статье мы уже затрагивали . А сегодня рассмотрим еще несколько видов селекторов, которые не явно привязывают правило стиля к элементу веб-страницы. Это так называемые специальные селекторы. Их бывает несколько видов.
Комбинаторы в CSS (Соседний, дочерний и контекстный селекторы)
Комбинаторы — это разновидность css селекторов, привязывающие правило стиля к элементу web-страницы на основании его местоположения относительно других элементов.
Первый комбинатор символ плюс (+) или соседний селектор . Плюс устанавливается между двумя селекторами:
<селектор 1> + <селектор 2> { <стиль> }
Стиль в этом случае применяется к селектору 2 , но только в том случае если он является соседним для селектора 1 и идет сразу после него. Рассмотрим пример:
strong + i {
}
...
Это обычный текст. Это жирный текст, обычный текст, красный текст
Это обычный текст. Это жирный текст, обычный текст, и это обычный текст.
Результат:
Стиль описанный в примере будет применен только к первому тексту заключенному в тег , т.к. он следует сразу же после тега .
Комбинатор тильда (~) также применяется к соседним селекторам, но в этот раз между ними могут быть другие элементы. При этом оба селектора должны быть вложены в один и тот же родительский тег:
<селектор 1> ~ <селектор 2> { <стиль> }
Стиль будет применен к селектору 2 , который должен следовать за селектором 1 . Рассмотри пример:
strong ~ i {
color: red; /* Красный цвет текста */
}
...
Это обычный текст. Это жирный текст, обычный текст, красный текст к нему применилось правило соседних селекторов.
Это обычный текст. Это жирный текст, обычный текст, а это красный текст.
Результат:
Как видим, в этот раз правило стиля сработало для обоих текстов заключенных в тег , несмотря на то, что во втором случае между тегом и стоит тег .
Комбинатор > относится к дочерним селекторам . Позволяет привязать стиль CSS к элементу веб-страницы, непосредственно вложенному в другой элемент:
<селектор 1> > <селектор 2> { <стиль> }
Стиль будет привязан к селектору 2 , который непосредственно вложен в селектор 1 .
div > strong {
}
...
Это обычный текст. Это жирный курсивный текст .
Это обычный текст. А это обычный жирный текст.
И результат:
Как видно на рисунке, правило стиля подействовало только на первый тег , который непосредственно вложен в тег
. А непосредственным родителем второго тега является тег, поэтому правило на него не действует.
Следующим рассмотрим контекстный селектор <пробел> . Он позволяет привязать CSS стиль к элементу вложенному в другой элемент, причем может быть любой уровень вложенности:
<селектор 1> <селектор 2> { <стиль> }
Стиль будет применен к селектору 2 , если он так или иначе вложен в селектор 1 .
Рассмотрим предыдущий пример, только при описании CSS правила применим контекстный селектор:
div strong {
font-style: italic /* Курсив */
}
...
Это обычный текст. Это жирный курсивный текст .
Это обычный текст. А это тоже курсивный жирный текст.
Обычный текст и просто жирный текст
Результат:
Как видим, на этот раз правило подействовало на оба тега , даже на тот, который вложен и в контейнер
и в абзац. На тег , который просто вложен в абзац
правило css никак не действует.
Селекторы по атрибутам тега
Селекторы атрибутов — это специальные селекторы, которые привязывают стиль к элементу на основании, присутствует ли в нем определенный атрибут или имеет ли он определенное значение. Существует несколько вариантов применения таких селекторов.
1. Простой селектор атрибута
Имеет вид:
<селектор>[<имя атрибута тега>] { <стиль> }
И привязывает стиль к тем элементам, внутри которых добавлен указанный атрибут. Например:
strong{
color:red;
}
...
Автомобиль это механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.
Результат:
На рисунке можно заметить, что правило css (красный цвет текста) применяется к элементу strong , к которому добавлен атрибут title .
2. Селектор атрибута со значением
Синтаксис этого селектора следующий:
<селектор>[<имя атрибута тега>=<значение>] { <стиль> }
Привязывает стиль к элементам, теги которых имеют атрибут с указанным именем и значением . Пример:
a{
color:red;
font-size:150%;
}
...
.ru" target="_blank">Ссылка в новом окнеРезультат:
Как видим, оба элемента типа гиперссылка имеют атрибут target , но правило css, которое увеличивает текст ссылки в полтора раза и изменяет его цвет в красный, применяется к тегу у которого атрибут target имеет значение «_blank» .
3. Одно из нескольких значений атрибута
Некоторые значения атрибутов могут перечисляться через пробел, например имена классов. Чтобы задать правило стиля при наличии в списке значений атрибутов требуемого значения применяется следующий селектор:
[<имя атрибута тега>~=<значение>] { <стиль> }
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }Стиль применяется в том случае, если у атрибута имеется требуемое значение или оно входит в список значений, разделенных пробелами. Например:
{
color:red;
font-size:150%;
}
...
Наш телефон: 777-77-77
Наш адрес: Москва ул. Советская 5
Получиться следующий результат:
Правило применяется к элементу, у которого среди значений атрибута class имеется значение tel .
4. Дефис в значении атрибута
В значениях идентификаторов и классов допускается использовать дефис. Для привязки стиля к элементам, значения атрибутов которых могут содержать дефис можно воспользоваться следующей конструкцией:
[атрибут|="значение"] { стиль }
Селектор[атрибут|="значение"] { стиль }Стиль применяется к тем элементам, у которых значение атрибута начинается с указанного значения после, которого идет дефис. Например:
{
color:red;
font-size:150%;
}
...
Результат:
В примере правило стиля применяется только к тем элементам списка, у которых имя класса начинается со значения «menu- „ .
5. Значение атрибута начинается с определенного текста
Данный селектор устанавливает стиль для элемента, если значение атрибута тега начинается с определенного значения. Может быть два варианта:
[<имя атрибута тега>^=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }В первом случае стиль применяется ко всем элементам, теги которых имеют атрибут с указанным именем и значением, начинающимся с указанной подстроки . Во втором случае тоже самое, только к определенным элементам указанным в основном селекторе . Пример:
a{
color:green;
font-weight:bold;
}
...
Результат:
В примере показано, как по разному отобразить внешние ссылки и внутренние ссылки. Внешние ссылки всегда начинаются со строки «http://». Поэтому в селекторе указываем, что стиль применять только к ссылкам, у которых атрибут href начинается со значения http:// .
6. Значение атрибута заканчивается определенным текстом
Привязывает стиль к элементам, у которых значение атрибута заканчивается указанным текстом. Имеет следующий синтаксис:
[<имя атрибута тега>$=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }В первом случае стиль применяется ко всем элементам, у которых имеется атрибут с указанным именем и имеет значение оканчивающееся указанной подстрокой . Во втором случае тоже самое, только к указанным селекторам . Таким способом, например, можно по разному отображать различные форматы графических изображений. Например:
IMG {
border: 5px solid red;
}
...
Картинка формата gif
Картинка формата png
Результат:
В примере все картинки с расширением gif будут отображаться с красной рамкой толщиной пять пикселей.
7. Значение атрибута содержит указанную строку
Этот селектор привязывает стиль к тегам, значение атрибута которых содержат определенный текст. Синтаксис:
[<имя атрибута тега>*=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }Стиль привязывается к элементам, у которых имеется атрибут с указанным именем и его значение содержит указанную подстроку . Например:
IMG {
border: 5px solid red;
}
...
Картинка из папки gallery
Картинка из другой папки
Результат:
В примере стиль применяется к картинкам, которые загружены из папки «gallery» .
На этом об селекторах атрибутов все. Все перечисленные методы можно комбинировать между собой:
Селектор[атрибут1="значение1"][атрибут2="значение2"] { стиль }
Кроме того напомню о специальных селекторах CSS:
- с помощью символов «+» и «~» формируются ;
- символ «>» привязывает css стили к дочерним тегам;
- символ <пробел> формирует контекстные селекторы.
В следующих статьях мы рассмотрим также псевдоэлементы и псевдоклассы, которые предоставляют мощный инструмент управления стилями.
На этом все, до новых встреч.
В прошлом уроке мы разбирали способы подключения CSS. Теперь перейдём к самому языку.
Как и любой другой язык, CSS имеет свой, однако предельно простой синтаксис. Состоит всего из двух компонентов:
1. Селектор (выбор объекта, с которым будем работать. Например, заголовок, div, таблица и тд.)
2. Блок стилей - описание одного или нескольких свойств объекта - цвет, размер и тд. Заключается в фигурные скобки {}Мы видим, как заголовку - селектор, в блоке стилей присваивается свойство цвет текста (color ) - синий.
Блок стилей состоит из свойств и их значений , которые при перечислении разделяются точкой с запятой (;) , как в примере ниже.
Теперь мы добавляем ещё одно свойство - форматирование текста (font) . В нём мы придаём значение размер текста - 20 пикселей .Пример работы CSS
Создайте в любом месте папку, например, урок 2 . В ней создайте файл style.css . В него скопируйте весь код ниже. В коде CSS мы задаём свойства для тега и заголовков
и
.Код CSS (файл style.css )
Body{
background: gray;
color: white;
}
h1{color:#0085cc;}
h2{color:white;}
Обратите внимание, не будет разницы, записывать блок стилей в строчку (h1,h2) или в столбик (body). И тот, и другой вариант будут работать. Выбирайте так, как Вам удобно.Теперь создаём HTML-файл. Неважно, какое будет название, главное, чтобы путь к файлу с CSS кодом был указан верно. Указывается также как и в ссылках, путях к изображениям. В примере ниже указан путь (style.css) в ту же директорию, что и html-файл. То есть оба файла должны быть в одной папке.
Код HTML
Пример работы CSS
Заголовок h1
Заголовок h2
Результат работы кода можно увидеть по ссылке ниже.Селекторы CSS
В примерах выше в качестве селекторов использовались элементы страницы : body, h1, h2. Однако бывают ситуации, когда нужно работать с конкретным элементом, а не со всеми. Например, все заголовки были синего цвета, а один, в конце, чёрного. Для это существуют разные виды селекторов. Давайте рассмотрим их подробнее.Идентификаторы
Идентификатор элемента - это селектор, который присваивается одному элементу и делает его уникальным. Задаётся при помощи параметра id .
Данному параграфу присвоен id. У него будут уникальные свойства.
Параметры текста останутся по умолчанию.
Разберём примерКод HTML и CSS
Пример работы CSS
Текст который будет синего цвета, потому что есть id
Цвет текста останется по умолчанию.
Сначала в стилях у всех параграфов в свойстве цвета указан черный цвет, а текст параграфа с id "blue" будет синим. Селектор в данном случае состоит из элемента (p - параграф), разделителя (# - обозначение идентификатора) и имени идентификатора (blue).Важно отметить то, что идентификатор в теории даётся только одному элементу, которому хотим придать уникальные свойства. Да, в некоторых браузерах, если дать один и тот же идентификатор двум элементам, то может сработать. Однако, такое получится не во везде.
Если хотите задать стили для нескольких элементов, то следует использовать классы .
Классы
Класс (class) - это селектор, который позволяет применить стили к одному и более элементам. Например, id применим только к одному уникальному элементу. В качестве значения принимается имя элемента.
Рассмотрим пример:
Код HTML и CSS
Пример работы CSS
Цвет текста чёрный.
Текст синего цвета.
Текст полужирный и синего цвета.
Цвет текста чёрный.
В результате параграф с идентификатором (id ) blue будет иметь текст синего цвета, элементы с class blue будут выделены полужирным шрифтом и синим цветом. А все остальные элементы p будут иметь шрифт чёрного цвета.Как видите, класс можно применить несколько раз. Соответственно всё элементы будут иметь свойства описанные для данного класса.
Унифицированные селекторы
Унифицированные селекторы (.) - это селектор, который можно присвоить разному типу элементов, например, и заголовкам, и параграфам, и блокам (div). Самый распространённый вариант. До этого мы использовали конструкцию в коде CSS p#blue и p.blue , то есть сначала указывали тип элемента (p - параграф), а потом уже сам идентификатор или класс. Так вот можно указывать конструкцию проще, сразу начинать с .blue . Подобный селектор будет применим уже не только к параграфам, а к другим элементам.
Код HTML и CSS
Пример работы CSS
Заголовок с идентификатором.
Цвет текста чёрный.
Текст полужирный и синего цвета.
Текст в блоке тоже полужирный и синего цвета
Текст в строчном элементе тоже полужирный и синего цвета
В результате унифицированный селектор, в данном случае класс .blue , мы применили и к парафграфу (p), и к блоку (div), и к строковому элементу (span). Результат везде одинаковый - текст полужирный и синего цвета.Контекстные селекторы
Контекстный селектор - это селектор, который выделяет один элемент в группе других элементов. В написании выделяется пробелом. Чтобы было легче, сразу перейдём к примеру. Допустим мы хотим, чтобы полужирный текст, содержащийся в параграфах выделялся ещё каким-либо цветом.
Код HTML и CSS
Пример работы CSS
Цвет текста чёрный. Но теги полужирный шрифта тут не упоминаются.
Обычный полужирный текст, который не содержится в параграфе. Поэтому и цвет у него не меняется.
И внимание!!! Параграф с фразой полужирным шрифтом синего цвета
Соответственно синим будет выделен только тот полужирный текст (strong), который будет в параграфе (p).Группировка селекторов
Группировка селекторов - это такая конструкция таблицы стилей, где блок объявления стилей обращён к одному и более ранее упоминаемым элементам и добавляет новое свойство.
По тексту сложно понять. Лучше сразу к примеру.
H1, h2, h3{ color:blue; }
h1{ font-size:18px; }
h2{ font-size:16px; }
h3{ font-size:14px; }
В первой строке мы упоминаем сразу несколько элементов . Для того, чтобы обратиться сразу к нескольким элементам надо в селекторе перечислить их через знак , (запятую) и пробел. Перед последним перечисляемым элементом запятая и пробел НЕ нужны .Последующими упоминаниями данных элементов мы добавляем им значения новых свойств. В данном случае размера шрифта.
Код HTML и CSS
Пример работы CSS
Заголовок h1
Заголовок h2
Заголовок h3
В результате все заголовки будут синего цвета. Однако разных размеров, так как последующие записи в таблице стилей давали заголовкам разный размер.Использование группировки - вопрос спорный. Среди преимуществ можно отметить то, что удаётся избегать крупных частей кода, которые по содержание будут во многом дублировать себя. Из недостатков можно сказать, что использование подобного кода, где свойства к тому или иному элементу дописываются в разных местах достаточно проблемно и неудобно. Конечно, при грамотном последовательном написании можно избежать подобных минусов, но это уже другой вопрос.
Спасибо за внимание! Урок окончен!
CSS - каскадные таблицы стилей.
Внимание! У Вас нет прав для просмотра скрытого текста.
Мир CSS - это волшебный мир бесконечного комбинирования свойств и внешнего вида (стилей) -объектов и элементов. И, самое главное действующее лицо на этом «празднике жизни» CSS - это селектор CSS .Селекторы в CSS - термины и определения
Как известно, стили (внешний вид и свойства) -элементов
могут быть , и .Встроенные стили Встроенные стили указываются напрямую в HTML-тегах и с ними, пожалуй - проще всего. Действие встроенных стилей распространяется исключительно на тот HTML-элемент, в открывающий тег которого он вставлен (встроен). Например, вот такой код: text - создаст красный фон только внутри элемента span и не более того. Результат - text Внутренние стили Внутренние стили указываются в виде отдельно стоящего кода, который может располагаться в исходном коде веб-страницы, где только ему не заблагорассудится - в начале страницы, в её конце или посредине. Пример кода внутреннего стиля:
Внешние стили Самый сложный вариант - это внешние стили. В случае использования внешних стилей, код каждого стиля записывается во внешнем файле с расширением «.css». Таких файлов может быть несколько и находится они могут где угодно, даже на другом сайте.В отличие от встроенного стиля, действие кода внутреннего и внешнего стилей распространяется сразу на всю веб-страницу. При этом, на поле самой веб-страницы может находиться огромное количество различных похожих HTML-элементов. Чтобы точно указать браузеру к какому элементу относится тот или иной стиль, в технологии CSS применяются классы, псевдоклассы, идентификаторы и селекторы . Таким образом, «селектор в CSS» - это служебный символ для описания элемента или группы элементов, к которым применяется указанное правило стиля.
Прим. Справедливости ради нужно отметить, что такие вещи, как - классы и идентификаторы - относятся больше в HTML-коду, нежели к CSS-стилям. И только «CSS-селекторы» и псевдоклассы - это истинно CSS-наработка. О чём, собственно и речь.
Селектор в CSS - «мыслью по древу»
Исходя из вышесказанного, для себя лично, я так определил понятие термина «селектора в CSS»:
«селектор в CSS» - это служебный знак, который сообщает браузеру, где и как применить указанный стиль HTML-элемента.
Как и в обычной жизни, обозначает всего лишь банальный выбор HTML-элемента для последующего назначения ему стиля (внешнего вида, свойств и т.д.).
Зачем нужен селектор в CSS
Селектор в CSS - это, своего рода - связующее звено между кодами CSS и HTML. Установив селектор (сделав выбор элемента), мы указываем браузеру место, объект и правила для применения прописанных CSS-свойств (стилей). Чтобы перейти от зауми к практике, наверное, будет уместно вспомнить про жизнь в CSS без селекторов.
Глобальные свойства в CSS
(жизнь без селекторов)Жизнь без селекторов возможна! Но, разве это жизнь? Без селекторов, каскадные таблицы стилей (CSS) полностью теряют свой смысл. Во-первых, в имя класса без селектора возможно записать только имя реального тега из реальной существующей спецификации . Во-вторых, такая запись будет распространяться абсолютно на все теги с указанным именем на HTML-странице, которые только там найдутся.
Например, запись вида:
A{background:#000;} - закрасит в чёрный цвет все ссылки на странице table{background:#000;} - закрасит в чёрный цвет все таблицы на странице div{background:#000;} - закрасит в чёрный цвет все блоки (div-ы) на веб-странице, и т.д.
Короче, все прописанные CSS-стили и свойства будут применяться не выборочно, а глобально, распространяясь в своём действии сразу на все теги страницы...Безусловно, в такой записи без селекторов есть своя прелесть. Ведь, именно так, в CSS объявляются глобальные стили для всех HTML-объектов. Самый распространённый пример объявления глобальных свойств - это кроссбраузерный сброс отступов (маржинов и паддингов). Его код в CSS выглядит, примерно так: html,body,div,ul,li,dl,dt,h1,h2,h3,h4,h5,h6{margin:0;padding:0;} , хотя могут быть и другие варианты. Другой популярный пример глобальных настроек (стилей), действующих на все HTML-объекты на странице - это кроссбраузерное форматирование новых : header,section,footer,aside,nav,article{display:block;} . Тут, опять-таки, тоже возможны другие варианты.
Однако, в любом случае - всё это будут глобальные стили CSS, установленные для всего веб-документа - свойства, распространяющиеся абсолютно на все указанные теги и элементы страницы HTML. А вот, чтобы настройки CSS подействовали только на указанный нужный элемент или группу элементов HTML - потребуется селектор .
Что такое селектор в CSS
Подведём итоги.
Первое. Код самого HTML-элемента и код его стиля могут находиться в разных местах веб-страницы, сайта и даже на разных сайтах.
Второе. Чтобы обозначить HTML-элемент, ему присваивается класс или идентификатор, код которого добавляется в код HTML-элемента.
Игорь
. Обновление:Октябрь 30, 2018 .В стартовой статье данного раздела была дана общая информация, касающаяся , включая описание способов подключения стилей к HTML-коду страницы вебсайта (документа), который определяет наличие тех или иных элементов на вебстранице.
В этой публикации мы рассмотрим, как правильно составлять и прописывать свойства CSS для всех элементов, чтобы браузер смог их идентифицировать и корректно отобразить на странице.
В частности, разберем, что представляет из себя в общем виде отдельно взятое стилевое правило, которое включает в себя селектор, а также свойства и их значения.
Синтаксис и варианты записи правил CSS
Поскольку каскадные таблицы стилей представляют из себя, пусть и специализированный, но все же язык, допустимо провести аналогию совокупности правил CSS с простым текстом, где каждое слово состоит из букв, предложение — из слов, а сам текстовый фрагмент — из предложений.
Учитывая эту наглядную ассоциацию, можно вывести логическую последовательность, которая касается структуры CSS (она является максимально оптимальной, на мой скромный взгляд):
- значения (или параметры) , которые выражается в числах, коде цвета, названии шрифта и т.п., в соответствии с нашей аналогий можно считать буквами;
- структурной единицей CSS является свойство , определяющее свою часть внешнего вида элемента на странице (его цвет, шрифт текста, размеры, отступы, позицию и т.д.), которому соответствуют конкретные значения (одно или несколько). Здесь совокупность названия свойства и его параметра можно сравнить со словом (которое также может состоять из одной или более букв) в стандартном текстовом фрагменте;
- правило CSS — селектор (наименование стиля) вместе с набором свойств CSS для каждого элемента полностью определяет его оформление и местоположения на странице. Структурно ассоциируется с предложением (совокупностью отдельно взятых слов в обычном тексте);
- полное собрание всех правил CSS для конкретного документа (веб-страницы) обеспечивает его корректное отображение в браузере. Сравним это с завершенным отрывком текста.
Возможно, предложенная мною ассоциация немного притянута за уши, однако, мне кажется, она все-таки поможет начинающим понять общую структуру языка CSS.
Итак, каждому свойству присваивается конкретное значение (параметр), причем, их может быть несколько. Соответствующий набор свойств (правило) применяется к определенному селектору. Схематически правило CSS можно отобразить так :
Впереди помещается селектор, затем ставятся фигурные скобки (открывающая и закрывающая), между которыми и находятся свойства CSS с присвоенными им значениями, название каждого свойства отделяется от соответствующего ему параметра двоеточием. Все свойства вместе со значениями разделяются между собой точкой с запятой. Посмотрим на живой пример:
Body { font-size: 14px; background: #00ff00 url("west.png") repeat-x; }
Обратите внимание на то, что свойство background имеет сразу несколько значений: цвет фона (#00ff00), путь до фонового изображения ("west.png") и разрешение на его повторение по горизонтали (repeat-x). Наверное, вы заметили, что подобный вариант записи несколько отличается от схемы, представленной чуть выше.
На самом деле никакого несоответствия здесь нет. Поскольку CSS не чувствителен к пробелам, переносам строк, символам табуляции, стилевые правила могут быть записаны самыми разными способами, которые используются в конкретных ситуациях.
Скажем, расширенная запись правила, образец которой только что был представлен, наиболее удобна для восприятия, а потому применяется обычно для изучения стилей, ну или в "сыром" файле style.css, который создан для нового сайта, а потому еще не доведен до ума. Есть и другая разновидность этого же самого варианта записи CSS правила:
Body { font-size: 14px; } body { background: #00ff00 url("west.png") repeat-x; }
Как видите, здесь для каждого свойства повторяется один и тот же селектор. Это не является ошибкой по причинам, упомянутым выше, однако такой формат записи правила засоряет код и усложняет его восприятие, а потому практически не используется.
Расширенный вариант записи можно представить и без переносов:
Body { font-size: 14px; background: #00ff00 url("west.png") repeat-x; }
Но это не все. Все пробелы, как и разделительный символ (точку с запятой) после последнего свойства (перед закрывающей фигурной скобкой), можно опустить. Это также вполне легитимная форма CSS правила, менее объемная, что хорошо для оптимизации сайта, но менее читабельная:
Body{font-size:14px;background:#00ff00 url("west.png") repeat-x}
После того, как дизайн сайта готов и внесены все необходимые изменения в файлы стилей CSS, их соответствующим образом в целях оптимизации веб-ресурса, при этом автоматически удаляются все пробелы. Это можно сделать и вручную, но для чего тратить драгоценное время настолько нерационально? Ведь даже для небольшого сайта файл style.css может содержать немало стилевых правил.
Селекторы, свойства и применение стилей
Я уже отмечал, что с течением времени происходит все более тесное сближение HTML и CSS. Если на заре зарождения интернета в его сегодняшнем виде внешний вид элементов на веб-странице описывался с помощью атрибутов тегов гипертекстовой разметки, то в наши дни слишком частое использование такого метода считается , поскольку перегруженный ХТМЛ-код часто не способствует должной оптимизации страниц сайта, что в том числе вредит его SEO продвижению.
Блок с зеленым текстом, окруженный рамкойCSS (перед идентификатором ставится значок решетки):
#area {color: green; border: 2px solid #d6c99a}
Последующие ниже варианты могут содержать как селекторы тегов, так и классы с идентификаторами.
Для чего нужны такие варианты задания размеров? Дело в том, что далеко не всегда наилучшим решением является использование стандартных относительных величин, включая проценты. Порой выгоднее связать величину шрифта с высотой и шириной окна браузера. Скажем, ежели область просмотра по высоте равна 800px, то 1vh = 8px, а при ширине 1500px — 1vw = 15px.
Единицы vmin и vmax определяются соответственно минимальными и максимальными размерами области по высоте и ширине. Образец: высота окна браузера 700px, а ширина — 1300px. В этом случае vmin = 7px, а vmax = 13px.
При установке размеров нужно обязательно указывать единицы (например, height: 55px), иначе браузер некорректно будет отображать соответствующие элементы. Значения, равные нулю, к данному правилу не относятся, их можно обозначать двумя способами (padding: 0 или padding: 0px), по понятным причинам с подавляющим преимуществом лидирует первый вариант.
Проценты
Этот вид единиц я решил упомянуть отдельно. Выше я уже сказал о преимуществе использования относительных значений при задании свойств. Это в полной мере относится и к процентам.
Table {width: 100%; /* Ширина таблицы в процентах */}
Записи в процентах применяются довольно часто, особенно тогда, когда необходимо установить значение относительно родителя или когда размеры находятся в зависимости от неких внешних обстоятельств. К примеру, ширина элемента, равная 100%, будет подстраиваться под экраны самых разных устройств и корректно там отображаться.
Ключевые слова
Разберем некоторые слова, которые играют роль параметров свойств и определяют то или иное положение либо внешний вид элемента. Вот несколько наглядных примеров.
1. Значения свойства text-align , которые способствуют выравниванию текста по горизонтали: center | justify | left | right | start | end. Вот пример c параметром justify :
P {text-align: justify}
Эта запись означает, что текст абзаца выравнивается одновременно по левому и правому краю :
2. CurrentColor — соответствует значению свойства color текущего элемента и указывает цвет для областей, которые по умолчанию его не получают. Допустим, контейнер с классом «bl-2» вложен в «bl-1»:
Значение currentColor определяет цвет фонаИ для обоих прописаны стили:
Bl-1 { padding: 10px; /* Поля вокруг внутреннего контейнера */ background: currentColor; /* Цвет фона */ } .bl-2 { color: blue; /* Цвет текста */ padding: 10px; /* Поля вокруг текста */ background: #ccc; /* Цвет фона */ }
Если в отношении элемента не указан цвет текста (свойство «color»), то по умолчанию текстовый фрагмент будет окрашен в черный (в большинстве популярных браузеров). В нашем примере для внешнего контейнера («bl-1») color как раз отсутствует. Вследствие этого при указании значения «currentColor» фон этого контейнера примет черный окрас :
3. Inherit — это ключевое слово в роли параметра соответствующих значений родительских элементов. Образец:
Значение inherit определяет наследование свойствИ CSS правила для него:
Bl-1 { border: 4px solid red; padding: 10px; } .bl-2 { border: inherit; padding: inherit; }
В итоге оформление рамок (border) и размеры полей (padding) перенесены с родительского блока (bl-1) на внутренний (bl-2) :
4. Initial — применяется в тех случаях, когда требуется установить исходные параметры свойств. Скажем, помогает восстановить значения, установленные браузером по умолчанию, либо определить начальные параметры, которые были изменены в результате наследования. Пример:
Параметры свойств CSS
Существуют самые разнообразные значения, которые определяют те или иные стили, определяющие внешний вид элементов на веб-странице.
Читайте подробности далее
И стили для него:
H2 { color: #2e15d1; font-family: Verdana, sans-serif; } p { color: green; } .init { color: initial; font-family: initial; }
С помощью класса «init» внешний вид фрагмента абзаца p, заключенного в тег span, и нижнего заголовка H2, изменен в соответствии с настройками их стилей по умолчанию.
5. Unset — это параметр, являющийся по сути "гибридом" inherit и initial. Определяет параметр свойства как inherit, ежели свойство наследуется от родителя, в противном случае — как initial.
Пример 1 (действует как inherit):
Цвет текста зеленый (green) - наследует значение свойства "color" для класса "zzz"
Цвет текста красный (red) в соответствии со значением свойства "color" для тега p
P {color: red} .zzz {color: green} .xxx p {color: unset}
В соответствии с правилами CSS свойство color наследуется , поэтому «unset» в нашем примере возвращает зеленый цвет текста для контейнера «xxx», который является потомком «zzz» :
Пример 2 (работает как initial):
Цвет рамки черный - значение по умолчанию
Цвет рамки (blue - синий) задан в свойствах контейнера div
Div { border: 2px solid blue; margin-bottom: 10px; margin-top: 10px; padding: 10px; } .xxx { border-color: unset; }
Так как по правилам таблиц стилей свойство border не наследуется , то «border-color: unset» возвращает цвет рамки к значению по умолчанию, то есть она приобретает черный оттенок.
URL, или адрес
Этот параметр содержит в себе и применяется, когда нужно, например, указать к файлу с изображением (читайте с помощью HTML тега img). При этом используется ключевое слово url () , где между скобками и указывается путь до графического файла:
Body { background: url(https://сайт/images/star.jpg) no-repeat; /* Абсолютный путь */ } div { background: url(images/globus.jpg) no-repeat; /* Относительный путь */ }
Время
Используется, например, при реализации анимационных эффектов (да-да, на чистом CSS можно создавать теперь и такие вещи), где параметры указываются в секундах (s) или миллисекундах (ms). Значения могут быть как в виде целых, так и дробных чисел. При этом надо помнить, что нельзя допускать пробела между числом и единицей измерения (2s, 50ms)./p>
Рассмотрим пример.
И, соответственно, стили для него:
Loading { width: 440px; margin: auto; padding: 20px; background: #c49746; color: #fff; text-align: center; } .spin { display: inline-block; width: 70px; height: 70px; border: 10px double #ccc; border-right: 10px double transparent; border-radius: 70px; /* Анимация */ animation: spin 5s linear 0s infinite normal; } /* Устанавливаем вращение */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
На этой странице можете не только посмотреть результат, но и попытаться отредактировать некоторые свойства, так сказать, на практике, в общем, поэкспериментировать. Естественно, начинающим изучать каскадные таблицы стилей пока трудно осознать и принять к сведению тонкости анимации, но продолжение обязательно последует, поэтому подписывайтесь на свежие материалы обязательно, чтобы вовремя получить желаемое. Но продолжим.
Строки
Этот вид параметра позволяет добавлять фрагменты текста. Строки нужно обязательно заключать в кавычки (одинарные или двойные). Причем, если внутри строки требуется взять в кавычки слово или фразу, то эти виды кавычек можно комбинировать.
Скажем, ежели всю строку вы берете в одинарные кавычки, то внутренний текстовый фрагмент — в двойные, и наоборот. Разрешается также применять один и тот же вид, только в этом случае необходимо экранировать внутренние кавычки, добавляя перед ними обратный слеш «\»:
- свойство: "строка "контента""
- свойство: "строка "контента""
- свойство: "строка \"контента\""
Для начала ХТМЛ-код:
Актуальная версия статьи.
А теперь стили:
New::after { content: "обновлено"; color: red; }
Цвет
С целью обозначения цветов для свойств при составлении правил CSS могут использоваться различные параметры. Остановимся вкратце на каждом из них:
1. Название . Правда, задавать таким способом можно не все, а только часть оттенков («red» — красный, «green» — зеленый, «black» — черный, «orange» — оранжевый, «yellow» — желтый, «olive» — оливковый и некоторые другие). Их также можно отнести к ключевым словам.
P {color: green}
2. Hex (шестнадцатеричный код) . Основой шестнадцатеричной системы, в отличии от известной всем десятеричной, являются 16 символов: 10 цифр (от 0 до 9) и 6 первых букв латинского алфавита (A, B, C, D, E, F). Буквы от A до F соответствуют числам от 10 до 15.
P {color: #f8f9e3}
3.1. RGB — можно задавать значение цвета, исходя из десятеричной системы. Название данного метода является аббревиатурой трех основных задействованных в ней цветов: R ed (красный), G reen (зеленый), B lue (синий). Оттенки каждого из них находятся в диапазоне от 0 до 255. Для применения этой системы необходимо впереди прописать rgb, а в скобках указать каждый из компонентов цвета: rgb (240, 0, 180). Также не возбраняется использовать проценты:
Div { background-color: rgb (210, 0, 90); color: rgb (100%, 50%, 15%); }
3.2. RGBA — расширенный вариант предыдущего метода RGB, содержащий альфа-канал, который устанавливает прозрачность элемента в диапазоне от 0 до 1. Параметр «0» соответствует полной прозрачности, а «1» — совершенной непрозрачности.
Body {background-color: rgba (255,255,255,.9)}
4.1. HSL — наименование этого метода также представляет из себя не что иное как аббревиатуру, которая включает первые буквы трех слов: H ue (оттенок), S aturate (насыщенность) и L ightness (светлота). Именно эти характеристики в совокупности определяют конечный цвет. При этом оттенок расположен на конкретном месте цветового круга:
Поскольку весь круг составляет 360°, то каждому оттенку (hue) соответствует вполне конкретное значение в градусах в диапазоне от 0° до 359°. При этом параметры основных оттенков таковы: 0° — красный, 120° — зеленый, 240° — синий.
Насыщенность и светлота измеряются в процентах (от 0 ло 100%). Для saturate параметр 0 значит отсутствие цветовой гаммы, а 100% — максимально насыщенный цвет. Чем больше значение lightness, тем светлее тон, 0 соответствует черному, а 100% — белому.
Div {background-color: hsl(40,90%,15%)}
4.2. HSLA — по аналогии с RGBA является расширенным вариантом HSL, к которому добавлен показатель прозрачности.
Div {color: hsla(120,100%,50%,0.6)}
Угол поворота или наклона
В CSS в качестве параметров тех или иных свойств может применяться угловые характеристики (основа — круг). Вот какие единицы при этом используются:
- градусы — deg (1 полный круг составляет 360deg);
- грады — grad (полный круг 400grad);
- радианы — rad . Целый круг равен 2π (приблизительно 6.2832rad);
- повороты — turn (1 turn приравнивается к полному повороту).
Немаловажно отметить, что могут использоваться отрицательные значения . Ниже даны наглядные примеры с параметрами некоторых углов (поворотов):
Для наглядности применим характеристики поворота для реализации градиентной заливки фона и в качестве одной из составляющих нашего образца поместим на страницу определенный текст:
Градиентная фоновая заливка.
А теперь составим и правило CSS для такого фона:
Body { background: #f5e573; background: linear-gradient(-5deg, #f5e573, #f7f4db 50%, #f7f6eb); }
Результат можете оценить на этой странице и там же поупражняться, отредактировав стили по своему желанию. Это тоже будет полезным для приобретения практических навыков.
НаверхРекомендуем почитать
Лучшие программы для восстановления данных с любых носителей информации....
Здравствуйте.Одна из самых распространенных причин, по которым тормозит...
