Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

294 Aufrufe

Veröffentlicht am

HTML5&CSS3

Veröffentlicht in: Internet
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

  • Gehören Sie zu den Ersten, denen das gefällt!

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>

×