Что такое 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>.
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: