Стилови декларации в CSS — част 2

В предния урок обяснихме някои от основните стилове, характерни за така наречения box model на елементите. Говорихме за display, margin, padding, border, width и height. В този урок ще представя и едно малко CSS3 допълнение към този модел, както и ще разгледаме някои стилове от гледна точка на текстовото съдържание на HTML елементите.

border-radius

Лично на мене винаги много са ми допадали елементи със заоблени ъгли и вечно съм се старал да постигна този ефект по някакъв начин. Тези начини са много — включително с използване на таблица 3×3, което всъщвност от гледна точка на семантичен код е доста нередно. Съществуват различни начини и тъкости за създаване на заоблени ъгли, но най-правилният в момента е посредством CSS3.

Всички марки браузъри поддържат чрез CSS да зададем стил border-radius. Стойността се интерпретира като радиус на дъгата на окръжност. Възможно е да се въведат няколко стойности. Тогава всяка отговаря за за по един ъгъл, като се започва от горния ляв и се продължи по часовниковата стрелка. Този стил поддържа даже и възможност за елиптични ъгли. Те не са заоблени подобно на кръг, а да речем по-ниски и по-широки заоблени ъгли. В момента няма да разглеждаме как точно се задават елиптични ъгли, достатъчно е обикновено закръгляне на ъглите, което се постига с:

div { broder-radius: 10px; }

Шрифтът на съдържанието може да се редактира посредством следните стилови декларации

color

color — определя цвета на текста. Стойността се задава в шестнадесетичен код или с име на стандартен цвят. Пълен списък на тези стандартни имена има на http://www.w3schools.com/colors/colors_names.asp.

font-weight

font-weight — задава дебелината на шрифта. Стойностите, които се поддържат са normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 и 900. Числовите стойности (от 100 до 900) се използват при шрифтове, които имат няколко разновидности на дебелината. normal се равнява на 400. По-ниските числови стойности са за light шрифтове. bold се равнява на 700. Стойностите bolder и lighter са относителни и задават текущата дебелина да е едно ниво bolder или lighter (логично).

font-size

font-size — определя големината на шрифта. Могат да се използват всякакви мерни единици, за които споменахме в предния урок — px, em, % и т.н.

font-family

font-family — определя и самия шрифт — Arial, Times New Roman, Georgia, Verdana и т.н. Шрифтовете, чиито имена се състоят от няколко думи трябва да се напишат в кавички. Задавайки стойност, можете да изредите няколко шрифта, разделени със запетаи. Тогава браузърите ще се опитат да представят съдържанието чрез първия шрифт и в случай, че посетителят на сайта го няма инсталиран на компютъра си, браузърът ще премине към следващия. Много често в сайтовете се използват така наречените websafe fonts. Това ще рече, че те са инсталирани по подразбиране на всички компютри. Няколко разпространени групи от шрифтове, които се използват масово са:

p.verdana { font-family: Verdana, Arial, Helvetica, sans-serif; }
p.tahoma { font-family: Tahoma, "Trebuchet MS", Arial, Helvetica, sans-serif; }
p.times { font-family: "Times New Roman", Times, serif; }
p.georgia { font-family: Georgia, Times, serif; }
p.monospace { font-family: "Lucida Console", "Courier New", Courier, monospace; }
p.cursive { font-family: "Comic Sans", cursive; }
p.fantasy { font-family: Impact, fantasy; }

Arial и Helvetica реално не са websafe, тъй като Helvetica липсва по подразбиране на Windows, а Arial — на Macintosh. Но ако винаги, когато използвате единия напишете и другия — няма да имате никакви проблеми. Самите шрифтове изглеждат почти еднакво и са взаимозаменими на двете операционни системи.

Типове шрифтове

Може би забелязвате ключовите думи sans-serif, serif, monospace, cursive, fantasy. Това са имена на типове шрифтове. Винаги завършвайте декларации за font-family с типа шрифт, който искате да използвате.

serif

Serif-ни са шрифтовете, които имат малки ъгълчета около краищата на буквите. Говори се, че те са по-лесни за възприемане при напечатан текст.

sans-serif

Sans-serif-ни са шрифтовете, които нямат такива ъгълчета. За тях се казва, че са по-подходящи при монитори. Това е защото тези фини ъгълчета не винаги се изобразяват достатъчно добре при едрите пиксели на мониторите. При HiDPI / retina екрани обаче това може да не е така.

monospace

Monospace типа шрифтове имат еднаква широчина на буквите. Едно време пишещите пашини са използвали такива шрифтове.

cursive

Cursive са шрифтове, които малко или много наподобяват ръкопис. Не е задължително да са много завъртени. Все пак са по-близки до начина, по който хората пишат, отколкото печатните шрифтове.

fantasy

Накрая остава типът fantasy, който включва шрифтове с по-особено представяне. Това включва и готически, и други шрифтове. Тъй като този тип шрифтове е най-трудно да се определи как би трябвало да изглеждат, най-добре просто потърсете за примери в images.google.com

font-style

font-style — задаваме нормални шрифтове или такива в курсив (italic). Стойностите, които можем да зададем са именно тези — normal, italic и oblique. Последното е подсилена форма на italic и не се поддържа от всички шрифтове.

font-variant

font-variant — приема стойности normal или small-caps. При small-caps всички букви изглеждат като че ли са написани ГЛАВНИ. Но тези, които не са въведени като такива, се представят с по-малка големина. От там и “small caps” (малки главни).

font-stretch

font-stretch — много малко шрифтове поддържат този стил, така че едва ли някога бихте го използвали. Все пак нека поясним, че шрифтове, които поддържат този стил могат да се представят като по-сбити или по-разтеглени. Само да уточним, че става въпрос за представяне на самите букви, а не просто разстоянието между буквите.

Много добри примери за семействата шрифтове и техните стилове можете да видите тук на https://www.w3.org/Style/Examples/007/fonts.en.html.

letter-spacing

letter-spacing — това вече се използва за да се определи разстоянието между отделните букви на шрифта. Поддържа положителни и отрицателни стойности. В първия вариант буквите ще бъдат разделени на по-голямо разстояние. Във втория ще бъдат сгъчкани една в друга.

word-spacing

word-spacing — подобно на letter-spacing, само че става въпрос за разстояние между отделните думи.

text-transform

text-transform — поддържа стойности none, capitalize, uppercase, lowercase. С този стил можете да промените начина на представяне на малки и главни букви. none е стойността по подразбиране и представя буквите както са въведени. capitalize прави първите букви на всички думи главни. uppercase прави главни всички букви, а lowercase прави всички букви малки.

text-decoration

text-decoration — използва се за добавяне на линии под, над или през текста. Стойностите са underline, overline и line-through.

text-indent

text-indent — удобно когато искате думите от първия ред на нов абзац да излизат малко по-навътре, а следващите редова да започват нормално. Точно както учат децата в училище. Задава се числова стойност в някакви мерни единици, като например 15px.

Е, вече имате знания за прилагане на доста голям набор от стилове за форматиране на текстовото съдържание в една HTML страница.