Статьи - Веб-Дизайн - Советы и секреты CSS

Даже верстальщики с довольно таки большим опытом долго не могут привыкнуть к тому, что только с помощью CSS можно сделать практически что угодно — от разметки колонок до кнопок и всплывающих окон. Технология Cascading Style Sheets позволяет указывать практически любые элементы дизайна - от размера шрифтов до цвета отдельных блоков. Но не все знаю, что CSS могут сделать намного больше. Синтаксис CSS Существуют три способа применения стилей в документе HTML. 1. Встраивание (inline). Описание стиля можно встроить в различные дескрипторы (теги) HTML, для которых стиль имеет смысл, например: для объявления абзацев, заголовков, горизонтальных полос, якорей и ячеек таблицы. В следующем примере демонстрируется дескриптор объявления абзаца с добавлением к нему атрибута STYLE для получения требуемого эффекта.

текст красного цвета

2. Внедрение (embed), обеспечивающее контроль над страницей 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, в котором устанавливаете различные стили: p:first-letter { float: right; font-size: 2em; color: red;} В CSS2 определяются следующие псевдоклассы: :first-child -первый дочерний элемент другого элемента; :link - еще не посещенные ссылки; :visited - посещенные ссылки; :hover - элемент, над которым в настоящее время находится курсор; :active - активный в данный момент элемент ; :focus - элемент, имеющий фокус ввода; :lang - этот псевдокласс определяет текущий язык; :first-line - первая формированая строка абзаца; :first-letter - первая буква абзаца; :before - определяет содержимое перед элементом; :after - определяет содержимое после элемента. Разместил: Maggot   Дата: 2008-11-03 21:10