Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <h3>Добавление стилей в HTML-документ</h3>

2 Помните невидимую "голову" документа? Именно в ней можно указать адрес CSS-файла со стилями:

3 Если HTML-файл лежит в одной директории с файлом main.css, то стили из этого CSS-файла будут применены к странице. Если же файл лежит в другом месте, то нужно указать путь к нему. Например, если структура директорий такая:

4 my_site/ ├── css/ │ ├── main.css ├── html/ │ ├── index.html

5 То в файле index.html путь нужно указать так:

6 Такой путь называетсяотносительным. Он указывается относительно текущего расположения файлаindex.html. Чтобы добраться до файлаmain.cssнам было нужно выйти из директорииhtml. Это делается с помощью конструкции../. Далее мы указали директориюcssи название нашего CSS файла.

7 Существуют такжеабсолютныепути. Они всегда строятся от корня файловой системы. В таком случае путь всегда начинается со слэша. Если представить, что сайт лежит в корне нашей файловой системы, то путь выглядел бы следующим образом:/css/main.css.

8 Стили также можно поместить прямо в HTML-файл, не создавая отдельный CSS-файл:

9 Такой вариант может быть уместен для минимальных страниц, которые гарантированно не будут разрастаться. В целом, лучшевсегда разделять HTML и CSS на отдельные файлы. Один CSS-файл можно использовать в нескольких HTML-документах, к тому же разделение представления (presentation - это стили) и содержания (content - это сам HTML) - правильная стратегия при построении информационных систем.

10 <h3>Каскад</h3>

11 Почему же C в CSS - этоcascade? Дело в том, что стили складываются каскадом в единый набор.

12 В итоге у элемента p цвет текста будет красным, потому что этот стиль был указан в таком же селекторе, нопослепредыдущего. При этом размер шрифта останется 20 пикселей: это значение не заменялось.

13 Можно представить, что стили собрались каскадом в такой набор:

14 Каскад происходит сверху вниз, и работает даже внутри одного селектора. Ниже - странный пример, но результат будет тем же: цвет текста будет красным:

15 Каскадность также заключается в том, что один элемент может попадать под действие нескольких селекторов разного типа. Например:

16 Такой элемент будет одновременно красным, размером 20 пикселей и курсивом. Но у разных видов селекторов разный приоритет.

17 Порядок таков:

18 <ol><li>Селектор типа элемента (p)</li>

19 <li>Селектор класса (.important)</li>

20 <li>Селектор id (#intro)</li>

21 </ol>1 - низкий приоритет, 3 - высокий приоритет.

22 Пример:

23 Текст в этом элементе будет наклонным, полужирным и зелёным, потому что:

24 <ol><li>Селектор типа элемента p:<ul><li>синий цвет</li>

25 <li>полужирность</li>

26 </ul></li>

27 <li>Селектор класса p.important:<ul><li>синий цветзаменилна пурпурный цвет</li>

28 <li>курсив</li>

29 </ul></li>

30 <li>Селектор идентификатора #intro:<ul><li>пурпурный цветзаменилна зелёный цвет</li>

31 </ul></li>

32 </ol>Стили сложились каскадом, что-то заменилось, что-то нет, и в итоге получился такой набор: