CSS

Содержание:

CSS

Заголовок	Жирный, крупный и по центру
Абзац	Отступы и переносы строк
Список	Маркеры и переносы строк

Каскадные таблицы стилей - формальный язык описания внешнего документа, написанного с использованием языка разметки.

Tag font deprecated

<font face="verdana" color="green">some text</font>

Элемент style

Отвечает за стилистическое оформление страницы(шрифт, размер шрифта, цвет…) и находится в <head> ().

Включение таблиц стилей в документ

                                                ↓ П
                                                ↓
<link rel="stylesheet" href="main.css"          ↓ Р
type="text/css">                                ↓
                                                ↓ И
Где main.css:                                   ↓
                                                ↓ О
h1 { font-size: 40px;                           ↓
font-family: Verdana, sans-serif;               ↓ Р
color: #333366; }                               ↓
p { font-size: 14px;                            ↓ И
text-align: center;}                            ↓
                                                ↓ Т
<h1 style="border-width: 1; border: solid;      ↓
text-align: center"> Заголовок </h1>            ↓ Е
                                                ↓
                                                ↓ Т

Типы устройств

<link rel="stylesheet" href="sc.css" media="screen">
<link rel="stylesheet" href="prn.css" media="print">

<style media="screen">
h1 { color: #333366; }
</style>

Значение атрибута media
aural	синтезатор речи
print	принтер
projection	проектор
screen	графический дисплей
tv	телевизор

CSS1 и СSS2: исторический обзор

1994 г. Хокон Виум Ли предложил термин «каскадные таблицы стилей»
1996 г., декабрь W3C стандартизировал CSS1
1998 г., май W3C стандартизировал CSS2

Возможности CSS1

Параметры шрифтов
Цета
Атрибуты текста
Выравнивание для элементов
Свойста блоков: размеры, отступы и рамки

Возможности CSS2

Блочная верстка
Типы носителей
Звуковые таблицы стилей
Расширенный механизм селекторов

CSS3 - набор стандартов

Синтаксис CSS

Табллица стилей состоит из операторов: директив и правил

@import - включает другую таблицу стилей в текущую.

@media - Задает имена устройств отображения.

@import "mystyle.css"
@media print{
    body {font-size: 10pt}
}

Правило состоит из селектора и деклараций:

h1 { font-size: 120%; /*относительный размер*/
font-family: Verdana;
color: #333366; } 

Директива @import

<head>
 <title>Импортирование</title>
 <style>
@import url(mystyle.css)
/*далее следуют правила... */
 </style>
</head>

Если правил несколько - то побеждает последнее описанное

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;

Директива @media

Директива @media создает таблицы стилей, зависящие от устройства отображения.

@media print {
 body { font-size: 20pх }
}
@media screen {
 body { font-size: 12pt }
}
@media print, screen{
 body {line-height: 1.2pt }
} 

Типы данных CSS

Целые и действительные числа
Размеры = <число> с единицей измерения
- Абсолютные единицы измерения
  - cm
  - mm
  - in
- Относительные единицы измерения
  - px (PICture ELement)
  - em (ширина m в используемом шрифте)
  - ex
Процентные значения = <Число>%
URL
Цвета
Строки
Счетчики
Угловые величины
Времена
Частоты

Примеры

b- жирный

i - наклонный

h1 { margin: 0.5em }
h2 { word-spacing: 0.5in }
h3 { font-size: 12px }
body { background:
url(http://mysite.com/bg.gif) }
em { color: red }
body:after {content: "Конец документа" }

Иерархия элементов в html документе

<html>
<head>
 <title>Тег STYLE</title>
 </head>
<body>
 <h1>Hello, world!</h1>
 <p>Текст абзаца зеленого цвета</p>
</body>
</html>

                          HTML
                           |
                        --- ---
                        |      |
                       head   body
                        |       |
                      title  --- ---
                            |      |
                            h1     p

Селекторы CSS

Составной селектор - образуется из простых селекторов соединением их с помощью специльных символов
Простой селектор = Базовый селектор, за которым следует нуль или более селекторов атрибутов, селекторов идентификаторов или (псевдо) классов
Базовый селектор = Универсальный селектор или селектор типа
- Универсальный селектор *
- Селектор типа

Базовые селекторы: примеры

h1 {font-size: 120%; }
* {font-size: 120%; }
h1, h2, h3 {font-size: 120%; }

Селекторы классов

<style>
	p.note {font-size: 80%;}
	p.cite {text-align: center;}
</style>

<p class=”note”> - Для HTML-документов CSS поддерживает селекторы классов, которые основаны на использовании атрибута class и имеют вид element.class

<p class=”site”*> - If an element has multiple class attributes, their values must be concatenated with spaces between the values before searching for the class… © w3c.org

.info {font-style: italic}

<p class=”info”> - Селектор класса может не содержать названия элемента. Такое правило относится ко всем элементам, имеющим атрибут class со значением “warning”

<div class=”info”> - Селектор класса, не содержащий имени элемента, следует понимать как селектор *.class, в котором универсальный селектор * опущен

p.warning.red { font-style: italic }

<p class=”warning red blue”> - Применимо

<p class=”warning blue”> - Неприменимо

Селекторы идентификаторов

<style>
	#note {font-size: 80%;}
</style>

<p id=”note”> - Документы могут содержать элементы с атрибутами id, задающими уникальные идентификаторы этих элементов

<style>
	h1#info {font-size: 80%;}
</style>

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

<style>
h1[title] {color: blue;}
p[text-align="right"] {color: blue;}
a[href^="http"]:after {content:attr(href)}
a[href$=".pdf"]:after{content: url(pdf-con.png)}
a[href*="w3c"] {text-decoration: none;}
p[class~="info"] {color: red;}
*[lang|="en"] {color: blue;}
</style>

Полный список и примеры см. http://htmlbook.ru/samcss/selektory-atributov

Пример

style>
 a[target="_blank"]{
 background:url(ico.png) 0 6px no-repeat;
 padding-left: 15px;}
</style>
<a href="1.html">Обычная ссылка</a>
<a href="2.html" target="_blank">Ссылка в
новом окне</a>

Селекторы потомков и соседей

<style>
p span {color: blue;}
body > p {text-indent: 3em;}
div ol>li p {line-height: 1.5;}
H1 + H2 { margin-top: -5mm;}
H1.opener + H2 { margin-top: -5mm;}
</style>

Псевдоклассы

http://htmlbook.ru/css/cat/pseudoclass

<style>
DIV > P:first-child {text-indent: 3em;}
</style>

\<div>

<p> - Псевдокласс: first-child соответствует элементу, который является первым ребенком данного элемента </p>

<p> - Следующий абзац не написан с красной строки </p>

</div>

Наследование

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

<head>
 <title>Наследование</title>
 <style>
 h1 { color: red;}
 </style>
</head>
<body>
 <h1>
Этот заголовок <em>очень важен</em>!
 </h1>
</body>

Пример

<head>
 <title>Наследование</title>
<style>
 table { color: red;
background: #333;
border: 2px solid red;}
 </style>
</head>
<body>
 <table cellpadding="4" cellspacing="0">
 <tr>
<td>Ячейка 1</td><td>Ячейка 2</td>
 </tr>
 <tr>
<td>Ячейка 3</td><td>Ячейка 4</td>
 </tr>
 </table>
</body>

Таблицы стилей могут иметь три источника происхождения: автор, пользователь(сам может написать таблицу стилей) и обозреватель.

Выбираются декларации, которые соответствуют данному устройству отображения; из них выбираются правила, чьи селекторы соответствуют данному элементу.
Декларации сортируются по весу их источника.
Производится вторичная сортировка по специфичности селектора.
Если два правила имеют одинаковый вес и специфичность, то применяется последнее из них. При этом правила импортированных таблиц располагаются до всех правил импортирующей таблицы.

Директива !important

Атрибут !important позволяет правилам пользовательской таблицы стилей перекрывать авторские

Стиль автора	Стиль пользователя	Результат
!important	!important	Пользовательский
!important	-	Авторский
-	!important	Пользовательский
-	-	Авторский

*/ Из таблицы стилей пользователя */
P { text-indent: 1.5em !important }
P { font: 12pt sans-serif !important }
P { font-size: 24pt }

*/ Из таблицы стилей автора */
font: font-style | font-size | font-family и другие

Специфичность селектора

Порядок вычисления специфичности селектора :

a) подсчитать количество атрибутов id в селекторе;
b) подсчитать количество атрибутов class в селекторе (псевдоклассы учитываются);
c) подсчитать количество названий тегов HTML в селекторе.

Эти три числа записываются подряд, чтобы получить число из трех цифр (возможно, придется привести числа a, b и c к системе счисления с большим основанием, чтобы каждое из них выражалось одной цифрой). Результатом и будет специфичность селектора (чем она выше, тем селектор специфичней).

Селектор	Вес	Специфичность
*	a=0 b=0 c=0	0
li	a=0 b=0 c=1	1
li:first-line	a=0 b=0 c=2	2
ul li	a=0 b=0 c=2	2
ul ol+li	a=0 b=0 c=3	3
ul lo.red	a=0 b=1 c=2	12
li.red.level	a=0 b=2 c=1	21
#t34	a=1 b=0 c=0	100
#cont #wrap	a=2 b=0 c=0	200

Вычисление значения свойств

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

Значение определяется из спецификации(специфицированное значение)

а) Если каскад возвращает значение, то используется оно;

b) Если свойство является наследуемым, от используется соответствующее значение отцовского элемента;

c) Иначе используется начальное значение свойства.
Значение при необходимости преобразуется к абсолютному значению (вычисленное значение).
Значение преобразуется с учетом ограничений контекста(фактическое значение).