CSS

Синтаксис CSS

меню

описание css основы css html css dvd region css free

основы css cинтаксис css типы листов стилей типы css селекторы псевдоклассы hover css
основы css cинтаксис css типы листов стилей типы css селекторы псевдоклассы hover css
основы css cинтаксис css типы листов стилей типы css селекторы псевдоклассы hover css

     Типы листов стилей. 
   Существуют три способа применения стилей в документе 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>текст красного цвета
      </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}
основы css cинтаксис css типы листов стилей типы css селекторы псевдоклассы hover css
основы css cинтаксис css типы листов стилей типы css селекторы псевдоклассы hover css
основы css cинтаксис css типы листов стилей типы css селекторы псевдоклассы hover css
     Селекторы. 

Это элементы дескрипторов, задаваемые в начале определения листов стилей; эти элементы сообщают браузеру, где применить стиль. Стоящее после селектора определение стиля заключается в фигурные скобки. Вот пример, в котором селектором является 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}
     Псевдоклассы. 

Псевдокласы являются особой группой, позволяющей объединять несколько стилей для какого-либо объекта. Например, вы можете задать свойства для первой буквы параграфа. Для этого вы назначаете для дескриптора 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 - определяет содержимое после элемента.

Примеры: [1][2]

На верх Написать письмо WEB-мастеру Печать Добавить в избранное Cделать стартовой

основы css cинтаксис css типы листов стилей типы css селекторы псевдоклассы hover css

основы css cинтаксис css типы листов стилей типы css селекторы псевдоклассы hover css

основы css cинтаксис css типы листов стилей типы css селекторы псевдоклассы hover css