Преглед атрибута ХТМЛ стила
ХТМЛ код треба атрибут стила да би се веб странице приказивале у веб прегледачима као што су Цхроме, ФиреФок, ИЕ да би се приказале онако како су предвиђене. ХТМЛ ознаке могу садржавати различите информације, а атрибут стила контролише изглед информација садржаних у ХТМЛ блоковима користећи инлине стилинг.
У овом ћемо чланку сазнати више о атрибуту ХТМЛ стила који није ништа више од скупа правила која одређују како ће се страница приказивати у веб претраживачу.
Листа атрибута ХТМЛ стила
Ево списка свих својстава стила помоћу којих се може утицати и контролисати дизајн ХТМЛ елемената праћен практичним примером:
1. Боја позадине
Помоћу овог својства ЦСС можемо поставити боју позадине за било који ХТМЛ елемент,
итд.
Пример
My background is blue
Излаз:
2. Боја
Бојом фонта текста у ХТМЛ елементу може се контролисати подешавањем атрибута боје на право име боје или ХЕКС кода или РГБ кода.
Пример
My font color is blue
Излаз:
3. Боја обруба
Можемо поставити боју обруба било ког ХТМЛ елемента ако желимо да му додамо обруб.
Пример
Моја граница је црвена
Излаз:
Као што видите у коду горе, својство границе прихвата 3 својства у следећем редоследу: „Боја обруба у облику границе границе“.
4. Позадина слике
Такође можемо да поставимо слику као позадину користећи својство позадинске слике на следећи начин:
Пример:
Излаз:
5. Поновите позадину
Као што видите у горњем примеру, када је слика постављена као позадина помоћу својства позадинске слике; она подразумевано понавља слику и хоризонтално и вертикално. Међутим, неке слике ће можда требати поновити вертикално или хоризонтално или можда неће бити потребне да се понове. Оваквим понашањем се може контролисати постављањем жељене вредности на својство позадинског понављања и може се користити само када се позадинска слика користи другачије, неће додати никакву вредност стила када се користи као самостално својство.
Вриједност „репеат-к“ се користи да би се слика могла поновити само хоризонтално.
Вриједност „понови-и“ користи се за понављање слике само вертикално.
Вриједност „не-понављање“ се користи за заустављање било каквог понављања позадинске слике.
Променимо горњи пример да бисмо побољшали позадинску слику.
Пример
Излаз:
Можемо упоредити горње примере и схватити да помоћу слике са позадином можемо додати слику као позадину, а са позадином поновити, можемо да контролишемо понављање позадинске слике.
6. Позадина-позиција
Помоћу овог својства можемо дефинисати положај позадинске слике.
Пример
Излаз:
7. Марже
ЦСС нам пружа својства за постављање маргина на све четири стране ХТМЛ елемента или бисмо могли додати маргине на одређеној страни елемента.
Са маргин-топ може додати маржу на врх елемента, маргин-ригхт ће додати маржу на десној страни елемента, маргин-лефт додаће маргину са леве стране елемента и маргин-боттом додаће маргин до дна елемента. Уместо да користимо ова 4 својства, такође можемо користити својство маргине и подесити његове вредности према нашем захтеву.
Пример
p (
margin-top: 25px;
margin-bottom: 75px;
margin-right: 50px;
margin-left: 100px;
)
or
p
(
margin: 25px 50px 75px 100px;
)
8. Паддинг
Својство паддинг-а дефинира простор између садржаја елемента и његових граница. Можемо користити својство „паддинг“ или појединачна својства облога као што су паддинг топ, боттом-пад, паддинг-лефт, паддинг-ригхт да поставимо облоге за горњи, доњи, леви или десни део садржаја елемента.
p (
padding-top: 25px;
padding -bottom: 75px;
padding -right: 50px;
padding -left: 100px;
)
or
p
(
padding: 25px 50px 75px 100px;
)
9. Висина и ширина
Висина и ширина су најосновнија ЦСС својства која се користе за дефинисање висине и ширине било ког ХТМЛ елемента. Могу бити постављене на вредност пиксела попут 200пк или у проценту попут 10%, 20% итд.
10. Поравнање текста
Ово својство се користи за постављање хоризонталног смера у којем желимо поравнати текст елемента. Вриједност се може поставити на средину, десно или лијево.
p (
text-align: center;
)
or
p (
text-align: left;
)
or
p (
text-align: right;
)
11. Декорација текста
Својство украшавања текста може се користити за постављање украса попут подвлачења, прецртавања линија или преклапања текста у ХТМЛ-у.
Пример:
Ово је наглашено
Излаз:
12. Размак слова
Као што име сугерира, ово својство се користи за дефинирање размака између слова / знакова у ријечи. Може му се доделити позитивна или негативна вредност пиксела за повећање или смањење размака између слова.
Пример:
Моје речи се преклапају
Излаз:
13. Линијска висина
Висина линија дефинише удаљеност између вертикалних линија. Као и размаци слова, и висина линије се може поставити на позитивну или негативну вредност пиксела. Погледајмо пример у наставку да бисмо га боље разумели:
Пример:
Овај одломак има малу висину линија.
Овај одломак има малу висину линија.
Излаз:
14. Смјер текста
Понекад ако садржај веб странице није на енглеском, већ неком другом језику попут арапског који следи право на леву конвенцију, морали бисмо да променимо смер текста. У таквим случајевима можемо обрнути смјер текста.
Пример:
Ја сам десно лево
Излаз:
15. Сенка текста
Ово својство додаје сенку тексту.
Пример:
Имам сиву сенку
Излаз:
16. Породица фонтова
Можемо дефинирати класу фонта за текст у елементу. Можемо дефинисати више породица фонтова одвојених зарезом као резервни систем за руковање сценаријима где се не може учитати преферирана класа фонта.
- Стил фонта: Својством стила фонта можемо додати курзив или коси ефекат у текст.
Пример:
Ово је коси стил.
Излаз:
- Тежина слова: Ово својство дефинише тежину фонта.
Пример:
Ово је одважни одломак
Излаз:
Стилски атрибути приказани су изнад наших грађевних блокова помоћу УИ и УКС дизајна. Они се настављају развијати како се уводе нове верзије ЦСС-а.
Препоручени чланци
Ово је водич за атрибуте ХТМЛ стила. Овде смо расправљали о листи свих својстава стила помоћу којих се може утицати и контролисати дизајн ХТМЛ елемената уз помоћ практичних примера. Можда ћете такође погледати следеће чланке да бисте сазнали више -
- Стилови ХТМЛ фонтова
- Стилови листе ХТМЛ
- Основне ХТМЛ ознаке
- Предности ХТМЛ-а
- ХТМЛ Фрамес
- Преокренути у ЈаваСцрипт-у
- ХТМЛ Блоцкс
- Поставите боју позадине у ХТМЛ-у са примјером