Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5&CSS3 - Класове, псевдокласове, псевдоелементи

262 views

Published on

HTML5&CSS3

Published in: Internet
  • Login to see the comments

  • Be the first to like this

HTML5&CSS3 - Класове, псевдокласове, псевдоелементи

  1. 1. HTML5&CSS3 Класове, псевдокласове и псевдоелементи доц. М. Иванова
  2. 2. Класове • Връзката между елемент от уеб документ и каскадни стилови дефиниции, намиращи се в отделен css файл се извършва явно или неявно. • Връзката е неявна, когато стил автоматично се приложи към всички елементи от даден вид в целия уеб сайт. Например чрез каскадната стилова дефиниция, намираща се в css файла: h1 {font-style:italic;} - всички най-големи заглавия от уеб сайта ще бъдат визуализирани с наклонен шрифт. • За да се приложи различно форматиране към елементи от един и същ вид (в примера най-голямо заглавие) се осъществява явно свързване чрез използване на класове.
  3. 3. Класове - прилагане на различно форматиране към еднородни елементи - <h1> Уеб документ <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> <link rel="stylesheet" href="primer1.css" type="text/css"> </head> <body> <h1 class="parvi"> Най-голямо заглавие 1 </h1> <h1 class="vtori"> Най-голямо заглавие 2 </h1> </body> </html> css файл primer1.css h1.parvi{font-family:Arial;} h1.vtori{font-family:"Times New Roman";}
  4. 4. Класове – прилагане на едно и също форматиране към разнородни елементи от уеб страница - <h1> и <p> Уеб документ <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> <link rel="stylesheet" href="primer2.css" type="text/css"> </head> <body> <h1 class="parvi"> Най-голямо заглавие </h1> <p class="parvi"> Параграф </p> </body> </html> css файл primer2.css .parvi{font-family:Arial;}
  5. 5. Явно свързване чрез именуван стил - форматира един уникален елемент - <p> Уеб документ <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> <link rel="stylesheet" href="primer3.css" type="text/css"> </head> <body> <p id="primer"> Уникален параграф </p> </body> </html> css файл primer3.css #primer {font-family: Arial;}
  6. 6. Уеб страница <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> <link rel="stylesheet" href="page31.css" type="text/css"> </head> <body> <h1 class="parvi"> Най-голямо заглавие от клас parvi </h1> <img src="pic1.jpg" class="vtori"> <p class="treti"> Параграф 1 Параграф 1 Параграф 1 Параграф 1 Параграф 1 Параграф 1 Параграф 1 Параграф 1 Параграф 1 Параграф 1 Параграф 1 </p> <p class="parvi"> Параграф 2 Параграф 2 Параграф 2 Параграф 2 Параграф 2 Параграф 2 </p> </body> </html> css файл page31.css body {background-color:#FFF8DC;} h1.parvi, p.parvi {color: #008B8B;} img.vtori {border-radius: 6px; width:150px; height:150px;} p.treti{font-size: 13pt; font-family: Verdana;}
  7. 7. Уеб страница <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> <link rel="stylesheet" href="page32.css" type="text/css"> </head> <body> <h1 class="parvi"> Най-голямо заглавие от клас parvi </h1> <p class="treti"> <img src="pic1.jpg" class="vtori"> Параграф 1 Параграф 1 Параграф 1 Параграф 1 Параграф 1 Параграф 1 Параграф 1 Параграф 1 Параграф 1 Параграф 1 Параграф 1 </p> <p class="treti"> <img src="pic1.jpg" class="chetvarti"> Параграф 2 Параграф 2 Параграф 2 Параграф 2 Параграф 2 Параграф 2 </p> </body></html> css файл page32.css body {background-color:#FFF8DC;} h1.parvi, p.parvi {color: #008B8B;} img.vtori {float:left; width:150px; height:150px; margin:0px 20px 0px 0px; } p.treti{font-size: 13pt; font-family: Verdana;} img.chetvarti {float:right; width:150px; height:150px;}
  8. 8. CSS Псевдокласове селектор:псевдоклас {свойство:стойност;} a:visited{text- decoration:underline;}
  9. 9. Псевдокласове за хипервръзки псевдоклас описание пример link Непосетена хипервръзка a:link {color:pink;} visited Посетена хипервръзка a:visited {color:green;} hover В момента мишката преминава върху хипервръзката a:hover {color:brown;} active В момента потребителят щраква върху хипервръзката a:active {color:violet;} focus Потребителят трябва да натисне клавиша Tab, за да го отведе хипервръзката към съответния адрес a:focus {color:blue;}
  10. 10. Правила, свързани с подреждането на псевдокласовете в стиловата дефиниция • Например псевдокласът hover трябва да бъде използван след link и visited в CSS дефиницията. • Псевдокласът active трябва да бъде след псевдокласа hover.
  11. 11. Няколко псевдокласа в една дефиниция • a:hover:active {text-decoration:none; color:pink;}
  12. 12. Уеб страница <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> <link rel="stylesheet" href="page33.css" type="text/css"> </head> <body> <a href="page32.html"> Хипервръзка 1 </a> <br /><br /> <a href="page31.html"> Хипервръзка 2 </a> <br /><br /> <a href="page30.html"> Хипервръзка 3 </a> <br /><br /> <a href="page29.html"> Хипервръзка 4 </a> <br /><br /> </body> </html> css файл page33.css a:link {color:#A0522D; text-decoration:none;background- color:#E9967A;} a:visited{color:#BDB76B;} a:hover{color:#FFEBCD;} a:active{color:#008B8B;}
  13. 13. Псевдокласове и CSS класове селектор.клас:псевдоклас {свойство:стойност;} a.new:visited{color:red;} Псевдокласовете също така могат да бъдат използвани в комбинация с CSS класове: Нека в HTML страницата е дефинирана хипервръзка от клас new, водеща до page1.html: <a class="new" href="page1.html">Връзка към страница 1</a> , тогава CSS дефиницията: a.new:visited {color:red;} ще означава, че ако връзката от клас new е била посетена от потребителя, то тя ще се оцвети в червено.
  14. 14. Уеб страница <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> <link rel="stylesheet" href="page33.css" type="text/css"> </head> <body> <a href="page32.html" class="peti">Хипервръзка 1</a> <br /><br /> <a href="page31.html" class="shesti">Хипервръзка 2</a> <br /><br /> <a href="page30.html" class="peti">Хипервръзка 3</a> <br /><br /> <a href="page29.html" class="shesti">Хипервръзка 4</a> <br /><br /> </body> </html> css файл page33.css a.peti:link {color:#A0522D;text-decoration:none;background- color:#E9967A;} a.peti:visited{color:#BDB76B;} a.peti:hover{color:#FFEBCD;} a.peti:active{color:#008B8B;} a.shesti:link {color:#E9967A;} a.shesti:visited{color:#BDB76B;} a.shesti:hover{color:#FFEBCD;} a.shesti:active{color:#008B8B;}
  15. 15. Структурни псевдокласове • В CSS се използват и т.нар. структурни псевдокласове, чрез които е възможно прилагане на стил върху определен елемент (дъщерен) въз основа на местоположението му спрямо родителски елемент. Към структурните псевдокласове се числят: • first-child – стилът се прилага към първия дъщерен елемент спрямо определен родителски елемент; • last-child – стилът се прилага към последния дъщерен елемент спрямо определен родителски елемент.
  16. 16. Структурни псевдокласове Код в HTML страницата: <!DOCTYPE html> <html> <head> <title> Псевдокласове </title> <link rel="stylesheet" href="psc1.css" </head> <body> <p> Първи дъщерен елемент. </p> <p> Втори дъщерен елемент. </p> </body> </html> Код в CSS файл с име psc1.css: p:first-child{color:blue; font- weight:bold;font-size:14pt;}
  17. 17. CSS псевдоелементи CSS псевдоелементите се използват за придаване специални ефекти на някои селектори. Те се характеризират със следния синтаксис: селектор:псевдоелемент {свойство:стойност;} Псевдоелементите могат да се комбинират и с класове: селектор:клас:псевдоелемент {свойство:стойност;} Към псевдоелементите спадат: • first-line – прилага се специален стил към първия ред на текст; • first-letter – прилага се специален стил към първата буква от първия ред на текст; • before – използва се за вмъкване на съдържание преди друг елемент; • after – използва се за вмъкване на съдържание след друг елемент.
  18. 18. Код в HTML страницата: <!DOCTYPE html> <html> <head> <title> Псевдоелементи </title> <link rel="stylesheet" href="psc2.css" type="text/css"> </head> <body> <p> Първи параграф. Първи параграф. Първи параграф. Първи параграф. Първи параграф. Първи параграф. Първи параграф.Първи параграф. </p> <p> Втори параграф. Втори параграф. Втори параграф. Втори параграф. Втори параграф. Втори параграф. Втори параграф. </p> <p> Трети параграф </p> </body> </html> Код в CSS файл с име psc2.css: p:first-line { color:red; font-variant:small-caps;} Използване на псевдоелемента first-line
  19. 19. • Следните свойства могат да бъдат използвани за формиране стила на псевдоелемента first-line: • свойство font; • свойство color; • свойство background; • word-spacing; • letter-spacing; • text-decoration; • vertical-align; • text-transform; • line-height; • clear.
  20. 20. Код в HTML страницата: <!DOCTYPE html> <html> <head> <title> Псевдоелементи </title> <link rel="stylesheet" href="psc3.css" type="text/css"> </head> <body> <p> Първи параграф. Първи параграф. Първи параграф. Първи параграф. Първи параграф. Първи параграф. Първи параграф.Първи параграф. </p> <p> Втори параграф. Втори параграф. Втори параграф. Втори параграф. Втори параграф. Втори параграф. Втори параграф. </p> <p> Трети параграф </p> </body> </html> Код в CSS файл с име psc3.css: p:first-letter { color:red; font-size:xx-large;} Използване на псевдоелемента first-letter
  21. 21. Следните свойства могат да бъдат използвани за формиране на стила на псевдоелемента first-letter: • свойство font; • свойство color; • свойство background; • свойство margin; • padding; • border; • text-decoration; • vertical-align (само ако свойството float има стойност none); • text-transform; • line-height; • float; • clear.
  22. 22. Код в HTML страницата: <!DOCTYPE html> <html> <head> <title> Псевдоелементи </title> <link rel="stylesheet" href="psc4.css" type="text/css"> </head> <body> <p class=”information”> Първи параграф. Първи параграф. Първи параграф. Първи параграф. </p> <p> Втори параграф. Втори параграф. Втори параграф. Втори параграф. </p> </body> </html> Код в CSS файл с име psc4.css: p.information:first-letter { color:brown; font-size:xx-large;} Използване на псевдоелемента first- letter с класа information
  23. 23. Уеб страница page35.html <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> <link rel="stylesheet" href="page35.css" type="text/css"> </head> <body> <p> <span class="deveti">П</span>араграф 1 Параграф 1 Параграф 1 Параграф 1 Параграф 1 Параграф 1 Параграф 1 Параграф 1 Параграф 1 Параграф 1 Параграф 1 </p> </body> </html> css файл page35.css p:first-line{color:#E9967A;} span.deveti{color:#008B8B;}
  24. 24. Използване на логически елемент <div></div> Уеб страница <!DOCTYPE html> <html> <head> <title> Интернет технологии </title> <link rel="stylesheet" href="page36.css" type="text/css"> </head> <body> <div class="parvi"> <h1> Най-голямо заглавие </h1> <p> Параграф 1 Параграф 1 Параграф 1 Параграф 1 Параграф 1 Параграф 1 Параграф 1 Параграф 1 Параграф 1 Параграф 1 Параграф 1 </p> </div> </body> </html> css файл page36.css .parvi{font-family:Arial; color:#DEB887;}
  25. 25. Код в HTML страницата: <!DOCTYPE html> <html> <head> <title> Псевдоелементи </title> <link rel="stylesheet" href="psc5.css" type="text/css"> </head> <body> <h1> Заглавие </h1> </body> </html> Код в CSS файл с име psc5.css: h1:before { content:url(pica.jpg); } Използване на псевдоелемента before - изображението pica.jpg ще застане пред заглавието <h1></h1>
  26. 26. Код в HTML страницата: <!DOCTYPE html> <html> <head> <title> Псевдоелементи </title> <link rel="stylesheet" href="psc5.css" type="text/css"> </head> <body> <h1> Заглавие </h1> </body> </html> Код в CSS файл с име psc5.css: h1:after { content:url(pica.jpg); } Използване на псевдоелемента after - pica.jpg ще застане след заглавието <h1></h1>

×