CSS	Синтаксис CSS
меню

Реклама от Google

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

Реклама от Google

Поиск

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

style.css должен содержать:

p{color: red}

Достоинства данного способа:

Используется один файл со стилем для любого количества веб-страниц, также возможно его применять на других сайтах.
Можно изменять таблицу стилей без модификации веб-страниц.
При изменении стиля в одном единственном файле, стиль автоматически применяется ко всем страницам, где есть на него ссылка. Несомненно, удобно. Указываем размер шрифта в одном только месте, и он изменяется на всех сто или больше веб-страницах нашего сайта.
Файл со стилем при первой загрузке помещается в кэш на локальном компьютере, отдельно от веб-страниц, поэтому загрузка сайта происходит быстрее.

4. Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым всегда применяется внутренний стиль, затем таблица глобальных стилей и в последнюю очередь таблица связанных стилей. В этом примере используются сразу два метода добавления таблиц стилей в документ.

   <html>
     <head>
     <style type="text/css">
     H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; }
     </style>
     </head>
     <body>
     <H1 style="font-size: 36px; font-family: Times, serif; color: red;">Hello, world!</H1>
     <H1>Hello, world!</H1>
     </body>
   </html>

В приведенном примере первый заголовок задается красным цветом размером 36 пикселов, а следующий — зеленым цветом и другим шрифтом.

основы 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}

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

На верх

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

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

CSS

Синтаксис CSS

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