закрыть ВНИМАНИЕ! 13 ФЕВРАЛЯ СОСТОИТСЯ НАБОР НА КУРСЫ МЕДИТАЦИИ МЕДИТАЦИЯ - основное средство развития психики и самопознания. Познать метод, дающий внутреннюю гармонию и раскрывающий внутренние глубины предлагают данные курсы.

Подробности на странице: http://untaware.blogspot.ru/p/0021_30.html

CSS

Cascading
Style
Sheets

Каскадные таблицы стилей CSS ­­­появились гораздо позже HTML – только в 1997 году. Несмотря на то, что CSS работает с HTML, это не HTML. Более того, CSS представляет собой отдельный код, который расширяет возможности HTML, позволяя переопределять уже существующие HTML-теги.
Связано это с тем, что WWW была создана как средство для обмена текстовыми документами, а HTML был языком, с помощью которого создавались эти документы.
Для военных и ученых главным было содержимое документ, а не его оформление. Поэтому первые версии HTML не включали даже средств для размещения на веб-страницах графических изображений, тем более для сложного форматирования текста. Но со временем в интернет пришли остальные люди и потребовали, чтобы им "сделали красиво".
Так возникли каскадные таблицы стилей, созданные для облегчения работы веб-дизайнеров. В настоящее время приняты CSS1 и CSS2. Рекомендация W3C для CSS2 принята 12 мая 1998 года.
CSS третьего уровня (CSS3) еще находится в стадии разработки. Но даже после ее выпуска браузеры только через несколько лет начнут ее поддерживать.

CSS упрощает и расширяет форматирование объемных страниц или сайтов

Перевод спецификации:
http://css.find-info.ru/css/009/index.html

 

/* Это комментарии в CSS */

Четыре способа задания стиля

<p style="font-size: 21px; color: green;">Рассказ о том, как вредно красить батареи</p>

<head>
<style type="text/css">
hr {color:#000000;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Стили</title>
<link rel="stylesheet" type="text/css" href="mysite.css">
</head>
<body>
<h1>Добавление ссылки на отдельный файл стилей</h1>
</body>
</html>

Путь к файлу со стилями может быть как относительным, так и абсолютным

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Стили</title>
<style type="text/css" media="all">@import "style.css";
@import url(http://www.htmlhelp.com/style.css);
@import url(/stylesheets/punk.css);
p { background: yellow; color: black }
</style>
</head>
<body>
<h1>Добавление ссылки на отдельный файл стилей</h1>
</body>
</html>

Синтаксис

Определение оформления внутри тега с помощью атрибута STYLE имеет следующий вид: внутри угловых скобок тега, отделенный от имени тега пробелом, указывается атрибут STYLE, затем знак равенства и в кавычках перечень свойств и их значений, разделенных точкой с запятой. Свойства отделяются от значений двоеточием:
<P style='color: green; border: solid red'>
Определение стилей в заголовке страницы или отдельном файле происходит почти так же, только тег STYLE, указанный вначале определения не повторяется, а роль кавычек выполняют фигурные скобки:
P {color: green; border: solid red}
Поскольку для HTML-документа пробел и перенос строки равносильны, эту запись можно разнести на несколько строк:
P {
color: green;
border: solid red
}
Это обычно и делается многими авторами для удобства поиска отдельных свойств, хотя при увеличении таблицы стилей, усложняется поиск начала и конца стиля. Чтобы избежать этого, атрибуты часто пишутся с отступами от края:
P {
color: green;
border: solid red
}
Во внутрь определения стиля может быть помещен комментарий, заключенный между /* и */. Например:
P {/* Это пример определения стиля */
color: green;
border: solid red
}
/* комментарий может быть помещен в любом месте */
Поскольку определения стиля закомментировано тегами <!-- и -->, комментарий между /* и */ не будет отображаться в теле документа. К ошибкам интерпретации он тоже не приведет, поскольку на языке CSS это то же самое что <!-- и --> на языке HTML.

 

Свойства CSS

в отдельном файле


Для тегов имеющих одинаковые определения допускается группировка, при которой они записываются в одну строку через запятую, а затем указываются из свойства и значения свойств:

Групировка селекторов

h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}

 

h1, h2, p
{
color:green;
}

В одном блоке STYLE может быть множество стилей. Допустимое количество самих блоков так же, неограниченно. При этом если определения стилей находятся в файлах, заданных атрибутом link, предпочтение отдается первому из них – следующий ищется только в случае невозможности загрузить или интерпретировать первый, если же одни и те же стили несколько раз определены в самом документе (что может быть вызвано только невнимательностью автора), предпочтение отдается последнему.
Пример определения стилей для нескольких тегов:
<STYLE type="text/css">
<!--
A:link {color: #F30; background: transparent}
A:visited {color: #363; background: transparent}
A:hover {background: #FFA}
A:active {color: #F30; background: transparent}

PRE {margin-left: 2em}
P {
margin-top: 0.6em;
margin-bottom: 0.6em;
}
DT, DD {margin-top: 0; margin-bottom: 0} /* opera 3.50 */
-->
</STYLE>
В этом примере приведены специальные селекторы (теги) A:link, A:visited, A:active и A:hover, означающие: непосещенную гиперссылку, посещенную гиперссылку, выполняемую в данный момент гиперссылку и гиперссылку над которой находится указатель мыши. Эти теги не приходится указывать в теле документа (следует указать лишь <A> с необходимыми ему атрибутами). Браузер сам определит состояние ссылки и организует ее внешний вид соответствующим образом.

Разделение тегов на классы, понятие селектора

Вышеприведенный пример на гиперссылках показал что, CSS допускает наличие нескольких видов оформления одних и тех же тегов, таким образом, понятие тега становится слишком узким для применения в CSS и заменяется понятием селектора. Селектор это общее название стиля. Если стиль определяется для тега P, то тег P является селектором CSS, а если для A:Link, то селектором является не тег A, а именно A:Link, не являющийся тегом и требующий для своего обозначения отдельного термина. Таким образом, селектор – это имя, данное элементу страницы для которого определяется стиль отображения.
Оперирование селекторами имеет принципиальное значение для таблиц стилей, поскольку позволяет создавать различное оформления для одних и тех же тегов. Для того чтобы выделить тег в отдельный класс оформления, после его имени, через точку, записывается произвольное название класса:
<style type="text/css"><!--
p.myclass {margin-left:5pt; margin-top: 0.6em; margin-bottom: 0.6em}
--></style>
При необходимости обращения к этому классу в объявлении тега указывается класс, на теги, имеющие то же имя, но принадлежащие к другому классу, параметры отображения указанного класса не повлияют. Например:
<P>Пример обычного абзаца</p>
<P class='myclass'>Пример абзаца с особыми параметрами</p>
<P>Снова обычный абзац. </p>

В определении классов допустима та же группировка, что и в общем определении оформления тега: 

P.MyClass, Div.MyClass {margin-top: 0.6em; margin-bottom: 0.6em}

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

Div.MyClass {margin-top: 0.6em; margin-bottom: 0.6em}
.MyClass {margin-left: 0.6em; margin-right: 0.6em}

Идентификаторы CSS

Идентификаторы пишутся не через точку, а через знак лестницы: 

P#MyClass {margin-left:5pt; margin-top: 0.6em; margin-bottom: 0.6em}

Затем, внутри тегов указываются через атрибут ID: 

<P>Пример обычного абзаца</p>
<P ID='MyClass'>Пример абзаца с особыми параметрами</p>
<P>Снова обычный абзац. </p>

Идентификатор отличается от класса тем, что с одним именем он не может дважды быть применен на странице!

 

Контекстные селекторы

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

H1 EM {color: red}

Элемент EM, являющийся тегом HTML, будет оформлен по тексту как обычный EM, но внутри заголовка первого уровня примет указанное оформление. Фактически, контекстные селекторы мало отличаются от обычных. Единственное отличие заключается в отсутствии необходимости указывать класс элемента при его объявлении в теле документа. Вот пример оформления текста с помощью обычного селектора, идентификатора и контекстного селектора: 

<html>
 <head>
  <title>title</title>
  <style type="text/css">
     p.red { color: red }
     .red small { background: blue }
     #red { color: red }
    h1 em {color: red}
  </style>
 </head>
 <body>
  <h1>Заголовок, стиль которого не определялся и <em>красный элемент в нем </em></h1>
<p>Текст простого абзаца стиль которого не определялся и <em>элемент</em>
стандартного оформления, рядом с которым <span id=RED>красный элемент</span>,
определенный с помощью идентификатора.
<p class=red>Полностью красный абзац и <small>внутри него  элемент SMALL с определенным
фоном</small>
</body>
</html>

 

Универсальный селектор – применяется ко всем элементам

* {
padding:0;
margin:0;
}

Теги <div> и <span> - все что надо для создания сайта!...?

 

Селекторы дочерних элементов; Дерево документа

Дерево документа
Дерево элементов, закодированное в исходном документе. Каждый элемент в этом дереве имеет только один родительский элемент, за исключением корневого элемента, у которого его нет.
Дочерний элемент
Элемент А называется дочерним по отношению к элементу B, если и только если B является родительским элементом элемента А.
Потомок
Элемент А называется потомком элемента B, если выполняется одно из следующих условий:
(1) А является дочерним элементом элемента B;
(2) А является дочерним элементом элемента C, который, в свою очередь, является потомком B.
Предок
Элемент А называется предком элемента B, если и только если B является потомком элемента А.
Сестринский элемент
Элемент А называется сестринским элементом элемента B, если и только если элементы А и B являются дочерними элементами одного и того же элемента. Элемент А является предшествующим сестринским элементом, если в дереве документа он находится перед элементом B. Элемент A является следующим сестринским элементом, если в дереве документа он находится после элемента B.
Предшествующий элемент
Элемент А называется предшествующим элементу B, если и только если (1) А является предком B или (2) А является предшествующим сестринским элементом элемента B.
Cледующий элемент
Элемент А называется следующим за элементом B, если и только если B предшествует элементу А.

 

Псевдоклассы и псевдоэлементы

 

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

Ограничения наследования

Исключения в механизме наследования

 

Каскадность стилей

Превосходство близкого родительского элемента

Преимущество непосредственно примененного стиля

Конфликт стилей: побеждает ближайший к элементу стиль

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

Селектор

Количество
идентификаторов в селекторе
(A)

Количество
классов и псевдоклассов в селекторе
(B)

Количество
имен элементов в селекторе
(C)

Специфичность

*

0

0

0

0

p

0

0

1

1

p span

0

0

2

2

div ul li

0

0

3

3

.star

0

1

0

10

h3.news

0

1

1

11

li:hover

0

1

1

11

ul li.active

0

1

2

12

p.special.b3

0

2

1

21

div.block ul li a:hover

0

2

4

24

#content

1

0

0

100

div#sidebar

1

0

1

101

div#sidebar ul.caps

1

1

2

112

p#buttons span a.active

1

1

3

113

div#footer div#subfooter

2

0

2

202

CSS Float в теории и на практике

http://designformasters.info/posts/css-float-theory-and-practice/