Css уроци Cascading style sheets 1 Деклариране на стилове, чрез класове 3



Дата27.09.2016
Размер230.52 Kb.
CSS уроци


Cascading style sheets 1

Деклариране на стилове, чрез класове 3

Деклариране на стилове, чрез атрибута ID 4

Изпозване на външни Style Sheets 5

Форматиране на текст с CSS 6

Свойства на CSS1 9



Cascading style sheets


   Cascading style sheets е нов и удобен начин за форматиране на текста, шрифтовете, изображенията и всичко останало на вашата страница. Cascading style sheets ви позволяват да разположите различните елементи на страницата където си поискате, с точност до последния пиксел. Например, ако промените един стил, зададен в началото на HTML страницата, промените се отразяват върху целия документ.

Да кажем, че сте направили стил за заглавния таг (

). Във вашия стил настройвате цвета на текста, на всичките

да бъде червен. Написали сте около десет

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

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

Още по-удобно е да използвате външен style sheet за няколко HTML страници едновременно. Може например, да направите заглавията във всичките ви страници да са сини. По този начин не се налага да променяте цвета за всяка страница по отделно, ами просто ще укажете всяка да използва вашия стил за заглавията.

Използване на атрибута STYLE.

Един от начините да прибавите стил към страницата, е да го зададете вътре в някой HTML елемент. Това става като прибавите атрибута STYLE="" към HTML елемента. Обичайно това става по следния начин:

STYLE="свойство: стойност"

Ако не разбирате, за какво става дума вижте следния пример. Да кажем, че искате цветът на текста за елемента

да е червен:



Аз съм червен текст, благодарение на CSS.

Ето какво ще получите:

Аз съм червен текст, благодарение на CSS.

Естествено може да зададете и повече от едно свойство в STYLE атрибута. Например:


Удебелен шрифт Arial.


Сега имаме удебелен, червен текст с шрифт Arial:



Удебелен шрифт Arial.

Може да добавяте колкото искате свойства в STYLE атрибута, стига да отделяте всяко с точка и запетая.

Сигурно ще си кажете “Как да сложа свойства като незнам нито едно?!” Не се тревожете, по-нататък в уроците са разгледани всички свойства, а има и пълен справочник на свойствата и техните стойности.

Задаване на стил в главата () на HTML документа.

   И така, изяснихме STYLE атрибута, но както забелязахте той едва ли прави нещо по-лесно, от добре познатите HTML елементи. Сега ще обясним другия начин за задаване на стил в страницата, който ще направи животът ви по-лесен (и сънят ви по-дълготраен), защото няма да се налага да пишете едно и също нещо по десетки пъти, за да постигнете желания ефект.

Задаването на стил става чрез елемента. Ето един пример на стил за елемента :





Както виждате, непосредствено след , не се изпозват знаците за по-малко и по-голямо - < >. Така става SPAN,

става P, става TABLE и т.н. Освен това не изпозваме знака за равенство и кавички - ="", за да зададем свойствата. Вместо това ги заграждаме в скоби - { }. Свойствата в скобите са отделени с точка и запетая - ; , както при STYLE атрибута.

Сега, след като имаме горния пример в главата на HTML страницата, просто използваме , за да направим текста удебелен и с червен цвят:
Червен, bold-ван текст, следван от обикновен текст.







Отново bold и червен.
Червен, bold-ван текст, следван от обикновен текст.
Отново bold и червен.

Някои версии на Netscape може и да не разпознаят свойствата за тага, затова се снабдете с 4.7, или най-добре с Internet Explorer 5.

И така, сега може да използвате свойствата на стиловете за почти всеки HTML елемент. По интересно приложения обаче, стиловете намират когато се комбинират с атрибутите CLASS и ID.

Деклариране на стилове, чрез класове


   Както вече видяхте в предишния урок, стиловете могат да се прилагат за почти всеки HTML елемент. Да кажем обаче, че искате да направите половината текст на страницата червен, а другата половина - син. Ето един пример, какво можем да направим с наученото дотук:






Червен текст.








