Существует три способа применения CSS к HTML: встроенный, внутренний и внешний.
Встроенный способ
Встроенные стили помещаются прямо в HTML-теги с помощью атрибута style.
Они выглядят примерно так:
<p style="color: red">текст</p>
Это сделает этот конкретный абзац красным.
Но, если вы помните, наилучший практический подход заключается в том, что HTML должен быть автономным документом, не содержащим презентаций, и поэтому по возможности следует избегать встроенных стилей.
Внутренний способ
Встроенные, или внутренние, стили используются для всей страницы. Внутри элемента head теги style окружают все стили для страницы.
<!DOCTYPE html> <html> <head> <title>CSS Примеры</title> <style> p { color: red; } a { color: blue; } </style>
В результате все абзацы на странице станут красными, а все ссылки ─ синими.
Предпочтительнее хранить файлы HTML и CSS отдельно.
Внешний способ
Внешние стили используются для всего многостраничного сайта. Существует отдельный CSS-файл, который будет просто выглядеть примерно так:
p { color: red; } a { color: blue; }
Если этот файл сохранен как “style.css” в том же каталоге, что и ваша HTML-страница, то на него можно создать ссылку в формате HTML следующим образом:
<!DOCTYPE html> <html> <head> <title>CSS Примеры</title> <link rel="stylesheet" href="style.css">
Применяйте!
Чтобы извлечь максимальную пользу из этого руководства, было бы неплохо опробовать код по ходу работы, поэтому запустите новый файл в вашем текстовом редакторе и сохраните пустой документ как “style.css” в том же каталоге, что и ваш HTML-файл.
Теперь измените свой HTML-файл так, чтобы он начинался примерно так:
<!DOCTYPE html> <html> <head> <title>Моя первая страница</title> <link rel="stylesheet" href="style.css"> </head>
Сохраните HTML-файл. Теперь это ссылка на CSS-файл, который на данный момент пуст, поэтому ничего не изменит. По мере прохождения руководства по CSS для начинающих вы сможете добавлять и изменять CSS-файл и видеть результаты, просто обновляя окно браузера, в котором находится HTML-файл, как мы делали раньше.
Страницы в тему:
- Следующая страница: Селекторы, свойства и значения
- Предыдущая страница: Урок CSS для начинающих
- Глобальные атрибуты (включая style)
- HTML-тег: style
- HTML-тег: link