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

31 июля, 201831 июля, 2018 Vertex Academy аттрибут style,как подключить css,подключение css,тег style

Данная статья написана командой Vertex Academy.
Это одна из статей из нашего Самоучителя по HTML&CSS.
Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

Привет! В предыдущей статье ("Подключение 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>

<!DOCTYPE html>

<html>

<head>

<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>

<!DOCTYPE html>

<html>

<head>

<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>

1	<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>

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

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

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

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