Син текст.


Червен текст.

Син текст.

И така, постигнахме желания ефект. Но ако искате, например, на страницата да има и зелен, и оранжев цвят? Ще трябва да зададете стил за четири HTML елемента, което едва ли е много удобно. По-простия начин е да използвате класове. Вижте долния пример:





Червен текст.

Син текст.

Какво направихме? Създадохме два класа - "red" и "blue" - и им зададохме стил. След това указахме, елементът

веднъж да ползва стила "red" и после да ползва стила "blue". Това е изключително удобно, защото може да използвате няколко различни класове с един и същи HTML елемент.
Класовете се задават в елемента, в началото на страницата и се "извикват" като се прибави атрибута CLASS към съответния HTML елемент. Например:

Червен текст.



Син текст.


Син текст.




Син текст.


Син текст.

Обърнете внимание на следния ред:

.red { color: red }

Класовете се задават с точка - . - последвана от името на класа. Например: .red, .blue, .blabla и тн.


Деклариране на стилове, чрез атрибута ID


И тук, стиловете се дефинират по същия начин само че, вместо точката пред името на стила, се изпозва знакът #. Например:





"Извикването" става, чрез атрибута ID:
Червен текст.


Син текст.

Червен текст.

Син текст.

Ако искате вашите новосъздадени класове да се използват от много страници, може да изпозвате т.нар. външен Style Sheet.

Изпозване на външни Style Sheets


   Всичко, което разгледахме в предишните уроци се отнасяше за страницата, която правим в момента. Класовете спестяват много писане и усилия в текущия HTML документ. Да предположим обаче, че искате определена група от стилове да се използва от много HTML страници едновременно. Това става чрез external (външни) style sheets.

За да направите external style sheet, отворете някой текстов редактор (например Notepad) и напишете примерно следното:


DIV { font-family: Arial }

P { color: blue }


След това запазете файла (save as...) като "style.css" (слагаме името на файла в кавички, за да се запази с разширение *.css; иначе ще се запази като style.css.txt). Може да изпозвате всякакви имена - style.css, bla.css, fish.css и тн. - но разширението трябва да е *.css.

Вашият external style sheet е готов. Сега, за да укажете на дадена страница да го изпозва просто трябва да сложите елемента в главата () на HTML документа. Най-общо това става по следния начин:



Атрибутът rel="stylesheet" казва на страницата какъв документ да търси (в нашия случай stylesheet). type="text/css" указва какъв е типът на съдържанието във файла, който ще се изпозва. name="" задава име (може да е всякакво) и href="" указава къде се намира файла (интернет адрес). За нашия пример, елемента ще изглежда по следния начин:



Адресът е само името на файла, ако сте го запазили в същата директория, където са и вашите страници. И така, за да ползвате вашият стил в други HTML документи, просто ги отворете и сложете горния ред в главата им.

Ако искате да промените текста на няколко страници, просто редактирайте файла style.css и запазете промените.

Форматиране на текст с CSS


   Тук ще обясним накратко как да форматирате текста на страницата ви, изпозвайки CSS (Cascading style sheets). Както споменахме в Урок I CSS се състои от много свойства и съответните им стойности. Сега ще обърнем внимание на свойствата отнасящи се до текста, а за списък на всичките свойства и стойности погледнете в Свойства.

Първото свойство, което ще разгледаме е color:

Свойство: COLOR
Стойности:
име на цвета;
цвят по схемата #RRGGBB;
цвят в RGB;

Свойството color определя цветът на текста за даден елемент. Например:


Червен цвят на текста



Светлосин цвят на текста



Черен цвят на текста


Червен цвят на текста

Светлосин цвят на текста

Черен цвят на текста

Има три начина за задаване. Първият е задаване с името на цвета. Напр. red, blue, gold, silver и тн. Другият начин е задаване на цвета по схемата #RRGGBB. Например #FFFFFF (бяло), #000000 (черно), #FFFF00 (червено) и тн. Третият начин е задаване според дяла на червеното, зеленото и синьото. Например rgb(255,255,255) - бяло; rgb(0,0,0) - черно; rgb(255,0,0) - червено.

