Шта су каскадни стилови и за шта се користи ЦСС?

Шта су каскадни стилови и за шта се користи ЦСС?

ЦСС припада тројци основних веб технологија заједно са ХТМЛ -ом и ЈаваСцрипт -ом. Пажљивим планирањем ЦСС доприноси раздвајању брига. Независни ресурси контролишу структуру садржаја, његову презентацију и понашање.





Табеле стилова играју важну улогу у приступачности, скалабилности, па чак и перформансама на вебу. Као аутор садржаја или веб дизајнер, они вам дају контролу над начином на који уређаји приказују садржај. Од изгледа до величине фонта и боје, ЦСС претвара садржај у странице лепог изгледа.



Како изгледа ЦСС?

ЦСС је велики језик - постоји много различитих ствари за стилизовање! Али његова синтакса је једноставна, са само неколико правила која треба научити.





ХТМЛ елементи имају различита својства која ЦСС може стилизовати. Тхе боја својство поставља боју предњег плана (нпр. текст). Величина фонта зависи од фонт-сизе својство.

Свако својство се може поставити на подржану вредност. Додељивање вредности својству је „декларација“. Генерално, изгледају овако:



property: value

На пример:

Нисам добио свој Амазон пакет
color: red

Вредности за различите особине могу изгледати веома различито, чак и вредности за исту особину. На пример, ево још два начина писања претходне декларације:



color: #ff0000
color: rgb(255, 0, 0)

Како се ХТМЛ и стилски листови спајају

ХТМЛ и ЦСС можете комбиновати на неколико различитих начина, сваки са својим предностима.

Уграђени стилови писања

Најједноставнији начин је да декларацију стила приложите директно елементу у ХТМЛ датотеци. То можете учинити помоћу стил атрибут овако:




Most of this text is red …


… but this isn’t!


Иако уграђени елементи за обликовање могу бити згодни, он има неколико недостатака. За почетак, компликује ХТМЛ, отежавајући читање на први поглед. Такође је незгодно за одржавање: замислите дугачак документ у којем желимо да поставимо боју сваког пасуса. Ово је ЦСС, али није „Табела стилова“.

Уграђивање стилова у главу

Можете почети да видите како изгледа Табела стилова са другим механизмом, уграђивање . Користећи овај приступ, окупљамо све декларације о стилу унутар а стил елемент у глава нашег документа. То ће изгледати отприлике овако:





/* style instructions go here */



...

Нашим стилским упутствима је потребно мало више детаља него раније. Пошто смо их преместили у главу, свако правило више није повезано са елементом. Можда смо се изјаснили боја црвена , али шта би требало да има ту боју?

Овде долазе ЦСС селектори. Они нам омогућавају да циљамо одређене делове странице и дефинишемо њихов стил на једном месту, користећи следећу синтаксу:

како инсталирати линук на мац
selector {
declaration1;
declaration2;
/* etc. */
}

На пример, за стилизовање текста пасуса плаво, можемо навести следеће:

p {
color: blue;
}

У овом примеру, селектор је једноставно п , који се подудара са свим елементима пасуса у нашем документу. Обојиће сав текст у плаво, све док је унутра

Повезивање спољног стила

Последњи начин покривања је повезивање. Ово је далеко најкориснији приступ и за који бисте се требали одлучити већину времена. Уместо да се ЦСС правила уграђују у стил елемент директно у документу, можете их преместити у засебну датотеку.


Залепите овај код у ознаке ваше ХТМЛ датотеке које повезују вашу спољну листу стилова.

Моћ ЦСС -а

Повезаном методом искориштавамо срж моћи ЦСС -а: раздвајање брига. Све семантичке информације - шта садржај значи - садржане су у ХТМЛ документу. Стил - како изгледа - налази се у засебној датотеци, табели стилова.

Ево само неколико предности овог одвајања:

  • Таблицу стилова можете искључити само променом референце датотеке. То се чак може догодити и динамички. У једном кораку можете променити целокупан изглед странице.
  • Многе странице могу делити исте стилске листове по потреби. Променом једне датотеке можете ажурирати изглед и осећај целе веб локације.
  • Подела странице на „садржај“ и „стил“ има техничке предности. Прокси и прегледачи могу засебно кеширати појединачне датотеке. То значи да веб локација може послати своје податке о стилу једном, уместо да их укључи на сваку страницу.
  • Када сарађују, различити тимови могу радити на својим снагама, стварајући и уређујући засебне датотеке без утицаја једни на друге.

Објашњавајући Каскаду

Научили сте много о стиловима и стиловима, али шта је са каскадним делом ЦСС -а?

Каскада одлучује које стилове треба користити када је присутно више стилских листова. Видели сте како аутор може да наведе стилове за свој садржај. Али друга карактеристика ЦСС -а је та што читаоцима и произвођачима прегледача даје неке речи о томе.

Можда сте се већ питали о подразумеваним стиловима. На пример, како ради Х1 елемент изгледа велики и подебљано, чак и без икаквих табела са стиловима аутора? То је захваљујући скупу посебних правила која чине листу стилова корисничког агента. Ова правила ваш веб прегледач у почетку примењује на сваку страницу коју посетите.

Каскада одређује да се стил стила аутора примењује након стилова корисничког агента. Ако наш прегледач каже да су наслови подебљани, али аутор странице изјављује да су наслови на овој страници лаки, они ће на крају постати светли.

Постоји још један извор стилских листова који читатељу предаје одређену контролу. Сваки корисник веба може, у теорији, одржавати кориснички лист са прилагођеним правилима. Ово се налази у средини: корисничка правила ће надјачати подразумевана подешавања прегледача, али ће их и сами надјачати стилови аутора. Нажалост, подршка за корисничке стилове никада није била широко распрострањена.

Циљање различитих медија

Табеле стилова можете користити у различитим контекстима, изван екрана. Тхе пола атрибут линк елемент дефинише на које врсте медија се стилска листа односи. На пример, можете дефинисати а стилски лист за штампање користећи ознаке попут ове:

Можете скупити уобичајене стилове у једну глобалну листу стилова и стилове специфичне за медије у засебне датотеке. Постоје чак и врсте медија за слушање звучних или брајевих азбука. ЦСС је витално средство за побољшање приступачности.

Повезан: Како претраживати веб ако сте слепи или слабовиди

цена замене мацбоок про батерије

Сајтови попут Википедије користе ЦСС за контролу стила штампања, скривање нежељених елемената и поједностављивање изгледа.

ЦСС чини да ХТМЛ изгледа добро

Каскадне табеле стилова покривају много тога: каскаду, наслеђивање, бираче, изворе, медије итд. Али њихова моћ омогућава савремени веб. Ово је медиј који пружа уграђене функције за поновну употребу, флексибилност и приступачност.

Да бисте видели сву моћ ЦСС -а и колико он нуди, погледајте нашу листу са свим кључним својствима ЦСС3.

Објави Објави Твеет Емаил Тхе Цхесс Схеет Особине ЦСС3 својстава

Савладајте есенцијалну ЦСС синтаксу помоћу нашег листа са својствима ЦСС3 својстава.

Прочитајте следеће Повезане теме
  • Програмирање
  • Веб Девелопмент
  • ЦСС
О аутору Бобби Јацк(Објављено 58 чланака)

Бобби је ентузијаст технологије који је скоро две деценије радио као програмер софтвера. Одушевљен је играњем игара, ради као уредник рецензија у магазину Свитцх Плаиер, и уроњен је у све аспекте издаваштва на мрежи и веб развоја.

Више од Боббија Јацка

Претплатите се на наш билтен

Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!

Кликните овде да бисте се претплатили