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

Август 12, 2022

Главная
Информатика
Каскадные таблицы стилей CSS

Содержание

2. Стиль – набор параметров, задающий внешнее представление объекта. Таблица стилей – это инструмент языка html, предоставляющий
3. Преимущества использования CSS: Разграничение кода и оформления. Разное оформление для разных устройств. Расширенные по сравнению с
4. Правило таблиц CSS состоит из двух частей: селектор {свойство1: значение; свойство2: значение} 1. Селектор – любой
5. Правила CSS 1. Несколько параметров можно перечислять через двоеточие, либо задавать отдельно каждый параметр. 2. Если
6. Способы связывания документа и таблиц стилей: 1. Связывание – позволяет использовать одну таблицу стилей для форматирования
7. 2. Внедрение – позволяет задавать все правила таблицы стилей непосредственно в самом документе в стилевом блоке,
8. 3. Импортирование - позволяет встраивать в документ таблицу стилей, расположенную на сервере. Выполняется это с помощью
9. 4. Встраивание в тэги документа – позволяет изменить форматирование конкретных элементов страницы. Пример: Заголовок 1. Отображается
10. Приоритеты CSS (от низшего к высшему), используемые при форматировании: 1. Связанная таблица стилей (по LINK) 2.
11. Группирование Группирование селекторов H1 {font-family: Verdana} H2 {font-family: Verdana} H1, H2 {font-family: Verdana} 2. Группирование определений
12. Группирование свойств H2 {font: bold 14pt Verdana} При задании таблицы стилей можно свободно комбинировать все три
13. Идентификаторы Идентификатор элемента задается при помощи параметра id, в качестве значения которого указывается уникальное имя. На
14. Классы Класс позволяет задать разные правила форматирования для одного элемента определённого типа или всех элементов документа.
15. Универсальный селектор Используется, если требуется установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт
16. Контекстные селекторы Контекстный селектор состоит из простых селекторов разделенных пробелом. Тег1 Тег2 { ... } В
17. Селекторы атрибутов Простой селектор атрибута Устанавливает стиль для элемента, если задан специфичный атрибут тега. Его значение
18. Атрибут со значением Устанавливает стиль для элемента в том случае, если задано определенное значение специфичного атрибута.
19. Значение атрибута начинается с определенного текста Устанавливает стиль для элемента в том случае, если значение атрибута
21. Скачать презентацию

Слайд 2

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

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

Слайд 3

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

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

Слайд 4

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

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

Слайд 5

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

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

Слайд 6

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

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

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

Слайд 7

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

самом документе в стилевом блоке, ограниченном тэгами STYLE:
Пример:

Слайд 8

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

сервере. Выполняется это с помощью свойства @import:url("mystyles.css").

Слайд 9

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

страницы.
Пример:

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

Слайд 10

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

стилей (по LINK)
2. Импортируемая таблица стилей (@import)
3. Правила с элементом html в качестве селектора
4. Правило с параметром CLASS в качестве селектора
5. Правило с параметром ID в качестве селектора
6. Встроенное в тэг html правило

Слайд 11

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

определений
H2 {font-weight: bold}
H2 {font-size: 14pt}
H2 {font-family: Verdana}
H2 (font-weight: bold; font-size: 14pt; font-family: Verdana}

Слайд 12

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

свободно комбинировать все три правила группирования для уменьшения её размеров.

Слайд 13

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

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

Слайд 14

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

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

Слайд 15

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

веб-страницы, например, задать шрифт или начертание текста.
* { Описание правил стиля }

Слайд 16

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

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

Слайд 17

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

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

Слайд 18

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

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

Слайд 19

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

случае, если значение атрибута тега начинается с указанного текста.
[атрибут="значение"] { Описание правил стиля }
Селектор[атрибут="значение"] { Описание правил стиля }

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

Содержание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Похожие презентации