Свойство: FONT-FAMILY
Стойности:
име на шрифта;
семейство на шрифта;

Свойството font-family задава шрифта, който ще се ползва при представянето на текста. Например:

Текст с шрифт Arial

Tекст с шрифт Courier

Текст със серифен шрифт

Текст с шрифт Arial

Tекст с шрифт Courier

Текст със серифен шрифт

За стойност може да зададете име на шрифта, например Arial, Helvetica, Verdana, или да се зададе само семейството на шрифта - serif, sans-serif, monospace, fantasy, cursive.

Свойство: FONT-STYLE


Стойности:
normal;
italic;
oblique;

Свойството font-style oпределя стила на шрифта. Например:


Нормален шрифт


Наклонен шрифт (italic)

Шрифт oblique

Нормален шрифт



Наклонен шрифт (italic)

Шрифт oblique

Свойство: FONT-WEIGHT


Стойности:
абсолютни величини;
числови стойности;

Определя дебелината на шрифта:


Удебелен шрифт



Шрифт с нормална дебелина


Тънък шрифт



Удебелен шрифт

Нормален шрифт

Тънък шрифт

Могат да се зададат както абсолютни величини (normal, bold, bolder), така и числови стойности (100, 200, 300 и тн. 400 отговаря на normal, а 700 на bold).

Свойство: FONT-SIZE
Стойности:
абсолютни величини;
стойност спрямо предходния размер;
типографски величини;

Свойството определя дебелината на шрифта. Например:

Много голям шрифт

Шрифт с големина 12 пункта

Шрифт с големина 12 пиксела

Шрифт, една степен по-голям от предходния

Много голям шрифт

Шрифт с големина 12 пункта

Шрифт с големина 12 пиксела

Шрифт, една степен по-голям от предходния

Свойстовто font-size има много стойности. Вижте частта Свойства за по-подробно описание. Най-общо стойностите се делят на три групи - абсолютни стойности, стойности спрямо предходния размер и типографски величини. Абсолютните стойности са фиксирани размери, които имат име. Например: xx-small, medium, large и т.н. Под стойности спрямо предходния размер се разбира една степен по-голям или по-малък шрифт от предходния. Например, ако имаме шрифт 14 пункта, със стойността larger ще зададем шрифт с големина 15 пункта. Последната група от стойности е най-изпозваната. Това са типографски величини за определяне на размера. Например: pt (пунктове), px (пиксели), em (коефициент спрямо актуалния размер), проценти.

Свойство: TEXT-DECORATION


Стойности:
none;
underline;
overline;
line-through;
blink;

Това свойство добавя някои ефекти към текста. Например:

Подчертан текст

Зачеркнат текст

Текст без декорация

Подчертан текст

Зачеркнат текст

Текст без декорация

Всичките стойности са: none, underline, overline, blink, line-through. Някои от тях обаче не работят в Netscape. Това свойство е полезно ако искате да се отървете от досадното подчертаване на линковете. Например:
<А href="#">Неподчертан линк
Неподчертан линк

В Internet Explorer дефинирането на стилове за линкове става по следния начин:



A:link определя свойствата само за линковете, отделно от елемента. A:visited се отнася за посетените линкове, A:hover определя свойствата, когато минете с мишката върху линка (не работи в Netscape).

Свойства на CSS1


Tук ще изброим всички свойства и възможните им стойности, включени в CSS1, както и някои нововъведения в CSS2.

Мерни единици, означения

Дължини

px

Пиксели.

ex

Височината на буквата х.

pt

Пунктoве. Величина за определяне размера на шрифта.

pc

Пики. 1pc отговаря на 12pt.

in

Цол ( на англ. инч ). 1in = 2,54cm.

cm

Сантиметри.

mm

Милиметри.

Проценти

Обозначават се със знак за процент след числото.

Цветове

Име

Име на цвета. Например red, gold, green.

Стойност

Например #FFFFFF ( виж HTML/Цветове ).

rgb

