Урок 13. Give a Background Color to a div Element връзка>>
Можете да зададете фонов цвят на елемент със свойството background-color.
Например, ако искате цветът на фона на елемента да е зелен, трябва да поставите това във вашия стилов елемент:
.green-background {
background-color: green;
}
Задача: Създайте клас, наречен silver-background със сребрист цвят на фона. Присвоете този клас на вашия div елемент.
Урок 14. Set the ID of an Element
В допълнение към класовете, всеки HTML елемент може да има и id-атрибут.
Има няколко предимства от използването на атрибути id: Можете да използвате идентификатор (id), за да стилизирате един елемент и по-късно ще научите, че можете да ги използвате, за да избирате и променяте конкретни елементи с JavaScript.
ID атрибутите трябва да са уникални. Браузърите не го изискват, но това е широко приета практика. Така, че не давайте повече от един елемент със същия идентификационен (id) атрибут.
Ето пример за това как давате на своя h2 елемент идентификатора id на cat-photo-app:
<h2 id="cat-photo-app">
Задача: Дайте на вашия form - елемент идентификатор id cat-photo-form.
Урок 15. Use an ID Attribute to Style an Element
Едно страхотно нещо за id атрибутите е, че подобно на класовете, можете да ги стилизирате с помощта на CSS.
Идентификаторът обаче не може да се използва повторно и трябва да се прилага само към един елемент. Идентификаторът също има по-висока тежест от класа, така че ако и двата са приложени към един и същи елемент и имат конфликтни стилове, стиловете на идентификатора ще бъдат приложени.
Ето пример за това как можете да вземете своя елемент с атрибута id на cat-photo-element и да му придадете зелен цвят на фона. Във вашия style елемент:
#cat-photo-element {
background-color: green;
}
Имайте предвид, че вътре във вашия стилов елемент вие винаги препращате към класове, като поставяте . пред имената им. Винаги препращате към идентификатори, като поставяте # пред имената им.
Задача: Опитайте да дадете на вашия формуляр, който вече има атрибута идентификатор на cat-photo-form, зелен фон.
Готови сте за следващия урок: Adjusting the Padding of an Element
Всички уроци от Responsive Web Design >>