logo

Видове CSS

CSS (Каскаден стилов лист) описва HTML елементите, които се показват на екран, хартия , или в други медии . Спестява много време. Той контролира оформлението на множество уеб страници наведнъж. Той определя размер на шрифта, семейство шрифтове, цвят, цвят на фона на страницата.

Позволява ни да добавим ефекти или анимации към уебсайта. Ние използваме CSS за показване анимации като бутони, ефекти, зареждащи устройства или спинери , и също анимирани фонове .

Без да използвате CSS , уебсайтът няма да изглежда привлекателен. Има 3 видове CSS които са по-долу:

  • Вграден CSS
  • Вътрешен/вграден CSS
  • Външен CSS
Видове CSS

1. Вътрешен CSS

Вътрешният CSS има етикет в раздел на HTML документ. Този CSS стил е ефективен начин за стилизиране на отделни страници. Използването на CSS стил за множество уеб страници отнема много време, защото изискваме поставянето на стил на всяка уеб страница.

Можем да използваме вътрешния CSS, като използваме следните стъпки:

1. Първо отворете HTML страница и намерете

2. Поставете следния код след

 

3. Добавете правила на CSS в новия ред.

Пример:

 body { background-color: black; } h1 { color: white; padding: 50px; } 

4. Затворете тага за стил.

 

След добавяне на вътрешния CSS, пълният HTML файл изглежда така:

 body { background-color: black; } h1 { color: red; padding: 50px; } <h2>CSS types</h2> <p>Cascading Style sheet types: inline, external and internal</p> 

Можем да използваме и селекторите (клас и ID) в стиловия лист.

Пример:

 .class { property1 : value1; property2 : value2; property3 : value3; } #id { property1 : value1; property2 : value2; property3 : value3; } 

Плюсове на вътрешния CSS

    Вътрешен CSSне може да качи няколко файла, когато добавим кода с HTML страницата.

Минуси на вътрешния CSS:

  • Добавяне на код в HTML документ ще намали размер на страницата и време за зареждане на уеб страницата.

2. Външен CSS

Във външния CSS свързваме уеб страниците с външния .css файл. Създаден е от текстов редактор . CSS е по-ефективен метод за стилизиране на уебсайт. Чрез редактиране на .css файл, можем да променим целия сайт наведнъж.

За да използвате външен CSS, следвайте стъпките, дадени по-долу:

1. Създайте нов .css файл с текстов редактор и добавете Каскаден стилов лист правила също.

Например:

 .xleftcol { float: right; width: 35%; background:#608800; } .xmiddlecol { float: right; width: 35%; background:#eff3df; } 

2. Добавете препратка към външния .css файл веднага след това етикет в раздел на HTML лист :

 

Плюсове на външен CSS:

  • Нашите файлове имат по-чиста структура и по-малък размер.
  • Ние използваме същото .css файл за множество уеб страници във външен CSS.

Минуси на външен CSS:

  • Страниците не могат да бъдат доставени правилно, преди външният CSS да бъде зареден.
  • Във външен CSS качването на много CSS файлове може да увеличи времето за изтегляне на уебсайт.

3. Вграден CSS

Вграденият CSS се използва за стилизиране на конкретен HTML елемент. Добави стил атрибут към всеки HTML таг, без да използвате селекторите. Управлението на уебсайт може да е трудно, ако използваме само вграден CSS . Въпреки това, Inline CSS в HTML е полезно в някои ситуации. Нямаме достъп до CSS файлове или за прилагане на стилове към елемент.

В следващия пример сме използвали вградения CSS в

str.replace в java
и

Тук ще бъде полезно.

Плюсове на вградения CSS:

  • Можем да създадем CSS правила на HTML страницата.
  • Не можем да създадем и качим отделен документ във вграден CSS.

Минуси на вградения CSS:

  • Вграден CSS, добавяне CSS правила за HTML елементи е времеемко и бъркотии до структурата на HTML.
  • Той стилизира няколко елемента едновременно, което може да повлияе на размера на страницата и времето за изтегляне на страницата.