Каскадные таблицы стилей
Каскадные таблицы стилей (Cascading Style Sheet – CSS) предназначены для описания стилей представления в браузере элементов HTML – документа. Например, с помощью таблиц стилей можно назначить размер шрифта, выбрать шрифт и цвет.
Например, у нас есть html-страница, код которой представлен в таблице. Браузер воспроизведет этот код в соответствии с таблицей стилей встроенной в самом браузере по умолчанию. При этом отображение html-кода по умолчанию для разных браузеров может отличаться. Т.е. встроенная таблица в разных браузерах может отображать один и тот же код по-разному.
| <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Пример 1. Оформление по умолчанию</title> </head> <body> <h1> Заголовок 1 </h1> <p> Текст 1 </p> <h2> Заголовок 2 </h2> <p> Текст 2 </p> <h2> Заголовок 3 </h2> <p> Текст 3 </p> </body> </html> | 
|
Для задания собственных стилей можно использовать 3 способа.
Все примеры расположены в папке:
J:\2019-2020\Программа на 2019-2020\УМК\16. Набор от Академии в День учителя\Примеры\razmetka stranic\
Методичка находится в папке J:\2019-2020\Программа на 2019-2020\УМК\16. Набор от Академии в День учителя\Примеры\razmetka stranic\Методичка по CSS
Способы создания стилей
1. Внутритекстовые стили
Стиль назначается непосредственно элементу с помощью атрибута style внутри открывающего тэга. Например, изменим стиль заголовка h1.
| Primer 1-2 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Пример 1-2. Внутритекстовый стиль </title> </head> <body> <h1 style="font-size:24px; font-family:Arial; color: #00F; text-align:center;"> Заголовок 1 </h1> <p> Текст 1 </p> <h2> Заголовок 2 </h2> <p> Текст 2 </p> <h2> Заголовок 3 </h2> <p> Текст 3 </p> </body> </html> | 
|
Мы поменяли шрифт, размер шрифта, цвет и выравнивание. Но данный стиль будет применен только к конкретному элементу, в который встроен этот стиль.
2. Встраиваемые стили на страницу
Для применения стиля на все тэги станицы можно их строить в управляющую часть html-кода страницы с помощью тэга <style>. Смотри пример 3.
| Primer2.html <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Пример 3</title> <style type="text/css"> h2 { font-size:20px; font-family:Arial; color: #0FF; } </style> </head> <body> <h1 style="font-size:30px; font-family:Arial; color: #00F; text-align:center;"> Заголовок 1 </h1> <p> Текст 1 </p> <h2> Заголовок 2 </h2> <p> Текст 2 </p> <h2> Заголовок 3 </h2> <p> Текст 3 </p> </body> </html> | 
В раздел управляющих тэгов вставляем тэг <style type=”text/css”>
h2 - селектор
{
font-size:20px;
font-family: Arial; - правило
color: #0FF;
}
</style>
|
При таком внедрении стилей все заголовки второго уровня будут оформлены в соответствии с правилами, прописанными в тэге style. Таким образом, встраиваемые стили действуют на отображение элементов данной страницы.
Внешние таблицы стилей
Для создания внешних таблиц стилей создается файл, например, style.css, в котором содержатся описания всех стилей всего сайта (набор деклараций для описания стилей всего сайта).
Для подключения стилей к html-документу применяется тэг <link>, который размещается в разделе управляющих тэгов html-документа..
<link rel=”stylesheet” href=”style.css”>
Способы использования каскадных таблиц стилей.
| primer3.html <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style-primer.css"> <title>Пример 3. Внешнее подключение стилей</title> </head> <body> <h1>Заголовок 1 </h1> <p> Текст 1 </p> <h2> Заголовок 2 </h2> <p> Текст 2 </p> <h2> Заголовок 3 </h2> <p> Текст 3 </p> </body> </html> | style-primer.css h1 { font-size:30px; font-family:Arial; color: #00F; text-align:center; } h2 { font-size:20px; font-family:Arial; color: #0FF; } |
Подключая файл, содержащий описание стилей всего сайта, ко всем его страницам, мы получаем возможность оформить в этом файле любой элемент с помощью таблиц стилей.
Правила формирования стилей
Таблица стилей состоит из набора определений стилей, которые формируются двумя компонентами:
· Селектором (один или несколько селекторов, разделенных запятыми).
· Блоком описаний свойств – атрибутов и значений, заключенных в фигурные скобки.
h1, h2 {
font-family:Arial;
color: #00F;
text-align:center;
}
Виды селекторов
Существует 3 вида селекторов:
Селектор типа.
Это имя тэга, к которому относится правило.
p {
font-size: 1.0tm;
}
Селектор класса
Применяется для группы тэгов одного типа, но по-разному оформленных. Например, на странице есть несколько элементов <p> Текст </p>, но оформлены они по-разному. Чтобы отличить одно оформление от другого используют селектор типа class.
<p class=”sidebar” > Текст </p>.
.sidebar {
color: #FFF;
}
Тогда тэги, <p> текст </p> будут оформлены по умолчанию, а цвет текста для тэгов с классом sidebar будут иметь текст белого цвета.
Селектор id
Селектор-идентификатор применяется для присваивания стиля одному конкретному элементу.
<div id=”logo”>
<img src=”images/logo.png” alt=Логотип”>
</div>
#logo {
width: 100px;
height: 60px;
margin-top: 20px;
margin-left: 40px;
}
4. Комбинированные селекторы
#logo img {
padding:3px;
border: 1px solid #eeeeee;
}
5. Дочерние селекторы
Контекстный селектор ссылается на всех потомков родительского элемента, в том числе и непрямых потомков.
| primer 4.html <div class=”sidebar”> <p> Text 1 </p> <p> Text 2</p> <div class=“descript”> <p> Text 3</p> </div> </div> <! - - end sidebar--> | .sidebar p {
color: #FF0000;
}
|
| Тот же код для дочернего селектора | .sidebar > p {
color: #FF0000;
}
|
Если мы применим селектор
.sidebar p {
color: #FF0000;
}
то все абзацы будут оформлены красным цветом.
Если мы напишем селектор:
.sidebar > p {
color: #FF0000;
}
В этом случае красным цветом оформятся родительские абзацы <p> Text 1 </p> и <p> Text 2</p>, т.к. только они являются дочерними абзацами слоя с class= “sidebar.”
Смежные селекторы
Смежные селекторы ссылаются на элемент, расположенный непосредственно после обозначенного селектором элемента.
| primer-5.html <h2> Заголовок </h2> <p> Текст 1 </p> <p> Текст 2 </p> p { color: #cdcdcd; h2 { color: #00FF00; } h2+p { color: # FF0000; } | 
|
При этом только смежный элемент будет оформлен данным правилом.
7. Селекторы псевдоклассов
a: link вид ссылки после загрузки страницы
a: visited вид посещенной ссылки
a: hover вид ссылки при наведении мыши
a: active вид ссылки при щелчке на ней
<a href=”index.html” target=”_self”>На главную </a>
Данная последовательность обязательно при назначении стилей.