Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.

Для правообладателей

Обратная связь

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

Презентация на тему Лекция 11. Каскадные таблицы стилей CSS

Содержание

Стиль – набор параметров, задающий внешнее представление объекта.Таблица стилей – это инструмент языка html, предоставляющий возможности по улучшению внешнего отображения страницы средствами структурного программирования.Таблица стилей содержит набор правил (стилей), описывающих оформление самой Web-страницы и отдельных ее
Каскадные таблицы стилей CSS Стиль – набор параметров, задающий внешнее представление объекта.Таблица стилей – это инструмент Преимущества использования CSS:Разграничение кода и оформления.Разное оформление для разных устройств.Расширенные по сравнению Уровни CSS:Уровень 1 (CSS1) – принята 17.12.96,Уровень 2 (CSS2) – принята 12.05.98Уровень Правило таблиц CSS состоит из двух частей: селектор {свойство1: значение; свойство2: значение}1. Селектор ПримерP { color: #0000FF }P - это селектор. Он представляет собой имя Правила CSS1. Несколько параметров можно перечислять через двоеточие, либо задавать отдельно каждый параметр.2. Способы связывания документа и таблиц стилей: 1. Связывание – позволяет использовать одну Содержимое файла mystyles.cssBODY {background-color: #000000; color: #FFFFFF}P {color: #0000FF} EM {color: #00FF00; 2. Внедрение – позволяет задавать все правила таблицы стилей непосредственно в самом Заголовки h1 { color: #a6780a; font-weight: normal; } 3. Импортирование - позволяет встраивать в документ таблицу стилей, расположенную на сервере. 4. Встраивание в тэги документа – позволяет изменить форматирование конкретных элементов страницы. Приоритеты CSS (от низшего к высшему), используемые при форматировании: 1. Связанная таблица стилей Связанные, внедренные и импортированные таблицы стилей влияют на форматирование всех элементов документа. ГруппированиеГруппирование селекторовH1 {font-family: Verdana}H2 {font-family: Verdana} H1, H2 Группирование свойствH2 {font: bold 14pt Verdana} При задании таблицы стилей можно свободно НаследованиеНаследованием называется перенос правил форматирования для элементов, находящихся внутри других. Такие элементы Идентификаторы Идентификатор элемента задается при помощи параметра id, в качестве значения которого Идентификаторы можно применять к конкретному тегу. Тег#Имя идентификатора { свойство1: значение; свойство2: значение; ... } Пример p{ color: blue}p#green {color: green}Обычный абзац КлассыКласс позволяет задать разные правила форматирования для одного элемента определённого типа или Пример H1.red {color: red} H1.blue {color:red; background-color: blue} Красный шрифтКрасный шрифт на синем фоне Если класс должен применяться ко всем элементам документа, то в селекторе задаётся Пример .red {color: red} .blue {color: red; background-color: blue} Красный шрифтКрасный шрифт на Универсальный селекторИспользуется, если требуется установить одновременно один стиль для всех элементов веб-страницы, Пример * { font-family: Arial, Verdana, sans-serif; /* Контекстные селекторыКонтекстный селектор состоит из простых селекторов разделенных пробелом.Тег1 Тег2 { ... Пример P B { font-family: Times, serif; /* Семейство Селекторы атрибутовПростой селектор атрибутаУстанавливает стиль для элемента, если задан специфичный атрибут тега. Пример Q {font-style: italic} Q[title] {color: maroon} Продолжая Атрибут со значением Устанавливает стиль для элемента в том случае, если задано Пример A[target= Значение атрибута начинается с определенного текстаУстанавливает стиль для элемента в том случае, Пример A[href^= Значение атрибута оканчивается определенным текстомУстанавливает стиль для элемента в том случае, если Пример A[href$= ПсевдоклассыПсевдоклассы определяют динамическое состояние элементов, которое изменяется со временем или с помощью Допускается применять псевдоклассы к именам идентификаторов или классов A.menu:hover {color: green};к контекстным Условно все псевдоклассы делятся на три группы:определяющие состояние элементов;имеющие отношение к дереву элементов;указывающие язык текста. Псевдоклассы, определяющие состояние элементовК этой группе относятся псевдоклассы, которые распознают текущее состояние Пример INPUT:focus { color: red; /* Красный цвет текста 4. :hoverПсевдокласс :hover активизируется, когда курсор мыши находится в пределах элемента, но Пример A:link {color: #036; /* Цвет непосещенных ссылок */ } Псевдокласс :hover не обязательно должен применяться к ссылкам, его можно добавлять и
Слайды презентации

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

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

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

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

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

Разграничение кода и оформления.
Разное оформление для

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

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

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


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

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

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

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

3 (CSS3) – разрабатывается

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

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

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






1. Селектор – любой тэг html, для

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

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

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

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

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

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

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

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

одинаковые атрибуты, но с разными значениями, то использоваться будет тот, что указан в коде последним.
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:

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

#0000FF}
EM {color: #00FF00; font-weight: bold}
.attention {color: #FF0000; font-style:

italic}
.bigtext {font-size: large}

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

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

стилей непосредственно в самом документе в стилевом блоке, ограниченном

тэгами STYLE:
Пример:



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

h1 {

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

color: #a6780a; font-weight: normal; }
h2 {


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



Заголовок 1


Заголовок 2




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

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

стилей, расположенную на сервере. Выполняется это с помощью свойства

@import:url("mystyles.css").

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

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

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

красным цветом

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

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

форматировании:
1. Связанная таблица стилей (по LINK)
2. Импортируемая таблица стилей

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

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

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

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

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

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

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

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}



Слайд 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}



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

Пример p{ color: blue}p#green {color: green}Обычный абзац

id=“green">Текст параграфа с идентификатором



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

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

элемента определённого типа или всех элементов документа. Имя класса

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

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


H1.red {color: red}
H1.blue {color:red; background-color: blue}

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



Красный шрифт
Красный шрифт на синем фоне



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

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

то в селекторе задаётся имя класса с лидирующей точкой

без указания конкретного элемента.
.Имя класса { свойство1: значение; свойство2: значение; ... }

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

.red {color: red}
.blue {color: red; background-color:

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

blue}


Красный шрифт
Красный шрифт на синем фоне

class="blue">Заголовок красного цвета на синем фоне

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




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

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

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

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

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


* {

Пример * { font-family: Arial, Verdana, sans-serif; /* Рубленый

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

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



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




Слайд 28 Контекстные селекторы
Контекстный селектор состоит из простых селекторов разделенных

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

пробелом.
Тег1 Тег2 { ... }

В этом случае стиль

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

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

P B {

Пример P B { font-family: Times, serif; /* Семейство

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

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


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

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

задан специфичный атрибут тега. Его значение в данном случае

не важно.
Селектор[атрибут] { Описание правил стиля }

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

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


Q {font-style: italic}

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

Q[title] {color: maroon}


Продолжая известный закон

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



Слайд 32

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

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

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

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

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



A[target="_blank"] {

Пример A[target=

background: url(images/blank.png) 0 6px no-repeat; /* Параметры фонового рисунка

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



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




Слайд 35

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

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

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

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

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



A[href^="http://"] {

Пример A[href^=

font-weight: bold /* Жирное начертание */
}



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




Слайд 38

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

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

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

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


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

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


A[href$=".ru"] { /* Если

Пример A[href$=

ссылка заканчивается на .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

Слайд 42 Псевдоклассы
Псевдоклассы определяют динамическое состояние элементов, которое изменяется со

ПсевдоклассыПсевдоклассы определяют динамическое состояние элементов, которое изменяется со временем или с

временем или с помощью действий пользователя, а также положение

в дереве документа. Примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении на нее курсора мыши.

Селектор:Псевдокласс { Описание правил стиля }
Допускается применять псевдоклассы к именам идентификаторов или классов (A.menu:hover {color: green}) и к контекстным селекторам (.menu A:hover {background: #fc0}). Если псевдокласс указывается без селектора впереди (:hover), то он будет применяться ко всем элементам документа.

Слайд 43 Допускается применять псевдоклассы
к именам идентификаторов или классов

Допускается применять псевдоклассы к именам идентификаторов или классов A.menu:hover {color: green};к

A.menu:hover {color: green};
к контекстным селекторам
.menu A:hover

{background: #fc0}
Если псевдокласс указывается без селектора впереди (:hover), то он будет применяться ко всем элементам документа.

Слайд 44 Условно все псевдоклассы делятся на три группы:
определяющие состояние

Условно все псевдоклассы делятся на три группы:определяющие состояние элементов;имеющие отношение к дереву элементов;указывающие язык текста.

элементов;
имеющие отношение к дереву элементов;
указывающие язык текста.

Слайд 45 Псевдоклассы, определяющие состояние элементов
К этой группе относятся псевдоклассы,

Псевдоклассы, определяющие состояние элементовК этой группе относятся псевдоклассы, которые распознают текущее

которые распознают текущее состояние элемента и применяют стиль только

для этого состояния.
1. :active
Происходит при активации пользователем элемента.
2. :link
Применяется к непосещенным ссылкам.
3. :focus
Применяется к элементу при получении им фокуса.

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



INPUT:focus {

Пример INPUT:focus { color: red; /* Красный цвет текста

color: red; /* Красный цвет текста */
}










Слайд 47

Слайд 48 4. :hover
Псевдокласс :hover активизируется, когда курсор мыши находится

4. :hoverПсевдокласс :hover активизируется, когда курсор мыши находится в пределах элемента,

в пределах элемента, но щелчка по нему не происходит.
5.

:visited
Данный псевдокласс применяется к посещенным ссылкам.

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


A:link {color: #036; /*

Пример A:link {color: #036; /* Цвет непосещенных ссылок */ }

Цвет непосещенных ссылок */ }
A:visited {color: #606;

/* Цвет посещенных ссылок */}
A:hover {color: #f00; /* Цвет ссылок при наведении на них курсора мыши */}
A:active {color: #ff0; /* Цвет активных ссылок */}



Ссылка 1 |
Ссылка 2 |
Ссылка 3



Слайд 50

Слайд 51 Псевдокласс :hover не обязательно должен применяться к ссылкам,

Псевдокласс :hover не обязательно должен применяться к ссылкам, его можно добавлять

его можно добавлять и к другим элементам документа (например,

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

  • Имя файла: lektsiya-11-kaskadnye-tablitsy-stiley-css.pptx
  • Количество просмотров: 169
  • Количество скачиваний: 0
- Предыдущая Социально-педагогический аспект движения Новые школы
Следующая - Алгебра логики. (Лекция 2)

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

Педагогический опыт презентация к уроку Педагогический опыт презентация к уроку 82
Muséedesbeaux-arts Muséedesbeaux-arts 101
How the word “hotel” appeared? How the word “hotel” appeared? 170
Современные образовательные технологии в ДОУ презентация Современные образовательные технологии в ДОУ презентация 114
Презентация по украинскому языку на тему Лексикология. Изменения в лексической системе. Собственно украинская лексика. Термины. Профессиональная лексика.(10 класс) Презентация по украинскому языку на тему Лексикология. Изменения в лексической системе. Собственно украинская лексика. Термины. Профессиональная лексика.(10 класс) 62
Софийский собор Софийский собор 126
Начинаете Свой Бизнес? Начинаете Свой Бизнес? 81
Презентация Школа -интернат №12 Г Шадринск Презентация Школа -интернат №12 Г Шадринск 103
Тамчы шоу… Тамчы шоу… 126
Презентация к докладу по Адаптации к школе 1 класс презентация к уроку (1 класс) Презентация к докладу по Адаптации к школе 1 класс презентация к уроку (1 класс) 143
morfoyaschik 1 morfoyaschik 1 139
Спортивно-оздоровительное направлениеанимационныхуслуг Спортивно-оздоровительное направлениеанимационныхуслуг 112
Порядок оформления нарядов-допусков. Порядок оформления нарядов-допусков. 157
Супергерой – кто это? Супергерой – кто это? 201
Презентация Лисичка в городе Д/С Ягодка № 34- 2 мл. гр. презентация к уроку (младшая группа) по теме Презентация Лисичка в городе Д/С Ягодка № 34- 2 мл. гр. презентация к уроку (младшая группа) по теме 88
Презентация Коляда, коляда... презентация к уроку (подготовительная группа) Презентация Коляда, коляда... презентация к уроку (подготовительная группа) 123
Детско-родительский образовательный проект Математика – это интересно! проект (подготовительная группа) по теме Детско-родительский образовательный проект Математика – это интересно! проект (подготовительная группа) по теме 147
Фридрих Адольф Вильгельм Дистервег Фридрих Адольф Вильгельм Дистервег 133
Презентация : Трудный ребенок презентация Презентация : Трудный ребенок презентация 107
Понятие коммерческой тайны. Правовой режим. Охрана информации. Виды ответственности. Понятие коммерческой тайны. Правовой режим. Охрана информации. Виды ответственности. 111
Федеральное государственное бюджетное учреждение Научно-клинический центр оториноларингологии Федерального медико-биологического агентствадокладна соискание учёной степеникандидата медицинских наукСОСТОЯНИЕ НОСОВОГО ДЫХАНИЯУ ДЕТЕЙ С МИОФУНКЦИОНАЛЬНЫМИНАРУ Федеральное государственное бюджетное учреждение Научно-клинический центр оториноларингологии Федерального медико-биологического агентствадокладна соискание учёной степеникандидата медицинских наукСОСТОЯНИЕ НОСОВОГО ДЫХАНИЯУ ДЕТЕЙ С МИОФУНКЦИОНАЛЬНЫМИНАРУ 143
Кузбассу - 70 лет Кузбассу - 70 лет 81
презентация В.В.Воскобовича. презентация к уроку (младшая группа) презентация В.В.Воскобовича. презентация к уроку (младшая группа) 97
Роль игры в развитии воображения и творчества дошкольников презентация к уроку (младшая группа) Роль игры в развитии воображения и творчества дошкольников презентация к уроку (младшая группа) 117
Основные права и обязанности родителей (законных представителей) презентация к уроку Основные права и обязанности родителей (законных представителей) презентация к уроку 114
Воспитание культурно-гигиенических навыков и навыков самообслуживания методическая разработка (младшая группа) по теме Воспитание культурно-гигиенических навыков и навыков самообслуживания методическая разработка (младшая группа) по теме 157
Презентация Восковые карандаши презентация по теме Презентация Восковые карандаши презентация по теме 108
Волхвы и маги Волхвы и маги 110
Мастер классЧăваш чĕлхипе литература урокĕсенче вăйă меслечĕпе усă курасси Мастер классЧăваш чĕлхипе литература урокĕсенче вăйă меслечĕпе усă курасси 303
Лекция 3 Лекция 3 93