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

Facebooktwittergoogle_plustumblrFacebooktwittergoogle_plustumblr
  • Данная статья написана командой 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: 

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

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

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

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

Пример 2:

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

Как видите:

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

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

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

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

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

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

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

Facebooktwittergoogle_plustumblrFacebooktwittergoogle_plustumblr

Facebooktwittergoogle_plustumblrFacebooktwittergoogle_plustumblr
Самоучители--узнать детальнее--