Оглавление

2.2. Встраивание определения стилей в заголовок HTML-документа

Все определения стилей можно собрать в одном месте (листинг 2.1). В этом случае стили указываются между тегами <styie> и </style>. Сам тег <styie> должен быть расположен в разделе head HTML-документа. А в теге, к которому нужно применить стиль, указывается имя стиля с помощью параметра class.

 

Листинг 1. Пример использования стилей


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Примep использования cтилeй</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/ess">
.textl { font-size: 12pt; color: red; font-family: "Arial" }
font { font-size: 12pt; color: green; font-family: "Arial" } 
font.text2 { font-size: 12pt; color: blue; font-family: "Arial" } 
</style> 
</head> 
<body> 
<font class="textl">Текстl</font><br><!-- Красный текст --> 
<font>Текст2</font><br><!-- Зеленый текст --> 
<font class="text2">Текст3</font><br><!-- Синий текст --> 
<p class="text2">Текст4</p><!-- Цвет по умолчанию -->
<p class="textl">Текст5</p><!-- Красный текст --> 
</body> 
</html>

 

Атрибуты определения стиля, указанные между тегами <style> и </style>, заключаются в фигурные скобки. Если атрибутов несколько, то они перечисляются через точку с занятой:
<Селектор> { <Атрибут 1>: <3начение 1>; ..., <Атрибут N>: <3качекие N> }
В параметре <Cелектор> могут быть указаны следующие селекторы:
□    * — все теги. Уберем все внешние и внутренние отступы:    

      * { margin: 0; padding: 0 }


□    тег — все теги, имеющие указанное имя:

     font { font-size: 12pt; color: green; font-family: "Arial" }
     . . .

     <font>Текст2</font><!-- Зеленый текст -->


□    . Класс — все теги, имеющие указанный класс:

    .text1 { font-size: 12pt; color: red; font-family: "Arial" }

     . . .

     <font class="textl">Текст1</font> <!-- Красный текст -->

     <p class="textl">Текст2</p> <!-- Красный текст -->


И "Текст1" и "Текст2" будут красного цвета, хотя они находятся в разных тегах;

 

□   тег.Класс — все теги, имеющие указанный класс:

    font.text2 { font-size: 12pt; color: blue }

    . . .  

   <font class="text2">Текст1</font><!-- Синий текст -->


Обратите внимание, что если имя класса указать в другом теге, то он будет не определен:

   <p class="text2">Текст2</p>

В данном случае фрагмент текста "Текст2" не будет отображен синим цветом, так как имя класса text2 применяется только к тегу <font>;

 

□   #Идентификатор — тег с указанным идентификатором:

    #txtl { color: red }

     . . .

           <p id="txtl">Текст</p>


□  тег#Идентификатор — идентификатор, указанный в определенном теге:

    p#txtl { color: red }

     . . .

   <p id="txtl">Текст</p>


Если идентификатор находится в другом теге, то элемент будет проигнорирован.


Стилевой класс можно привязать сразу к нескольким тегам. В этом случае селекторы указываются через запятую:

    h1, h2 { font-family: "Arial" }


Привязаться к другим элементам можно следующими способами:


□  Селектор1 Селектор2 — все элементы, соответствующие параметру се-лектор2, которые располагаются внутри контейнера, соответствующего параметру Селектор1:

   div a { color: red }

 

Цвет текста ссылки станет красным, если тег <а> находится внутри тега <div>:

<div><a href="link.html" >Ссылка</a></div>


□  Селектор1 > Селектор2 — все элементы, соответствующие параметру Селектор2, которые являются дочерними для контейнера, соответствующего параметру Cелектор1: (1)

div > а { color: red }


Цвет текста ссылки станет красным, если тег <а> находится внутри тега <div> и не вложен в другой тег: 

   <div>

     <a href="linkl.html">Ссылка l</a><br>

     <span><a href ="link2.html">Ссылка 2</a></span>

   </div>


В этом примере только первая ссылка станет красного цвета, так как вторая ссылка расположена внутри тега <span>

 

□  Селектор1 + Селектор2 — элемент, соответствующий параметру Селектор2, который является соседним для контейнера, соответствующего параметру Cелектор1, и следует сразу после него: (2)

    div + а { color: red }

Цвет текста ссылки станет красным, если тег <а> следует сразу после элемента div:

    <div>Teкст</div>

    <a href="link.html">Ссылка</a>

При необходимости можно составлять выражения из нескольких селекторов:

    div span a { color: red }

Цвет текста ссылки станет красным, если тег <а> расположен внутри тега <span>, а тот в свою очередь вложен в тег <div>:

    <div>

     <a href="linkl.html">Ссылкаl</a><br>

     <span>

       <a href="link2.html">Ссылка2</a><br>  

     </span>  

    </div>

 

В этом примере только Ссылка2  будет красного цвета.


Для привязки к параметрам тегов применяются следующие селекторы:
□  [Параметр] — элементы с указанным параметром:

      a [id] { color: red }

Цвет текста ссылки станет красным, если тег <а> имеет параметр id:

     <a id="linkl" href="linkl.html">Ссылка1</a>


□   [Параметр='Значение' ] — элементы, у которых параметр точно равен значению:

     a [href="linkl.html"] { color: red }

Цвет текста ссылки станет красным, если параметр href тега <а> имеет значение "link1.html";


□    [Параметр^='Значение' ] — элементы, у которых параметр начинается с указанного значения:

     a[href^="li"] { color: red }

Цвет текста ссылки станет красным, если значение параметра href тега <а> начинается с "li";

 

□    [Параметр$='Значение'] — элементы, у которых параметр оканчивается указанным значением:

     a[href$=".html"] { color: red }

Цвет текста ссылки станет красным, если значение параметра href тега <а> оканчивается на расширение ".html";


□    [Параметр*='Значение'] — элементы, у которых параметр содержит указанный фрагмент значения:

    a[href*="link"] { color: red }

Цвет текста ссылки станет красным, если значение параметра href тега <а> содержит фрагмент "link".
В качестве селектора могут быть также указаны следующие псевдоэлементы:


□    : first-letter — задает стиль для первой буквы. Выделим первую букву всех абзацев:

    р:first-letter { font-size: 150%; font-weight: bold; color: red }


□    : first-line — задает стиль для первой строки. Пример:

    р:first-line { font-weight: bold; color: red }


□   : before и : after — позволяют добавить текст в начало и конец элемента соответственно. (3)

          Добавляемый  текст должен  быть  указан  в  атрибуте content:

       р:before { content: "before "; } р:after { content: " after"; }  

          <p>Текст</p>


Результат:
before Текст after

Примечания:
  • Web-браузер Internet Explorer поддерживает селектор, начиная с версии 7.0.
  • Web-браузер Internet Explorer поддерживает селектор, начиная с версии 8.0.
  • Web-браузер Internet Explorer поддерживает псевдоэлементы :before и :after начиная с версии 8.0.
<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити