Каскадные таблицы стилей (CSS)

HTML в чистом виде дает не очень богатые возможности оформления страницы. Решить эту проблему призваны стили CSS. Практически у каждого элемента (HTML-тега) существует атрибут style, значением которого является описание стилей CSS данного тега. Стили элемента задаются по следующему шаблону:

<tag style="style1: value1; style2: value2">

Стили CSS перечисляются через точку с запятой, каждый представляет собой пару "имя стиля: значение стиля", разделенную между собой двоеточием. Стиль, как правило, описывает параметры внешнего вида элемента в целом, либо его какого-либо подэлемента. Рассмотрим пример:

<span style="font-family: verdana; font-size: 10px">Hello, world!!!</span>

В контейнер span заключен текст "Hello, world!!!". span — это парный тег, который сам по себе никаких видимых изменений над своим содержимым не производит, однако позволяет применить определенные стили CSS, указанные в нем. Чаще всего его используют именно для этих целей. В нашем теге заданно два стиля CSS: стиль font-family со значением verdana и стиль font-size со значением 10px. Стиль font-family задает шрифт текста, а стиль font-size — его размер. Таким образом, текст "Hello, world!!!" будет отрисован шрифтом Verdana размером 10 пикселей.

Как и в случае с HTML ключом к успеху является знание наиболее полезных и распространенных стилей CSS. А в идеале — всех . Их достаточно много, некоторые являются общими для всех типов элементов, некоторые специфичны для определенного типа. Приведу несколько очень распространенных стилей, помимо font-family и font-size: background-color — фоновый цвет элемента, например, значение red или #ff0000 соответствует красному цвету (второй вариант записи — шестнадцатеричное значение цвета в HTML, может быть получено из таблицы HTML-цветов, либо с помощью специального калькулятора), color — цвет текста, text-align — горизонтальное выравнивание текста (left — по левому краю, center — по центру, right — по правому, justify — по ширине). Познакомиться с существующими стилями будет вашим домашним заданием :).

Теперь давайте рассмотрим такой пример: у нас есть меню, реализованное с помощью таблицы, где каждая ее ячейка — пункт меню:

    <table width="150px">
      <tr>
        <td style="border: 1px solid black; background-color: #dddd99; padding: 3px; font-family: verdana; font-size: 12px">.: Главная</td>
      </tr>
      <tr>
        <td style="border: 1px solid black; background-color: #dddd99; padding: 3px; font-family: verdana; font-size: 12px">.: Статьи</td>
      </tr>
      <tr>
        <td style="border: 1px solid black; background-color: #dddd99; padding: 3px; font-family: verdana; font-size: 12px">.: Уроки</td>
      </tr>
      <tr>
        <td style="border: 1px solid black; background-color: #dddd99; padding: 3px; font-family: verdana; font-size: 12px">.: О нас</td>
      </tr>
    </table>

Для каждой ячейки указаны стили CSS, формирующие общий вид нашего меню:

Так как к домашнему заданию вы еще не приступали, пробежимся по использованным стилям. border — стиль, задающий параметры границ (в нашем случае границ ячейки таблицы), у нас значение стиля составное, состоит из трех параметров (такое бывает, привыкайте): 1px — толщина границы (1 пиксель), solid — означает, что граница сплошная, black — цвет границы (черный). background-color — фоновый цвет, padding — ширина промежутка между границей элемента и его содержимым (подробнее о полях и отступах поговорим в следующей статье), font-family и font-size — стили шрифта, которые мы уже рассматривали. Вроде все отлично, но есть один нюанс — перегруженность кода. Одни и те же комбинации стилей несколько раз повторяются. Ситуация усугубится, если пунктов меню будет пара десятков. Поэтому лучше в данном случае воспользоваться другим способом задания стилей CSS — через тег style. Этот тег обычно располагают блоке head, либо в начале тела страницы (в начале содержимого body). Содержимое контейнера style представляет собой блоки стилей, заключенные в фигурные скобки. Перед каждым блоком находится селектор, определяющий, к каким элементам применяется данный блок стилей CSS. Сами же стили перечисляются точно также, как и в атрибуте style, правда для удобства их можно писать по одному в каждой строчке. Пример:

<style>
  span
    {
      font-family: verdana;
      font-size: 10px;
    }
</style>

Имеем один блок стилей с селектором span. Селектор может представлять собой имя тега, тогда блок стилей будет применен для всех тегов с данным именем. Рассмотренный пример применяет стили для всех тегов span на странице. В качестве селектора может выступать *, тогда блок стилей будет применен для всех элементов на странице. Например, это может быть полезно для задания общего шрифта для сайта:

<style>
  *
    {
      font-family: tahoma;
    }
</style>

Для отбора элементов в языке HTML предусмотрено два специальных атрибута — class и id. Эти атрибуты имеют текстовые значения и их можно задать любому элементу в HTML-странице. Отличия их в том, что на странице могут присутствовать несколько элементов с одинаковым значением атрибута class, в то время как элемент с определенным значением атрибута id может быть только один на странице. Пример:

<a class="link" href="/1.html">1</a><br>
<a class="link" href="/2.html">2</a><br>
<a class="link" href="/3.html">3</a><br>
<a class="link" href="/4.html">4</a><br>
<span id="text1">this is a text</span><br>
<span id="text2">this is a text</span>

Точка перед селектором означает, что данный блок стилей CSS применяется ко всем элементам, у которых значение атрибута class равно имени селектора. Знак "решетка" # перед селектором означает, что блок стилей CSS применяется к элементу со значением атрибута id равным имени селектора. То есть блок с селектором .link применится ко всем элементам с class равным link, а блок с селектором #text1 применится к элементу, у которого id равен text1.

С помощью данного способа задания стилей можно более компактно описать наше меню:

    <style>
      .menuitem
        {
          border: 1px solid black;
          background-color: #dddd99;
          padding: 3px;
          font-family: verdana;
          font-size: 12px;
        }
    </style>
    <table width="150px">
      <tr>
        <td class="menuitem">.: Главная</td>
      </tr>
      <tr>
        <td class="menuitem">.: Статьи</td>
      </tr>
      <tr>
        <td class="menuitem">.: Уроки</td>
      </tr>
      <tr>
        <td class="menuitem">.: О нас</td>
      </tr>
    </table>

То есть всем элементам меню задается определенное значение class и с помощью селектора накладываются на них стили CSS. Можно сделать еще красивее, если узнать о еще нескольких особенностях селекторов. Во-первых, селектор можно составить из нескольких селекторов, перечислив их через запятую. Тогда блок стилей применится ко всем элементам, попадающим под какой-нибудь из селекторов. Например, блок с селектором a, .small применится ко всем ссылкам (тег <a></a>) и всем элементам со значением class равным small. Во-вторых, если селекторы перечислять без запятых, то организуется своеобразная иерархичность, каждый последующий селектор будет выполнять отбор по результатам отбора предыдущего селектора. Допустим, селектор #main a .red означает следующее: все ссылки с классом равным red внутри элемента с id равным main. Получаем следующее:

    <style>
      #menu td
        {
          border: 1px solid black;
          background-color: #dddd99;
          padding: 3px;
          font-family: verdana;
          font-size: 12px;
        }
    </style>
    <table width="150px" id="menu">
      <tr>
        <td>.: Главная</td>
      </tr>
      <tr>
        <td>.: Статьи</td>
      </tr>
      <tr>
        <td>.: Уроки</td>
      </tr>
      <tr>
        <td>.: О нас</td>
      </tr>
    </table>

Селектор #menu td отберет все ячейки, находящиеся внутри элемента с id menu. Можно было использовать и class вместо id, но id подчеркивает уникальность нашего элемента (одно меню на странице).

Еще один момент. Если один элемент попадает под выбор нескольких селекторов, то применяются стили CSS каждого блока с этими селекторами, при этом повторяющиеся стили последовательно заменяются при прохождении от первого к последнему блоку. Взгляните на пример:

    <style>
      span
        {
          font-family: verdana;
          font-size: 12px;
          color: red;
        }
 
      .gid
        {
          color: blue;
          font-weight: bold;
        }
    </style>
    <span>Раз</span><br>
    <span>Два</span><br>
    <span class="gid">Три</span><br>
    <span>Четыре</span>

Все четыре элемента span попадают под селектор первого блока стилей, третий элемент попадает под выбор обоих селекторов. В обоих блоках содержится стиль color, окончательное значение этого стиля третий элемент получит из второго блока (то есть blue), так как этот блок расположен ниже.

Блоки стилей CSS можно располагать в отдельном от страницы файле. Иногда это очень удобно. Например, у вас несколько однотипных страниц (одинаковая шапка, меню, подвал, в общем, обычная ситуация для сайта). В этом случае все эти страницы могут использовать один и тот же файл стилей CSS. Файл стилей имеет расширение css, формат его содержимого точно такой же как и формат содержимого контейнера style (то есть, блоки стилей). Указать странице какой файл стилей использовать можно с помощью тега link:

<link rel="stylesheet" href="путь_и_имя_к_файлу_стиля" type="text/css">

который располагают обычно в блоке head. Одной странице можно указать несколько файлов стилей CSS (для каждого файла свой тег link).

Вынесенные стили подопытного меню в отдельный файл:

cодержимое файла style.css:

#menu td
  {
    border: 1px solid black;
    background-color: #dddd99;
    padding: 3px;
    font-family: verdana;
    font-size: 12px;
  }

содержимое файла index.html:

<html>
  <head>
    <title>Тест</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
    <table width="150px" id="menu">
      <tr>
        <td>.: Главная</td>
      </tr>
      <tr>
        <td>.: Статьи</td>
      </tr>
      <tr>
        <td>.: Уроки</td>
      </tr>
      <tr>
        <td>.: О нас</td>
      </tr>
    </table>
  </body>
</html>

Знакомьтесь с существующими стилями здесь. Практикуйтесь ;)

Оставить комментарий

Ваше имя
 
Ваш e-mail
 
Комментарий