Что такое HTML+CSS

С помощью языка CSS можно менять всё оформление HTML страницы, все свойства тегов. К примеру, изменять цвет текста или сам шрифт, делать цветные рамки таблицам и даже простейшую анимацию. В этой статье рассмотрим основы CSS. Затем перейдём к более сложным примерам.

К примеру, зададим особый стиль для тега <b>. Этот тег выделяет текст жирным. А мы сделаем такой текст ещё и красным. Для этого используем следующий CSS код:

b {
   color: red;
}

Строчка "color: red;" называется свойством и его значением. Нетрудно догадаться из названия, что это свойство отвечает за цвет. А значение, которое пишется через двоеточие, делает его красным. В итоге, на странице браузера текст, выделенный тегом <b>, будет автоматически становиться красным:

Часть текста выделена жирным шрифтом

Есть возможностьзадавать сразу несколько свойств для одного селектора. Тогда надо разделять из через точку с запятой ";". Об этом читайте далее в статье.

В CSS коде выше, в примере, b называется "селектором". Этот селектор соответствует тегу <b>. По аналогии вы можете использовать другие теги в качестве селекторов: "table", "tr", "i" и т.д.

Где хранится CSS код?

Стили для элементов страницы задаются несколькими способами. Самый простой - это внутри тега <style> в любом месте страницы. В таком случае HTML код выглядит так:

<!DOCTYPE html>
<html>
   <head>
      <title>Про мышей</title>
   </head>
   <body>
      Тише, <b>мыши</b>, кот на крыше,<br>
      а котята ещё выше.<br>
      <i>Кот</i> пошёл за молоком,<br>
      а котята кувырком.<br>
      <i>Кот</i> пришёл без молока,<br>
      а котята ха-ха-ха.
      <style>
         b { 
            color: green;
            font-size: 120%;
         }
         i { 
            color: red;
            font-size: 80%;
         }
      </style>
   </body>
</html>

Свойство "font-size: 120%;" задаёт размер шрифта относительно общего размера шрифта. При значении больше 100% оно увеличивает шрифт. Получится такой результат:

Тише, мыши, кот на крыше,

а котята ещё выше.

Кот пошёл за молоком,

а котята кувырком.

Кот пришёл без молока,

а котята ха-ха-ха.

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

Тег <style>, внутри которого пишется CSS код, может быть где угодно на странице. Часто этот тег ставят в раздел <head>.

CSS правила могут переопределять друг-друга. Если несколько раз написать один и тот же селектор с одним и тем же свойством, то применится только последний:

b {
   color: red;
}
b {
   color: green;
}

- в таком случае текст внутри тега <b> будет зелёным, а не красным, потому что значение свойства будет переопределено последним совпадением.

Можно задать сколько угодно свойств. В том числе те свойства, которые будут переопределить родные свойства тегов. К примеру, тегу <b> можно задать свойство, при котором он перестанет выделять текст жирным.

При таком способе записи CSS и HTML перемешиваются, что сильно усложняет работу программисту. Логичным выходом является сбор всех стилей в одно место. А точнее - в один отдельный файл, который загружается при загрузке страницы. Такой файл можно подключить к HTML с помощью тега <link> внутри блока <head>:

<!DOCTYPE html>
<html>
   <head>
      <title>Про мышей</title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      Тише, <b>мыши</b>, кот на крыше,<br>
      а котята ещё выше.<br>
      <i>Кот</i> пошёл за молоком,<br>
      а котята кувырком.<br>
      <i>Кот</i> пришёл без молока,<br>
      а котята ха-ха-ха.
   </body>
</html>

На пятой строчке примера видно, что в блоке <head> появился подключаемый файл со стилями:

<link rel="stylesheet" href="style.css">

По аналогии со ссылками в href="..." можно писать как относитльный путь к файлу стилей, так и абсолютный.

Подключаемый файл стилей "style.css" будет содержать всё, что было внутри тега <style>...</style> из предыдущего примера. То есть:

b { 
   color: green;
   font-size: 120%;
}
i { 
   color: red;
   font-size: 80%;
}

CSS файл "style.css" - это точно такой же текстовый файл, что и HTML. Для изменения этого файла вам понадобится любой текстовый редактор. Нет необходимости применять специальные программы.

Последний способ указать CSS свойство - это непосредственно внутри тега, в атрибуте style="...". В таком случае свойством будет обладать только один тег, а не все теги на странице. Применять это можно так:

Часть текста <b style="color: red;">выделена</b> жирным шрифтом

Можно указать сразу несколько свойств через ";". Результат на странице будет таким:

Часть текста выделена жирным шрифтом

Помните о том, что свойства перезаписываются. Самым важным является CSS, указанный непосредственно внутри атрибута тега style="...". Эти свойства будут применены в любом случае. А CSS в подключенном файле в секции <head>...</head> будет перезаписываться свойствами, которые находятся на странице ниже, внутри <style>...</style>.