CSS ձեռնարկ — Դաս 3 — background-color, font-style, font-weight, text-align, text-decoration, text-transform հատկությունները

HTML գոյություն ունենալու ընթացքում ստեղծվել են բազմաթիվ տեգեր, սակայն CSS-ի համատարած կիրառման արդյունքում որոշ տեգերից պետք է հրաժարվել՝ ինչպիսիք են <font>-ը, <b>-ը, <i>-ը, <center>-ը: Ավելի ուշ կքննարկենք մյուս «արգելված» տեգերը։ Այս հատկությունները թույլ են տալիս նվազեցնել HTML-ում կոդի քանակը՝ տեղափոխելով այն CSS ֆայլեր։

Նախորդ դասում մենք միասակցեցինք CSS ֆայլն ու գխեցինք մի փոքր CSS կոդ։ Այս դասում կքննարկենք մի շարք հատկություններ, որոնք նախկինում օգտագործվել են HTML տեգերով, բայց հիմա դրանք ավելի ճիշտ է կիրառել CSS-ով։

background-color

Այս հատկությունը կարելի է կիրառել ոչ միայն բլոկների, այլ նաև տեքստի և հղումների ֆոնի համար, օրինակ՝

span {
  background-color: yellow;
}

a {
  background-color: blue;
}

Գույնները, ինչպես color-ում, կարող են задаваться հեքս՝ օրինակ #ff0000 կարմիր գույնի համար։

font-style

Պատմականորեն օգտագործվել են <b>, <strong> (ծանր տառեր) և <i> (կուրսիվ) տեգերը, սակայն CSS-ում դա կարելի է անել font-style հատկությամբ։ Աալված արժեքներից են՝

p {
  font-style: italic; /* կուրսիվ */
}

font-weight

Մինչև հիմա <b>-ը ծածկում էր հաստ տառերը, CSS-ում օգտագործվում է font-weight՝

body {
  font-weight: normal; /* նորմալ */
}

span {
  font-weight: bold; /* հաստ */
}

Ընթեռնելի արժեքներն են 400 կամ normal (նորմալ), 700 կամ bold (ստորին նշումը հաստ)։

text-align

Բնակում է <center>-ի փոխարեն, կարող է արժեքներ ունենալ՝ left, center, right, justify:

p {
  text-align: center; /* կենտրոնացված */
}

text-decoration

Փոխարինում է <u> (գծակիրտում) և <strike> (անցկացնել):

.underline {
  text-decoration: underline; /* գծակիրտում */
}

.line-through {
  text-decoration: line-through; /* անցկացնել */
}

text-transform

Տեքստի դեպքը կարգավորել՝ վերածված մեծատառերի կամ փոքրատառերի:

.uppercase {
  text-transform: uppercase; /* ԱՌԱՋԱՐԿԵտՄԵԾ */
}

.lowercase {
  text-transform: lowercase; /* փոքրատառ */
}

Չարժե անմիջապես սերտել բոլոր CSS հատկությունները. ժամանակի ընթացքում, երբեք չպահանջվողները կգտնեք անհրաժեշտության պահին, իսկ ամենահաճախակի օգտագործվողները կհիշեք։