. : Здесь могла бы быть ваша реклама : .
    Версия 4.0  . : Главная  . : HTML  . : CSS  . : SSI  . : Написать  . : Гостевая    05 мая 2008 г.  
 . : CSS
 : Граница
 : Звук
 : Отступ
 : Поля
 : Страница
 : Таблицы
 : Текст
 : Фон
 . : Описание CSS

Описание CSS

Немного о CSS

Так что это такое - СSS? Cascading Style Sheets (Таблицы Каскадных Стилей) - это язык, содержащий набор свойств для описания внешнего вида любых HTML документов. С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента веб страницы, что проще и гораздо функциональнее использования обычного набора HTML тегов.

Типы листов стилей.

Существуют три способа применения стилей в документе HTML.
  1. Встраивание (inline). Описание стиля можно встроить в различные дескрипторы (теги) HTML, для которых стиль имеет смысл, например: для объявления абзацев, заголовков, горизонтальных полос, якорей и ячеек таблицы. В следующем примере демонстрируется дескриптор объявления абзаца с добавлением к нему атрибута STYLE для получения требуемого эффекта. 
       <p style="color: red"> текст красного цвета </p>

  2. Внедрение (embed), обеспечивающее контроль над страницей HTML. Использование дескриптора <STYLE> в пределах раздела <HEAD> страницы позволяет детально описать атрибуты, применяемые ко всей странице стиля. 
       <html>
    <head>
      <style>
         <! --
          p{color: red}
        -->
       </style>
     </head>
      <body>
       <p>текст красного цвета </p>
      </body>
   </html>
  3. Связанные (link) стили, называемые также внешними, являются развитием внедренных стилей. При этом используется тот же дескриптор STYLE, что и ранее, но все описания хранятся в отдельном файле (обычно с расширением .css). Сам файл либо должен располагаться в корневом каталоге узла, либо вы должны корректно определить связь с ним в HTML-документах. 
       <html>
    <head>
       <link rel="stylesheet" href="style.css" type="text/css" >
     </head>
      <body>
       <p>текст красного цвета</p>
      </body>
   </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}
...
   <h2 class="mybule">у этого заголовка синий фон</h2>

Селекторы также можно определять с помощью атрибута 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 - определяет содержимое после элемента.

© LIV 2008