|
 Пуснато на: Thu Sep 02, 2010 10:43 am Заглавие: Урок по CSS за начинаещи [1 част] |
 |
|
Автор : Георги Андреев 'g3band'
Част от информацията е взета от : [url="http://bg.wikipedia.org/wiki/CSS"]http://bg.wikipedia.org/wiki/CSS[/url]
Кратка история на CSS
Източник : [url="http://www.dichev.com/style"]http://www.dichev.com/style[/url]
Style sheets описват, как документите се изобразяват на екрани, при печат или как може би се произнасят (изговарят). W3C активно промотира използването на style sheets в мрежата от основаването на Консорциума през 1994. Style Activity е създала W3C Препоръки (CSS1, CSS2, XPath, XSLT). Особено поддръжката на CSS е широко разпространена сред браузърите.
Прикачвайки style sheets към структуриран документ в Уеб (напр. HTML), авторите и читателите могат да въздействат на изобразяването на документите без да жертват независимостта от устройството за показване или да добавят нови HTML тагове.
Най-лесният начин да започнете експерименти със style sheets е да намерите браузър, поддържащ CSS. Дискусии относно style sheets се водят в www-style@w3.org мейлинг листа и на comp.infosystems.www.authoring.stylesheets.
Дейността по Стиловете на W3C разработва също XSL, който се състои от комбинацията на XSLT и “Форматиращи Обекти” (XSL-FO).
Селектори
Селекторите се използват за да покажат към кои елементи на HTML документа трябва да бъде прилаган съответният стил. Съществуват много видове селектори. Някои селектори позволяват постигане на динамичност на страницата до определена степен. Например само с помощта на CSS могат да бъдат направени изкачащи менюта, хипервръзки, които при посочване променят цвета си и др.
Свойства и стойности
Свойство представлява конкретна характеристика на елемент от HTML документа, а стойност е стойността, която се дава на това свойство. Например на свойство за размер може да се даде стойност число в дадена мерна единица, а за свойство цвят - стойност, която представлява стандартното
Най-важните елементи в CSS
Това е авторско.. както и да е :
background - елемента за фоново изображение. В него може да се зададе фон, като изображение или цвят. Пример :
background : url(image.jpg); - използване на файл (изображение) за фон
background : #000000; - използване на цвят за фон
Тук е мястото да ви кажа, че при използването на цвят за фон, или каквото и да било в CSS файл, трябва да използвате, така наречените Web Colors. Можете да прочетете повече за тях в [url="http://htmllessons.hit.bg/colors.html"]http://htmllessons.hit.bg/colors.html[/url]
Ако не желаете фоновото изображение да се повтаря, добавете no-repeat; към "тага". Пример :
background : url(image.jpg) no-repeat;
За разположение на фоновото изображение, използвайте :
background-position:center; - за централно разположение на фоновото изображение.
background-position:left; - за разположение от лявата страна
background-position:right; - за разположение в дясната страна
padding - елемент за "разположение" на таблица, div, и т.н.
padding-top:10px; - това ще зададе на тага, да постави елемента 10 пиксела надолу
padding-left:10px; - това ще зададе на тага, да постави елемента 10 пиксела наляво
padding-right:10px; - това ще зададе на тага, да постави елемента 10 пиксела надясно
font - задаване на шрифт
font-size:10px; - така шрифта ще бъде голям 10 пиксела
font-family: arial; - така шрифта ще бъде Arial.
font-weight: bold; - така шрифта ще бъде "удебелен"
color - задаване на цвят.
color:#000000; - цвета на шрифта, в който е бил елемента, ще бъде черен. Използват се "Web Colors" - [url="http://htmllessons.hit.bg/colors.html"]http://htmllessons.hit.bg/colors.html[/url]
Edit : написах още една малка част от урока 
a - линкове
a:link - как ще изглежда обикновенният линк
a:visited - как ще изглежда линк, върху който вече сте кликнали
a:hover - линк, върху който е поставена мишката.
Върху този елемент, могат да се зададат стойности за цвят (погледни малко по-нагоре), както и "декорация" на текста. Например :
text-decoration:none - това няма да зададе "декорация"
text-decoration:underline - това ще подчертае линка
Селекторите в CSS #2
Източник : uroci.net
| Цитат: | CSS позволява да задавате собствени класове за различните селектори. След като един клас е дефиниран, после всички селектори, на които е присвоен този клас, ще показват един и същ ефект. По-долу е показан един практичен пример.
Да направи клас заглавия h1 с червен цвят и клас параграфи p, чиито текст да се позиционира вдясно.
Синтаксиса на класовите селектори е
селектор.клас {атрибут: стойност}
В първия случай селектора ще бъде h1 - това е HTML тага за най-голямо заглавие. Названието на класа може да бъде напълно произволно, но понеже искаме да направим червено заглавие, за удобство може да наречем класа red. Тогава целия код ще изглежда така:
h1.red {color: #ff0000}
По аналогичен начин изглежда кода за параграф, който да се появява в дясната част на страницата:
p.right {text-align: right}
Така класовете са дефинирани и трябва да се поместят в секцията head на вашата HTML страница, като се затворят между таговете <style> и </style>:
<style type="text/css">
h1.red {color: #ff0000}
p.right {text-align: right}
</style>
След това, когато в тялото на страницата (body) желаете да използвате някои от дефинираните класове, например червеното заглавие, е нужно да напишете следното:
<h1 class="red">Червено Заглавие</h1>
Колкото пъти използвате този код, толкова пъти ще имате в страницата си червено заглавие.
ПРИМЕР:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>класови селектори</title>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251" />
<style type="text/css">
h1.red {color: #ff0000}
p.right {text-align: right}
</style>
</head>
<body>
<h1 class="red">Червено Заглавие</h1>
<p class="right">
Параграф, чиито текст се появява отдясно
</p>
<h1>Обикновено Заглавие</h1>
<h1 class="red">Отново Червено заглавие</h1>
</body>
</html>
Горния пример дава представа и за това как изглежда т.нар. Internal Style Sheet, за който беше споменато в 1-ва страница, т.е. CSS, при който чрез елементи, поставени в секцията head и затворени между таговете <style type="text/css"> и </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 type="text/css"> и </style>:
<head>
<title>css</title>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251" />
<style type="text/css">
.right {text-align: right}
#bluebold {color:#0000ff; font-weight:bold}
</style>
</head>
Ефекта от него ше бъде удебелен текст със син цвят. В случая названието bluebold е произволно и е избрано само за да подсказва какъв е ефекта, а може да бъде и всякакво друго, например FM и т.н.
Ако сега напишем в body на HTML страницата следния код
<p class="right" id="bluebold">Син и удебелен текст, който ще се покаже вдясно</p>
ще имаме като ефект параграф в дясната част на страницата със син и удебелен текст.
В нашия пример параграфа може да се въведе и без декларирания клас:
<p id="bluebold">Параграф със син и удебелен текст</p>
В такъв случай ефекта ще бъде син и удебелен текст, но без позициониране на параграфа вдясно.
3. Контекстуални селектори
Контекстуалните селектори представляват комбинация от няколко селектора, като зададения ефект се проявява в зависимост от подредбата им.
Синтаксиса на контекстуалните селектори е
1-ви селектор 2-ри селектор... {атрибут: стойност}
Например в секцията head може да напишем кода
<head>
<title>css</title>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251" />
<style type="text/css">
p i b {color:#00ff00}
</style>
</head>
Ако след това в body напишем
<p> <i><b>Наклонен и удебелен ЗЕЛЕН текст</b></i>Стандартен текст</p>
ефекта ще бъде удебелен и наклонен зелен текст за текста, заключен между <i><b> и </b></i> и стандартен текст за останалата част от текста в параграфа. Трябва да се спазва последователността на декларираните селектори, в противен случай ефекта няма да се прояви, т.е. ако напишем
<p><b><i>Текст</b></p></i>
няма да се получи като ефект зелен цвят, тъй като е нарушена декларираната последователност на селекторите i и b.
4. Групиране на селектори
Няколко селектора могат да бъдат подредени, като се отделят със запетаи, и им се зададе еднакъв ефект, т.е. атрибути с еднакви стойности. Синтаксисът при групирането е:
селектор1,селектор2,селектор3,... {атрибут: стойност}
ПРИМЕР:
<head>
<title>групиране на селектори</title>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251" />
<style type="text/css">
h1,h2,h3,p,del {color: #ff0000}
</style>
</head>
В случая са подредени селекторите (таговете от HTML) за първите 3 по големина заглавия, за параграф и за зачертаване на текст, като на всички тях е зададен червен цвят. Ако след това в body на HTML документа напишете например
<del>ЧЕРВЕН ЗАЧЕКНАТ ТЕКСТ</del>
този текст ще се покаже не само зачеркнат, какъвто е по принцип ефекта от тага del, но и в червен цвят.
КОМЕНТАРИ В CSS
Тага за коментар в HTML e <!--Коментари и обяснения-->
В CSS коментара трябва да е затворен между наклонена черта със "звезда" и "звезда" с наклонена черта:
/*Това е CSS коментар*/ |
_________________
 |
|
