Cascading Style Sheets(CSS) - каскадные таблицы стилей. Таблицы стилей
- попытка отделить детали дизайна странички от ее структуры и
содержания. Особо важно правильно использовать синтакисис в CSS, вот о нём и поговорим вначале нашей экскурсии!
Существуют три способа применения стилей в документе HTML.
1. Встраивание (inline). Описание стиля можно встроить в различные
дескрипторы (теги) HTML, для которых стиль имеет смысл, например: для
объявления абзацев, заголовков, горизонтальных полос, якорей и ячеек
таблицы. В следующем примере демонстрируется дескриптор объявления
абзаца с добавлением к нему атрибута STYLE для получения требуемого
эффекта.
<p style="color: red"> текст красного цвета
2. Embed, обеспечивающее контроль над страницей HTML. Использование дескриптора
<body> <p>текст красного цвета </body> </html>
3. Link стили, называемые также внешними, являются развитием внедренных
стилей. При этом используется тот же дескриптор STYLE, что и ранее, но
все описания хранятся в отдельном файле (обычно с расширением .css).
Сам файл либо должен располагаться в корневом каталоге узла, либо вы
должны корректно определить связь с ним в HTML-документах.
style.css должен содержать:
p{color: red}
Селекторы Это элементы дескрипторов, задаваемые в начале определения
листов стилей; эти элементы сообщают браузеру, где применить стиль.
Стоящее после селектора определение стиля заключается в фигурные
скобки. Вот пример, в котором селектором является BODY:
body { color: blue} Несколько селекторов можно группировать вместе, отделив их друг от друга запятыми:
h1, p, h2{font-size: 12px}
Вместо селекторов можно использовать маску * . В данном примере стиль с
определенным кеглем шрифта применяется ко всем находящемся на странице
дескрипторам:
* { font-size: 14pt} Другим символом маски
является знак > . Таким образом, браузеру дается указание искать
дочерние селекторы в пределах определенного родительского. В данном
примере стиль применяется только к элементам LI спискам OL:
ol > li {list-style-type: decimal}
Используя селекторы классов, можно к одному и тому же дескриптору
применять разные стили. После общего селектора следуют точка и имя
класса, и стиль применяется тому дескриптору, чей атрибут CLASS
соответствует этому имени. В следующем примере стиль применяется ко
всем дескрипторам H2, у которых атрибут CLASS равен "myBlue":
h2.mybule {background-color: bule}
у этого заголовка синий фон
Селекторы также можно определять с помощью атрибута id, используя для
этого символ # . В следующем примере стиль соответствует любому
дескриптору, у которого значение атрибута id является "ducie"
#ducie {border-color: yellow}
Селектор A[att] соответствует любому элементу А, у которого задан
определенный атрибут, не зависимо от его значения (не работает в IE).
table[border]{ border:1px solid red;}
Селектор A[att=”val”] соответствует любому элементу А, определенный
атрибут которого имеет заданное значение (не работает в IE).
input[type=”submit”] {background-color :red;}
Селектор А[lang|=”val”] соответствует любому элементу А, который имеет
заданное значение в качестве одного из значений атрибута lang (не
работает в IE).
P[lang|=”en”]{text-align:left;}
Псевдоклассы.
Псевдокласы являются особой группой, позволяющей объединять несколько
стилей для какого-либо объекта. Например, вы можете задать свойства для
первой буквы параграфа. Для этого вы назначаете для дескриптора P
псевдокласс :first-letter, в котором устанавливаете различные стили:
В CSS2 (гарантий адекватного отображения всеми браузерами нет! )определяются следующие псевдоклассы: :first-child -первый дочерний элемент другого элемента; :link - еще не посещенные ссылки; :visited - посещенные ссылки; :hover - элемент, над которым в настоящее время находится курсор; :active - активный в данный момент элемент ; :focus - элемент, имеющий фокус ввода; :lang - этот псевдокласс определяет текущий язык; :first-line - первая формированая строка абзаца; :first-letter - первая буква абзаца; :before - определяет содержимое перед элементом; :after - определяет содержимое после элемента.
