10. Подключение CSS - Часть 2

  • Данная статья написана командой Alash Academy.

  • Это одна из статей из нашего Самоучителя по HTML&CSS.

  • Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

../_images/lesson10_connecting_css_2_Kak-podkluchit-css.jpg

Привет! В предыдущей статье («Подключение CSS - Часть 1») мы рассказали 1-й способ подключения CSS к HTML, который является самым правильным и рекомендованным к использованию.

В этой статье мы расскажем еще 2 способа.

Способ №2 - Подключение CSS-стилей с помощью тега <style>

В этом способе Вы не создаете отдельный CSS-файл, как мы показывали в способе №1  («Подключение CSS - Часть 1»).

А прописываете CSS-стили прямо в HTML-файле. Для этого в теге <head>…</head> Вам необходимо написать специальный тег <style>…</style>. И все.  Далее просто пишите все CSS-стили в теге <style>.. </style>.

Пример 1:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Название страницы</title>
        <style>
            p {
                font-family: Georgia;
                font-size: 18px;
                color: green;
            }
        </style>
    </head>
    <body>
        <p>Утром надо быть особенно осторожным. Одно неловкое движение - и ты снова спишь.</p>
        <p>Вот так всегда. Запланируешь 20 дел. Сделаешь 30. И ни одного из 20 запланированных.</p>
    </body>
</html>

ОБРАТИТЕ ВНИМАНИЕ:

  • Когда мы создаем отдельный CSS-файл со стилями (как в «Подключение CSS - Часть 1»), стили будут распространяться на все страницы сайта.

  • Когда мы задаем CSS-стили с помощью тега <style>…</style>, стили будут распространяться только на ту HTML-страницу, на которой написан тег <style>…</style>.

Способ №3 - с помощью аттрибута style

Представим, что мы хотим, чтобы текст в каком-нибудь тэге <p> на нашей странице был оранжевого цвета, а размер шрифта - 10 пикселей. Для этого нам необходимо использовать 2 CSS-свойства: color - «цвет» и font-size  - «размер шрифта». Покажем на примере.

Пример 2:

Создайте index.html файл с вот такой структурой:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Название страницы</title>
    </head>
    <body>
        <p style="color: orange; font-size: 10px";> Утром надо быть особенно осторожным. Одно неловкое движение - и ты снова спишь.</p>
        <p style="color: green; font-size: 18px";>Вот так всегда. Запланируешь 20 дел. Сделаешь 30. И ни одного из 20 запланированных.</p>
    </body>
</html>

Как видите:

1. к первому параграфу мы применили аттрибут style:

<p style="color: orange; font-size: 10px;> Утром надо быть особенно осторожным. Одно неловкое движение - и ты снова спишь.</p>

Поэтому первый параграф будет оранжевого цвета с размером шрифта 10 пикселей.

Обратите внимание: ранее мы использовали тег <style>…</style>. В данном случае никакого тега <style>…</style> нет в коде. В этом примере **мы применили аттрибут style к тегу <p>. **

2. Ко второму параграфу мы тоже применили аттрибут style:

<p style="color: green; font-size: 18px;>Вот так всегда. Запланируешь 20 дел. Сделаешь 30. И ни одного из 20 запланированных.</p>

И прописали, что данный параграф должен быть зеленого цвета и размером шрифта 18px.

Задавая CSS-стили с помощью атрибута style, Вы задаете стили конкретному элементу.

Надеемся, данная статья была Вам полезна! Читайте дальше наши статьи или приходите учиться к нам на курсы по Front-End. Детальнее о наших курсах у нас на сайте здесь.