1.98M

Категория:

Интернет

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

Каскадные таблицы стилей CSS (лекция 15)

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

Основы Интернет-технологий

Каскадные таблицы стилей – CSS. (Тема 6)

Курс вёрстки и программирования сайтов goo.gl/5WcHvs

Основы кодирования и программирования в Интернет-маркетинге. Часть 2. Основы каскадных таблиц стилей

Каскадные таблицы стилей (CSS) – назначение и применения. Блочные и строчные элементы. Цвет и шрифты

Тема 2. Каскадные таблицы стилей CSS

Использование стилевых спецификаций. (Тема 3)

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

Лекция_5

1.

Разработка сетевых
информационных ресурсов
Лекция 5. Структура таблиц стилей.
Наследование и каскадирование в CSS
Глотова М.И.

Содержание
1. Внедренные таблицы стилей
2. Внутренние таблицы стилей
3. Внешние таблицы стилей
4. Наследование в CSS
5. Каскадность в CSS
6. Использование цвета в CSS
7. Единицы измерения
8. Свойства CSS

3.

Структура таблиц стилей
Внедренные таблицы стилей
3
Использование внедренных стилей мало чем отличается от
использования обычных HTML-тегов. Они задают стиль только
одному элементу документа при помощи атрибута style в HTMLтеге.
Например:
<font color=“blue"
size=“3“ face= "Arial">Пример</font> - обычный HTMLкод;
<font style=“color: blue; font-size: 12pt; fontfamily: Arial;">Пример</font> - код с использованием CSS.
Замечание: код CSS получился больше, чем обычный HTML.
Внедренные таблицы стилей следует использовать в том случае,
когда данная таблица стилей используется только в данном
документе.
<h1 style=“bordr-width: 1; border: solid; textalign:
center;">Этот
заголовок
имеет
указанный
стиль</h1>
Таблицы стилей могут содержать комментарии: /* текст */

4.

Структура таблиц стилей
Внедренные таблицы стилей
4
CSS позволяют назначить собственный стиль визуального
представления не только любому тегу форматирования текста в HTML,
но и тегу <body>.
В этом случае стиль наследуется всеми элементами, помещенными
внутрь этого тега-контейнера, в случае отсутствия собственных стилей
для этих документов.
Пример:
<body style=“color: darkgreen; font-size: 12pt;
font-family: ‘Times New Roman’, serif;">Содержимое
документа</body>
Приведенных примерах используется встраивание стиля
непосредственно в тег документа – inline-стиль. Данный способ
связывания CSS с HTML-файлом рекомендуется использовать в
единичных случаях (если стиль применяется только к одному
элементу только на данной странице).

5.

Структура таблиц стилей
Внутренние таблицы стилей
5
Для включения в документ внутренней таблицы стилей
необходимо поместить в заголовок документа элемент <style>.
Синтаксис определения стиля:
<head>
<style>

</style>
</head>
<body
Переопределение стиля
</body>
<style type="text/css">

6.

Структура таблиц стилей
Внутренние таблицы стилей
6

7.

Пример создания эффектов на
странице без использования графики
7
Описание внутренних
стилей.

8.

Пример создания эффектов на
странице без использования графики
8
Описание тела документа.

9.

Структура таблиц стилей
Внутренние таблицы стилей
9
Для задания типа устройства, для которого предназначается
таблица стилей можно воспользоваться атрибутом media тега
<style>. Допустимые значения атрибута приведены в таблице.
Значение
screen
Назначение
Для экранов мониторов;
tty
Для носителей с фиксированным размером символов, таких как
телетайпы, терминалы , портативные устройства с ограниченными
возможностями экрана и т.д.; для них не должны использоваться
пикселы в качестве единиц измерения;
tv
Для устройства типа телевизор;
handheld
Для карманных компьютеров , смартфонов, устройств с малой
шириной экрана;
print
для устройств вывода на печать;
speech
Для речевых синтезаторов, программ для воспроизведения текста
вслух;
all
Для всех устройств;

10.

