CSS (Cascading Style Sheets — каскадные таблицы стилей) – это формальный язык, с помощью которого описывается внешний вид HTML – документа.
Как вы уже поняли, с помощью HTML мы делаем разметку элементов, которые будут у нас на сайте.
А с помощью CSS мы описываем стили тех элементов, разметку которых мы сделали с помощью HTML. Простыми словами, Cascading Style Sheets позволяет нам сделать нашу разметку красивой и именно такой, какой мы хотим её видеть.
Подключение файла стилей.
Описывание всех стилей в одном файле, который, как правило, имеет название style.css, является хорошим тоном. Если мы будем описывать стили непосредственно в файле HTML, то у нас возникнет путаница.
Файл стилей подключается в HTML-документе между тегами <head></head>:
Помещается файл стилей в ту же директорию, куда и index.html. Если файлов стилей больше одного, то они помещаются в отдельную папку.
Синтаксис CSS.
Логика языка очень проста: мы определяем селектор, для которого описываем его свойства.
В данном примере h1 является селектором, и мы описали его свойство «цвет». Что это означает? Это означает, что все заголовки h1 будут красного цвета.
Таким образом, в качестве селектора могут выступать любые теги HTML.
Если мы хотим всем элементам страницы задать какое-нибудь одно единое свойство, в качестве селектора мы используем «*».
font-family: Verdana;
}
В этом примере мы применили шрифт Verdana ко всем элементам HTML – документа.
А что делать, если мы хотим применить стиль только к одному единственному элементу?
Делается это очень просто с помощью селекторов идентификаторов.
В HTML-документе элементу присваиваем «id» с уникальным именем , (span id= “word”) и в файле стилей имя этого “id” используем в качестве селектора (#word).
Чтобы было понятней, создадим два файла: index.html и style.css.
index.html
<html>
<head>
<meta charset= "utf-8">
<link rel= "stylesheet" type= "text/css" href= "style.css" />
<title>Cascading Style Sheets</title>
</head>
<body>
<p>Первый <span id= "word">абзац</span> контента</p>
</body>
</html>
style.css
font-family: Verdana;
}
#word {
color: red;
}
Как мы видим, в index.html элементу span мы присвоили id с именем word. А в style.css мы для него прописали стили (цвет). Обратите внимание, что в CSS для селектора id впереди ставится символ решётки (#).
Результат выглядит так:
Чаще чем селекторы идентификаторов, используются селекторы классов. Отличаются они от идентификаторов тем, что их можно использовать в коде не однократно.
index2.html
<html>
<head>
<meta charset= "utf-8">
<link rel= "stylesheet" type= "text/css" href= "style2.css" />
<title>Cascading Style Sheets</title>
</head>
<body>
<div class= "top">
<h1>Заголовок</h1>
</div>
</body>
</html>
style2.css
background-color: blue;
width: 200px;
}
В данном примере элементу “div” мы присвоили класс с именем “top”и его свойства прописали в файле стилей (цвет фона и ширину).
В браузере выглядит вот так:
Существуют также селекторы псевдоклассов и псевдоэлементов, но с этим мы познакомимся позже в процессе.