Интернет магазин китайских планшетных компьютеров |
|
Компьютеры - Каскадные таблицы стилей - Обзор23 января 2011Оглавление: 1. Каскадные таблицы стилей 2. Обзор 3. CSS-вёрстка 4. История создания и развития CSS 5. Поддержка CSS браузерами 6. CSS Framework Цель создания CSSCSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы от описания внешнего вида этой веб-страницы. Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом, или при выводе устройствами, использующими шрифт Брайля. Способы подключения CSS к документуПравила CSS пишутся на формальном языке CSS и располагаются в таблицах стилей, то есть таблицы стилей содержат в себе правила CSS. Эти таблицы стилей могут располагаться как в самом веб-документе, внешний вид которого они описывают, так и в отдельных файлах, имеющих формат CSS.
<head> ..... <link rel="stylesheet" type="text/css" href="style.css"> </head>
<head>
.....
<style type="text/css" media="all">
@import url;
</style>
</head>
<head>
.....
<style type="text/css">
body {
color: red;
}
</style>
</head>
<p style="font-size: 21px; color: green;">Рассказ о том, как вредно красить батареи</p> В первых двух случаях говорят, что к документу применены внешние таблицы стилей, а во вторых двух случаях — внутренние таблицы стилей. Для добавления CSS к XML-документу, последний должен содержать специальную ссылку на таблицу стилей. Например: <?xml-stylesheet type="text/css" href="style.css"?> Иерархия элементов внутри документаКак известно, HTML-документы строятся на основании иерархии элементов, которая может быть наглядно представлена в древовидной форме. Элементы HTML друг для друга могут быть родительскими, дочерними, элементами-предками, элементами-потомками, сестринскими. Элемент является родителем другого элемента, если в иерархической структуре документа он находится сразу, непосредственно над этим элементом. Элемент является предком другого элемента, если в иерархической структуре документа он находится где-то выше этого элемента. В CSS могут задаваться, при помощи селекторов, не только одиночные элементы, но и элементы, являющиеся потомками, дочерними или сестринскими элементами других элементов. Построение правила CSSВ первых трёх случаях подключения таблицы CSS к документу каждое правило CSS из таблицы стилей имеет две основные части — селектор и блок объявлений. Селектор, расположенный в левой части правила, определяет, на какие части документа распространяется правило. Блок объявлений располагается в правой части правила. Он помещается в фигурные скобки, и, в свою очередь, состоит из одного или более объявлений, разделённых знаком «;». Каждое объявление представляет собой сочетание свойства CSS и значения, разделённых знаком «:». Селекторы могут группироваться в одной строке через запятую. В таком случае свойство применяется к каждому из них.
селектор, селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}
В четвёртом случае подключения таблицы CSS к документу правило CSS представляет собой перечень объявлений, разделённых знаком «;». Виды селекторовСелекторы правила CSS могут быть
p {font-family: Garamond, serif;}
.note {color: red; background: yellow; font-weight: bold;}
#paragraph1 {margin: 0;}
a{font-weight:bold;}
div#paragraph1 p.note {color: red;}
p.note > b {color: green;}
h1 + p {font-size: 24pt;}
a:active {color:yellow;}
p:first-letter {font-size: 32pc;}
Классы элементов. Идентификаторы элементов.Класс или идентификатор может быть присвоен какому-нибудь элементу HTML посредством атрибутов class или id этого элемента: <div id="first"> ... </div> <p class="big"> ... </p> Основное отличие между классами элементов и идентификаторами элементов в том, что в документе какой-нибудь класс может быть присвоен сразу нескольким элементам, а идентификатор - только одному. Также отличие в том, что могут существовать множественные классы. Для идентификаторов такое невозможно. Важно отметить следующее отличие идентификатора от класса: идентификаторы широко используются в JavaScript для нахождения уникального элемента в документе. Имена классов и идентификаторов, в отличие от названий тегов и их атрибутов, чувствительны к регистру ввода букв. Свойства классов и идентификаторов задаются с помощью соответствующих селекторов. Причём может быть задано как свойство класса в целом, или свойство идентификатора самого по себе, так и свойство какого-нибудь элемента этого класса или с этим идентификатором. В CSS помимо классов, задаваемых автором страницы, существует также ограниченный набор так называемых псевдоклассов, описывающих вид гиперссылок с определённым состоянием в документе, вид элемента, на котором находится фокус ввода, а также вид элементов, являющихся первыми дочерними элементами других элементов. Также в CSS существует четыре так называемых псевдоэлемента: первая буква, первая строка, применение специальных стилей до и после элемента. Наследование. Каскадирование. Приоритеты стилей CSS.Применение CSS к документам HTML основано на принципах наследования и каскадирования. Принцип наследования заключается в том, что свойства CSS, объявленные для элементов-предков, наследуются элементами потомками. Но, естественно, не все свойства CSS наследуются — например, если для тега параграфа p средствами CSS задана рамка, то она не будет наследоваться ни одним тегом, содержащимся в данном теге p, а вот если для параграфа p средствами CSS задан цвет шрифта, то это свойство будет унаследовано каждым элементом-тегом, находящимся в параграфе. Принцип каскадирования применяется в случае, когда какому-то элементу HTML одновременно поставлено в соответствие более одного правила CSS, то есть, когда происходит конфликт значений этих правил. Чтобы разрешить такие конфликты вводятся правила приоритета.
Пример таблицы стилейПример таблицы стилей:
p {
font-family: "Garamond", serif;
}
h2 {
font-size: 110 %;
color: red;
background: white;
}
.note {
color: red;
background: yellow;
font-weight: bold;
}
p#paragraph1 {
margin: 0;
}
a:hover {
text-decoration: none;
}
#news p {
color: blue;
}
Здесь приведено шесть правил CSS с селекторами
Просмотров: 6374
|