Подключение CSS
Всем доброго времени суток. На связи Алексей Гулынин. В данной первой статье по CSS, я бы хотел рассказать в целом о CSS, и о том, как подключить CSS к html-странице. CSS — это каскадные таблицы стилей (или просто можно называть стилями), которые отвечают за то, как отобразить элементы на вашей html-странице. Если просто добавлять элементы на html-страницу без атрибутов, то все они будет размещаться сверху вниз и будут выравнены по левой стороне браузера. Это скучно и однообразно.
Элементы html — это каркас нашей страницы, т.е. html отвечает за то, ЧТО отображать на странице. CSS, в свою очередь, отвечает КАК отображать все эти элементы. Можно создать одну и ту же html-страницу и придумать для неё тысячи вариантов оформления. И всё это будет выглядеть, как различные сайты. Вы можете погулять по интернету и посмотреть сколько много красивых сайтов на его просторах.
На данный момент, вы должны были уяснить, что, если вы хотите создать красивый дизайн, то без знания CSS, вы этого сделать не сможете. Поэтому вперед, к постижению данной науки, называемой CSS.
Давайте подключим файл стилей CSS к html-странице. Делается это в заголовке документа, между тегами <head>..</head>:
<html> <head><title>Подключение CSS</title> <link href="style.css" type="text/css" rel="stylesheet"/> </head> <body> </body> </html>
Давайте разберемся, что мы здесь написали. Файлы стилей подключаются с помощью тега link. Знакомый уже нам атрибут href указывает на путь до файла стилей. Тут можно указывать, как абсолютные, так и относительные пути. В данном случае подразумевается, что наш файл style.css находится в одной директории с файлом, в котором мы подключаем стили. Атрибут type="type/css" указывает, что тип документа — css, атрибут rel="stylesheet" говорит браузеру, что мы подключаем стили (rel с англ "relationship" — отношения).
Можно также задавать стили элементам и другими способами. Давайте создадим html-страницу со следующим содержимым:
<html> <meta charset="utf-8"/> <head><title>Подключение CSS</title> </head> <body> <p>Первый абзац</p> <p>Первый абзац</p> <p>Первый абзац</p> <p>Первый абзац</p> </body> </html>
Помимо создания файла со стилями, мы может записывать стили в заголовок документа с помощью тега <style>. Это, так называемый, внедренный стиль. Давайте сделаем, чтобы все наши абзацы имели красный цвет (подробнее об этом поговорим в следующей статье, посвященной селекторам CSS). Код будет иметь следующий вид:
<html>
<meta charset="utf-8"/>
<head><title>Подключение CSS</title>
<style>
p {
color:red;
}
</style>
</head>
<body>
<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац</p>
<p>Четвертый абзац</p>
</body>
</html>
Таrже стили можно задать прямо в элементе, с помощью атрибута style (это так называемый inline-стиль). Давайте сделаем второй абзац зеленым и выравним его по правому краю. Для этого нужно добавить такую конструкцию:
<p style="color:green;text-align:right;">Второй абзац</p>
Теперь мы видим, что абзац стал зеленым и выравнился по правому краю.
Существует ещё один способ добавления стилей на html-страницу. Это импортированные стили. Они задаются в заголовке страницы, но из файла, а не напрямую:
<head>
<style>
@import url("style.css");
</style>
</head>
При добавлении стилей на страницу могут возникать конфликтные ситуации. Например, в файле стилей мы можем задать цвет текста всех абзацев (тег p) красным, а к одному из них применить inline-стиль. Как же определить браузеру, какой цвет использовать? Давайте определим приоритеты, которые используются браузером:
1) Стили из файла (имеют самый низший приоритет)
2) Импортированные стили
3) Внедренные стили
4) inline-стили (имеют самый высокий приоритет, т.е. браузер выполнит их в первую очередь).
В данной статье вы узнали, как можно подключить CSS к html-странице и как можно применять эти стили.
На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.
