Правила формирования стилей




Каскадные таблицы стилей

Каскадные таблицы стилей (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>

Данная последовательность обязательно при назначении стилей.



Поделиться:




Поиск по сайту

©2015-2024 poisk-ru.ru
Все права принадлежать их авторам. Данный сайт не претендует на авторства, а предоставляет бесплатное использование.
Дата создания страницы: 2019-12-19 Нарушение авторских прав и Нарушение персональных данных


Поиск по сайту: