1. Вградени стилове Стил по подразбиране Стил в нова дефиниция Стил с променен вид DHTML - каскадни набори от стилове Разделяне на структурата на документа (заглавие, тяло, връзки,,) от съдържанието (стила). Елементарен пример с едноредови дефинициии:

2. Style EM { background-color: #8000FF; color: white } H1 { font-family: Arial, sans-serif } P { font-size: 18pt }.blue { color: blue } Заглавие Ето текст в един от дефинираните от стила елементи. Ново заглавие - нов стил Текст използващ друг атрибут на дефиницията. Ето пример с още атрибути. завършващ текст. Декларация на стила в заглавната секция

4. Импорт на стил Пазарна листа за вторник : мляко хляб бял хляб типов хляб пшеничен хляб ориз картофи пица с гъби изпрати заявката към магазина за хранителни стоки Унифициране на стила в целия site. Дефиницията на стила е в отделен файл и се импортира

5. Ето го и импортирания стил в отделен файл (styles.css) A { text-decoration: none } A:hover { text-decoration: underline; color: red; background-color: #CCFFCC } LI EM { color: red; font-weight: bold} UL { margin-left: 2cm } UL UL { text-decoration: underline; margin-left:.5cm }

6. динамика на стиловете in-line style This text is in a SPAN. глобални набори от стилове H1 {font-size: 16pt; font-weight: bold; color: red} H2 {font-style: italic; font-size: 24pt; color: green} SPAN {font-weight: bold; font-style: italic} This text is in a SPAN. This text is in an H1. This text is in an H2. класове B.large {font-size: 24pt}B.small {font-size: 8pt} This is a standard B. This uses the small class. This uses the large class. стилове и хипервръзки А:link {color : yellow} A: Visited { color : red} A : Hover { color : green } A: Active { color : blue }

7. Eменти DIV и SPAN DIV { text-align: justify; text-indent: 2em } SPAN { text-decoration: underline; text-transform: uppercase; vertical-align: super; letter-spacing:.5em; line-height: 200%; color: red } Абсолютно позициониране на елементи в HTML документ с помощта на свойството property на CSS: <IMG SRC = "i.gif" STYLE = "position: absolute; top: 0px; left: 0px; z-index: 1"> <H1 STYLE = "position: absolute; top: 50px; left: 50px; z-index: 3">Positioned Text <IMG SRC = "circle.gif" STYLE = "position: absolute; top: 25px; left: 100px; z-index: 2">

8. относително позициониране на елементите: P { font-size: 2em; font-family: Verdana, Arial, sans-serif} SPAN { color: red; font-size:.6em; height: 1em }.super { position: relative; top: -1ex }.sub { position: relative; bottom: -1ex }.shiftl { position: relative; left: -1ex }.shiftr { position: relative; right: -1ex } Text text text text superscript text text text text subscript text Text text left-shifted text text text right-shifted Text text text text text

9. Управление на фона чрез CSS: Атрибути background-color; background-image; background-repeat; background-position; background-attachment. Background Images BODY { background-image: url(watermark.gif); background-position: bottom right; background-repeat: no-repeat; background-attachment: fixed } P { font-size: 2em; color: #AA5588; text-indent: 1em; font-family: Arial, sans-serif }.dark { font-weight: bold } This is some sample text to fill in the page. This is some sample text to fill in the page.This is some sample text to fill in the page.This is some sample text to fill in the page.This is some sample text to fill in the page.

11. Управление вида на курсора: auto hand move text wait help default crosshair w-resize nw-resize n-resize ne-resize e-resize se-resize s-resize sw-resize CSS и обектния модел за динамичен HTML: Hello еквивалнтен на: MySpan.style.color= “blue”

12. Списъци: Each of the following LI tags has the CSS attribute list-style-type set to the specified value. disc circle square none decimal lower-roman upper-roman lower-alpha upper-alpha

13. Определяне размери на текстови полета из страницата DIV { background-color: #FFCCFF; margin-bottom:.5em } Here is some text that goes in a box which is set to stretch across twenty precent of the width of the screen. Here is some CENTERED text that goes in a box which is set to stretch across eighty precent of the width of the screen. This box is only twenty percent of the width and thirty percent of the height. What do we do if it overflows? Set the overflow property to scroll!

15. разполагане текст на произволни места из екрана: Flowing Text Around Floating Elements DIV {background-color:#FFCCFF; margin-bottom:.5em; font-size:1.5em;width: 50% } Centered text Right-aligned text This is some floated text, floated text, floated text, floated text. Here is some flowing text, flowing text, flowing text. Here is some flowing text, flowing text, flowing text. Here is some flowing text, flowing text, flowing text. This is some floated text, floated text, floated text, floated text. Here is some flowing text, flowing text, flowing text. Here is some unflowing text. понятия: margin, border, padding.