Вы здесь: Главная > CSS > Применение CSS

Применение CSS

Опубликовано автором Просмотры: 12

Существует три способа применения 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-файл, как мы делали раньше.

Страницы в тему:

Добавить комментарий