Шта су ХТМЛ стилске таблице?
ХТМЛ Цасцадинг Стиле Схеет је лист са скупом правила и својстава који говори прегледачу како да рендзира ХТМЛ користећи све наведене стилове.
ЦСС је начин на који стилујемо било које веб странице. ЦСС има сва својства попут позадине, боја, фонтова, размака, обруба итд. Које можемо дефинисати за сваки елемент на страницама.
ХТМЛ табеле стилова такође се користе за подешавање изгледа странице као што је место на коме се заглавље, подножја или било који други елемент поставља на страницу. О ЦСС-у се увек прича заједно са ХТМЛ-ом, јер су странице без икаквог стајлинга веома бледо, без истицања наслова итд. И исте величине фонта по целој страници што корисницима не даје добар преглед.
Како користити ХТМЛ табеле стилова?
У прошлости су стилови, скрипте, ХТМЛ све писали на истој страници. То је учинило странице изузетно дужим и изузетно тешким за читање и уређивање. Затим је дошао начин за одвајање ХТМЛ-а, стилова и Јавасцрипта.
Начини за укључивање ХТМЛ табела стилова на веб страницу:
Постоје 3 начина на које можемо укључити стилове:
-
Инлине Стилинг
Ово је начин писања стилова за сваки елемент унутар самог ХТМЛ-а унутар атрибута који се зове стил.
Овакав начин стилизовања се уопште не препоручује, јер ХТМЛ изгледа збијено и не можемо следити приступ „Напиши једном, користи се на многим местима“
Eg: Hello World!
-
Унутрашњи стил
Ово укључује укључивање стилова у ознаку стила и његово постављање на веб страницу на врху ХТМЛ-а. Овакав начин стилирања је и даље бољи од уграђеног стилирања, јер можемо имати заједничке стилове уплетене заједно у случају да се морају користити за више елемената одједном.
У фази развоја лакше је уређивати ХТМЛ датотеку и не требамо сваки пут отварати одговарајућу ЦСС датотеку и уређивати је сваки пут.
Eg:
container-block(
font-size: 10px;
margin-top: 10px;
)
Hello World!
-
Спољни стил
Ово је најчешћи и најбољи начин стилова за веб страницу. То је слично унутрашњем стилингу, али разлика је у томе што су стилови исписани у посебној датотеци са екстензијом .цсс и референца на њу се налази у главној ознаци веб странице.
Синтакса за повезивање ЦСС датотеке на веб страници је:
Стилови требају бити укључени у главну ознаку која се налази изнад ознаке тијела (тј. Стварног садржаја) ХТМЛ-а
Који је приоритет између линијског, унутрашњег и спољног стила?
Инлине стилови узимају више приоритета од унутрашњих, а затим последњи приоритет долази за спољни стил.
Инлине> Интернал> Спољни
Најбоље праксе приликом коришћења ЦСС-а:
- ЦСС се може одвојити у више датотека уместо у само једну.
- Одвојене ЦСС датотеке могу се или додавати једна за другом у главну ознаку користећи тагове веза.
- Или једна ЦСС датотека може имати више изјава о увозу за увоз остатка ЦСС датотека. Ово ће логички раздвојити ЦСС, али на крају ће се сви стилови приказати из исте датотеке.
Употреба: @ импорт './процесс.цсс';
- Стилови се могу дефинисати за било које елементе веб странице са селекторима као сама ХТМЛ ознака, имена класе, ИД-ови, било која имена атрибута.
- Доступни су неки псеудо селектори попут:
- пре него што
- после
- нтх-цхилд
- прво дете
- последње дете
- лебдети
- посетио
Ово су у основи стања одабраних елемената, а не баш тачни елементи.
- Када се на страници укључе умножене ЦСС датотеке, последња има највећи приоритет и пребацује постојеће стилове претходних датотека са истим селектором.
- Табеле стилова треба користити прије самог ХТМЛ-а како би се стилови примјењивали док се страница учитава. Ако се укључи на крају, ХТМЛ се прво учитава, а затим се полако примењују стилови што кориснику пружа врло лоше искуство.
Различите карактеристике таблица ХТМЛ каскадних стилова:
- ЦСС нуди анимације : Раније је ЈаваСцрипт био кориштен само за анимације. Али најновији ЦСС, тј. ЦСС3 пружа анимације користећи особине.
- Префикси добављача: Пре него што прегледачи издају стандардну верзију / назив својства за било које нове функције, прегледачи нам током неког времена током експеримента пружају неке префиксе добављача, током експеримента. Програмери морају сачекати док прегледач не објави своје стандардне верзије, а у међувремену се експерименталне функције могу користити са добављачким префиксима.
- ЦСС Трансформс: Транзиција се користи за прогресивно прелазак једне вриједности из неке особине у одређеном времену.
Eg: -webkit-transition: width 2s, height 4s;
- ЦСС Трансформс: Трансформације у ЦСС-у омогућавају вам превођење, ротирање, скалирање и искривање елемената.
Медиа Куериес:
Мобилни телефони, десктоп рачунари и иПади понашају се другачије, међутим, не можемо странице да стилизујемо на исти начин. Претходни веб стандарди дизајнирани су на такав начин да смо имали различит ЦСС за сваки тип уређаја.
Са напретком веб стандарда и начином на који се гради веб, претраживачи су развијени тако да имају један ЦСС који се може користити за било који тип уређаја. Да бисте променили стилове уређаја на основу ширине и висине, користе се медијски упити помоћу којих можемо одредити минималну или максималну ширину уређаја и стилове писања у њему.
Eg: @media screen and (max-width: 767px)(
container(
width: 60%;
padding: 20px;
)
)
Стилови су дефинитивно благодат за веб. А како се развој веба у последње време експоненцијално повећао, ЦСС3 је дефинитивно добио велику потражњу да странице постану изузетно интерактивне и интуитивне.
Препоручени чланци
Ово је водич за ХТМЛ стилове. Овде смо расправљали о томе како користити ХТМЛ стилске таблице, разне функције и начине на које се ЦСС укључује на веб страници. Такође можете погледати следеће чланке да бисте сазнали више -
- Увод у ЦСС
- Предности ЦСС-а у веб дизајну
- Шта је ЦСС? | Како се користи?
- Да ли је ЦСС случај осетљив?
- Различити стилови листе ХТМЛ