Урок №4 Всичко за CSS свойството font - 3 October 2014

Home » » Урок №4 Всичко за CSS свойството font

0:14 AM Урок №4 Всичко за CSS свойството font
Съдържанието е това, което прави една уеб страница уникална. То може да бъде под формата на текст, изображения, видео и други, или комбинация от всичко това, но от решаващо значение е неговата достъпност. Ако посетителя, поради една или друга причина, не може да открие и да се възползва от това страхотно съдържание, то неговата уникалност остава неоценена.В днешно време има много уеб страници, които са изключително трудни за използване. Въпреки полезното им съдържание те просто не са създадени да бъдат в полза на посетителя. Тези страници обикновено имат прекалено малък размер на текста, цвят, който е в слаб контраст с фона или труден за четене шрифт. В следващите две части на този урок ще разгледаме CSS свойството font, което ни предоставя по-добър контрол върху текста на нашата страница. Свойството font е разделено на няколко части: font-family font-style font-variant font-weight (във втора част на урока) font-size (във втора част на урока) font-съкратено (във втора част на урока) font-family В урока “Работа с параграфи” използвахме свойството font-family, но без допълнително разяснение. Тук е мястото да хвърлим малко повече светлина върху него. Свойството font-family ни позволява да зададем списък с шрифтове, подредени по преоритет от най-висок към най-нисък, които да бъдат приложени върху текстовото съдържание на даден елемент и/или уеб страницата като цяло. Всяко име в списъка трябва да бъде разделено със запетая. Ако в името на шрифта има разстояние, то цялото име трябва да се огради в кавички – например “Times New Roman”. Важно е да се отбележи, че браузъра ще използва първият шрифт, който е на разположение, а не задължително първият в списъка. Затова е добра идея последната стойност в листа да бъде името на една от общите групи шрифтове (виж списъка по-долу). Това свойство може да приеме няколко стойности: font-family: { family name, ... \| inherit }; family name - Това може да бъде име на шрифт, който е част от дадено “шрифтово семейство” или ключова дума съответстваща на определена обща група шрифтове inherit – Унаследява стойността приложена върху родителския елемент Общите групи шрифтове (Generic family name) са: serif (например “Times”) sans-serif (например “Arial”) cursive (например “Zapf-Chanery”) fantasy (например “Critter”) monospace (например “Courier”) Вижте следващото изображение: В първият пример шрифта Verdana (1) е с най-висок преоритет, защото е на първо място в списъка. Браузъра ще потърси измежду инсталираните шрифтове такъв с име Verdana и в случай, че го открие ще го приложи върху текста на елемента или страницата. В случай че не го открие, ще използва втория шрифт в списъка – Arial (2) и ще направи същата проверка. При съвпадение ще използва него, а ако не го открие, ще използва един от sans-serif (3) шрифтовете, който е на разположение. Вторият шрифт в списъка се нарича fallback т.е. шрифт, който ще бъде използван, само когато първият по една или друга причина не е на разположение. Третият шрифт в списъка е fallback на втория и т.н. Във вторият пример процеса е абсолютно същия. Добра идея е да ограничим списъка до максимум 3-4 шрифта като първи поставим този, който най-добре пасва в страницата, а последния винаги да бъде някоя обща група (виж списъка по-горе). Упражнение Ще създадем нова уеб страница и ще приложим към нея външен CSS файл. Ако имате затруднения, разгледайте урока “Прилагане на CSS чрез външен файл”. Добре би било да добавим и малко текст, върху който да приложим всички тези свойства. За целта ще използвам част от разказа на Елин Пелин - “На браздата”. За да не удължавам излишно страницата, ще въведа само първите няколко изречения от началото на разказа. В работните файлове към урока обаче, текста ще бъде в пълният си вид. Стъпка 1 Това е html кода, с който ще работим в този урок: index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Усвояване на font</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>На браздата</h1> <h4>Автор: Елин Пелин</h4> <p>Като заваля дъжд, та цяла неделя! Тихо, кротко, ден и нощ....</p> <p>Ехото се обади живо из гората.</p> </body> </html> Стъпка 2 В CSS файла ще използвам за селектор елемента body, за да променя шрифта на цялата страницата. След това ще приложа друг шрифт само върху заглавията h1 и h4. Кода изглежда така: style.css body { font-family: Verdana, Arial, sans-serif; width:450px; } h1, h4 { font-family: "Century Gothic", Verdana, sans-serif; } Стъпка 3 Запазете промените и вижте резултата в браузър. Шрифта на текстовите параграфи е Verdana, а този на заглавията h1 и h4 е Century Gothic. В случай, че няма инсталиран Century Gothic като резервен вариант (fallback) ще бъде използван Verdana. В случай, че и той липсва браузъра ще избере някой sans-serif шрифт зададен по подразбиране. font-style Това свойство ни позволява да използваме шрифт с определен стил, който е част от определено “шрифтово семейство”. Този стил може да се приложи върху текстовото съръжание на даден елемент и/или уеб страницата като цяло. Свойството font-style може да приеме няколко стойности: font-style: { italic \| normal \| oblique \| inherit }; italic - Тази стойност избира шрифт, който е определен като italic в датабазата с шрифтове на посетителя (user-agent). В случай, че такъв шрифт не съществува се избира друг, който е определен като oblique normal – Стойност по подразбиране. Тази стойност избира шрифт, който е определен като normal в датабазата с шрифтове на посетителя (user-agent) oblique – Тази стойности избира шрифт, който е определен като oblique в датабазата с шрифтове на посетителя (user-agent) inherit – Унаследява стойността приложена върху родителския елемент Упражнение Тук ще продължа с кода, който създадохме в предишното упражнение. Отново ще използвам селектора h1, h4, върху които ще приложа свойството font-style. Кода изглежда така: style.css ... h1, h4 { font-family: "Century Gothic", Verdana, sans-serif; font-style:italic; } Запазете промените и вижте резултата в браузър. Браузъра ще потърси в датабазата с шрифтове този, който е определен като italic и ще го приложи върху заглавията h1 и h4. font-variant Някои “шрифтови семейства” съдържат различни варианти на един и същ шрифт. Всеки от тях има точно определени качества. Пример за такъв шрифт е small-caps. При този шрифт малките букви изглеждат почти колкото главните, но са с по-малък размер и различни пропорции. Целта на свойството font-variant е да избере точно този шрифт и да го приложи върху текстовото съдържание на елемента. Може да приеме 3 стойности: font-variant: { normal \| small-caps \| inherit }; normal – Стойността по подразбиране. Тази стойност уточнява, че шрифта, който ще използваме не е small-caps шрифт. small-caps – Както казах по-горе, тази стойност търси да избере small-caps шрифта от желаното “шрифтово семейство”. inherit – Унаследява стойността приложена върху родителския елемент Упражнение В това упражнение ще продължа с кода от предишната точка. Ще използвам h1 заглавието като селектор и ще приложа върху него новия стил. Отвори CSS файла и добави следния код: style.css ... h1 { font-variant:small-caps; } Тази декларация уголемява малките букви в h4 заглавието и ги направи да изглеждат почти колкото главните. Запази промените и виж резултата в браузър. Надявам се, че всичко до тук е ясно и разбираемо. Ако имате затруднения или въпроси, задайте ги в коментарите след урока. Във втора част на този урок ще разгледаме останалите три font свойства. Не го пропускай!
1 2 3 4 5 Категория: CSS \| Преглеждания: 661 \| Довавено от: knif3r \| Оценка: 5.0 \| Гласували :3 \| Tags: CSS, урок, шрифт, font, Начинаещ, Urok