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

Содержание

Слайд 2

Стиль – набор параметров, задающий внешнее представление объекта.
Таблица стилей – это инструмент

Стиль – набор параметров, задающий внешнее представление объекта. Таблица стилей – это
языка html, предоставляющий возможности по улучшению внешнего отображения страницы средствами структурного программирования.
Таблица стилей содержит набор правил (стилей), описывающих оформление самой Web-страницы и отдельных ее фрагментов.
Каждый элемент на странице может иметь свой стиль (параграфы, заголовки, линии, текст...).
Набор стилей всех элементов называют таблицей стилей.

Слайд 3

Преимущества использования CSS:
Разграничение кода и оформления.
Разное оформление для разных устройств.
Расширенные по сравнению

Преимущества использования CSS: Разграничение кода и оформления. Разное оформление для разных устройств.
с HTML способы оформления элементов.
Уменьшение размеров страниц.
Ускорение загрузки сайта.
Единое стилевое оформление множества документов.
Централизованное хранение

Слайд 4

Уровни CSS:
Уровень 1 (CSS1) – принята 17.12.96,
Уровень 2 (CSS2) – принята 12.05.98
Уровень

Уровни CSS: Уровень 1 (CSS1) – принята 17.12.96, Уровень 2 (CSS2) –
2 (CSS2.1) – принята 07.06.11
Уровень 3 (CSS3) – разрабатывается

Слайд 5

Правило таблиц CSS состоит из двух частей:
селектор {свойство1: значение; свойство2: значение}
1. Селектор

Правило таблиц CSS состоит из двух частей: селектор {свойство1: значение; свойство2: значение}
– любой тэг html, для которого определение задает каким образом необходимо его форматировать.
2. Определение – состоит из двух частей:
свойства
значения

Слайд 6

