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

Содержание

1. Каскадные таблицы стилей CSS
2. Стиль – набор параметров, задающий внешнее представление
3. Преимущества использования CSS:Разграничение кода и оформления.Разное оформление
4. Уровни CSS:Уровень 1 (CSS1) – принята 17.12.96,Уровень
5. Правило таблиц CSS состоит из двух частей:
6. ПримерP { color: #0000FF }P - это
7. Правила CSS1. Несколько параметров можно перечислять через двоеточие,
8. Способы связывания документа и таблиц стилей: 1.
9. Содержимое файла mystyles.cssBODY {background-color: #000000; color: #FFFFFF}P
10. 2. Внедрение – позволяет задавать все правила
11. Заголовки h1 { color:
12. 3. Импортирование - позволяет встраивать в документ
13. 4. Встраивание в тэги документа – позволяет
14. Приоритеты CSS (от низшего к высшему), используемые
15. Связанные, внедренные и импортированные таблицы стилей влияют
16. ГруппированиеГруппирование селекторовH1 {font-family: Verdana}H2 {font-family: Verdana}
17. Группирование свойствH2 {font: bold 14pt Verdana} При
18. НаследованиеНаследованием называется перенос правил форматирования для элементов,
19. Идентификаторы Идентификатор элемента задается при помощи параметра
20. Идентификаторы можно применять к конкретному тегу. Тег#Имя идентификатора { свойство1: значение; свойство2: значение; ... }
21. Пример p{ color: blue}p#green {color: green}Обычный абзац
22. КлассыКласс позволяет задать разные правила форматирования для
23. Пример H1.red {color: red} H1.blue {color:red; background-color: blue} Красный шрифтКрасный шрифт на синем фоне
24. Если класс должен применяться ко всем элементам
25. Пример .red {color: red} .blue {color: red; background-color:
26. Универсальный селекторИспользуется, если требуется установить одновременно один
27. Пример * {
28. Контекстные селекторыКонтекстный селектор состоит из простых селекторов
29. Пример P B {
30. Селекторы атрибутовПростой селектор атрибутаУстанавливает стиль для элемента,
31. Пример Q {font-style: italic} Q[title]
32. Слайд 32
33. Атрибут со значением Устанавливает стиль для элемента
34. Пример A[target="_blank"] { background:
35. Слайд 35
36. Значение атрибута начинается с определенного текстаУстанавливает стиль
37. Пример A[href^="http://"] { font-weight:
38. Слайд 38
39. Значение атрибута оканчивается определенным текстомУстанавливает стиль для
40. Пример A[href$=".ru"] { /* Если ссылка
41. Слайд 41
42. Скачать презентанцию

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

Главная
Разное
Каскадные таблицы стилей CSS

Слайды и текст этой презентации

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

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

это инструмент языка html, предоставляющий возможности по улучшению внешнего отображения

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

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

Слайд 3Преимущества использования CSS:

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

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

сайта.
Единое стилевое оформление множества документов.
Централизованное хранение

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

Слайд 4Уровни CSS:

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

принята 12.05.98
Уровень 2 (CSS2.1) – принята 07.06.11
Уровень 3 (CSS3) –

разрабатывается

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

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

свойство2: значение}

1. Селектор – любой тэг html, для которого определение задает

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

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

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

собой имя тега .
color - это свойство (атрибут) стиля. Он

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

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

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

каждый параметр.
2. Если для одного селектора определяются одинаковые атрибуты, но

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

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

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

использовать одну таблицу стилей для форматирования многих страниц html. Для

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

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

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

Слайд 9Содержимое файла mystyles.css

BODY {background-color: #000000; color: #FFFFFF}
P {color: #0000FF}
EM

{color: #00FF00; font-weight: bold}
.attention {color: #FF0000; font-style: italic}
.bigtext {font-size:

large}

Содержимое файла mystyles.cssBODY {background-color: #000000; color: #FFFFFF}P {color: #0000FF} EM {color: #00FF00; font-weight: bold}.attention {color: #FF0000; font-style:

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

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

type="text/css">
B {text-transform: uppercase}
P {background-color: lightgray; text-align: center}

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

Слайд 11
Заголовки

h1 { color: #a6780a;

font-weight: normal; }
h2 {
color:

olive;
border-bottom: 2px solid black;
}

Заголовок 1

Заголовок 2

Заголовки h1 { color: #a6780a; font-weight: normal; } h2 { color:

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

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

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

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

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

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

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

таблица стилей (по LINK)
2. Импортируемая таблица стилей (@import)
3. Правила с

элементом html в качестве селектора
4. Правило с параметром CLASS в качестве селектора
5. Правило с параметром ID в качестве селектора
6. Встроенное в тэг html правило

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

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

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

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

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

Слайд 16Группирование

Группирование селекторов
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}

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

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

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

размеров.

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

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

Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства

своих родителей, внутри которых располагаются.

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

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

значения которого указывается уникальное имя.
На странице можно использовать только один

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

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

Слайд 20Идентификаторы можно применять к конкретному тегу.
Тег#Имя идентификатора { свойство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="red">Красный шрифт
Красный шрифт на синем фоне
Заголовок красного цвета

на синем фоне

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

Слайд 26Универсальный селектор

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

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

Описание правил стиля }

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

Слайд 27Пример

* {
font-family:

Arial, Verdana, sans-serif; /* Рубленый шрифт для текста */

font-size: 96%; /* Размер текста */
}

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

Пример * { font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт для текста */

Слайд 28Контекстные селекторы

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

{ ... }

В этом случае стиль будет применяться к

Тегу2 когда он размещается внутри Тега1.
<Тег1>
<Тег2> ...

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

Слайд 29Пример

P B {
font-family:

Times, serif; /* Семейство шрифта /
font-weight: bold; /

Жирное начертание */
color: navy; /* Синий цвет текста */
}

Слайд 30Селекторы атрибутов

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

атрибут тега. Его значение в данном случае не важно.
Селектор[атрибут]

{ Описание правил стиля }

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

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

Слайд 31Пример

Q {font-style: italic}
Q[title] {color:

maroon}

Продолжая известный закон Мерфи, который гласит:

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

Слайд 32

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

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

стиля }

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

Слайд 34Пример

A[target="_blank"] {
background: url(images/blank.png)

0 6px no-repeat; /* Параметры фонового рисунка */
padding-left:

15px; /* Смещаем текст вправо */
}

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

Слайд 35

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

том случае, если значение атрибута тега начинается с указанного текста.

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

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

Слайд 37Пример

A[href^="http://"] {
font-weight: bold

/* Жирное начертание */
}

href="/1.html">Обычная ссылка |
Внешняя
ссылка на сайт htmlbook.ru

Слайд 38

Слайд 39Значение атрибута оканчивается определенным текстом

Устанавливает стиль для элемента в том

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

правил стиля }

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

Слайд 40Пример

A[href$=".ru"] { /* Если ссылка заканчивается

на .ru /
background: url(images/ru.png) no-repeat 0 6px; /

Добавляем фоновый рисунок */
padding-left: 12px; /* Смещаем текст вправо */ }
A[href$=".com"] { /* Если ссылка заканчивается на .com */
background: url(images/com.png) no-repeat 0 6px;
padding-left: 12px;}

Yandex.Com |
Yandex.Ru

Слайд 41

Скачать презентацию

Разделы презентаций

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

Содержание

Слайды и текст этой презентации

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

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

это инструмент языка html, предоставляющий возможности по улучшению внешнего отображения

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

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

Слайд 4Уровни CSS:Уровень 1 (CSS1) – принята 17.12.96,Уровень 2 (CSS2) –

принята 12.05.98Уровень 2 (CSS2.1) – принята 07.06.11Уровень 3 (CSS3) –

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

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

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

собой имя тега .color - это свойство (атрибут) стиля. Он

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

каждый параметр.2. Если для одного селектора определяются одинаковые атрибуты, но

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

использовать одну таблицу стилей для форматирования многих страниц html. Для

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

{color: #00FF00; font-weight: bold}.attention {color: #FF0000; font-style: italic} .bigtext {font-size:

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

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

Слайд 11 Заголовки h1 { color: #a6780a;

font-weight: normal; } h2 { color:

Заголовок 1

Заголовок 2

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

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

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

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

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

таблица стилей (по LINK) 2. Импортируемая таблица стилей (@import) 3. Правила с

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

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

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

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

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