Вградено ръководство за 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.

Така че в нашия случай текстът на първия абзац е червен с размер на шрифта 20px. Вторият обаче остава непроменен.

Нека разгледаме по-отблизо как и кога да използваме вградени стилове. Също така ще разкрием защо е стилизиран само един от нашите параграфи.

Какво е 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 с двойни кавички.

Добавете двойки свойство-стойност към атрибута стил. Добавете точка и запетая след всяка двойка свойство-стойност.

color: red; font-size: 20px; 

Така че, когато съберем всичко, изглежда така:

This is my first paragraph.

Основни моменти, които трябва да знаете

За разлика от вътрешните и външните таблици със стилове, вградените стилове не съдържат къдрави скоби или прекъсвания на редове. Тоест, напишете вашия CSS на един ред, когато използвате вградени стилове.

Също така имайте предвид, че вградените стилове засягат само конкретния елемент, към който добавяте атрибута стил с двойки CSS свойство-стойност.

Например в кода по-долу само първият абзац е оформен в червено с размер на шрифта 20px.

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