Спољна табела стилова дефинише како изгледа веб страница. Табелу стилова можете користити за одређивање ствари попут величине, боје и фонта текста, боје дугмади или положаја менија и бочних трака.
Код који се користи у спољашњој табели стилова
Постоје две врсте кода које се користе за стварање основне веб странице:
- Језик за опис хипер-текста (ХТМЛ): Дефинише садржај веб странице. Садржи стварни текст са ознаком која идентификује да ли су делови текста пасуси, наслови или листе. Такође садржи везе до слика које се појављују на страници и хипервезе до спољних страница.
- Каскадни табеле стилова (ЦСС): Језик кодирања који се користи за одређивање начина приказивања садржаја. Дефинише како се приказује сваки тип текстуалног елемента и може различито приказати исти тип елемента ако припадају различитим класама или имају другачији ид. Ово омогућава да се ствари попут менија и листа понашају врло различито у главном тексту веб странице.
Генерално, одвајање стила од садржаја је добра идеја, јер вам омогућава да се усредсредите на једну по једну ствар. Ово постаје још важније у тиму, омогућавајући стручњацима за садржај и презентацију да раде независно од осталих. Можда још важније, омогућава и јединствени сет стилских упутстава који се могу једнолико применити на целој веб локацији.
Тада се визуелна презентација веб странице може променити из једне табеле стилова без уређивања сваке веб странице појединачно. За веће сложене веб странице, одређени број табела стилова може се користити за контролу текста, менија и подела унутар страница. Ова колекција табела стилова може се назвати „темом“.
Коришћење спољног ЦСС-а за повезивање ХТМЛ-а са ЦСС-ом
Могуће је ЦСС стил укључити директно у ХТМЛ веб странице, користећи ЦСС за појединачно обликовање сваког пасуса и наслова на другачији начин. Ова врста инлине стилинг генерално није добра идеја, јер губите све предности раздвајања стила од садржаја. Оно што је најважније, губите могућност да доследно ажурирате целу своју веб локацију из једне датотеке.
Прави начин примене стила на веб локацији је стварање једне спољне датотеке табеле стилова за сваку врсту стила који желите да примените, а затим упутите ове датотеке из сваке ХТМЛ датотеке. На пример, можда имате следеће спољне табеле стилова:
- тект.цсс
- менији.цсс
- лаиоут.цсс
Можете да измените ЦСС код унутар тих спољних табела стилова, а да их не мењате имена датотека, што значи да референце на те датотеке, у ХТМЛ-у свих ваших веб страница, неће бити промењено.
Примери ХТМЛ-а и ЦСС-а
Врло једноставна ХТМЛ страница може садржати следећи код:
Све о мени!
Ова страница говори о мени и зашто сам сјајна.
Ако желите да видите како ово изгледа у веб прегледачу, копирајте текст у уређивач текста попут Нотепад. Сачувајте датотеку као нешто попут "индек.хтмл" и превуците је у прегледач да бисте видели стил старе школе.
Једноставна спољна табела стилова може се повезати са овом страницом додавањем следећег кода испод.
типе = "тект / цсс"
хреф = "миСтиле.цсс" />
Направите још једну текстуалну датотеку под називом миСтиле.цсс, која се налази у истој фасцикли као индек.хтмл која садржи следећи код:
х1 {
боја: # ФФ7643;
фонт-фаце: Ариал '
}
п {
боја црвена;
величина фонта: 1,5ем;
}
Много више можете да урадите са ЦСС-ом. Ако желите да сазнате више, В3 Школе је одлично место за почетак.