ЦСС (каскадни стилски лист) описује ХТМЛ елементе који се приказују на екран, папир , или у други медији . То штеди много времена. Контролише изглед више веб страница у исто време. То поставља величина фонта, породица фонтова, боја, боја позадине на страници.
Омогућава нам да додамо ефекти или анимације на веб локацију. Користимо ЦСС приказати анимације као дугмад, ефекти, лоадери или спиннерс , и такође анимиране позадине .
Без употребе ЦСС , веб локација неће изгледати атрактивно. Постоје 3 врсте ЦСС који су испод:
- Инлине ЦСС
- Интерни/Уграђени ЦСС
- Екстерни ЦСС
1. Интерни ЦСС
Интерни ЦСС има таг у одељак на ХТМЛ документ. Овај ЦСС стил је ефикасан начин за стилизовање појединачних страница. Коришћење ЦСС стила за више веб страница одузима много времена јер захтевамо постављање стил на свакој веб страници.
Можемо да користимо интерни ЦСС користећи следеће кораке:
1. Прво отворите ХТМЛ страницу и пронађите
2. Ставите следећи код после
3. Додајте Правила ЦСС-а у новом реду.
Пример:
body { background-color: black; } h1 { color: white; padding: 50px; }
4. Затворите ознаку стила.
Након додавања интерног ЦСС-а, комплетна ХТМЛ датотека изгледа овако:
body { background-color: black; } h1 { color: red; padding: 50px; } <h2>CSS types</h2> <p>Cascading Style sheet types: inline, external and internal</p>
Можемо користити и селекторе (класа и ИД) у листи стилова.
Пример:
.class { property1 : value1; property2 : value2; property3 : value3; } #id { property1 : value1; property2 : value2; property3 : value3; }
Предности интерног ЦСС-а
Недостаци интерног ЦСС-а:
- Додавање кода у ХТМЛ документ ће смањити величина странице и време учитавања веб странице.
2. Екстерни ЦСС
У екстерном ЦСС-у повезујемо веб странице са екстерним .цсс фајл. То је створено од текст едитор . ЦСС је ефикаснији метод за стилизовање веб странице. Уређивањем .цсс фајл, можемо променити цео сајт одједном.
Да бисте користили спољни ЦСС, следите доле наведене кораке:
1. Креирајте нови .цсс фајл са текст едитор , и додајте Каскадни стилски лист правила такође.
На пример:
.xleftcol { float: right; width: 35%; background:#608800; } .xmiddlecol { float: right; width: 35%; background:#eff3df; }
2. Додајте референцу на екстерно .цсс фајл одмах после таг у одељак оф ХТМЛ лист :
Предности екстерног ЦСС-а:
- Наши фајлови имају чистију структуру и мању величину.
- Користимо исто .цсс датотека за више веб страница у екстерном ЦСС-у.
Недостаци екстерног ЦСС-а:
- Странице се не могу исправно испоручити пре него што се спољни ЦСС учита.
- У екстерном ЦСС-у, отпремање многих ЦСС датотека може повећати време преузимања веб локације.
3. Инлине ЦСС
Инлине ЦСС се користи за стилизовање одређеног ХТМЛ елемент. Додајте а стил атрибута свакој ХТМЛ ознаци без коришћења селектора. Управљање веб-сајтом може бити тешко ако га користимо само инлине ЦСС . Међутим, Инлине ЦСС у ХТМЛ-у је корисно у неким ситуацијама. Немамо приступ ЦСС датотеке или да примените стилове на елемент.
У следећем примеру користили смо инлине ЦСС у Овде ће бити корисно. Предности уграђеног ЦСС-а: Недостаци уграђеног ЦСС-а: ц++ пар
и