Добавление стилей в HTML-документ
Помните невидимую «голову» документа? Именно в ней можно указать адрес CSS-файла со стилями:
<head>
<link rel="stylesheet" href="main.css">
</head>
Если HTML-файл лежит в одной директории с файлом main.css, то стили из этого CSS-файла будут применены к странице. Если же файл лежит в другом месте, то нужно указать путь к нему. Например, если структура директорий такая:
my_site/
├── css/
│ ├── main.css
├── html/
│ ├── index.html
То в файле index.html путь нужно указать так:
<head>
<link rel="stylesheet" href="../css/main.css">
</head>
Такой путь называется относительным. Он указывается относительно текущего расположения файла index.html. Чтобы добраться до файла main.css нам было нужно выйти из директории html. Это делается с помощью конструкции ../. Далее мы указали директорию css и название нашего CSS файла.
Существуют также абсолютные пути. Они всегда строятся от корня файловой системы. В таком случае путь всегда начинается со слэша. Если представить, что сайт лежит в корне нашей файловой системы, то путь выглядел бы следующим образом: /css/main.css.
Стили также можно поместить прямо в HTML-файл, не создавая отдельный CSS-файл:
<!DOCTYPE html>
<html>
<head>
<title>Моё резюме</title>
<style>
.important {
color: green;
font-style: italic;
}
</style>
</head>
<body>
<h1>Алексей Примадонин</h1>
<h3 class="important">Веб-разработчик</h3>
<p>
<a href="mailto:alprim@grail.com">alprim@grail.com</a>,
<a href="https://github.com/alprim">github.com/alprim</a>
</p>
</body>
</html>
Такой вариант может быть уместен для минимальных страниц, которые гарантированно не будут разрастаться. В целом, лучше всегда разделять HTML и CSS на отдельные файлы. Один CSS-файл можно использовать в нескольких HTML-документах, к тому же разделение представления (presentation — это стили) и содержания (content — это сам HTML) — правильная стратегия при построении информационных систем.
Каскад
Почему же C в CSS — это cascade? Дело в том, что стили складываются каскадом в единый набор.
p {
color: green;
font-size: 20px;
}
p {
color: red;
}
В итоге у элемента p цвет текста будет красным, потому что этот стиль был указан в таком же селекторе, но после предыдущего. При этом размер шрифта останется 20 пикселей: это значение не заменялось.
Можно представить, что стили собрались каскадом в такой набор:
{
color: red;
font-size: 20px;
}
Каскад происходит сверху вниз, и работает даже внутри одного селектора. Ниже — странный пример, но результат будет тем же: цвет текста будет красным:
p {
color: green;
color: red;
font-size: 20px;
}
Каскадность также заключается в том, что один элемент может попадать под действие нескольких селекторов разного типа. Например:
p {
color: red;
}
p.important {
font-size: 20px;
}
#intro {
font-style: italic;
}
<p class="important" id="intro">
Индейские племена Манахаттоу и Канарси.
</p>
Такой элемент будет одновременно красным, размером 20 пикселей и курсивом. Но у разных видов селекторов разный приоритет.
Порядок таков:
- Селектор типа элемента (
p) - Селектор класса (
.important) - Селектор id (
#intro)
1 — низкий приоритет, 3 — высокий приоритет.
Пример:
#intro {
color: green;
}
p {
color: blue;
font-weight: bold;
}
p.important {
color: purple;
font-style: italic;
}
<p class="important" id="intro">
Индейские племена Манахаттоу и Канарси.
</p>
Текст в этом элементе будет наклонным, полужирным и зелёным, потому что:
- Селектор типа элемента
p:- синий цвет
- полужирность
- Селектор класса
p.important:синий цветзаменил на пурпурный цвет- курсив
- Селектор идентификатора
#intro:пурпурный цветзаменил на зелёный цвет
Стили сложились каскадом, что-то заменилось, что-то нет, и в итоге получился такой набор:
{
color:green;
font-weight: bold;
font-style: italic;
}
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Вебинар «Как самостоятельно учиться»
