Урок 25. Style the HTML Body Element връзка>>
Сега нека започнем от начало и да говорим за CSS наследяването.
Всяка HTML страница има body елемент /тяло/.
Можем да докажем, че body елементът съществува тук, като му дадем черен цвят на фона /background-color: black;/.
Можем да направим това, като добавим към нашия style елемент следното:
body {
background-color: black;
}
background-color: black;
}
Урок 26. Inherit Styles from the Body Element
Видяхте, че всяка HTML страница има body елемент, който може да бъде оформено и с CSS.
Не забравяйте, че можете да оформите body елемента като всеки друг елемент на HTML и всички останали елементи могат да наследят /inherit/ стиловете на вашия body елемент.
Първо, създайте h1 елемент с текст Hello World.
След това задайте на всички елементи на страницата си на зелен цвят /green/ чрез добавяне на color: green; към декларацията за стила на body елемент.
Накрая, дайте на body елемента шрифт/font-family/ на Monospace, като добавите font-family: Monospace; към декларацията за стила на body елемент.
Урок 27. Prioritize One Style Over Another
Понякога HTML елементите ви ще получават няколко стила, които са в конфликт помежду си.
Например h1 елементът не може да бъде едновременно зелен и розов. Да видим как работят по приоритет стиловете.
Да видим какво се случва, когато създадем клас, който прави текста розов, а след това го приложим към даден елемент. Този нов клас ще отмени ли на body-елемента зеления цвят /color: green;/?
Създайте CSS клас, с името pink-text, който може да се приложи на всеки елемент и да му даде розов цвят.
Приложете този клас на h1 елемента.
Урок 28. Override Styles in Subsequent CSS
Резултата от предното упражнение е, че класа "pink-text" премахна CSS декларацията на body елемента!
Доказахме, че класовете задавани извън body елемента ще заменят CSS на body елемента. Така че следващият логичен въпрос е какво можем да направим, за да преодолеем /override/ нашия pink-text клас?
Създайте допълнителен CSS клас, наречен blue-text, който дава на елементите син цвят. Уверете се, че е под декларацията за класа pink-text.
Приложете blue-text класа h1-елемент като допълнение към вашия pink-text клас и нека видим кой печели.
Прилагането на множество атрибути в класа на даден HTML елемент се извършва с интервал между тях по следния начин:
class="class1 class2"
Забележка: Няма значение реда на класовете по който са изброени в HTML елемента.
Обаче редът на декларации на класовете в секцията <style> е важен. Втората декларация винаги ще има предимство пред първата. Тъй като класа .blue-text е обявен за втори, той заменя атрибутите на класа .pink-text
Урок 29. Override Class Declarations by Styling ID Attributes
Току-що видяхте, че браузърите четат CSS от горе надолу. Това означава, че в случай на конфликт, браузърът ще използва коя да е CSS декларация, която е последна.
Но все още не сме приключили. Има и други начини, по който можете да презапишете/override/ CSS. Помните ли id - атрибутите?
Нека да заменим класовете .pink-text и .blue-text и да направим h1-елемент оранжев, като дадем на h1-елемента id и след това да оформим това id.
Дайте на h1-елемента id /идентификационния атрибут/ на
orange-text. Не забравяйте, че id стиловете изглеждат така:<h1 id="orange-text">
Оставете класове
blue-text и pink-text на h1-елемента .
Създайте CSS декларация за вашия orange-text идентификатор /id/ във вашия style-елемент. Ето един пример за това как изглежда това:
#brown-text {
color: brown;
}
color: brown;
}
Забележка: Няма значение дали декларирате този css над или под класa pink-text, тъй като идентификационният атрибут винаги ще има предимство.
Урок 30. Override Class Declarations with Inline Styles
От предишното упражнение видяхме, че id декларацията заменя/override/ декларацията на класовете независимо от това кога и къде се намират в style елемента на CSS.
Има и други начини, по които можете да презапишете/замените/ CSS. Спомняте ли си вградените стилове /in-line styles/.
Използвайте in-line стил, за да се опитате да направите своя h1-елемент бял. Не забравяйте, че in-line стила изглежда така:
<h1 style="color: green">
Оставете blue-text и pink-text класовете в h1 елемента.
 |
| По старата версия |
 |
| По новата версия |
Урок 31. Override All Other Styles by using Important
Оказа се, че с in-line styles можем да изместим всички CSS декларации в style-елемента.
Има още един начин да се замени/override/ CSS. Има един метод, който е с най-голяма сила пред всички останали.
Нека кажем първо защо изобщо може да искаме да изместваме /override/ CSS. В много случаи ще използвате CSS библиотеки. Те могат случайно да изместят собствения ви CSS. Така че, когато абсолютно сте сигурни и искате даден елемент да има специфичен CSS, можете да използвате този метод за който сега ще говорим!
Нека се върнем назад към декларацията на нашия клас pink-text. Нали помните, че класа pink-text беше заменен от следващи декларации на класове /class declarations/, id-декларация и in-line стил.
Нека добавим ключова дума: !important към pink-text декларацията за цвета, така че да сме сигурни, че h1-елемента ще бъде на 100% розов, а не друг цвят.
Пример за това как се ползва:
color: red !important;
Продължете към Use Hex Code for Specific Colors
Всички уроци от Responsive Web Design>>