Вбудований посібник CSS - Як безпосередньо оформити HTML-тег

Ви написали трохи HTML, і тепер вам потрібно його оформити за допомогою CSS. Один із способів - використовувати вбудовані стилі, про що йдеться в цій статті.

This is my first paragraph.

Перш ніж ми вникнемо в нюанси вбудованих стилів - коли, чому і як ними користуватися - важливо знати про інші способи стилізації HTML. Таким чином, ви вибираєте найкращий варіант для свого коду.

Ось короткий опис ваших варіантів.

Зовнішня таблиця стилів

Зазвичай розробники зберігають весь свій CSS у зовнішній таблиці стилів. У своєму HTML-файлі використовуйте елемент для посилання на зовнішню таблицю стилів, яка містить ваш CSS.

Усередині файлу index.css ми маємо свої правила CSS.

p { color: red; font-size: 20px; } 

Внутрішня таблиця стилів

Інший варіант стилізації CSS - використання внутрішньої таблиці стилів. Це означає визначення ваших правил CSS всередині елемента у вашому файлі HTML.

  p { color: red; font-size: 20px; }   

Вбудовані стилі

Рідше ви виявите, що тягнетеся до вбудованих стилів. Але про них все одно важливо знати, оскільки бувають певні випадки, коли вони знадобляться.

За допомогою вбудованих стилів ви додасте стильатрибут HTML-тегу, за яким слідує ваш CSS для стилізації елемента.

This is my first paragraph.

This is my second paragraph.

Тож у нашому випадку текст першого абзацу червоний із розміром шрифту 20 пікселів. Однак другий залишається незмінним.

Давайте детальніше розглянемо, як і коли використовувати вбудовані стилі. Ми також розкриємо, чому стилізований лише один із наших абзаців.

Що таке тег HTML?

За допомогою вбудованих стилів ви застосовуєте CSS до styleатрибута у початковому тегу HTML.

Приклади тегів HTML включають:

  • ...
  • ...

  • ...

Теги відкриття та закриття часто є частиною елемента HTML, який може містити текст, дані, зображення або взагалі нічого.

Тут ми маємо елемент тексту.

This is my first paragraph.

Ми можемо використовувати вбудовані стилі для стилювання цього елемента, додавши атрибут style до тегу відкриття, а потім пари властивостей-значення CSS.

This is my first paragraph.

This is my second paragraph.

Давайте розглянемо, як ми використовували вбудовані стилі.

Як використовувати вбудовані стилі

Додайтеатрибут style до тегу, який ви хочете оформити, а потім знак рівності. Почніть і закінчуйте свій CSS подвійними лапками.

Додайте пари властивість-значення до атрибуту style. Додайте крапку з комою після кожної пари властивість-значення.

color: red; font-size: 20px; 

Отже, коли ми складаємо все разом, це виглядає так:

This is my first paragraph.

Ключові моменти, які слід знати

На відміну від внутрішніх та зовнішніх таблиць стилів, вбудовані стилі не містять фігурних дужок або розривів рядків. Тобто, пишіть свій CSS в одному рядку при використанні вбудованих стилів.

Також майте на увазі, що вбудовані стилі впливають лише на конкретний елемент, до якого ви додаєте атрибут стилю з парами властивості-значення CSS.

Наприклад, у наведеному нижче коді лише перший абзац має червоний стиль із розміром шрифту 20 пікселів.

This is my first paragraph.

This is my second paragraph.

Якщо ми хочемо стилізувати текст обох абзаців вбудованими стилями, тоді нам потрібно додати CSS до атрибуту style до другого

This is my first paragraph.

This is my second paragraph.

However, if we used an external stylesheet, for example, we could easily style both paragraphs without duplicating our code by using a single CSS selector.

p { color: red; font-size: 20px; } 

This brings us to an important topic: when to use and when not to use inline styles.

When to Use (and when NOT to use) Inline Styles

Say you have an HTML file with ten or more paragraph tags. Can you imagine styling each one individually with inline styles?

Doing so will quickly clutter your code, making it hard to read and maintain.

Besides, inline styles can introduce specificity issues if you’re also using internal or external stylesheets.

That’s because inline styles have a high specificity. This means they'll override most other rules in internal and external stylesheets, except for the !important declaration.

For example, we added inline styles to two paragraph elements. We’ve also added an internal stylesheet.

  My New Webpage  p { color: pink; }    

A blue paragraph.

Another blue paragraph.

The CSS from our inline styles override the CSS in the internal stylesheet. So we end up with two blue paragraphs.

External stylesheets are also much easier to maintain when you or someone else needs to make a change. This is because a style from an external or internal stylesheet can apply to multiple elements, while an inline one must be applied to each element individually.

For example, say you need to update a style to ten elements. It’s easier to make the change once in an external stylesheet, instead of ten different times in your HTML file.

In general, it’s often best practice to put your CSS into a separate file. That way, your HTML file contains the structure and content of your website, and your CSS file contains your styles. Doing so makes your code easier to read and manage.

However, there are times when it may make sense to use inline styles:

  • Add a style and see the change quickly, which can be useful for testing.
  • Use the style attribute in JavaScript to apply styling.

Most of the time you’ll want to use external stylesheets. But you’ll occasionally find yourself using inline styles, most commonly in the above situations.

I write about learning to program, and the best ways to go about it on my blog at amymhaddad.com.

Original text