Преглед на атрибута на стила на HTML
HTML кодът се нуждае от атрибута на стил, за да се изобразяват уеб страници в уеб браузъри като Chrome, FireFox, IE, за да бъдат показани така, както са предназначени да изглеждат. HTML таговете могат да съдържат разнообразна информация, а атрибутът стил контролира появата на информация, съдържаща се в HTML блокове, използвайки вграден стилинг.
В тази статия ще научим повече за атрибута HTML стил, който не е нищо повече от набор от правила, определящи как страницата ще бъде изобразена в уеб браузъра.
Списък на атрибутите на HTML стил
Ето списък на всички свойства на стила, които могат да се използват за влияние и контрол на дизайна на HTML елементи, придружен от практически пример:
1. Цвят на фона
С това свойство CSS можем да зададем цвета на фона за всеки HTML елемент като,
и т.н.
пример
My background is blue
изход:
2. Цвят
Цветът на шрифта на текста в HTML елемент може да бъде контролиран чрез задаване на неговия атрибут за цвят на името на правилния цвят или HEX код или RGB код.
пример
My font color is blue
изход:
3. Цвят на границата
Можем да зададем цвета на рамката на всеки HTML елемент, ако искаме да добавим рамка към него.
пример
Границата ми е червена
изход:
Както виждате в кода по-горе, свойството border приема 3 свойства в следния ред: „Цвят на границата с ширина на границата“.
4. Фон-изображение
Можем също да зададем изображение като фон, като използваме свойството background-image, както следва:
Пример:
изход:
5. Повторете предисторията
Както виждате в горния пример, когато изображението е зададено като фон, използвайки свойството background-image; то по подразбиране повтаря изображението както хоризонтално, така и вертикално. Някои изображения обаче може да се наложи да се повтарят вертикално или хоризонтално или може да не са необходими. Това поведение може да бъде контролирано чрез задаване на желаната стойност спрямо свойството на background-repeat и то може да се използва само когато фоновото изображение се използва друго, то няма да добави никаква стилистична стойност, когато се използва като самостоятелна собственост.
Стойността „repeat-x“ се използва, за да позволи на изображението да се повтаря само хоризонтално.
Стойността „повторение-у“ се използва, за да позволи на изображението да се повтаря само вертикално.
Стойността „не се повтаря“ се използва за спиране на всякакъв вид повторение на фоновото изображение.
Нека модифицираме горния пример, за да подобрим фоновото изображение.
пример
изход:
Можем да сравним примерите по-горе и да разберем, че с фон-изображение можем да добавим изображение като фон и с повторение на фон, можем да контролираме повторението на фоновото изображение.
6. Предпоставка-позиция
С това свойство можем да определим позицията на фоновото изображение.
пример
изход:
7. Маржове
CSS ни предоставя свойства за задаване на полета от четирите страни на HTML елемент или бихме могли да добавим маржове към определена страна на елемента.
С margin-top може да се добави марж в горната част на елемента, margin-right ще добави марж вдясно на елемента, margin-left ще добави поле отляво на елемента, а margin-bottom ще добави марж до дъното на елемента. Вместо да използваме тези 4 свойства, можем също да използваме свойството margin и да зададем неговите стойности според нашето изискване.
пример
p (
margin-top: 25px;
margin-bottom: 75px;
margin-right: 50px;
margin-left: 100px;
)
or
p
(
margin: 25px 50px 75px 100px;
)
8. Подплънки
Свойството padding определя пространството между съдържанието на даден елемент и неговите граници. Можем да използваме свойството „padding“ или отделни свойства на подплънки като padding-top, padding-bottom, padding-left, padding-right, за да зададем подплънките за горната, долната, лявата или дясната част на съдържанието на елемент.
p (
padding-top: 25px;
padding -bottom: 75px;
padding -right: 50px;
padding -left: 100px;
)
or
p
(
padding: 25px 50px 75px 100px;
)
9. Височина и ширина
Височината и ширината са най-основните CSS свойства, използвани за определяне на височината и ширината на всеки HTML елемент. Те могат да бъдат зададени на стойност на пиксел като 200px или процент като 10%, 20% и т.н.
10. Подравняване на текст
Това свойство се използва за задаване на хоризонтална посока, в която бихме искали да подравним текста на елемент. Стойността може да бъде зададена в центъра, вдясно или вляво.
p (
text-align: center;
)
or
p (
text-align: left;
)
or
p (
text-align: right;
)
11. Декорация на текст
Свойството за украса на текст може да се използва за задаване на декорации като подчертаване, преместване през ред или надчертаване на текст в HTML.
Пример:
Това е подчертано
изход:
12. Разстояние между буквите
Както подсказва името, това свойство се използва за определяне на разстоянието между букви / знаци в една дума. Може да му бъде присвоена положителна или отрицателна пикселна стойност, за да се увеличи или намали разстоянието между буквите.
Пример:
Думите ми се припокриват
изход:
13. Линия-височина
Височината на линията определя разстоянието между вертикалните линии. Подобно на разстоянието между букви, и височината на реда може да бъде зададена на положителна или отрицателна стойност на пиксела. Нека да прегледаме примера по-долу, за да разберем по-добре:
Пример:
Този параграф има малка височина на реда.
Този параграф има малка височина на реда.
изход:
14. Посока на текста
Понякога, ако съдържанието на уеб страницата не е на английски, а на някакъв друг език като арабски, който следва правото на лявата конвенция, ще трябва да променим посоката на текста. В такива случаи можем да обърнем посоката на текста.
Пример:
Аз съм отдясно наляво
изход:
15. Текстова сянка
Това свойство добавя сянка към текста.
Пример:
Имам сива сянка
изход:
16. Семейство шрифтове
Можем да определим класа на шрифта за текст в елемент. Можем да определим множество семейства шрифтове, разделени със запетая, като резервна система за обработка на сценарии, при които предпочитан клас шрифтове не може да бъде зареден.
- Стил на шрифта: С помощта на свойството стил на шрифта можем да добавим курсив или наклонен ефект към текста.
Пример:
Това е наклонен стил.
изход:
- Тегло на шрифта: Това свойство определя теглото на шрифта.
Пример:
Това е смел параграф
Резултат:
Стайлинг атрибутите, показани над нашите строителни блокове с UI и UX дизайн. Те продължават да се развиват с въвеждането на нови версии на CSS.
Препоръчителни статии
Това е ръководство за HTML Attribute Style. Тук обсъждаме списъка на всички свойства на стила, които могат да бъдат използвани за влияние и контрол върху дизайна на HTML елементи с помощта на практически примери. Може да разгледате и следните статии, за да научите повече -
- Стилове на HTML шрифтове
- HTML стилове на списък
- Основни HTML тагове
- Предимства на HTML
- HTML рамки
- Обратно в JavaScript
- HTML блокове
- Задайте цвят на фона в HTML с пример