Структура таблиц стилей
Внешние таблицы стилей
10
Наилучшим способом придания единого стилевого оформления
нескольким
(всем)
страницам
одного
сайта
является
импортирование и связывание таблиц стилей.
Вся таблица стилей хранится в одном файле *.css.
Для подключения к документу внешней таблицы стилей
существует два способа :
1) Синтаксис определения внешней таблицы стиля:
<head>
<link rel=“stylesheet“ href=“style1.css“
type=“text/css">
</head>
<link rel=“stylesheet“ href=“style1.css“
type=“text/css" media=“screen, print“>
2) Синтаксис определения внешней таблицы стиля:
<style> @import “URL"; </style>
Внешние таблицы следует использовать в том случае, когда
несколько HTML-документов используют единую таблицу стилей.

11.

Структура таблиц стилей
Внешние таблицы стилей
11
Описание стилевого
файла style.css.

12.

Структура таблиц стилей
Внешние таблицы стилей
12
Описание стилевого файла style2.css:
body
{background:#00a6ff;color:forestgreen}
h1{color:red}
Описание HTML-документа:

13.

Синтаксис таблиц стилей
Наследование в CSS
13
Наследованием называется перенос правил форматирования
для элементов, находящихся внутри других. Такие элементы
являются дочерними (потомками), и они наследуют некоторые
стилевые свойства своих родителей (предков), внутри которых
располагаются.
Иерархия элементов в HTML-документах
body {font-size: 12pt;color: forestgreen}
P{color: inherit}

14.

Синтаксис таблиц стилей
Наследование в CSS
14

15.

Каскадность CSS
15
Каскадирование – это метод, используемый для решения
потенциальных конфликтов между различными типами стилей,
поддерживаемых браузером, и применения их в порядке
приоритетности в зависимости от создателя стилей, от метода,
который использован для создания стиля, от типов выбранных
свойств.
Все современные браузеры поддерживают три основных типа
таблиц стилей. В порядке приоритетности сверху вниз они
располагаются следующим образом:
созданные автором документа;
созданные пользователем;
созданные браузером.

16.

Каскадность CSS
16
Синтаксис директивы: Свойство: значение !important
Описание стилевого
файла стиль_польз.css.
TABLE {
color: #ff00dc !important; /* Другой
цвет текста */
background: #00ffff; /* Цвет фона
таблицы */
border: 7px solid red !important; /*
Красная рамка вокруг таблицы другой
толщины */}

17.

Каскадность CSS
17
Синтаксис директивы: Свойство: значение !important
При использовании пользовательской таблицы стилей или
одновременном применении разного стиля автора и
пользователя к одному и тому же селектору, браузер
руководствуется следующим алгоритмом:
1. !important добавлен в авторский стиль — будет применяться
стиль автора.
2. !important добавлен в пользовательский стиль — будет
применяться стиль пользователя.
3. !important нет как в авторском стиле, так и стиле
пользователя — будет применяться стиль автора.
4. !important содержится в авторском стиле и стиле
пользователя — будет применяться стиль пользователя.

18.

Каскадность CSS
18
Таблицы стилей могут создаваться с помощью трех различных
методов. В порядке приоритетности сверху вниз они
располагаются следующим образом:
Внедренные стили;
Встроенная таблица стилей;
Внешняя таблица стилей.
Пусть задана следующая внешняя таблица стилей prog.css:
h1 {color: red;
text-align: center;
font-family: 'Times New Roman', Times, serif}
#myid {
color: #ff00dc;
text-align: left;
font-family: 'Comic Sans MS';
font-weight: bold;}

19.

Каскадность CSS
19

20.

Синтаксис таблиц стилей
Каскадность CSS
20

21.

Каскадность CSS
21
Существует три разных способа выбора стилизуемых
элементов. В порядке убывания приоритетности их список имеет
вид:
Обращение с помощью атрибута style;
обращение к индивидуальному идентификатору или селектор
атрибутов;
обращение в группах по классу;
обращение по тегам элементов.

22.

