Меню

Първи стъпки в правене на сайтове

Влез Излез

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

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

Лично на мене винаги много са ми допадали елементи със заоблени ъгли и вечно съм се старал да постигна този ефект по някакъв начин. Тези начини са много – включително с използване на таблица 3×3, което всъщвност от гледна точка на семантичен код е доста нередно. Съществуват различни начини и тъкости за създаване на заоблени ъгли, но най-правилният в момента е посредством CSS3. Единственото ограничение е, че IE 7 и 8 няма да ги поддържат (освен, ако не вземем специални мерки, но в момента няма да говорим за това, само на заинтересуваните ще кажа, че става въпрос за http://css3pie.com/).

Последните версии на всички известни марки браузъри (Chrome, Firefox, Safari, Opera, че дори и последната версия на IE) поддържат чрез CSS да зададем стил border-radius. Доскоро някои браузъри (даже и в момента някои го имат този проблем) изискваха този стил да се задава чрез префикс за съответстващите производители, тъй като стилът не беше финализиран (той и още не е, но вече се утвърди достатъчно, че стилът да работи и без префикс). Така че Firefox изискваше да бъде -moz-border-radius, Chrome и Safari изискваха стила да се задава като -webkit-border-radius,  Opera – -o-border-radius. При зададена единствена стойност четирите ъгъла на елемента се заоблят от браузърите така, че радиусът на окръжността със същата дъга да е такъв, какъвто сме задали. Възможно е да се въведат и четири различни стойности за четирите ъгъла, като се започва от горния ляв и се продължи по часовниковата стрелка. Този стил поддържа даже и възможност за елиптични ъгли (не заоблени подобно на кръг, а за речем по-ниски и по-широки заоблъни ъгли) като обаче тези дефиниции се различават при различните браузъри (от там и нуждата да се използват и префиксите). В момента няма да разглеждаме как точно се задават елиптични ъгли, достатъчно е обикновено закръгляне на ъглите, което се постига с:

div { broder-radius: 10px; }

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

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

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 – определя големината на шрифта. Могат да се използват всякакви мерни единици, за които споменахме в предния урок – px, em, % и т.н.

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-ни са шрифтовете, които имат малки ъгълчета около краищата на буквите. Говори се, че те са по-лесни за възприемане при напечатан текст.

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

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

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

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

font-style – задаваме нормални шрифтове или такива в курсив (italic). Стойностите, които можем да зададем са именно тези – normal / italic.

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

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

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

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

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

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

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

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

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

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax