Използване на CSS Site Wide
Уебсайтовете са комбинация от стил и структура, а в днешната мрежа е най-добрата практика да запазите тези два аспекта на сайта отделни един от друг.
HTML винаги е бил това, което осигурява сайт със своята структура. В първите дни на мрежата HTML съдържа и стилна информация. Елементи като маркера бяха покрити с HTML кода, добавяйки информация за облика и усещане заедно със структурната информация. Стандартното движение в мрежата ни накара да променим тази практика и вместо това да натиснем цялата информация за стила в CSS или Cascading Style Sheets. Като направите тази крачка напред, настоящите препоръки са, че използвате "външен стилов лист" за нуждите на вашия уебсайт.
Предимства и недостатъци на външните стилови листове
Едно от най-хубавите неща за Cascading Style Sheets е, че можете да ги използвате, за да поддържате целия си сайт съвместим. Най-лесният начин да направите това е да свържете или импортирате външен лист с стилове . Ако използвате един и същ външен лист с стилове за всяка страница на сайта си, можете да сте сигурни, че всички страници ще имат същия стил. Можете също така да улесните да правите промени за в бъдеще. Тъй като всяка страница използва един и същ външен лист с стилове, всяка промяна в този лист ще се отрази на всяка страница на сайта. Това е много по-добре, отколкото да се налага да променяте всяка страница поотделно!
Предимства на външните листове стил
- Можете да контролирате вида и усещането на няколко документа наведнъж.
- Това е особено полезно, ако работите с екип от хора, за да създадете своя уеб сайт. Много правила за стил могат да бъдат трудни за запомняне и макар че може да имате напечатано ръководство за стил, е неефективно и досадно непрекъснато да се обръщате към него, за да определите дали текстът трябва да бъде написан на 12 точки Arial шрифт или 14-часов куриер. Като разполагате с всичко на едно място и тъй като това място е мястото, където можете да правите промени, можете да направите такава поддръжка много по-лесно.
- Можете да създавате класове стилове, които могат да бъдат използвани на много различни HTML елементи .
- Ако често използвате определен шрифт за подчертаване на различни неща на страницата си, можете да използвате атрибут клас, който сте настроили в стиловия лист, за да получите този външен вид и усещане, вместо да дефинирате конкретен стил за всеки случай от акцент.
- Можете лесно да групирате стиловете си по-ефективно.
- Всичките методи за групиране, които са достъпни за CSS, могат да се използват в външни стилови листове и това ви дава повече контрол и гъвкавост на страниците си.
Недостатъци на външните стилови листове
- Външните стилови листове могат да увеличат времето за изтегляне, особено ако са изключително големи. Тъй като CSS файлът е отделен документ, който трябва да бъде зареден, той ще окаже влияние върху производителността, за да извърши това изтегляне.
- Външните стилови листа се увеличават много бързо, тъй като е трудно да се разбере кога стилът вече не се използва, защото не се изтрива, когато страницата бъде премахната. Правилното управление на вашите CSS файлове е важно, особено ако няколко човека работят върху един и същ файл.
- Ако имате само един уебсайт, може да не е необходим външен файл за CSS, тъй като имате само тази страница в стил. Много от предимствата на външните CSS се губят, когато имате само един сайт.
Как да създадете външен лист стил
Външните стилни стилове се създават с подобен синтаксис към стиловите листове на ниво документ. Обаче всичко, което трябва да включите, са селекторът и декларацията. Подобно на стиловия лист на ниво документ, синтаксисът за правило е:
селектор {свойство: стойност;}Запазете тези правила в текстов файл с разширение .css. Това не е задължително, но е добър навик да влезете, за да можете веднага да разпознаете стиловите листове в директорията.
След като имате документ със стилен лист, трябва да го свържете с уеб страниците си . Това може да се направи по два начина:
- Свързването
- За да свържете стилов лист, използвайте HTML маркера. Това има атрибутите rel , type и href . Атрибутът rel показва какво свързвате (в този случай стилова таблица), типът определя типа MIME за браузъра и href е пътят към .css файла.
- Внос
- Можете да използвате импортиран лист с стилове в лист стил на документ, така че да можете да импортирате атрибутите на външен лист с стилове, без да губите такива, които са специфични за документа. Нареждате го по подобен начин, като извиквате свързан стилов лист, но той трябва да бъде наречен в декларация за стил на документ. Можете да импортирате колкото се може повече външни листове стил, колкото е необходимо, за да поддържате вашия уеб сайт.
Оригинална статия на Дженифър Кринин. Редактиран от Jeremy Girard на 8/8/17