Синтаксис таблиц стилей
Каскадность CSS
Если элементу соответствует22несколько определений, то они
упорядочиваются по специфичности селектора. Специфичность
вычисляется следующим образом (вычисляется три числа):
k1 – количество значений атрибута id;
k2 – количество в селекторе классов;
k3- количество в селекторе имен тегов;
Числа записываются k1k2k3 и полученное число – уровень
специфичности (вес) селектора. Выбираются определения с
наибольшей специфичностью.
селектор
Значения k1, k2, k3
специфичность
h1
k1=0, k2=0, k3=1
1
Div p
k1=0, k2=0, k3=2
2
.myclass
k1=0, k2=1, k3=0
10
H1.myclass
k1=0, k2=1, k3=1
11
#myelement
k1=1, k2=0, k3=0
100
k1=1, k2=1, k3=0
110

23.

Синтаксис таблиц стилей
Каскадность CSS
23
Приоритеты (специфичность или вес) простых селекторов:
Вид селектора
Специфичность
(вес)
Имя_тега
1
Имя_класса
10
Имя_тега.имя_класса
11
#значение_id
100
#значение_id.имя_класса
110

24.

Синтаксис таблиц стилей
Каскадность CSS
24

25.

Синтаксис таблиц стилей
Задание цвета
25
Задание цвета (color), также как и в тегах HTML, возможно
двумя способами:
наименованием;
численным значением.
При задании цвета численным значением используют:
шестнадцатеричное значение;
тройку вида rgb(red,green,blue), где цвета задаются числами в
диапазоне от 0 до 255
h1{color:#0000ff}
h1{color:#00f}
h1{color:rgb(76, 255, 0)}
h1{color:rgb(255, 216, 0)}

26.

Синтаксис таблиц стилей
Единицы измерения
26
В CSS приняты следующие единицы измерения:
абсолютные;
относительные.
Величины абсолютных единиц не зависят от устройства
отображения (дисплеев, принтеров и т.п.).
Абсолютные единицы связаны между собой равенствами:
1 in=2.54 cm, 1 pt=1/72 in, 1 pc=12 pt
Относительные единицы измерения:
Единица 1em равна размеру родительского шрифта, т.е. основан
на размере шрифта того элемента, к которому относится данная
декларация (задает размер ширины его наибольшей буквы, обычно
это «M», отсюда em).
Единица 1ex также относится к размеру текущего шрифта, задает
высоту строчных букв шрифта (обычно это «x»), отсюда ex.

27.

Синтаксис таблиц стилей
Единицы измерения
27
h1{margin:0.5em}
h1{text-indent:1ex}
h3{font-size:12px}
h1{margin:0.5in}
h2{line-height:3cm}
h3{word-spacing:4mm}
h4{font-size:12pt}
h4{font-size:1pc}
Проценты показывают отношение к величине некоторого
другого элемента. Для каждого свойства, допускающего задание
значений в процентах, подразумевается еще и величина,
относительно которой определяется процентное соотношение.
p{line-height:120%}
h4{font-size:90%}
h3{text-indent:20%}

28.

Свойства CSS
28
cелектор_тега
{
cвойство_стиля1: значение1;
cвойство_стиля2: значение2;
cвойство_стиля3: значение3;
………………………………………
}
Все свойства CSS можно разделить на несколько групп.
свойства шрифта;
свойства цвета и фона;
свойства текста;
свойства списков;
свойства расположения элементов;
свойства границ;
свойства блоков.

29.

Рекомендуемая литература:
1. Дронов, В.А. HTML 5, CSS 3 и Web 2.0. Разработка
современных Web-сайтов [Электронный ресурс] / В.А.
Дронов. - БХВ-Петербург, 2011. – Режим доступа:
http://znanium.com/bookread2.php?book=351455.
2. Дунаев, В. В. Web-программирование для всех [Текст]/ В.
В. Дунаев. - СПб.: БВХ-Петербург, 2008. - 560 с. - ISBN
978-5-9775-0197-2. (20 экз.)
3. Котеров, Д.В. PHP 5 / Д. В. Котеров, А. Ф. Костарев .- 2-е
изд. - СПб. : БВХ-Петербург, 2008. - 1078 с. - Предм. указ.:
с. 1062. - ISBN 978-5-9775-0315-0. (20 экз.)

English Русский Правила