Наверное всем известно, что HTML
задает структуру документа, а CSS
(Cascading Style Sheets, каскадные таблицы стилей) отвечает за оформление веб-страницы, положение и вид элементов. Так сложилось, что HTML и CSS отдельно не используются. Любая веб-страница это, по сути, комбинация HTML-кода и CSS-кода. Без основных знаний этих
технологий не получится грамотно сверстать ни один документ. Многие из нас изучали эти технологии подробнее. Но лично мне до конца так и не удалось «постичь» все истины и возможности CSS. Далее я постараюсь выделить самые важные моменты, которые нужно знать о CSS.
Что такое каскадные таблицы стилей?
Стили представляют собой набор параметров, управляющих видом и положением элементов веб-страницы. Посмотрите на рисунки ниже, чтобы понять разницу:
Исходный код такого документа имеет вид:
1 2 3 4 5 6 7 8 9 10 11 12 13
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns=
>
<head
>
<meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/
>
<title
>
Флексагон</
title
>
<link
rel
=
"stylesheet"
href
=
"style.ess"
type
=
"text/css"
/
>
</
head
>
<body
>
<h1
>
Флексагок</
h1
>
<р>
Флексагок представляет собой бумажную фигуру, которая имеет три и более стороны. Поначалу кажется, что это невозможно, но вспомните ленту Мёбиуса, она ведь имеет всего одну сторону, в отличие от листа бумаги, и, тем не менее, реальна. Так же реален и флексагон, который легко сделать и склеить в домашних условиях. Он выглядит как двухсторонний шестиугольник, но стоит согнуть его особым образом, и мы увидим третью сторону. Легко убедиться, что мы имеем дело именно с тремя сторонами, если раскрасить их в разные цвета. Перегибая флексагон, по очереди будем наблюдать все его поверхности.</
р>
</
body
>
</
html
>
Сам код HTML никаких изменений не претерпел и единственное добавление - это строка . Она ссылается на внешний файл с описанием стилей под именем style.css. Содержимое этого файла показано ниже:
font-size
:
llpt;
background-color
:
#f0f0f0
;
/* Цвет фона веб-страницы */
color
:
#333
;
/* Цвет основного текста */
}
h1 {
color
:
#а52
а2
а;
/* Цвет заголовка */
font-size
:
24pt
;
/* Размер шрифта в пунктах */
font-family
:
Georgia,
Times,
serif
;
/* Семейство шрифтов */
font-weight
:
normal
;
/* Нормальное начертание текста */
}
p {
text-align
:
justify
;
/* Выравнивание по ширине */
margin-left
:
бОрх;
/* Отступ слева в пикселах */
margin-right
:
Юрх;
/* Отступ справа в пикселах */
border-left
:
lpx solid
#999
;
border
-bottom
:
lpx solid
#999
;
padding
-left
:
Юрх;
padding
-bottom
:
1Opx;
}
В файле style.css
как раз и описаны все параметры оформления таких тегов как, <body
>
,
и <p
>
Заметьте, что сами теги в коде HTML пишутся как обычно. Поскольку на файл со стилем можно ссылаться из любого веб-документа, это приводит в итоге к сокращению объема повторяющихся данных. А благодаря разделению кода и оформления повышается гибкость управления видом документа и скорость работы над сайтом.
Типы стилей
Различают несколько типов стилей, которые могут совместно применяться к одному документу. Это стиль браузера, стиль автора и стиль пользователя.
Стиль браузера
. Подобные стили применяются при использовании «чистого» HTML.
Стиль пользователя.
Это стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа.
Если возникает конфликт при изменении стиля одного и того элемента документа, то стиль пользователя имеет самый высокий приоритет, далее следует стиль автора и стиль браузера.
Как добавить стили на страницу?
Добавить CSS стили на страницу можно несколькими способами:
Связанные стили
При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег . Данный тег помещается в контейнер
Стили</
title
><br>
<link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"style/mysite. ess"
/
><br>
<link
rel
=
"stylesheet"
type
=
"text/css"
<br>href
=
<span>"http://www.htmlbook.ru/main.ess"
</span> /
><br>
</
head
><br>
<body
><br>
<h1
>Заголовок</
h1
><br>
<р>Текст</
р><br>
</
body
><br>
</
html
></p>
</td>
</tr></tbody></table><p>А файл стилей будет выглядеть вот так:</p>
<table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><p>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br></p>
</td><td><p>H1 {
<br>color
:
#000080
;
<br>font-size
:
2em
;
<br>font-family
:
Arial,
Verdana,
sans-serif
;
<br>text-align
:
center
;
<span>/* Выравнивание по центру */
</span><br>}
<br>
P {
<br>padding
-left
:
20px
;
<br>}
</p>
</td>
</tr></tbody></table><p>Как видно из кода выше, на html-страницу добавляется запись, сообщающая браузеру откуда нужно получать стили. Сам <a href="/kak-podklyuchit-stilevoi-fail-k-veb-stranice-podklyuchenie-css/">стилевой файл</a> содержит только описание стилей. Такое разделение html и <a href="/programma-dlya-programmirovaniya-html-css-tak-li-vazhny-redaktory-koda/">css кода</a> облегчает разработку и сопровождение сайтов. Такому стилю верстки рекомендуется придерживаться.</p>
<h3>Глобальные стили</h3>
<p>При использовании глобальных стилей свойства CSS описываются в самом документе и располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет хранить стили в одном месте, в <a href="/vosstanovleniya-r-studio-obzor-r-studio---programmy-dlya-vosstanovleniya/">данном случае</a> прямо на странице с помощью контейнера <b><style>
</b>.Описанные в заголовке страницы стили можно использовать во всем документе (поэтому они и получили название «глобальные»). Хочется отметить, что такой подход к верстке страниц приводит к большим трудностям в сопровождении и применяется очень редко. Для примера неудачного использования такого подхода можно привести сервис ведения блогов Blogger.com . Созданные на нем блоги для оформления страниц используют как раз глобальные стили.</p>
<p>Вот пример использования глобальных стилей:</p>
<table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><p>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br></p>
</td><td><p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
</span><br><span>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
</span><br><<span>html
xmlns=
<span>"http://www.w3.org/1999/xhtml"
</span>>
</span><br><<span>head
>
</span><br><<span>meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/
>
</span><br><<span>title
>
</span>Глобальные стили<<span>/
title
>
</span><br><<span>style
type
=
"text/css"
>
</span><br>
H1 {<br>
font-size: 1.2 em;<br>
font-family: Verdana, Arial, Helvetica, sans-serif;<br>
color: #333366;<br><<span>/
style
>
</span><br><<span>/
head
>
</span><br><<span>body
>
</span><br><hl>
Hello, world!<<span>/
hl>
</span><br><<span>/
body
>
</span><br><<span>/
html
>
</p>
</td>
</tr></tbody></table><h3>Внутренние стили</h3>
<p>Внутренний или встроенный стиль является по существу расширением для <a href="/html-elementy-odinochnye-i-parnye-tegi-otkryvayushchii-i-zakryvayushchii-teg-ponyatie/">одиночного тега</a> используемого на <a href="/oficialnaya-stranica-doktor-veb-tekushchie-plaginy-i-programmy/">текущей веб-странице</a>. Для определения стиля используется атрибут <b>style
</b>, а его значением выступает набор стилевых правил. Например:</p>
<table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers">
</td><td><p><p style=
<span>"font-size: 120%; font-family: monospace;<br>
color: сd66сс"
</span>>
Пример текста</р>
</p>
</td>
</tr></tbody></table><p>Внутренние стили рекомендуется применять на сайте <b>ограниченно
</b> или <b>вообще отказаться
</b> от их использования. Дело в том, что добавление таких стилей увеличивает общий объем файлов, что ведет к повышению времени их загрузки в браузере, и усложняет редактирование документов для разработчиков.</p>
<h3>Импорт CSS</h3>
<p>В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды <b>@import
</b>.</p>
<table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><span>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
</span><br><<span>html
xmlns=
<span>"http://www.w3.org/1999/xhtml"
</span>>
</span><p><<span>head
>
</span><br><<span>meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/
>
</span><br><<span>title
>
</span>Импорт<<span>/
title
>
</span><br><<span>style
type
=
"text/css"
>
</span><br>
@import url("style/mysite.ess");<br>
H2 {<br>
font-size: 1.2 em;<br>
font-family: Arial, Helvetica, sans-serif;<br>
color: green;<br><<span>/
style
>
{
</span><br>font-family
:
Arial,
Verdana,
Helvetica,
sans-serif
;
<br>font-size
:
90%
;
<br>background
:
white
;
<br>color
:
black
;
<br>}
</p>
</td>
</tr></tbody></table><h3>Не забывайте об иерархии!</h3>
<p>При комбинированном применении <a href="/dlya-bolee-effektivnoi-kommunikacii-razlichnye-stili-kommunikacii-i/">различных стилей</a> нужно помнить об их иерархии. <b>Первым всегда применяется внутренний стиль, затем глобальный стиль и в последнюю очередь связанный стиль.
</b> Таким образом, определения одних стилей можете перекрывать другие, будьте внимательны.</p>
<h2>Что дальше?</h2>
<p>Выше уже упоминались структурные единицы <b>CSS
</b> — селекторы. Но о синтаксисе CSS нужно писать отдельную статью, поэтому я и решил вынести этот материал в отдельный пост.</p>
<p>Теперь что касается стандартов: сейчас официально принят и поддерживается стандарт CSS 2.1, а в разработке находится CSS 3, который внесет <a href="/ne-zaryazhaetsya-telefon-vozmozhnye-prichiny-i-sposoby-ih/">огромное количество</a> новшеств. О некоторых из них можно почитать в статье Будущее CSS разметки</p>
<p>Вообще, изучение приемов верстки веб-страниц это сложная тема, в которой порой приходится изучать кучу сопутствующих технологий и смиряться с особенностями реализации различных браузеров. Готовьтесь к трудностям.</p>
<p>По материалам книги Влада Моржевича «Верстка веб-страниц». Очень советую эту книгу подойдет как справочник и учебник.</p>
<p>Точное расположение объектов на странице относительно друг друга является, пожалуй, одной из самых <a href="/lending-chto-takoe-kak-sozdat-vostrebovannost-osnovnaya/">сложных задач</a> для веб-мастера. Написать HTML-код страницы так, чтобы все <a href="/tekstovye-i-graficheskie-redaktory-primery-graficheskie-redaktory-rabota-s/">графические изображения</a> и текстовые блоки были на своих местах не только на компьютере веб-мастера, но и у всех посетителей сайта, — настоящее искусство. Максимально крупный кегль, выставленный пользователем в своем браузере, может великолепное творение превратить в беспорядочное нагромождение теста и картинок.</p>
<p>Каскадные таблицы стилей (Cascading Style Sheets), декларируемые как средство <a href="/balans-na-ekrane-ot-bilaina-opisanie-kak-podklyuchit-ili-otklyuchit-polnyi/">полного контроля</a> над HTML-разметкой, представляются в свете рассматриваемой проблемы, как <a href="/nekaya-profile-powered-by-punbb-luchshie-instrumenty-dlya-kraud-marketinga/">хороший инструмент</a> для организации точного расположения объектов на странице. CSS позволяют переопределить все свойства любого тега, назначаемые по умолчанию. Становится возможным выполнять выравнивание текстового блока относительно страницы и других текстовых блоков.</p>
<p>Использование CSS открывает новые специфические возможности, аналогов которым нет с <a href="/standartnyi-html-kod-html-programmnyi-kod/">стандартном HTML</a>. Например, возможно установить межбуквенные и межстрочные расстояния для текста, точно указать положение рисунка на заднем плане без его мозаичного выкладывания по всему документу.</p>
<p>Вообще, Каскадные таблицы стилей позволяют задуматься о дизайне веб-страницы, об эстетической стороне восприятия информации пользователем, а не только об утилитарной.</p>
<p>С <a href="/preprocessor-css-obzor-vybor-primenenie-pochemu-my-stali/">применением CSS</a> растет скорость создания новой страницы. Стили, определенные один раз, могут быть использованы неограниченное число раз в любом месте документа. <a href="/kak-izmenit-nik-v-yutube-vazhnaya-professionalnaya-detal/">Важной деталью</a> является возможность задать стили в отдельном файле в виде присвоения различных свойств тегам и создании <a href="/sekrety-veb-dizaina-v-stile-kartochek-uluchshennyi-polzovatelskii-opyt/">пользовательских стилей</a>. Переопределение стилей в таком файле вызовет <a href="/otklyuchenie-avtomaticheskih-izmenenii-kak-izmenit-vid-kavychek-s/">автоматическое изменение</a> стиля отображения всех объектов, для которых применялся измененный стиль.</p>
<p>Остановимся подробнее на способах применения CSS. Существует четыре способа применения стилей:</p>
<ol><li>Переопределение стиля в элементе разметки</li>
<li>Размещение описания стиля в заголовке документа с использованием тега style</li>
<li>Размещение ссылки на <a href="/the-difference-is-6p-from-6-plus-geometry-and-appearance/">внешнее описание</a> через <a href="/nastroika-canonical-chto-eto-zachem-i-kak-rel-canonical-atribut-tega/">тег link</a></li>
<li>Импорт стиля в документ</li>
</ol><p>доступного в CSS стиля к <a href="/stek-vidy-funkciya-udaleniya-elementa-iz-steka-po-dannym-primer-steka/">данному элементу</a> разметки. При таком способе переопределения изменения коснутся только того элемента, за который отвечает <a href="/meloch-form-html-vvod-dannyh-polya-formy---teg-otpravlyaem-dannye-na/">данный тег</a> и не будут отражаться на других элементах, также выводимых этим тегом в другом месте страницы. Позволяет применить <a href="/shablony-v-microsoft-word-zachem-nuzhny-shablony-stili-i-shablony-v-tekstovom/">нужный стиль</a> к конкретному участку документа.</p>
<p>Переопределить <a href="/kak-zapolnit-fail-pdf-podborka-bystryh-reshenii-po-rabote-s/">стандартный элемент</a> разметки или создать собственный с требуемыми свойствами отображения можно с помощью парного тега style, находящегося в заголовке документа перед тегом body. Также с помощью тега style создаются произвольные классы. Их использование допускает однократно задать одинаковые свойства отображения для <a href="/chto-takoe-anime-taitl-taitl-dolzhen-otrazhat-sut-stranicy-teg/">разных тегов</a>. Удобно, например, задавать одинаковый шрифт для текста и находящихся в нем гиперссылок. Если при этом не задан цвет и стиль подчеркивания, то эти параметры останутся для гиперссылок прежними и они останутся выделенными среди обычного текста.</p>
<p>Когда одни и те же стили используются на нескольких или всех страницах сайта, не обязательно определять их в каждом html-документе. Достаточно сохранить их в отдельном файле и ссылаться на него в каждом документе с помощью тега link, стоящего в элементе head (до тега body). Атрибут rel при этом должен иметь значение «stylesheet».</p>
<p>Возможно также произвести импорт стиля в документ. Отличие от ссылки на внешнее описание в том, что импорт стиля может быть произведен внутрь элемента style или внутрь <a href="/pochemu-kopiruyutsya-faily-bolshe-4-gb-ne-poluchaetsya-skopirovat-fail-na/">внешнего файла</a> с описанием стилей, задаваемого в теге link. Таким образом можно создать внешний файл для внешнего файла. Инструкция импорта стиля ставится перед всеми остальными описателями стилей, что делает возможным легко переопределить импортируемый стиль.</p>
<p>Но у любой технологии есть свои недостатки. Есть они и у технологии CSS. Точнее, больше всего недостатков видится в применении CSS. Это обусловлено неполной совместимостью CSS с различными браузерами даже последних версий и возникающего из-за этого отсутствия пропагандируемой в CSS точности отображения страницы в <a href="/kak-ochistit-cookies-v-raznyh-brauzerah-kak-pochistit-cookies-kuki-v/">различных браузерах</a>. Импорт стиля, например, поддерживается далеко не всеми браузерами. По этой причине многие веб-мастеры пока еще опасаются применения всех <a href="/svg-skript-randomnogo-izmeneniya-cveta-stilizaciya-svg-s-pomoshchyu-css-vozmozhnosti-i/">возможностей CSS</a> используя только некоторые.</p>
<p>Блокировка кегля шрифта при отображении текста в браузере позволяет приобрести уверенность в точном расположении всех элементов страницы на компьютере пользователя, но лишает пользователя возможности пользователя выбрать удобный для чтения размер шрифта самостоятельно. Такой подход является, по существу, неуважением к посетителю сайта.</p>
<p>Часто про CSS говорят, что с их помощью легко менять дизайн всего сайта сразу. Для этого достаточно переопределить стили в файле стилей. Но настоящий дизайнер, решившийся на изменение дизайна сайта, никогда не остановится только на переделке отображения шрифтов.</p>
<p>Каскадные таблицы стилей — перспективная технология. Но многие веб-мастеры пока еще ограничиваются только применением CSS для изменения цвета гиперссылки при подведении к ней указателя мыши.</p>
<p>Хорошо
Плохо
</p>
<p>В нашем курсе мы рассмотрим уроки CSS - т.е. уроки технологии, одной из самой важной при верстке веб-страниц.</p>
<p>В этом уроке мы оформим нашу web-страничку, чтобы она стала более разноцветной (рисунок 1).</p>
<p>Рисунок 1</p>
<p>Прежде, чем перейти к оформлению страниц, изучим, как задается цвет в web</p>
<h3>1. Определение цветов. Уроки CSS</h3>
<p>При определении цветов для документа HTML можно использовать либо названия цветов, либо их шестнадцатеричные коды. Система шестнадцатеричного кодирования основана на трех компонентах - красном (Red), зеленом (Green) и синем (Blue), отсюда и ее название RGB, по первым буквам названий этих цветов. Каждый из компонентов соответствует <a href="/perevesti-shestnadcaterichnoe-chislo-v-dvoichnoe-onlain-perevod-chisel-iz-odnoi/">шестнадцатеричному числу</a> от 00 до FF (0 и 255 в <a href="/kak-perevodit-chisla-iz-desyatichnoi-sistemy-perevod-chisel-v-dvoichnuyu/">десятичной системе</a> счисления). Эти три значения затем объединяются в одно значение, которому предшествует знак #, например #800080, что соответствует фиолетовому цвету.</p>
<p>В таблице приведены названия некоторых цветов и их коды. Более <a href="/tablica-integralov-polnaya-dlya-studentov-28-sht-pervoobraznaya/">полные таблицы</a> цветов и их коды можно просмотреть в папке <b>colors
</b>, расположенной в папке <b>CD
</b>.</p>
<table border="0" cellspacing="0" cellpadding="0" style="width: 100%; background-color: #ffffff;"><tbody><tr><td style="width: 30%;">
<p><b>Цвет
</b></p>
</td>
<td style="width: 20%;">
</td>
<td style="width: 30%;">
<p><b>Цвет
</b></p>
</td>
<td style="width: 20%;">
</td>
</tr><tr style="background-color: #eeeeee;"><td>
<p>Black (черный)</p>
</td>
<td>
</td>
<td>
<p>Silver (серебряный)</p>
</td>
<td>
</td>
</tr><tr><td>
<p>Maroon (темно-бордовый)</p>
</td>
<td>
</td>
<td>
<p>Red (красный)</p>
</td>
<td>
</td>
</tr><tr style="background-color: #eeeeee;"><td>
<p>Green (зеленый)</p>
</td>
<td>
</td>
<td>
<p>Lime (известь)</p>
</td>
<td>
</td>
</tr><tr><td style="width: 210px;">
<p>Olive (оливковый)</p>
</td>
<td style="width: 200px;">
</td>
<td style="width: 180px;">
<p>Yellow (желтый)</p>
</td>
<td style="width: 200px;">
</td>
</tr><tr style="background-color: #eeeeee;"><td style="width: 210px;">
<p>Navy (темно-синий)</p>
</td>
<td style="width: 200px;">
</td>
<td style="width: 180px;">
<p>Blue (синий)</p>
</td>
<td style="width: 200px;">
</td>
</tr><tr><td style="width: 210px;">
<p>Purple (фиолетовый)</p>
</td>
<td style="width: 200px;">
</td>
<td style="width: 180px;">
<p>Fuchia (фуксия)</p>
</td>
<td style="width: 200px;">
</td>
</tr><tr style="background-color: #eeeeee;"><td style="width: 210px;">
<p>Teal (темно-зеленый)</p>
</td>
<td style="width: 200px;">
</td>
<td style="width: 180px;">
</td>
<td style="width: 200px;">
</td>
</tr><tr><td style="width: 210px;">
<p>Gray (серый)</p>
</td>
<td style="width: 200px;">
</td>
<td style="width: 180px;">
<p>White (белый)</p>
</td>
<td style="width: 200px;">
</td>
</tr></tbody></table><p><b><i>Таблица <a href="/kody-cvetov-na-russkom-uchebnik-html-cveta-rgb-cveta-bezopasnoi/">безопасных цветов</a> для разработки дизайна сайта
</i>
</b></p>
<p>Безопасная палитра цветов обеспечивает наиболее точное соответствие отображения на различных мониторах.</p>
<p>Безопасная палитра состоит из 216 цветов. Безопасные цвета всегда неизменные при переходе от одного браузера к другому или от одной платформы к другой, от одного монитора к другому с их различными возможностями цветоотображения и разрешениями.</p>
<p>Если любое из трех шестнадцатеричных значений отличается от 00, 33, 66, 99, СС или FF, то цвет не является безопасным.</p>
<p>Таблицу безопасных цветов можно просмотреть в папке <b>CD
</b><b>/
</b><b>colors
</b>.</p>
<h3>2. Определение CSS</h3>
<p>Наша web-страница пока не имеет оформления, которое можно осуществлять двумя способами:</p>
<ul><li>первый - средствами <b><i>таблиц стилей
</i>
</b><b><i>CSS
</i>
</b> (более прогрессивный и правильный метод),</li>
<li>второй - средствами <b><i>атрибутов у тегов
</i>
</b><b><i>HTML
</i>
</b>.</li>
</ul><p>Начнем сразу с более прогрессивного метода.</p>
<p><b>CSS - Cascading Style Sheets
</b> (иерархические стилевые спецификации или каскадные таблицы стилей) не заменяют языка разметки, являются самостоятельной технологией, которая применяется к тегу HTML.</p>
<p><b><i>Назначение:
</i>
</b> позволяет автоматически изменить <a href="/vstroennye-tablicy-v-html-dokumentah-vstraivanie-stilei-v-html/">стиль HTML</a> элемента на всех страницах сайта. Например, мы используем на десяти web-страницах заголовок H1, который должен быть зеленого цвета. При использовании таблиц стилей нам придется только один раз указать <a href="/perenosnoi-signal-kvadratnogo-shchita-zelenogo-cveta-ploskii-ekran-shchit/">зеленый цвет</a> и он применится сразу на десяти страницах.</p>
<p><b><i>Обратная ситуация:
</i>
</b> мы с помощью атрибутов HTML задали на десяти web-страницах всем заголовкам H1 зеленый цвет, т.е. прописали его десять раз. Затем решили изменить цвет заголовка на красный, тогда нам придется десять раз исправить зеленый цвет на красный.</p>
<p>При использовании же таблицы стилей нам придется только один раз это сделать, изменив зеленый цвет заголовка на красный в самой таблице стилей, и он автоматически изменится на всех десяти web-страницах.</p>
<p>Таблица стилей включает набор CSS-элементов, структура которых отличается от структуры HTML-элемента.</p>
<p><b>Синтаксис
</b><b>CSS
</b><b>-элемента
</b></p>
<p><b>селектор {свойство 1: значение; свойство 2: значение; … свойство N: значение}
</b>
</p>
<p>Вначале пишется имя селектора, например, h1, это означает, что все стилевые свойства будут применяться к тегу <h1>, затем идут фигурные скобки, в которых записывается стилевое свойство, а его значение указывается после двоеточия. Стилевые свойства со значениями разделяются между собой точкой с запятой, в конце этот символ можно опустить.</p>
<p>Стилевых свойств со значениями может быть сколько угодно много, их последовательность значения не имеет.</p>
<p><b><i>CSS не чувствителен к регистру, переносу строк, пробелам и <a href="/simvol-tabulyacii-chr-kodirovka-ascii-american-standard-code-for-information-interchange---bazovaya/">символам табуляции</a>,
</i>
</b> поэтому форма записи зависит от желания разработчика.</p>
<p><i>Например
</i><i>:
</i></p>
<p><b>h1 {font-family:Arial; font-size:14pt}
</b></p>
<p>или тот же самое можно записать так:</p>
<p><b> font-family:Arial;
</b></p>
<p><b> font-size:14pt
</b></p>
<p>В этом примере:</p>
<ul><li>h1 - селектор, в данном случае HTML-элемент,</li>
<li>font-family и font-size - стилевые свойства,</li>
<li>Arial - значение свойства font-family,</li>
<li>14pt - значение свойства font-size.</li>
</ul><p><b>Способы включения таблиц стилей в HTML-документ
</b></p>
<ol><li>Внешняя таблица стилей (связанный стиль).</li>
<li>Внедренная таблица стилей (глобальный стиль).</li>
<li>Внутренние стили.</li>
</ol><h3>3. Внешняя таблица стилей CSS (связанный стиль)</h3>
<p>Определяет стиль всего сайта.</p>
<p>Является текстовым файлом с расширением css.</p>
<p><link rel="stylesheet" href="style.css" type="text/css" /></p>
<p>В данном примере таблица стилей написана в текстовом файле style.css.</p>
<p><b>Практическое задание 1
</b>
</p>
<p>1. Откройте чистый документ в Notepad++ и сохраните его в папке <b>public_html
</b> под именем <b>style
</b><b>.
</b><b>css
</b>. Обратите внимание, чтобы в поле <b>Тип файла
</b> было установлено <b>All types
</b> (рисунок 2).</p>
<p><img src='https://i1.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_html_css/images_html_css/2.2.jpg' width="100%" loading=lazy></p>
<p>Рисунок 2</p>
<p>2. Так как CSS - это другая технология, то теги HTML в файле.css не пишутся вообще. Оформим наш заголовок «Каталог архитектурных проектов» в файле <b>main
</b><b>.
</b><b>html
</b> с выравниванием по центру, синим цветом, шрифтом Verdana, высотой шрифта 20 pt. Для этого в файле css сделаем следующую запись (рисунок 3):</p>
<p>Рисунок 3</p>
<p>В наших уроках CSS давайте разберем, что здесь написано согласно синтаксису CSS-элемента, о котором мы говорили выше в этом уроке.</p>
<ul><li>h1 - селектор, т.е. <a href="/parametry-css-width-i-height-dlya-zadaniya-razmerov-elementov-html-stranicy/">элемент html</a>, к которому применяется стиль;</li>
<li>text-align:center; - стилевое свойство text-align (выравнивает текст) со значением center (по центру);</li>
<li>color:#0000FF; - стилевое свойство color (цвет текста) со значением <a href="/chto-takoe-filtr-sinego-cveta-v-planshete-kompyuternaya-programma-filtr-sinego/">синего цвета</a> #0000FF (значение взято из таблицы цветов);</li>
<li>font-family:Verdana; - стилевое свойство гарнитуры шрифта font-family со значением Verdana;</li>
<li>стилевые свойства со значениями разделены между собой точкой с запятой;</li>
<li>и так далее, все согласно синтаксису.</li>
</ul><p>Чтобы наша web-страница «увидела» таблицу стилей и применила свойства к html-элементам, необходимо установить связку между файлом <b>main
</b><b>.
</b><b>html
</b> и <b>style
</b><b>.
</b><b>css
</b>. Для этого откройте файл main.html и между тегами <b><
</b><b>head
</b><b>>
</b> и <b></
</b><b>head
</b><b>>
</b> вставьте конструкцию <b><link rel="stylesheet" href="style.css" type="text/css" />,
</b><b>как
</b> на рисунке 4.</p>
<p><img src='https://i0.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_html_css/images_html_css/2.4.jpg' width="100%" loading=lazy></p>
<p>Рисунок 4</p>
<p>3. Просмотрите результат в браузере. Он должен совпадать с рисунком 5.</p>
<p><img src='https://i0.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_html_css/images_html_css/2.5.jpg' width="100%" loading=lazy></p>
<p>Рисунок 5</p>
<p>В данном уроке CSS мы рассмотрим где взять названия стилевых свойств и их значений? Для этого также существуют специальные справочники и спецификация (папка Справочник CSS). Для начала используйте в качестве справки небольшой справочник <b>Sprav_CSS.doc
</b>.</p>
<p>4. Зададим стиль заголовку h2 «Проекты для Вашего будущего дома» с выравниванием по правому краю, бордового цвета, шрифтом Verdana, высотой шрифта 16 pt. Для этого в файле <b>style
</b><b>.
</b><b>css
</b> <b>h
</b><b>2
</b> (рисунок 6).</p>
<p>Рисунок 6</p>
<p>5. Проверьте результат в браузере, он должен совпадать с рисунком 7.</p>
<p><img src='https://i1.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_html_css/images_html_css/2.7.jpg' width="100%" loading=lazy></p>
<p>Рисунок 7</p>
<p>6. Абзацы оформим с выравниванием по ширине, темно-синего цвета, шрифтом Arial, высотой шрифта 12 pt. Для этого в файле <b>style
</b><b>.
</b><b>css
</b> сделаем следующую запись для селектора <b>p
</b> (рисунок 8).</p>
<p>Рисунок 8</p>
<p>7. Также сделаем светло-голубым цветом фон всей web-страницы. Для этого для селектора <b>body
</b> добавим запись (рисунок 9)</p>
<p>Рисунок 9</p>
<p>8. Просмотрите результат в браузере. Он должен совпадать с рисунком 10.</p>
<p><img src='https://i0.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_html_css/images_html_css/2.10.jpg' width="100%" loading=lazy></p>
<p>Рисунок 10</p>
<p>Думаю из данного урока CSS, принцип использования внешней таблицы стилей понятен. Для того, чтобы легко и красочно оформлять свои
<b>web
</b>-странички, надо по справочнику изучать стилевые свойства и их значения и пробовать на практике. Чем больше Вы помните таких свойств и значений без обращения к справочнику, тем выше Ваш профессионализм.
</p>
<p><b>Исследовательские задания
</b></p>
<ol><li>Используя справочник <b>Sprav_CSS.doc,
</b> оформите стилями заголовок <b><
</b><b>h
</b><b>3>
</b> в файле main.html. Свойства стилей на выбор.</li>
<li>Для списка «Проекты домов», используя стили, измените арабские цифры на римские. Остальные параметры по желанию.</li>
<li>Для списка «Площади домов» в качестве маркера примените изображение <b>spisok_1.gif
</b> из папки <b>html_css_2
</b>. Остальные параметры по желанию.</li>
<li>В качестве фона web-страницы примените через стили изображение <b>fon9.jpg
</b> из папки <b>html_css_2
</b>.</li>
<li>С использованием стилей сделайте шрифт абзацев полужирным.</li>
</ol><p>Примерный результат на рисунке 11.</p>
<p><img src='https://i2.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_html_css/images_html_css/2.11.jpg' width="100%" loading=lazy></p>
<p>Рисунок 11</p>
<h3>4. Классы в стилевых спецификациях</h3>
<p>В нашем уроке CSS мы рассмотрим классы в стилевых спецификациях применяются в том случае, если необходимо определить несколько разновидностей стиля одного элемента. При определении класса к <a href="/v-pamyat-o-keywords-dlya-chego-nuzhen-meta-teg-keywords-pochemu-on-ne-rabotaet-i/">нужному тегу</a> добавляется произвольное <a href="/kak-podobrat-domennoe-imya-dolzhno-byt-unikalnym-pravilo-2/">уникальное имя</a> класса, отделяемое точкой.</p>
<p>Например, у нас в тексте есть несколько заголовков <b>h
</b><b>1
</b> и нам необходимо, чтобы они были разного цвета. Тогда разделить стили надо следующим образом</p>
<p><i>h1.golub{color:blue}
</i></p>
<p><i>h1.krasn{color:red}
</i></p>
<p><i>h1.zelen{color:green}
</i></p>
<p>После точки идет имя класса, которое должно быть уникальным и не может состоять только из цифр.</p>
<p>Теперь при использовании тега <b><
</b><b>h
</b><b>1>
</b> в документе необходимо установить атрибут <b>class
</b>, чтобы указать, какой именно стиль нужно применить:</p>
<p><i><
</i><i>h
</i><i>1
</i><i> class
</i><i>="
</i><i>golub
</i><i>">
</i><i>
</i><i>Это голубой заголовок
</i><i>
</i><i></
</i><i>h
</i><i>1>
</i></p>
<p><i><
</i><i>h
</i><i>1
</i><i> class
</i><i>="
</i><i>krasn
</i><i>">
</i><i>
</i><i>Это красный заголовок
</i><i>
</i><i></
</i><i>h
</i><i>1>
</i></p>
<p><i><
</i><i>h
</i><i>1
</i><i> class
</i><i>="
</i><i>zelen
</i><i>">
</i><i>
</i><i>Это зеленый заголовок
</i><i>
</i><i></
</i><i>h
</i><i>1>
</i></p>
<p><b>Практическое задание 2
</b>
</p>
<p>1. Откройте файл <b>shablon
</b><b>.
</b><b>html
</b>. Сохраните его под новым именем <b>ploshady
</b><b>.
</b><b>html
</b>в папке <b>public_html
</b>.</p>
<p>2. Напишите между тегами <title> и новый заголовок «Площади домов».
3. В содержимое
скопируйте текст из файла Площади домов.txt
из папки html
_
ccs
_2
.
4. Стили будем писать в том же файлеstyle
.
css
, который у нас создан в предыдущем уроке. Поэтому в файле ploshady
.
html
установите связку с этой таблицей стилей, вставив между тегами
и (рисунок 12)
Рисунок 12
5. Отформатируйте заголовки тегом
и присвойте каждому заголовку свой класс (рисунок 13).
Рисунок 13
Ваш файл ploshady
.
html
сейчас должен выглядеть следующим образом (рисунок 14).
Рисунок 14
6. В таблице стилей style
.
css
создайте следующую запись (рисунок 15)
Рисунок 15
7. Проверьте web-страницу в браузере. Результат на рисунке 16.
Рисунок 16
8. Вы, наверно, заметили, что в нашей новой записи стилей заголовков есть повторяющиеся конструкции font-family:Verdana; text-align:left; font-size:14pt.
Такие конструкции можно записывать один раз, сгруппировав селекторы, к которым они применены. Для этого, надо перечислить селекторы через запятую, а затем в фигурных скобках прописать общие свойства. Тогда наша таблица стилей для заголовков будет выглядеть следующим образом (рисунок 17):
Рисунок 17
Практическое задание 3
Под каждый заголовком в файле ploshady
.
html
есть текст. Отформатируйте абзацы с использованием различных классов. Используйте разные цвета, выравнивание и гарнитуру шрифтов. Имена классов должны быть уникальными. Нежелательно использование одинаковых имен для разных селекторов. Один из возможных вариантов на рисунке 18:
Рисунок 18
5. ID-стиль для специфического элемента
Уроки CSS включают изучение так называемых id-стилей.
Любому элементу можно присвоить идентификаторid
, а затем поставить в соответствие этому элементу какой-либо стиль, используя id
.
Например:
Запись в файле таблиц стилей будет следующая
#
test
{
color
:#00
ffff
}
Теперь можно поставить этот стиль в соответствие любому элементу в документе html:
...
...
В этом примере слово test - имя стиля. Имя может быть произвольным из латинских букв, но оно должно быть уникальным, т.е. ни один элемент в таблице стилей не должен больше иметь такое имя.
Практическое задание 4
Сделаем заготовку для будущего меню нашего сайта.
1. Откройте файл shablon
.
html
и сохраните его под новым именем menu
.
html
в папке public_html.
2. В содержимое страницы файла menu
.
html
внесите текст из файла menu
.
txt
из папкиhtml
_
css
_2
.
3. Средствами html-тегов отформатируйте файл следующим образом:
для заголовков «Категории проектов», «Каталог архитектурных проектов» и «Площади домов» используйте тег
;
для списка «Категории проектов» используйте нумерованный список ;
для списков «Каталог архитектурных проектов» и «Площади домов» используйте маркированный список
4. Вверху web-страницы вставьте логотип (файл logo_myhouse.gif
). Результат должен совпасть с рисунком 19.
Рисунок 19
5. Для этого меню сделаем отдельную таблицу стилей под именем style
_
menu
.
css
.
Установите связку между файлом menu
.
html
и таблицей стилей style
_
menu
.
css
, вставив запись между тегами
и в файле menu
.
html
.
6. Создайте чистый документ и сохраните его под именем style
_
menu
.css
в своей папке.
7. Для группы «Категории проектов», в которую входит заголовок и нумерованный список и для группы «Каталог архитектурных проектов», в которую входит сам заголовок и маркированный список будем использовать имя id-стиля blue
. Т.е. код будет выглядеть следующим образом (рисунок 20):
Рисунок 20
8. В файле style
_
menu
.
css
стиль для этих элементов сделаем темно-синего цвета, шрифтом Tahoma (рисунок 21):
Рисунок 21
9. Для группы «Площади домов», в которую входит заголовок и маркированный список, будем использовать имя id-стиля brown
. Т.е. код будет выглядеть следующим образом (рисунок 22):
Рисунок 22
10. В файле style
_
menu
.
css
стиль для этих элементов сделаем коричневого цвета, шрифтом Times (рисунок 23):
Рисунок 23
11. И добавим еще цвет фона файлу menu.html (рисунок 24)
Рисунок 24
12. В результате получим следующую web-страницу (рисунок 25)
Рисунок 25
В результате выполнения этого урока CSS, у Вас должны быть созданы следующие файлы:
style
.
css
style
_
menu
.
css
ploshady
.
html
menu
.
html
Здравствуйте уважаемые читатели блога сайт. После блока статей посвященных HTML я решил познакомить вас с CSS, так как средств разметки недостаточно для оформления документов. И вообще, изучение HTML это лишь первый этап в процессе обучения созданию сайтов, следующим шагов является изучение CSS. Так давайте же узнаем что такое CSS и зачем они нужны
.
Если посмотреть страницы с чистым HTML, то они выглядят невзрачно. Однообразный текст, таблицы без рамок, тоскливая черно-белая расцветка... Конечно, сделать страницы сайта ярче можно и средствами html, но такой подход только загромождает исходный код и не предоставляет никакой гибкости. Поэтому в современной верстке за внешнее оформление страниц сайта отвечает язык стилевой разметки CSS
или просто таблица стилей.
Каскадные таблицы стилей
(так расшифровывается аббревиатура CSS — Cascading Style Sheets) представляют собой набор параметров(стилей), описывающих оформление самой web-страницы и отдельных ее элементов. Эти параметры определяют фон страницы, цвет текста, выравнивание абзацев, параметры рамки таблицы и многое другое.
Таким образом с помощью языка HTML вы формируете структуру web-страниц, например задаете . А с помощью правил CSS вы задаете то, как эти элементы html-документа будут отображаться в браузере. То есть задаете тип и цвет шрифта, выравнивание текста, цвет фона элементов, различные отступы и др. Причем одно правило CSS может влиять на визуальное представление сразу нескольких элементов веб-страницы.
Поэтому минимальные знания возможностей каскадных таблиц стилей скорей всего потребуются вам как при создании сайта с нуля, так и при внесении изменений в уже существующий проект. В первую очередь эти знания понадобятся при работе над дизайном сайта.
Добавление стилей или как подключить CSS к HTML документу
Прежде чем говорить о синтаксисе или о свойствах каскадных таблиц стилей, необходимо научиться подключать их к html документу. Всего существует три способа подключения css к html.
1. Первый способ заключается в размещении стилей в отдельном файле или нескольких файлах с расширением.css. В этом случае для подключения CSS стилей используется link
, в котором прописан путь до внешнего файла стилей. Помещается этот метатег в раздел заголовков соответствующей веб страницы между тегами head. Вот формат его написания:
Путь до файла стилей записывается в качестве значения атрибута href. Атрибут rel указывает браузеру чем является файл на который ссылается тег link. Значение «stylesheet» говорит о том, что этот файл внешняя таблица стилей. В атрибут type указывается тип MIME файла. Для внешней таблицы стилей тип MIME «text/css».
Так примерно будет выглядеть строчка подключения стилей CSS в html коде:
... .css"/>
...
Преимущество этого способа состоит в том, что внешнюю таблицу стилей
можно привязать сразу к нескольким веб страницам.
2. Второй способ заключается в написании так называемых глобальных стилей
, которые прописываются прямо в html коде веб-страницы. Их заключают в парный тег style
и обычно помещают в секцию заголовка между тегами head:
...
...
Недостаток этого способа в том, что правила CSS глобальных стилей применяются только к той веб-странице, в которой они прописаны.
3. Третий способ это так называемые встроенные или внутренние стили. Для этого просто в требуемый html тег нужно поместить атрибут Style
, который включает в себя в качестве параметров набор CSS свойств:
Абзац с серым фоном и красным текстом
Причем свойства заданные в атрибуте style применяются только к одному элементу html. Обычно этот способ подключения стилей применяют на этапе отладки дизайна сайта, а затем переносят полученные CSS свойства в файл с внешними стилями.
Селектор {
Свойство: Значение;
Свойство: Значение;
...
Свойство: Значение
}
Т.е. правило стиля включает в себя селектор стиля и список свойств стиля с их значениями в фигурных скобках(«{» и «}»):
селектор
используется для привязки к элементам web-страницы, на которые он должен распространять свое действие;
пары «Свойство: Значение» разделяются символом точкой с запитой(«;») и их может быть сколь угодно много;
между последней парой «Свойство: Значение» и закрывающей фигурной скобкой символ точка с запитой можно не ставить;
свойство стиля
представляет из себя один из параметров элемента html страницы: цвет текста, гарнитура шрифта, величина отступов;
пробелы и переводы строк при написании правил css не критичны, браузер их игнорирует, поэтому можно оформлять код так как вам захочется;
так же код не чувствителен к регистру символов.
Чтобы было понятней рассмотрим несколько примеров.
Разберем данное CSS правило:
body — это селектор, который представляет из себя имя тега ;
background — свойство стиля, с помощью которого задаются параметры фона;
#0000FF — значение свойства стиля background, которой представляет из себя код цвета в формате RGB.
В итоге данный стиль применится к элементу body web страницы и окрасит фон страницы в заданный цвет. Рассмотренный стиль называется стилем переопределения тега
, потому что в качестве селектора указано имя тега без символов < и >.
Рассмотрим еще пример:
h1 {
font-size: 24px;
color: green;
}
Этот стиль говорит о том, что браузер выведет любой текст помещенный в теги
зеленым цветом и задаст ему размер шрифта 24 пикселя.
В качестве селектора тега, кроме имени тега, можно указывать класс
:
Yellowtext {color:yellow}
Имя класса должно состоять из букв латинского алфавита, цифр и дефисов и начинаться должно с буквы. А в определении CSS правила перед именем класса должна стоять точка, означающая что определяется стилевой класс. Данный стиль будет применен ко всем тегам, у которых будет задан атрибут class
и его значение будет равно имени стилевого класса без точки
:
В этом абзаце оранжевый текст
В примере мы привязали к тегу
Css правило с помощью имени класса yellowtext. В результате текст в данном абзаце будет отображен оранжевым цветом.
В качестве значения атрибута clsss можно задавать несколько имен стилевых классов, разделив их пробелами. В этом случае действие стилевых классов сложится:
Cursivtext {font-style: italic}
желтый текст курсивом
В этом примере к тегу
Мы привязали сразу два класса: yellowtext и cursivtext. В результате содержимое тега отобразится желтым цветом и курсивным шрифтом.
Кроме классов в качестве селектора правила css можно использовать идентификатор
, который определяет уникальное имя элемента. Здесь все также как и в случае со стилевыми классами, только есть несколько отличий:
в селекторе правила CSS, также задается имя идентификатора, только вместо точки перед его именем ставят символ решетки «#»;
привязка к html элементу осуществляется через атрибут id
, в качестве значения которого устанавливают имя стиля без знака решетки;
значение атрибута id должно быть уникальным в пределах страницы, то есть в html коде может только один элемент с заданным значение атрибута id, иначе код будет не валидным.
Рассмотрим пример для ясности:
#textcenter{text-align: center;}
Текст по центру
К элементу p (абзац) с помощью атрибута id привязывается правило css, которое выравнивает текст по центру страницы. На странице больше не допускается создавать элементы с таким значением атрибута id, иначе html код будет не валидным.
Кроме рассмотренных способов описания стилей, css позволяет создавать комбинированные стили
и задавать сразу несколько одинаковых стилей. Посмотрим пример:
h1.redtext, p strong {color: red}
В примере через запятую указано два селектора: «h1.redtext» и «p strong». Первый селектор говорит о том, что во всех элементах h1 у которых значение атрибута class буде эквивалентно redtext, текст будет отображаться красным цветом. Во втором селекторе произойдет тоже самое для всех элементов strong, которые вложены в тег p:
Этот заголовок отображается красным цветом
обычный текст, красный текст
CSS (Cascading Style Sheets), или каскадные таблицы стилей
, используются для описания внешнего вида документа, написанного языком разметки. Обычно CSS-стили используются для создания и изменения стиля элементов веб-страниц и пользовательских интерфейсов, написанных на языках HTML и XHTML, но также могут быть применены к любому виду XML-документа, в том числе XML, SVG и XUL.
Каскадные таблицы стилей описывают правила форматирования элементов с помощью свойств и допустимых значений этих свойств. Для каждого элемента можно использовать ограниченный набор свойств, остальные свойства не будут оказывать на него никакого влияния.
Объявление стиля состоит из двух частей: элемента веб-страницы — селектора
, и команды форматирования — блока объявления
. Селектор сообщает браузеру, какой именно элемент форматировать, а в блоке объявления (код в фигурных скобках) перечисляются форматирующие команды — свойства и их значения.
Рис. 1. Структура объявления CSS-стиля
Виды каскадных таблиц стилей и их специфика
1. Виды таблиц стилей
1.1. Внешняя таблица стилей
Внешняя таблица стилей
представляет собой текстовый файл с расширением.css , в котором находится набор CSS-стилей элементов. Файл создаётся в редакторе кода, так же как и HTML-страница. Внутри файла могут содержатся только стили, без HTML-разметки. Внешняя таблица стилей подключается к веб-странице с помощью тега , расположенного внутри раздела
. Такие стили работают для всех страниц сайта.
К каждой веб-странице можно присоединить несколько таблиц стилей, добавляя последовательно несколько тегов , указав в атрибуте тега media назначение данной таблицы стилей. rel="stylesheet" указывает тип ссылки (ссылка на таблицу стилей).
Атрибут type="text/css" не является обязательным по стандарту HTML5, поэтому его можно не указывать. Если атрибут отсутствует, по умолчанию используется значение type="text/css" .
1.2. Внутренние стили
Внутренние стили
встраиваются в раздел
HTML-документа и определяются внутри тега . Внутренние стили имеют приоритет над внешними, но уступают встроенным стилям (заданным через атрибут style).
...
1.3. Встроенные стили
Когда мы пишем встроенные стили
, мы пишем CSS-код в HTML-файл, непосредственно внутри тега элемента с помощью атрибута style:
Обратите внимание на этот текст.
Такие стили действуют только на тот элемент, для которого они заданы.
1.4. Правило @import
Правило @import
позволяет загружать внешние таблицы стилей. Чтобы директива @import работала, она должна располагаться в таблице стилей (внешней или внутренней) перед всеми остальными правилами:
Правило @import также используется для подключения веб-шрифтов:
Селекторы
представляют структуру веб-страницы. С их помощью создаются правила для форматирования элементов веб-страницы. Селекторами могут быть элементы, их классы и идентификаторы, а также псевдоклассы и псевдоэлементы.
2.1. Универсальный селектор
Соответствует любому HTML-элементу. Например, * {margin: 0;} обнулит внешние отступы для всех элементов сайта. Также селектор может использоваться в комбинации с псевдоклассом или псевдоэлементом: *:after {CSS-стили} , *:checked {CSS-стили} .
2.2. Селектор элемента
Селекторы элементов позволяют форматировать все элементы данного типа на всех страницах сайта. Например, h1 {font-family: Lobster, cursive;} задаст общий стиль форматирования всех заголовков h1 .
2.3. Селектор класса
Селекторы класса позволяют задавать стили для одного и более элементов с одинаковым именем класса, размещенных в разных местах страницы или на разных страницах сайта. Например, для создания заголовка с классом headline необходимо добавить атрибут class со значением headline в открывающий тег
и задать стиль для указанного класса. Стили, созданные с помощью класса, можно применять к другим элементам, не обязательно данного типа.
Селектор идентификатора позволяет форматировать один
конкретный элемент. Идентификатор id должен быть уникальным и на одной странице может встречаться только один раз.
#sidebar {
width: 300px;
float: left;
}
2.5. Селектор потомка
Селекторы потомков применяют стили к элементам, расположенным внутри элемента-контейнера. Например, ul li {text-transform: uppercase;} — выберет все элементы li , являющиеся потомками всех элементов ul .
Если нужно отформатировать потомки определенного элемента, этому элементу нужно задать стилевой класс:
p.first a {color: green;} — данный стиль применится ко всем ссылкам, потомкам абзаца с классом first ;
p .first a {color: green;} — если добавить пробел, то будут стилизованы ссылки, расположенные внутри любого тега класса.first , который является потомком элемента
First a {color: green;} — данный стиль применится к любой ссылке, расположенной внутри другого элемента, обозначенного классом.first .
2.6. Дочерний селектор
Дочерний элемент является прямым потомком содержащего его элемента. У одного элемента может быть несколько дочерних элементов, а родительский элемент у каждого элемента может быть только один. Дочерний селектор позволяет применить стили только если дочерний элемент идёт сразу за родительским элементом и между ними нет других элементов, то есть дочерний элемент больше ни во что не вложен.
Например, p > strong — выберет все элементы strong , являющиеся дочерними по отношению к элементу p .
2.7. Сестринский селектор
Сестринские отношения возникают между элементами, имеющими общего родителя. Селекторы сестринских элементов позволяют выбрать элементы из группы элементов одного уровня.
h1 + p — выберет все первые абзацы, идущие непосредственно за любым тегом
, не затрагивая остальные абзацы;
h1 ~ p — выберет все абзацы, являющиеся сестринскими по отношению к любому заголовку h1 и идущие сразу после него.
2.8. Селектор атрибута
Селекторы атрибутов выбирают элементы на основе имени атрибута или значения атрибута:
[атрибут] — все элементы, содержащие указанный атрибут, — все элементы, для которых задан атрибут alt ;
селектор[атрибут] — элементы данного типа, содержащие указанный атрибут, img — только картинки, для которых задан атрибут alt ;
селектор[атрибут="значение"] — элементы данного типа, содержащие указанный атрибут с конкретным значением, img — все картинки, название которых содержит слово flower ;
селектор[атрибут~="значение"] — элементы частично содержащие данное значение, например, если для элемента задано несколько классов через пробел, p — абзацы, имя класса которых содержит feature ;
селектор[атрибут|="значение"] — элементы, список значений атрибута которых начинается с указанного слова, p — абзацы, имя класса которых feature или начинается на feature ;
селектор[атрибут^="значение"] — элементы, значение атрибута которых начинается с указанного значения, a — все ссылки, начинающиеся на http:// ;
селектор[атрибут$="значение"] — элементы, значение атрибута которых заканчивается указанным значением, img — все картинки в формате png ;
селектор[атрибут*="значение"] — элементы, значение атрибута которых содержит в любом месте указанное слово, a — все ссылки, название которых содержит book .
2.9. Селектор псевдокласса
Псевдоклассы — это классы, фактически не прикрепленные к HTML-тегам. Они позволяют применить CSS-правила к элементам при совершении события или подчиняющимся определенному правилу. Псевдоклассы характеризуют элементы со следующими свойствами:
:hover — любой элемент, по которому проводят курсором мыши;
:focus — интерактивный элемент, к которому перешли с помощью клавиатуры или активировали посредством мыши;
:active — элемент, который был активизирован пользователем;
:valid — поля формы, содержимое которых прошло проверку в браузере на соответствие указанному типу данных;
:invalid — поля формы, содержимое которых не соответствует указанному типу данных;
:enabled — все активные поля форм;
:disabled — заблокированные поля форм, т.е., находящиеся в неактивном состоянии;
:in-range — поля формы, значения которых находятся в заданном диапазоне;
:out-of-range — поля формы, значения которых не входят в установленный диапазон;
:lang() — элементы с текстом на указанном языке;
:not(селектор) — элементы, которые не содержат указанный селектор — класс, идентификатор, название или тип поля формы — :not() ;
:target — элемент с символом # , на который ссылаются в документе;
:checked — выделенные (выбранные пользователем) элементы формы.
2.10. Селектор структурных псевдоклассов
Структурные псевдоклассы отбирают дочерние элементы в соответствии с параметром, указанным в круглых скобках:
: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 .
2.11. Селектор структурных псевдоклассов типа
Указывают на конкретный тип дочернего тега:
:nth-of-type() — выбирает элементы по аналогии с:nth-child() , при этом берёт во внимание только тип элемента;
:first-of-type — выбирает первый дочерний элемент данного типа;
:last-of-type — выбирает последний элемент данного типа;
:nth-last-of-type() — выбирает элемент заданного типа в списке элементов в соответствии с указанным местоположением, начиная с конца;
:only-of-type — выбирает единственный элемент указанного типа среди дочерних элементов родительского элемента.
2.12. Селектор псевдоэлемента
Псевдоэлементы используются для добавления содержимого, которое генерируется с помощью свойства content:
:first-letter — выбирает первую букву каждого абзаца, применяется только к блочным элементам;
:first-line — выбирает первую строку текста элемента, применяется только к блочным элементам;
:before — вставляет генерируемое содержимое перед элементом;
:after — добавляет генерируемое содержимое после элемента.
3. Комбинация селекторов
Для более точного отбора элементов для форматирования можно использовать комбинации селекторов:
img:nth-of-type(even) — выберет все четные картинки, альтернативный текст которых содержит слово css .
4. Группировка селекторов
Один и тот же стиль можно одновременно применить к нескольким элементам. Для этого необходимо в левой части объявления перечислить через запятую нужные селекторы:
Наследование и каскад — два фундаментальных понятия в CSS, которые тесно связаны между собой. Наследование заключается в том, что элементы наследуют свойства от своего родителя (элемента, их содержащего). Каскад проявляется в том, как разные виды таблиц стилей применяются к документу, и как конфликтующие правила переопределяют друг друга.
5.1. Наследование
Наследование
является механизмом, с помощью которого определенные свойства передаются от предка к его потомкам. Спецификацией 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 можно принудить элемент наследовать любое значение свойства родительского элемента. Это работает даже для тех свойств, которые не наследуются по умолчанию.
Как задаются и работают CSS-стили
1) Стили могут наследоваться от родительского элемента (наследуемые свойства или с помощью значения inherit);
2) Стили, расположенные в таблице стилей ниже, отменяют стили, расположенные в таблице выше;
3) К одному элементу могут применяться стили из разных источников. Проверить, какие стили применяются, можно в режиме разработчика браузера. Для этого над элементом нужно щёлкнуть правой кнопкой мыши и выбрать пункт «Посмотреть код» (или что-то аналогичное). В правом столбце будут перечислены все свойства, которые заданы для этого элемента или наследуются от родительского элемента, а также файлы стилей, в которых они указаны, и порядковый номер строки кода.
4) При определении стиля можно использовать любую комбинацию селекторов — селектор элемента, псевдокласса элемента, класса или идентификатора элемента.
Каскадирование
— это механизм, который управляет конечным результатом в ситуации, когда к одному элементу применяются разные CSS-правила. Существует три критерия, которые определяют порядок применения свойств — правило!important , специфичность и порядок, в котором подключены таблицы стилей.
Правило!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 ; универсальный
селектор не имеет специфичности.
В результате к элементу применятся те правила, специфичность которых больше. Например, если на элемент действуют две специфичности со значениями 0, 0, 0, 2 и 0, 1, 0, 1 , то выиграет второе правило.
Порядок подключённых таблиц
Вы можете создать несколько внешних таблиц стилей и подключить их к одной веб-странице. Если в разных таблицах будут встречаться разные значения свойств одного элемента, то в результате к элементу применится правило, находящееся в таблице стилей, идущей в списке ниже.
Рис. 1. Структура объявления CSS-стиля
Рис. 2. Режим разработчика в