Каскадни таблици със стилове имат много предимства. Те ви позволяват да използвате една и съща таблица със стилове в целия си уебсайт. Има два начина да направите това:
- свързване с елемента LINK
- импортиране с командата @import
Предимства и недостатъци на външните таблици със стилове
Едно от най-хубавите неща за каскадни таблици със стилове е, че можете да ги използвате, за да поддържате сайта си последователен. Най-лесният начин да направите това е да свържете или импортирате външен лист със стилове. Ако използвате една и съща външна таблица със стилове за всяка страница на вашия сайт, можете да сте сигурни, че всички страници ще имат еднакво стилове.
Някои от предимствата при използването на външни таблици със стилове включват, че можете да контролирате външния вид и усещането на няколко документа едновременно. Това е особено полезно, ако работите с екип от хора, за да създадете своя уебсайт. Много правила за стил могат да бъдат трудни за запомняне и въпреки че може да имате отпечатано ръководство за стил, е досадно да го имате постоянно да го прелиствате, за да определите дали примерният текст трябва да бъде написан с 12-точков шрифт Arial или 14-точков Куриер.
Можете да създадете класове стилове, които след това да се използват за много различни HTML елементи. Ако често използвате специален шрифт Wingdings, за да подчертаете различни неща на страницата си, можете да използвате Wingdings клас, който сте настроили във вашата таблица със стилове, за да ги създавате, вместо да дефинирате конкретен стил за всеки екземпляр на акцент.
Можете лесно да групирате стиловете си, за да бъдат по-ефективни. Всички методи за групиране, които са достъпни за CSS, могат да се използват във външни таблици със стилове и това ви осигурява повече контрол и гъвкавост на вашите страници.
Въпреки това, има и много основателни причини да не се използват външни таблици със стилове. Първо, те могат да увеличат времето за изтегляне, ако се свържете с много от тях.
Всеки път, когато създавате нов CSS файл и го свързвате или импортирате във вашия документ, това изисква уеб браузърът да направи друго повикване до уеб сървъра, за да получи файла. И сървърните повиквания забавят времето за зареждане на страниците.
Ако имате само малък брой стилове, те могат да увеличат сложността на вашата страница. Тъй като стиловете не се виждат точно в HTML, всеки, който гледа страницата, трябва да вземе друг документ (CSS файл), за да разбере какво се случва.
Как да създадете външен лист със стилове
Външните таблици със стилове се пишат по същия начин, както вградените и вградени таблици със стилове. Но всичко, което трябва да напишете, е стилът селектор и декларация. Не ви е необходим елемент или атрибут STYLE в документа.
Както при всички останали CSS, синтаксисът на правило е:
селектор {свойство: стойност; }
Тези правила се записват в текстов файл с разширението.
.css. Например, можете да дадете име на вашата таблица със стилове.
стилове.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');