Вземете фактите с този кратък курс на CSS
Каскадните стил листове имат много предимства. Те ви позволяват да използвате един и същ стилов лист в целия си уебсайт. Има два начина да направите това:
- свързване с елемента LINK
- импортиране с команда @import
- <Стил>
- @import url ("http://www.yoursite.com/styles.css");
Предимства и недостатъци на външните стилови листове
Едно от най-хубавите неща за каскадни стилови листа е, че можете да ги използвате, за да поддържате сайта си последователен. Най-лесният начин да направите това е да свържете или импортирате външен лист с стилове. Ако използвате един и същ външен лист за стилове за всяка страница на сайта си, можете да сте сигурни, че всички страници ще имат същите стилове.
Някои от предимствата при използването на външни стилови листа включват, че можете да контролирате облика на няколко документа наведнъж. Това е особено полезно, ако работите с екип от хора, за да създадете своя уеб сайт. Много правила за стил могат да бъдат трудни за запомняне и макар че може да имате отпечатано ръководство за стил, е труден да непрекъснато да го прелиствате, за да определите дали даден текст ще бъде написан на 12-градусов Arial шрифт или 14-часов куриер.
Можете да създавате класове стилове, които могат да бъдат използвани на много различни HTML елементи. Ако често използвате специален шрифт Wingdings, за да подчертаете различни неща на страницата си, можете да използвате класа Wingdings, който сте настроили в стиловия лист, за да ги създадете, вместо да дефинирате конкретен стил за всеки случай на акцент.
Можете лесно да групирате стиловете си по-ефективно. Всичките методи за групиране, които са достъпни за CSS, могат да се използват в външни стилови листове и това ви дава повече контрол и гъвкавост на страниците си.
Това каза, че има и много добри причини да не използвате външни листове стил. За един, те могат да увеличат времето за изтегляне, ако се свържете с много от тях.
Всеки път, когато създавате нов CSS файл и го свързвате или импортирате в документа си, това изисква уеб браузърът да направи друго повикване до уеб сървъра, за да получи файла. А сървърите повишават времето за зареждане на страницата.
Ако имате само малък брой стилове, те могат да увеличат сложността на страницата ви.
Тъй като стиловете не се виждат точно в HTML, всеки, който гледа страницата, трябва да получи друг документ (CSS файла), за да разбере какво става.
Как да създадете външен лист стил
Външните стилови листа са написани по същия начин като вградените и вградените стилови листове. Но всичко, което трябва да напишете, е изборът на стилове и декларацията . В документа не ви е необходим елемент или атрибут СТИЛ.
Както при всички останали CSS, синтаксисът за едно правило е:
селектор {свойство: стойност; }
Тези правила се записват в текстов файл с разширение .css. Например можете да посочите стиловия лист styles.css.
След като имате документ със стилен лист, трябва да го свържете с уеб страниците си. Както споменах по-горе, това се прави по два начина.
Свързване на документи от CSS
За да свържете лист с стилове, използвайте елемента LINK. Това има атрибутите rel и href. Атрибутът rel показва на браузъра това, което свързвате (в този случай лист с стилове), а атрибутът href държи пътя към CSS файла.
Съществува и допълнителен тип атрибут, който можете да използвате, за да определите типа MIME на свързания документ. Това не се изисква в HTML5, но трябва да се използва в HTML 4 документи.
Ето кода, който бихте използвали, за да свържете лист с стилове CSS, наречен styles.css:
И в HTML 4 документ ще напишете:
тип = "текст / css" >
Импортиране на стилове на CSS стилове
Импортираните стилови листа се поставят в елемента STYLE. След това можете да използвате вградени стилове, ако искате. Можете също така да включвате импортирани стилове в рамките на свързани стилови листове. В документа STYLE или CSS пишете:
@import url ("http://www.yoursite.com/styles.css");