Към bezplatno.info портал | Галерия | Рецепти | Чат | Цитати | #bezplatno.info @ uniBG | Филми | Футбол | Качване на картинки | orion8800.com
 Въпроси/Отговори ::  Търсене ::  Потребители ::  Потребителски групи ::   Регистрирайте се ::  Вход 


Google
 





- А стига бе, стабилен Shell и то с SMS?
- Ахам, при нашия спонсор Forci.com!

CSS
 
Създайте нова тема   Напишете отговор
Безплатни домейни Форуми » IT Уроци
Предишната тема :: Следващата тема  
Автор Съобщение
qNuZoV
Забогатяващ
Забогатяващ


Регистриран на: 31 Авг 2008
Мнения: 96

38 Домейн Точки

МнениеПуснато на: Вто Сеп 02, 2008 7:07 pm    Заглавие: CSS Отговорете с цитат

CSS е съкращение от Cascading Style Sheets и представлява отделен език, съдържащ множество "инструменти", с които може да се влияе на външния вид на HTML страниците. От определена гледна точка CSS е нещо като "надстройка" на HTML.

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

Ето един конкретен пример, чрез който ще изясним за какво става дума.
Да предположим, че имате сайт, съставен от 50 HTML страници. Ако ползвате тага <font> за да задавате вида на шрифта, големината и цвета му, вие ще трябва във всяка една html страница да пишете кодове от сорта на

<font>някакъв текст</font>

Също така ще се наложи за всяка една страница да дефинирате например цвета на фона чрез атрибута bgcolor на тага body:

<body>

и т.н.

Ако някога решите да промените някои от тези параметри ще ви се наложи да отворите сорсовете на всичките 50 страници и да въведете промените във всеки един от тях. Цялото това усилие може да си го спестите като направите един CSS файл и разположите в него всички нужни параметри. След това трябва само да сложите по един линк към CSS файла във всяка от примерните 50 HTML страници, за да бъдат валидни зададените параметри за всяка една от тях.

Ще направим един най-прост CSS файл. Отворете някакъв текстов редактор, например Notepad и напишете в него следния код

body {
background-color: #000000;
font-family: arial, sans-serif, helvetica;
font-size: 12px;
color: #cccccc
}

След това съхранете файла като му зададете разширение css - например file.css

Сега остава във всяка HTML страница в секцията head да сложите следния код:
<link>
ПРИМЕР:

<DOCTYPE>

<html>
<head>
<title>Заглавие на страницата</title>
<meta>
<meta>
<meta>
<meta>
<link>
</head>

<body>

Някакъв текст<br>
Някакъв текст

</body>
</html>

Сега страницата ще се покаже с параметрите, които сте задали, а именно - черен фон на страницата и светлосив текст. Всички страници, в които сложите кода <link> ще имат същия външен вид. Ако желаете да промените цвета на фона или някои от параметрите на текста ще трябва да направите промените единствено в CSS файла и те автоматично ще се отразят във всички HTML документи, в които има връзка към файла file.css

За да работи този ефект, както е направен линка към file.css в примера, е нужно CSS файла да се намира в същата директория (папка), в която се намират и HTML страниците. В противен случай трябва да се укаже пътя до CSS файла, например ако HTML страницата е в някаква вътрешна папка, а file.css е в основната директория линка ще бъде

<link>

и т.н.

Както се вижда, структурата на CSS файла включва название на елемента, за който ще се задават параметрите - в случая това е body, и след това самите параметри, които се ограждат в големи скоби - { }. Когато в големите скоби се поставят няколко параметъра (както е в случая), те се отделят един от друг чрез точка и запетая. В примера скобите и зададените параметри са поставени на отделни редове, но това е само за прегледност, иначе кода на CSS файла може да изглежда и така:


body {
background-color:#000000;
font-family:arial, sans-serif, helvetica;
font-size:12px;
color:#cccccc;
}


Когато се задава числова стойност на някакъв атрибут, например font-size: 16px, можете да оставите стъпка разстояние между двоеточието и цифрите (: 16), но не отделяйте цифрите от техните параметри, т.е. правилно е да се напише "16px", а не "16 px". Във втория случай кода няма да бъде разчетен от всички браузери, само InternetExplorer6 ще покаже ефекта.

Когато стойността на някакъв атрибут е съставена от две и повече думи, например sans serif, тези думи трябва да са свързани с тире (sans-serif) или трябва да се поставят в кавички ("sans serif").

Съществуват няколко вида CSS записи. Записа който направихме в горния пример се нарича външен стил (External Style Sheet) и се използва, както беше описано, когато трябва да се контролират множество HTML документи, като нужните параметри се задават във външен файл (в примера - file.css).

Съществува и вътрешен за HTML документа стил (Internal Style Sheet), който се използва за да се зададе вида на един отделен HTML документ, като нужните параметри се задават със специални тагове и атрибути в секцията head на HTML страницата.

Inline Styles - вътрешни за HTML таговете стилове - се използват, като специални CSS атрибути се разполагат директно в HTML таговете и имат ефект за определено място от страницата. Конкретната употреба на тези видове ще бъде обяснена по-нататък в материалите за CSS.

Понякога се налага да се използват всички видове CSS и в такъв случай първо се изпълнява ефекта от Inline Style (вътрешните за HTML таговете стилове), след тях на 2-ро място по приоритет са
Internal Style Sheet (стиловете от секцията head на HTML документа) и последни по приоритет са External Style Sheet, т.е. стиловете, декларирани във външен CSS файл.

В първия пример беше споменато, че структурата на CSS файла включва названието на елемента, за който ще се задават параметрите - в примера това беше body, и след това самите параметри, които се ограждат в големи скоби - { }. Практически всеки таг от HTML - например table, p, h1, h2 и т.н. - може да бъде на мястото на body и да му се зададат някакви параметри. HTML таговете, за които се задават параметрите, се наричат в CSS селектори, а кода, поставен в големите скоби, се състои от атрибути и зададените им стойности. Т.е. типичната структура на CSS кода е

селектор {атрибут: стойност}

В скобите може да се затвори един атрибут или няколко атрибута
с техните стойности, като в такъв случай те се отделят с точка и запетая.

В примера беше използван кода

body {
background-color: #000000;
font-family: arial, sans-serif, helvetica;
font-size: 12px;
color: #cccccc
}

В този случай имаме един селектор - body. Кода, заключен между двете скоби, е съставен от атрибутите background-color, font-family, font-size и color, а на всеки атрибут е зададена някаква стойност - в случая например стойността на атрибута color e #cccccc и т.н. Тъй като имаме зададени няколко атрибута с техните стойности, те са отделени един от друг чрез точка и запетая.

Тъй като в този пример селектора е body, то всички зададени параметри ще важат за секцията body на HTML страницата. Ако на мястото на body сложим например селектора table, тогава декларираните атрибути и техните стойности ще важат за всяка таблица, която имаме в HTML документите:

table {
background-color: #000000;
font-family: arial, sans-serif, helvetica;
font-size: 12px;
color: #cccccc
}

Специално що се отнася до декларирането на цветовете има и още едно улеснение. В случая на атрибута background-color е зададена стойност #000000 (черен цвят) и на атрибута color е зададена стойност #cccccc (бледосив цвят). Те биха могли да се декларират и така:

background-color: #000;
color: #ccc

Kато по този начин ще се спести малко пространство, което може да се окаже и голямо, ако се пише дълъг документ с много код за цветове. CSS позволява двойките еднакви букви или цифри от 16-тичната бройна система да се заменят с едната от тях, т.е. кода #ff0000 може да се напише #f00, кода #334455 може да бъде #345 и т.н.

ВИДОВЕ СЕЛЕКТОРИ

В CSS съществуват няколко вида селектори:

1. Класови селектори
CSS позволява да задавате собствени класове за различните селектори. След като един клас е дефиниран, после всички селектори, на които е присвоен този клас, ще показват един и същ ефект. По-долу е показан един практичен пример.

Да направи клас заглавия h1 с червен цвят и клас параграфи p, чиито текст да се позиционира вдясно.

Синтаксиса на класовите селектори е

селектор.клас {атрибут: стойност}

В първия случай селектора ще бъде h1 - това е HTML тага за най-голямо заглавие. Названието на класа може да бъде напълно произволно, но понеже искаме да направим червено заглавие, за удобство може да наречем класа red. Тогава целия код ще изглежда така:

h1.red {color: #ff0000}

По аналогичен начин изглежда кода за параграф, който да се появява в дясната част на страницата:

p.right {text-align: right}

Така класовете са дефинирани и трябва да се поместят в секцията head на вашата HTML страница, като се затворят между таговете <style> и </style>:

<style>
h1.red {color: #ff0000}
p.right {text-align: right}
</style>

След това, когато в тялото на страницата (body) желаете да използвате някои от дефинираните класове, например червеното заглавие, е нужно да напишете следното:

<h1>Червено Заглавие</h1>

Колкото пъти използвате този код, толкова пъти ще имате в страницата си червено заглавие.

ПРИМЕР:

<DOCTYPE>

<html>
<head>
<title>класови селектори</title>
<meta>

<style>

h1.red {color: #ff0000}
p.right {text-align: right}

</style>
</head>
<body>

<h1>Червено Заглавие</h1>
<p>
Параграф, чиито текст се появява отдясно
</p>
<h1>Обикновено Заглавие</h1>
<h1>Отново Червено заглавие</h1>

</body>
</html>

Горния пример дава представа и за това как изглежда т.нар. Internal Style Sheet, за който беше споменато в 1-ва страница, т.е. CSS, при който чрез елементи, поставени в секцията head и затворени между таговете <style> и </style> се определя външния вид на целия HTML документ.

Класовете могат да бъдат декларирани и по друг начин, а именно - без да е необходимо да се обвързват с конкретен селектор. В този случай синтаксисът на CSS кода е

.клас {атрибут: стойност}

Т.е. отсъства самия селектор. Така например вместо да се пише

h1.red {color: #ff0000}
p.right {text-align: right}

може да се напише следния код:

.red {color: #ff0000}
.right {text-align: right}

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

2. ID селектори
Чрез ID селекторите могат да се декларират допълнителни параметри, които не са указани в декларираните класове. Разбира се същия ефект може да се постигне и чрез деклариране на нов клас, но за по-голямо удобство това може да стане чрез ID селектор.

Синтаксисът на ID селектора е

#id {атрибут: стойност} /или също селектор#id {атрибут: стойност}/

Например вече имаме деклариран клас за позициониране в дясната част на страницата. Можем да добавим примерно следния id в секцията head, между таговете <style> и </style>:

<head>
<title>css</title>
<meta>

<style>
.right {text-align: right}
#bluebold {color:#0000ff; font-weight:bold}
</style>

</head>

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

Ако сега напишем в body на HTML страницата следния код

<p>Син и удебелен текст, който ще се покаже вдясно</p>
ще имаме като ефект параграф в дясната част на страницата със син и удебелен текст.

В нашия пример параграфа може да се въведе и без декларирания клас:
<p>Параграф със син и удебелен текст</p>

В такъв случай ефекта ще бъде син и удебелен текст, но без позициониране на параграфа вдясно.



3. Контекстуални селектори
Контекстуалните селектори представляват комбинация от няколко селектора, като зададения ефект се проявява в зависимост от подредбата им.

Синтаксиса на контекстуалните селектори е 1-ви селектор 2-ри селектор... {атрибут: стойност}
Например в секцията head може да напишем кода

<head>
<title>css</title>
<meta>

<style>
p i b {color:#00ff00}
</style>
</head>

Ако след това в body напишем

<p> Наклонен и удебелен ЗЕЛЕН текстСтандартен текст</p>

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

<p>Текст</p>

няма да се получи като ефект зелен цвят, тъй като е нарушена декларираната последователност на селекторите i и b.



4. Групиране на селектори
Няколко селектора могат да бъдат подредени, като се отделят със запетаи, и им се зададе еднакъв ефект, т.е. атрибути с еднакви стойности. Синтаксисът при групирането е:

селектор1,селектор2,селектор3,... {атрибут: стойност}

ПРИМЕР:

<head>
<title>групиране на селектори</title>
<meta>

<style>
h1,h2,h3,p,del {color: #ff0000}
</style>

</head>

В случая са подредени селекторите (таговете от HTML) за първите 3 по големина заглавия, за параграф и за зачертаване на текст, като на всички тях е зададен червен цвят. Ако след това в body на HTML документа напишете например

<del>ЧЕРВЕН ЗАЧЕКНАТ ТЕКСТ</del>

този текст ще се покаже не само зачеркнат, какъвто е по принцип ефекта от тага del, но и в червен цвят.



КОМЕНТАРИ В CSS
Тага за коментар в HTML e <!--Коментари и обяснения-->
В CSS коментара трябва да е затворен между наклонена черта със "звезда" и "звезда" с наклонена черта

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

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

<font>
<p>
Текст на параграфа.
</p>
</font>

Чрез използването на вътрешни стилове този код ще изглежда така:

<p>
Текст на параграфа.
</p>


Ефекта от двата кода е напълно идентичен, и в двата случая кодовете се поместват в секцията body. В този случай не се налага да се пише код в секцията head на HTML страницата. В случая ефекта от вътрешния стил се простира само в рамките на параграфа, за който е зададен.

Със същия успех за постигане на подобен ефект можете да използвате например и тага div:

<div>
<p>
Текст на параграфа.
</p>
</div>

От написаното до тук се вижда, че в някои случаи, чрез използване на Inline Styles се пише повече код, отколкото ако се ползват обичайните HTML тагове. Освен това тези ефекти не могат да бъдат контролирани от външен CSS файл или от CSS код в секцията head на HTML документа. Затова вътрешните стилове, задавани в HTML тагове, се използват рядко и пестеливо, обикновено само ако се налага да се зададе на някакъв елемент индивидуален стил, различен от стила, дефиниран за всички страници във външния CSS файл или в head на документа.

Обикновено вътрешните за цял един HTML документ стилове се използват, когато на дадена HTML страница трябва да се зададе отделен от стила на общия набор HTML документи стил. Вътрешните за HTML страницата стилове се дефинират в секцията head на страницата, като се затварят между таговете <style> и </style>.

Имайте предвид, че по-старите браузери не разпознават тага style и няма да покажат страницата във вида, в който желаете да изглежда.
Стандартния синтаксис на вътрешните за HTML документа стилове е:


<head>
<style>
селектор {атрибут: стойност}
...
...
</style>
</head>

ПРИМЕР:

<DOCTYPE>

<html>
<head>
<title>
Вътрешни за HTML документа стилове (Internal Style Sheet)
</title>
<meta>

<style>
body {background-color: #cccccc}
h1 {color: #ff0000; font-size: 38px}
</style>

</head>
<body>
<h1>ЧЕРВЕНО ЗАГЛАВИЕ ВЪРХУ СИВ ФОН НА СТРАНИЦАТА</h1>
</body>

</html>

Тъй като някои по-стари браузъри може да не покажат ефекта от декларираните стилове, а да покажат направо кода, затворен между таговете <style> и </style>, затова е препоръчително да ограждате този код в HTML таговете за коментар <!-- и -->:

<style>
<body>
</style>
Пример за външни стилове беше даден още в 1-ва страница "Какво е CSS...". Това са стиловете, които се декларират във външен за HTML документа файл. Файла може да се напише на обикновен текстов редактор, например Notepad след което трябва да се съхрани с разширение .css, например file.css, styles.css или нещо подобно. В CSS файла не трябва да се пишат никакви HTML тагове с ъглови скоби, т.е. във формат <body> и пр.

След като CSS файла е готов, във всяка от HTML страниците, за които са предназначени декларираните стилове, се поставя в секцията head връзка към CSS файла посредством тага link с атрибути rel, type и href:

<link>

В CSS файла могат да бъдат декларирани практически всички HTML тагове, които се използват в HTML страниците, като им бъдат зададени атрибути със съответните стойности. По този начин може лесно да се контролират неограничено число HTML страници, като промяната във всички тях се извършва само чрез редакция на един файл - CSS файла. Очевидно това спестява много труд и време, затова е силно препоръчително, особено при изработка на големи сайтове с множество страници, винаги да се използват външни стилове.

ПРИМЕР

Отворете Notepad и сложете в него следното съдържание:

body {
margin-top: 5px;
margin-left: 0px;
margin-right: 0px;
background-color: #efefef;
font-family: times new roman, timoku;
font-size: 18px;
color: #000000
}

h1 {
font-family: impact;
font-size: 32px;
color: #bb0000;
text-align: center
}

a {
color: #0000aa;
font-size: 16px;
font-family: arial, helvetica, verdana, sans-serif;
font-weight: bold
}
a:link {
text-decoration: none
}
a:visited {
text-decoration: none;
color: #5500ff
}
a:hover {
text-decoration: underline;
color: #aa0000
}
a:active {
text-decoration: none;
color: #77aaCC
}

td {
color: #222222;
font-size: 12px;
font-family: arial, helvetica, verdana, sans-serif;
padding-left: 5px;
padding-right: 5px;
padding-top: 20px;
padding-bottom: 20px
}



Сега съхранете файла с разширение .css, например mycss.css
Отворете нов Notepad и сложете в него следния примерен код:


<DOCTYPE>

<html>
<head>
<title>CSS Example</title>
<meta>
<link>
</head>
<body>

Това е текст в секцията body, извън таблицата, със шрифт Times new roman.
<h1>Това е центрирано червено заглавие със шрифт Impact</h1>

<table>
<tr>
<td>
Това е текст в 1-ва клетка със шрифт Arial
</td>
</tr>
<tr>
<td>
Това е текст във 2-ра клетка, а това е <a>Връзка към uroci.com</a>, която
е с по-голям размер на шрифта и има следните ефекти: цвета и е тъмносин, без подчертаване,
при слагане на курсора върху нея цвета се променя на червен и се появява долна черта.
</td>
</tr>
</table>
Това отново е текст извън таблицата.

</body>
</html>


Като резултат ще имате страница, с описаните в самата нея (по-горе) ефекти.

Във файла mycss.css има декларирани 4 селектора, които отговарят на съответните HTML тагове - body, h1, a, td. Селекторите в този пример са 4, но те могат да бъдат и много повече, в зависимост от страницата която изграждате. Препоръчително е всички HTML тагове, които използвате при изграждането на HTML документа, да бъдат декларирани в CSS файл за по-лесно управление на сайта.

В случая чрез селектора body е зададено съдържанието на страницата да има отстъп от 5 пиксела от горната част и да се прилепва плътно вляво и вдясно (margin-top: 5px; margin-left: 0px; margin-right: 0px;), зададено е също цвета на фона на страницата да бъде светлосив (background-color: #efefef;), а текста който се пише в body да бъде със шрифт Times new roman или timoku, с големина 18 пиксела и с черен цвят (font-family: times new roman, timoku; font-size: 18px; color: #000000;).

Чрез селектора h1 е зададено заглавие, което да бъде с червен цвят, центрирано, със шрифт impact и големина 32 пиксела (font-family: impact; font-size: 32px; color: #bb0000; text-align: center).

Чрез селектора a са зададени параметри на текста от хипервръзките (линковете). Зададени са тъмносин цвят на връзките, текста е удебелен, с размери 16 пиксела и шрифт Arial (color: #0000aa; font-size: 16px; font-family: arial, helvetica, verdana, sans-serif; font-weight: bold).
Зададени са и ефекти на хипервръзките при поставяне на курсора върху тях и кликане върху връзките. В случая например чрез

a:link {
text-decoration: none
}

е зададено връзките да нямат подчертаване, а чрез

a:hover {
text-decoration: underline;
color: #aa0000
}

е зададено при поставяне на курсора върху връзката тя да сменя цвета си на червен и да се появява долна черта. Зададени са и различни цветове за вече посетените и активните връзки чрез параметрите на a:visited и a:active.

Чрез селектора td е зададен за текста в клетките на таблицата тъмносив цвят, големина 12 пиксела и шрифт Arial (color: #222222; font-size: 12px; font-family: arial, verdana, helvetica, sans-serif;), зададено е и разстояние от съдържанието на клетките до стените им съответно по 5 пиксела за долу и горе и по 20 пиксела за ляво и дясно (padding-left: 5px; padding-right: 5px; padding-top: 20px; padding-bottom: 20px).
Контрола на текста в CSS се извършва чрез следните атрибути и съответните им стойности:

1. font-family - Задава шрифт на текста. Възможните му стойности са названието на един или няколко шрифта, отделени със запетаи (например font-family: arial, sans-serif, helvetica, verdana).

2. font-size - Задава големина на текста. Възможните му стойности са цифрови - в пиксели (px) или пойнтове (pt) (например font-size: 14px).

3. font-weight - Задава удебеляване или "изтъняване" на текста. Може да приема следните стойности:


normal - показва нормален текст
bold - удебелява текста
bolder - удебелява текста повече от bold
lighter - изтънява текста
100 - изтънява текста (същия ефект като lighter)
200
300
400 - прави текста какъвто е подразбиране (същия ефект като normal)
500
600
700 - удебелява текста (същия ефект като bold)
800
900 - удебелява максимално текста (същия ефект като bolder)



4. text-align - Задава позиционирането на текста в страницата. Възможните му стойности са:

left - подравнява текста вляво (същата е стойността по подразбиране)
right - подравнява текста вдясно
center - центрира текста
justify - подравнява текста едновременно вляво и вдясно



5. color - Задава цвят на текста. Възможните му стойности са цветове, описани чрез 16-тичната бройна система, чрез английските им названия или чрез задаване на RGB стойност. Например бял цвят ще се зададе
- чрез название: color: white
- чрез 16-тична стойност: color: #ffffff
- чрез RGB стойност: color: rgb(255,255,255)

6. background-color - Задава цвят за фон на текста. Възможните му стойности са цветове, описани чрез 16-тичната бройна система, чрез английските им названия или чрез RGB стойност, подобно на атрибута color.

7. text-decoration - Задава допълнителен ефект (украса) на текста. Възможните му стойности са:

underline - подчертава текста с долна черта
overline - подчертава текста с горна черта
line-through - зачертава текста
blink - кара текста да премигва
none - показва нормален текст, като премахва всички ефекти от текста (например премахва подчертаването на връзките)

8. letter-spacing - Задава разстояние между буквите на текста. Възможните му стойности са normal или зададено с цифри разстояние между буквите. Цифровите стойности могат да бъдат указани в пиксели (например letter-spacing: 5px) или сантиметри (например letter-spacing: 0.3cm). Тези стойности могат да бъдат и с отрицателен знак - в този случай буквите от текста се сбиват, тъй като разстоянието между тях се намалява (например letter-spacing: -2px).

9. word-spacing - Задава разстояние между думите в текста. Възможните му стойности са normal или зададено с цифри разстояние между думите. Цифровите стойности могат да бъдат указани в пиксели или сантиметри и да приемат отрицателен знак, подобно на стойностите на атрибута letter-spacing.

10. white-space - Задава дали текста да бъде показан точно както е написан в текстовия редактор, т.е. дали да се покажат всички "спейсове" и "ентери" - разстоянията между буквите, думите и редовете, както са написани например в Notepad или браузъра да игнорира оставените бели пространства в текста и да го покаже компактен. Възможните му стойности са:

normal - показва текста като игнорира оставените бели пространства
pre - показва текста точно както е написан в текстовия редактор, какъвто е ефекта от HTML тага
 

nowrap - не позволява текста да се пренесе на по-долен ред докато не се постави тага за прекъсване <br>. Ако текста е достатъчно дълъг в долната част на браузъра ще се появи лента за скролиране.

11. text-indent - Използва се при започване на нов абзац в текста. Оставя разстояние между лявата страна на страницата и началото на текста от първия ред на абзаца. Възможните му стойности са цифрови - в пиксели (px), сантиметри (cm) или проценти (%).

12. text-transform - Задава на текста главни или малки букви. Възможните му стойности са:

uppercase - задава на целия текст главни букви
lowercase - задава на целия текст малки букви
capitalize - задава като главна началната буква на всяка дума от текста
none - показва текста във вид по подразбиране

13. direction - Задава посоката, в която тече текста. Възможните му стойности са:

ltr - текста тече от ляво на дясно
rtl - текста тече от дясно на ляво


ПРИМЕР
Направете CSS файл (например myfile.css) със следното съдържание:

h1
{
font-family: arial, helvetica, sans-serif;
font-size: 36px;
color: #ff0000;
text-align: center;
text-transform: capitalize;
text-decoration: overline;
letter-spacing: -3px;
word-spacing: 1cm
}

След това направете HTML страница, в която използвайте тага <h1> и напишете някакъв текст, за да видите декларираните ефекти, като не забравяте, че в head на HTML документа трябва да разположите връзката
<link>. Т.е. трябва да напишете нещо подобно на кода по-долу:

<html>
<head>
<title>CSS Example</title>
<meta>
<link>
</head>
<body>

<h1>това е примерно заглавие</h1>

</body>
</html>
Вижте профила на потребителя Изпратете лично съобщение
Sponsor
BRAINSPORTAL
Покажи мнения от преди:   
Безплатни домейни Форуми » IT Уроци Часовете са според зоната GMT + 2 Часа
Създайте нова тема   Напишете отговор
Страница 1 от 1

 
Идете на:  
Не Можете да пускате нови теми
Не Можете да отговаряте на темите
Не Можете да променяте съобщенията си
Не Можете да изтривате съобщенията си
Не Можете да гласувате в анкети
SMS Реклама

Warning: mysql_fetch_object(): supplied argument is not a valid MySQL result resource in /home/pipi/public_html/bezplatno/forum/includes/smsads.php on line 13
Към bezplatno.info портал | Галерия | Рецепти | Чат | Цитати | #bezplatno.info @ uniBG | Филми | Футбол | Качване на картинки | orion8800.com