Според дяла на червеното, зеленото и синьото. Напр. rgb( 255,255,255 ).

URL

Комплексен Интернет-адрес. Например: { background: url("main.jpg") }.



Background-color

Стойности

цвят

Цветът се задава чрез един от трите описани по-горе начини (вж. Мерни единици, означения).

transparent

Не се дефинира никакъв цвят.

Обяснение

Дефинира фоновия цвят на HTML-документа.

Пример

{ background-color: #606060 }



Background-image

Стойности

none

Отказ от фоново изображение.

URL

Адрес на файла за изобразяване (вж. Мерни единици, означения).

Обяснение

Зарежда фоново изображение за актуалния документ, което се установява върху нормалния фонов цвят.

Пример

{ backround-image: url("main_bg.jpg") }



Background-repeat

Стойности

no-repeat

Няма повторение на изображението. Графиката се представя еднократно.

repeat-x

Повторението е изключително хоризонтално.

repeat-y

Повторението е изключително вертикално.

repeat

Хоризонтално и вертикално повторение.

Обяснение

Определя дали фоновото изображение трябва да се повтаря или да се престави еднократно.

Пример

{ background-repeat: no-repeat }



Background-attachment

Стойности

scroll

Фоновото изображение се превърта с останалото съдържание на документа.

fixed

Изображението има фиксирана позиция и не се влияе от превъртането на съдържанието.

Обяснение

Определя дали фоновото изображения трябва да се фиксира неподвижно на своята позиция или не.

Пример

{ background-attachment: fixed }



Background-position

Стойности

проценти

Чрез процентна стойност - 0% 0%: горен, ляв ъгъл. 100% 100%: долен, десен ъгъл.

center

Центриране в средата на Web страницата.

top

Подравняване спрямо горния край на прозореца.

bottom

Подравняване спрямо долния край на прозореца.

left

Подравняване спрямо левия край на прозореца.

right

Подравняване спрямо десния край на прозореца.

Обяснение

Позиционира фоновото изображение чрез една X/Y-двойка стойности. Например left/top или 10%/30%.

Пример

{ background-position: 50% 50% }

Също така може да използвате и обобщеното свойство background, за да дефинирате всичките подсвойства едновременно. Например:




Border-top-width

Стойности

thin

Тънка линия.

medium

Средно дебела линия.

thick

Дебела линия.

дължина

Задава се дължина.

Обяснение

Определя ширината на горната част на рамката.

Пример

{ border-top-width: medium }



Border-bottom-width

Стойности

thin

Тънка линия.

medium

Средно дебела линия.

thick

Дебела линия.

дължина

Задава се дължина.

Обяснение

Определя ширината на долната част на рамката.

Пример

{ border-bottom-width: thin }



Border-left-width

Стойности

thin

Тънка линия.

medium

Средно дебела линия.

thick

Дебела линия.

дължина

Задава се дължина.

Обяснение

Определя ширината на лявата част на рамката.

Пример

{ border-left-width: 3px }



Border-right-width

Стойности

thin

Тънка линия.

medium

Средно дебела линия.

thick

Дебела линия.

дължина

Задава се дължина.

Обяснение

Определя ширината на дясната част на рамката.

Пример

{ border-right-width: thick }



Border-width

Стойности

thin

Тънка линия.

medium

Средно дебела линия.

thick

Дебела линия.

дължина

Задава се дължина.

Обяснение

Определя ширината на рамката.

Пример

{ border-width: 3px }

Border-width обединява четирите описани по-горе свойства. Затова за Border-width могат да се зададат до четири стойности:

  • Ако зададете една стойност всички елементи на рамката получават еднаква ширина. Например: { border-width: 2.5mm }

  • При две стойности, първата се отнася за горната и долната, а втората за лявата и дясната част на рамката.

  • При три стойности първата се отнася за горната част на рамката, втората се отнася за лявата и дясната, а третата - за долната част. Например:




Рамки,рамки,рамки



База данных защищена авторским правом ©obuch.info 2016
отнасят до администрацията

    Начална страница