Пример
P { color: #0000FF }
P - это селектор. Он представляет собой имя

Пример P { color: #0000FF } P - это селектор. Он представляет
тега

.
color - это свойство (атрибут) стиля. Он задает цвет текста.
#0000FF - это значение атрибута стиля color. Оно представляет код синего цвета, записанный в формате RGB

Слайд 7

Правила CSS
1. Несколько параметров можно перечислять через двоеточие, либо задавать отдельно каждый параметр.
2.

Правила CSS 1. Несколько параметров можно перечислять через двоеточие, либо задавать отдельно
Если для одного селектора определяются одинаковые атрибуты, но с разными значениями, то использоваться будет тот, что указан в коде последним.
P { color: green }
P { color: red }
3. Свойства и их значения в CSS не чувствительны к регистру, поэтому их можно набирать как заглавными, так и строчными символами.

Слайд 8

Способы связывания документа и таблиц стилей:
1. Связывание – позволяет использовать одну

Способы связывания документа и таблиц стилей: 1. Связывание – позволяет использовать одну
таблицу стилей для форматирования многих страниц html. Для этого таблица стилей хранится в отдельном файле с расширением CSS. Присоединяется к документам с помощью тэга , задаваемого в разделе .
Пример:



В связываемом файле содержатся наборы правил CSS, определяющих форматирование документа.

Слайд 9

Содержимое файла mystyles.css
BODY {background-color: #000000; color: #FFFFFF}
P {color: #0000FF}
EM {color: #00FF00;

Содержимое файла mystyles.css BODY {background-color: #000000; color: #FFFFFF} P {color: #0000FF} EM
font-weight: bold}
.attention {color: #FF0000; font-style: italic}
.bigtext {font-size: large}

Слайд 10

2. Внедрение – позволяет задавать все правила таблицы стилей непосредственно в самом

2. Внедрение – позволяет задавать все правила таблицы стилей непосредственно в самом
документе в стилевом блоке, ограниченном тэгами STYLE:
Пример:



Слайд 11


Заголовки



Заголовок 1


Заголовок 2




Слайд 12

3. Импортирование - позволяет встраивать в документ таблицу стилей, расположенную на сервере.

3. Импортирование - позволяет встраивать в документ таблицу стилей, расположенную на сервере.
Выполняется это с помощью свойства @import:url("mystyles.css").

Слайд 13

4. Встраивание в тэги документа – позволяет изменить форматирование конкретных элементов страницы.

4. Встраивание в тэги документа – позволяет изменить форматирование конкретных элементов страницы.

Пример:

Заголовок 1. Отображается красным цветом


Слайд 14

Приоритеты CSS (от низшего к высшему), используемые при форматировании:
1. Связанная таблица стилей

Приоритеты CSS (от низшего к высшему), используемые при форматировании: 1. Связанная таблица
(по LINK)
2. Импортируемая таблица стилей (@import)
3. Правила с элементом html в качестве селектора
4. Правило с параметром CLASS в качестве селектора
5. Правило с параметром ID в качестве селектора
6. Встроенное в тэг html правило

Слайд 15

Связанные, внедренные и импортированные таблицы стилей влияют на форматирование всех элементов документа.

Связанные, внедренные и импортированные таблицы стилей влияют на форматирование всех элементов документа.

Встраивание таблицы стилей в конкретный тэг влияет только на отображение его элементов.
Все способы встраивания таблиц стилей свободно могут сочетаться в одном документе.
Вложенный элемент наследует правила форматирования элемента-родителя

Слайд 16

Группирование
Группирование селекторов
H1 {font-family: Verdana}
H2 {font-family: Verdana} H1, H2 {font-family: Verdana}
2. Группирование определений
H2

Группирование Группирование селекторов H1 {font-family: Verdana} H2 {font-family: Verdana} H1, H2 {font-family:
{font-weight: bold}
H2 {font-size: 14pt}
H2 {font-family: Verdana}
H2 (font-weight: bold; font-size: 14pt; font-family: Verdana}

Слайд 17

Группирование свойств
H2 {font: bold 14pt Verdana}
При задании таблицы стилей можно свободно

Группирование свойств H2 {font: bold 14pt Verdana} При задании таблицы стилей можно
комбинировать все три правила группирования для уменьшения её размеров.

Слайд 18

Наследование
Наследованием называется перенос правил форматирования для элементов, находящихся внутри других.
Такие элементы

Наследование Наследованием называется перенос правил форматирования для элементов, находящихся внутри других. Такие
являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются.

Слайд 19

Идентификаторы
Идентификатор элемента задается при помощи параметра id, в качестве значения которого

Идентификаторы Идентификатор элемента задается при помощи параметра id, в качестве значения которого
указывается уникальное имя.
На странице можно использовать только один идентификатор с определенным именем, но несколько идентификаторов с разными именами.
Т.е. идентификатору соответствует только один элемент на странице.
Параметр ID можно применять к любому элементу документа.
#Имя идентификатора { свойство1: значение; свойство2: значение; ... }

Слайд 20

Идентификаторы можно применять к конкретному тегу.
Тег#Имя идентификатора { свойство1: значение; свойство2:

Идентификаторы можно применять к конкретному тегу. Тег#Имя идентификатора { свойство1: значение; свойство2: значение; ... }
значение; ... }

Слайд 21

Пример



Обычный абзац


Текст параграфа с идентификатором

Пример p{ color: blue} p#green {color: green} Обычный абзац Текст параграфа с идентификатором



Слайд 22

Классы
Класс позволяет задать разные правила форматирования для одного элемента определённого типа или

Классы Класс позволяет задать разные правила форматирования для одного элемента определённого типа
всех элементов документа. Имя класса указывается в селекторе правила после имени тега и отделяется от него точкой. Можно определить несколько правил форматирования для одного элемента и с помощью параметра class соответствующего тега применять разные правила форматирования.
Тег.Имя_класса { свойство1: значение; свойство2: значение; ... }

Слайд 23

Пример


Красный шрифт


Красный

Пример H1.red {color: red} H1.blue {color:red; background-color: blue} Красный шрифт Красный шрифт на синем фоне
шрифт на синем фоне

Слайд 24

Если класс должен применяться ко всем элементам документа, то в селекторе задаётся

Если класс должен применяться ко всем элементам документа, то в селекторе задаётся
имя класса с лидирующей точкой без указания конкретного элемента.
.Имя класса { свойство1: значение; свойство2: значение; ... }

Слайд 25

Пример


Красный шрифт


Пример .red {color: red} .blue {color: red; background-color: blue} Красный шрифт Красный
class="blue">Красный шрифт на синем фоне


Заголовок красного цвета на синем фоне


Заголовок красного цвета



Слайд 26

Универсальный селектор
Используется, если требуется установить одновременно один стиль для всех элементов веб-страницы,

Универсальный селектор Используется, если требуется установить одновременно один стиль для всех элементов
например, задать шрифт или начертание текста.
* { Описание правил стиля }

Слайд 27

Пример




А здесь какой-то текст


Слайд 28

Контекстные селекторы
Контекстный селектор состоит из простых селекторов разделенных пробелом.
Тег1 Тег2 { ...

Контекстные селекторы Контекстный селектор состоит из простых селекторов разделенных пробелом. Тег1 Тег2
}
В этом случае стиль будет применяться к Тегу2 когда он размещается внутри Тега1.
<Тег1>
<Тег2> ...

Слайд 29

Пример

Слайд 30

Селекторы атрибутов
Простой селектор атрибута
Устанавливает стиль для элемента, если задан специфичный атрибут тега.

Селекторы атрибутов Простой селектор атрибута Устанавливает стиль для элемента, если задан специфичный
Его значение в данном случае не важно.
Селектор[атрибут] { Описание правил стиля }
Стиль применяется к тем тегам, внутри которых добавлен указанный атрибут. Пробел между именем селектора и квадратными скобками не допускается.

Слайд 31

Пример



Пример Q {font-style: italic} Q[title] {color: maroon} Продолжая известный закон Мерфи, который

Продолжая известный закон Мерфи, который гласит: Если неприятность
может случиться, то она обязательно случится
, можем ввести свое наблюдение:
После того, как веб-страница
будет корректно отображаться в одном браузере, выяснится,
что она неправильно показывается в другом
.



Слайд 33

Атрибут со значением
Устанавливает стиль для элемента в том случае, если задано

Атрибут со значением Устанавливает стиль для элемента в том случае, если задано
определенное значение специфичного атрибута.
Селектор[атрибут="значение"] { Описание правил стиля }

Слайд 34

Пример





Обычная ссылка |
Ссылка в новом окне




Слайд 36

Значение атрибута начинается с определенного текста
Устанавливает стиль для элемента в том случае,

Значение атрибута начинается с определенного текста Устанавливает стиль для элемента в том
если значение атрибута тега начинается с указанного текста.
[атрибут="значение"] { Описание правил стиля }
Селектор[атрибут="значение"] { Описание правил стиля }

Слайд 37

Пример





Обычная ссылка |
Внешняя
ссылка на сайт htmlbook.ru




Слайд 39

Значение атрибута оканчивается определенным текстом
Устанавливает стиль для элемента в том случае, если

Значение атрибута оканчивается определенным текстом Устанавливает стиль для элемента в том случае,
значение атрибута оканчивается указанным текстом.
Селектор[атрибут$="значение"] { Описание правил стиля }

Слайд 40

Пример




Yandex.Com |
Yandex.Ru



Имя файла: Каскадные-таблицы-стилей-CSS.pptx
Количество просмотров: 61
Количество скачиваний: 0