Прилагането на CSS към HTML
Има три начина за използване на CSS към HTML документа. низ вградени и външни стилови листове. Ако не разполагате с добра причина да се използва един от първите два метода, винаги използвайте третата опция. Причината за това скоро ще стане ясно, но първо разгледаме различните варианти.
низови стилове
Можете да приложите лист със стилове към елемент с помощта на атрибута стил, както следва:
Вътре в този атрибут съдържа всички CSS свойства и техните стойности (всяка двойка на имота / стойност разделени един от друг с точка и запетая, а всеки имот е отделен от своята стойност във всяка двойка на дебелото черво). По този начин се определят стилове в CSS. Като пример, имайте предвид следното код страницата.
Ако отворите този пример в браузъра, може да се види, че параграфа с атрибута стил е синьо с бял текст и ще има различен размер в сравнение с друга, както е показано на фигура 27.1.
Фиг. 27.1. Браузърът Opera разрез с използването на низ стилове различно от другите параграфи
Предимството на инлайн стилове е, че браузърът ще бъде принуден да използва тези настройки. Всички други стилове, определени в други стилове или да се вграждат в заглавната част на документ ще замени тези стилове.
Големият проблем низ от стилове е, че те правят поддържането много по-трудно, отколкото трябва да бъде. Използване на CSS е предназначен за отделяне на представяне на документа и неговата структура, но стилове низови правят обратното - разпръсне правилата за представяне на документа.
В допълнение към проблеми с услугата, те не получават никакви предимства най-мощната част на CSS: Cascading. Ще се върнем към по-подробно разглеждане на каскадата в следващата глава, но за сега е достатъчно да се знае, че използването на каскадни означава, че можете да зададете на външния вид на едно място, и браузъра тя се прилага за всички елементи, които съответстват на конкретно правило.
вложени стилове
Вложени стилове документ поставя вътре елемент стил заглавие. както в следния пример страницата:
Фиг. 27.2. Браузърът Opera показва всички точки с начините, определени във вградения стил лист
Предимството на вградените стилове е, че те не трябва да добавите атрибут стил на всяка точка - можете да ги подредите с едно определение. Това означава също така, че ако трябва да промените външния вид на всички раздели, това може да се направи на едно място, но всичко това, обаче, е ограничена до един документ - какво, ако искате да определите външния вид на целия различните раздели на сайта? Използвайте външни стилови листове.
Външни стилови листове
Външни стилови листове означава да поставите всички определения на CSS в отделен файл, да го запишете с разширение на CSS файла и след това да го прилага по отношение на документите за HTML, като се използва елемент на връзката в заглавието на документа.
Да разгледаме например изходния код на страницата:
и имайте предвид, че заглавието съдържа елемент връзка. който се отнася до външния CSS файл,
и проверете дали начините, определени във външен CSS файл, използвани за кодиране на HTML. Нека да разгледаме по-подробно връзката на продукт:
Говорихме за елемент връзка преди в курса. Спомнете си, че HREF атрибутите сочи към CSS файла, медии атрибут определя каква информация на медиите, трябва да използват тези стилове (в този случай той ще бъде на екран (екрана), така че ние няма да отпечатвате документи в тази форма), както и вида атрибут определя отколкото е свързан ресурс (файловото разширение не е достатъчно, за да се определи това).
Фиг. 27.3. Opera браузър използва стилове, определени в външни стилове, когато е свързан с елемент за връзка
Това е най-добрият от всички начини: да поддържате всички обработката на решителност в един файл, което означава, че можете да направите промени в целия сайт, като промените само един файл и браузъра да го изтеглите веднъж и след това кеширана за всички други документи, които го връзка, което намалява количеството на изтеглените данни.
внос Стилов
Налице е всъщност друг начин да импортирате външни файлове лист със стилове HTML - на @import оператор. Той се поставя в вграден стил лист по същия начин, както вградения CSS кода. Синтаксисът е както следва:
Понякога ще видите отчети за внос без скобите, но това означава, че едно и също нещо. Необходимо е да се знае, че изявлението на @import винаги трябва да е на първо място в вграден стил лист. И накрая, можете да укажете, че внасят стил лист ще се прилага само за определени видове медии (медии), включително типа на хартията от края на отчета за внос (това работи във всички браузъри освен IE6 и по-ниски версии). Следващият пример прави същото нещо като предишния примерен код:
Първият въпрос, който ви попитам, е: "Защо ми е необходим още един начин да се прилагат външни стилови листове до документи HTML?" В действителност, това не е необходимо - на @import информация е включена тук повече за пълнота. Има малки незначителни предимства / недостатъци на използването @import или елементи на връзка. но те са много малко, така че можете да изберете по какъв начин предпочитате. Въпреки, че елементите на връзката сега се считат за най-добрия начин.
- По-стари браузъри не признават @import. така напълно го игнорират (Netscape 4 и повече години, и IE 4 и повече години, ако сте пропуснали скобите около името на файла). Възможно е, следователно, да се използва израза @import да се скрие стилове от по-старите браузъри, които ще ги използват неправилно. Можете да поставите модерен стил във външен стилове и да ги импортирате използване @import. и след това да се дадат някои от най-основните стилове на дизайна, които няма да причинят проблеми в IE / Netscape 4. Това е полезно, но днес рядко може да се окаже необходимо да се гарантира съвместимост с IE / Netscape 4!
- Както бе споменато по-рано, IE6 не поддържа посочване на вида на носителя, в края на @import линия. така че това не е най-добрият начин да се използват няколко стилови листове за различни носители на информация.
- Може да се твърди, че кодът за множество @import твърдения е по-малко от кода на няколко елемента връзка. но тя е много малка.
заключение
В следното ръководство, ние се рови в подробности за CSS. като се има предвид каскадни-подробно характеристики на селектори.
Тестовите въпроси
- Какви са предимствата и проблемите на инлайн стилове и как да ги прилага по отношение на елемент?
- Какво е правило за стил? Описва различни компоненти и синтаксис.
- Да предположим, че имаме набор от правила за стил, които трябва да направите, за да ги превърне в външни стилове?
- Което съответства на следващата селектор CSS: ул # навигация<>?
- Какво е предимството на комбиниране на селектори в групата?
- Как може да се определи масата на парцел стил?
Крис Heilman работил уеб разработчик в продължение на десет години, след като част от актьорския състав радио журналистика. Той работи за Yahoo! в Обединеното кралство като треньор и олово разработчик, и следи за качеството на кода за външното представителство на Европа и Азия.
Свързани статии