Wykład 5_2 Arkusze stylów dziedziczenie Technologie internetowe Zofia Kruczkiewicz
1. Dziedziczenie stylów Zagnieżdżone elementy dziedziczą styl od elementów zagnieżdżających. Dziedziczenie stylu wynika z drzewa dokumentu (document tree). Drzewo dokumentu (Document tree) Drzewo elementów zawartych w dokumencie xhtml. Każdy element w drzewie ma dokładnie tylko jednego ojca za wyjątkiem elementu typu korzeń (root), który nie ma ojca. Dziecko (Child) Element A jest dzieckiem elementu B, wtedy i tylko wtedy, gdy B jest ojcem A. Potomek (Descendant) Element A jest potomkiem elementu B, gdy albo (1) A jest dzieckiem B lub (2) A jest dzieckiem elementu C, który jest potomkiem B. Przodek (Ancestor) Element A jest przodkiem elementu B wtedy i tylko wtedy, gdy B jest potomkiem A.
2. Drzewo dokumentu xhtml html head body title meta link ol li li li li li li li
2.1. Dziedziczenie stylów: wielokrotność klas widok dokumentu
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8 "/> <title>arkusze stylow </title> <style type="text/css">.dziadek {letter-spacing: 0.3em;}.ojciec {color: red}.syn {font-weight: bold; font-size:xx-large;} </style> </head> <body> <ol> <li class="dziadek"> dziadek </li> <li class="dziadek ojciec"> dziadek ojciec </li> <li class="dziadek ojciec syn"> dziadek ojciec syn </li> <li class="dziadek syn"> dziadek syn </li> <li class="ojciec syn"> ojciec syn </li> <li class="syn"> syn </li> <li class=" ojciec"> ojciec </li> </ol> </body> </html>
2.2. Dziedziczenie stylów: wartość inherit widok dokumentu
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8 "/> <title>arkusze stylow </title> <style type="text/css">.dziadek {letter-spacing: 0.2em;color:green}.ojciec {color: inherit}.syn {font-weight: bold; font-size:xx-large;} li {color:red} ol {color:blue} </style> </head> <body> <ol> <li class="dziadek"> dziadek </li> <li class="dziadek ojciec"> dziadek ojciec </li> <li class="dziadek ojciec syn"> dziadek ojciec syn </li> <li class="dziadek syn"> dziadek syn </li> <li class="ojciec syn"> ojciec syn </li> <li class="syn"> syn </li> <li class=" ojciec"> ojciec </li> </ol> </body> </html>
3. Pseudo-klasy i pseudo-elementy selector:pseudo-element {property:value;} selector.class:pseudo-element {property:value;} selector:pseudo-class {property:value;} selector.class:pseudo-class {property:value;}
3.1. li:first-child (dziecko ol)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8 "/> <title>arkusze stylow </title> <style type="text/css">.dziadek {letter-spacing: 0.2em;}.ojciec {color: red}.syn {font-weight: bold; font-size:xx-large;} li:first-child {background-color:yellow} </style> </head> <body> <ol> <li class="dziadek"> dziadek </li> <li class="dziadek ojciec"> dziadek ojciec </li> <li class="dziadek ojciec syn"> dziadek ojciec syn </li> <li class="dziadek syn"> dziadek syn </li> <li class="ojciec syn"> ojciec syn </li> <li class="syn"> syn </li> <li class=" ojciec"> ojciec </li> </ol> </body> </html>
3.2.1. li:first-line (pierwsza linia każdej pozycji listy li)
3.2.2. li:first-line (pierwsza linia każdej pozycji listy li)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8 "/> <title>arkusze stylow </title> <style type="text/css">.dziadek {letter-spacing: 0.2em;}.ojciec {color: red}.syn {font-weight: bold; font-size:xx-large;} li:first-line {background-color:yellow} </style> </head> <body> <ol> <li class="dziadek"> dziadek </li> <li class="dziadek ojciec"> dziadek ojciec </li> <li class="dziadek ojciec syn"> dziadek ojciec syn </li> <li class="dziadek syn"> dziadek syn </li> <li class="ojciec syn"> ojciec syn </li> <li class="syn"> syn </li> <li class=" ojciec"> ojciec </li> </ol> </body> </html>
3.3. li:after (zawartość dodana na końcu zawartości każdej li)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8 "/> <title>arkusze stylow </title> <style type="text/css">.dziadek {letter-spacing: 0.2em;}.ojciec {color: red}.syn {font-weight: bold; font-size:xx-large;} li:after {content:"after";background-color:yellow} </style> </head> <body> <ol> <li class="dziadek"> dziadek </li> <li class="dziadek ojciec"> dziadek ojciec </li> <li class="dziadek ojciec syn"> dziadek ojciec syn </li> <li class="dziadek syn"> dziadek syn </li> <li class="ojciec syn"> ojciec syn </li> <li class="syn"> syn </li> <li class=" ojciec"> ojciec </li> </ol> </body> </html>
3.4. li:before (zawartość dodana na początku zawartości każdej li)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8 "/> <title>arkusze stylow </title> <style type="text/css">.dziadek {letter-spacing: 0.2em;}.ojciec {color: red}.syn {font-weight: bold; font-size:xx-large;} li:before {content:"before";background-color:yellow} </style> </head> <body> <ol> <li class="dziadek"> dziadek </li> <li class="dziadek ojciec"> dziadek ojciec </li> <li class="dziadek ojciec syn"> dziadek ojciec syn </li> <li class="dziadek syn"> dziadek syn </li> <li class="ojciec syn"> ojciec syn </li> <li class="syn"> syn </li> <li class=" ojciec"> ojciec </li> </ol> </body> </html>
Zawartość Property content Generated Content counterreset counterincrement quotes Description Generates content in a document. Used with the :before and :after pseudoelements Sets how much the counter increments on each occurrence of a selector Sets the value the counter is set to on each occurrence of a selector Sets the type of quotation marks Values string url counter(name) counter(name, list-style-type) counters(name, string) counters(name, string, list-style-type) attr(x) open-quote close-quote no-open-quote no-close-quote none identifier number none identifier number none string string
Wartości atrybutu content Value none normal counter attr(attribute) string open-quote close-quote no-open-quote no-close-quote url(url) inherit Description Sets the content, if specified, to nothing Sets the content, if specified, to normal, which default is "none" (which is nothing) Sets the content as a counter Sets the content as one of the selector's attribute Sets the content to the text you specify Sets the content to be an opening quote Sets the content to be a closing quote Removes the opening quote from then content, if specified Removes the closing quote from then content, if specified Sets the content to be some kind of media (an image, a sound, a video, etc.) Specifies that the value of the content property should be inherited from the parent element
3.5. li:first-letter
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8 "/> <title>arkusze stylow </title> <style type="text/css">.dziadek {letter-spacing: 0.2em;}.ojciec {color: red}.syn {font-weight: bold; font-size:xx-large;} li:first-letter {background-color:yellow} </style> </head> <body> <ol> <li class="dziadek"> dziadek </li> <li class="dziadek ojciec"> dziadek ojciec </li> <li class="dziadek ojciec syn"> dziadek ojciec syn </li> <li class="dziadek syn"> dziadek syn </li> <li class="ojciec syn"> ojciec syn </li> <li class="syn"> syn </li> <li class=" ojciec"> ojciec </li> </ol> </body> </html>
3.6. ol:first-line (styl pierwszej linii dziecka ol, czyli li)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8 "/> <title>arkusze stylow </title> <style type="text/css">.dziadek {letter-spacing: 0.2em;}.ojciec {color: red}.syn {font-weight: bold; font-size:xx-large;} ol:first-line {background-color:yellow} </style> </head> <body> <ol> <li class="dziadek"> dziadek </li> <li class="dziadek ojciec"> dziadek ojciec </li> <li class="dziadek ojciec syn"> dziadek ojciec syn </li> <li class="dziadek syn"> dziadek syn </li> <li class="ojciec syn"> ojciec syn </li> <li class="syn"> syn </li> <li class=" ojciec"> ojciec </li> </ol> </body> </html>
3.7. ol:first-child (zawartość listy ol jako dziecko body)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8 "/> <title>arkusze stylow </title> <style type="text/css">.dziadek {letter-spacing: 0.2em;}.ojciec {color: red}.syn {font-weight: bold; font-size:xx-large;} ol:first-child {background-color:yellow} </style> </head> <body> <ol> <li class="dziadek"> dziadek </li> <li class="dziadek ojciec"> dziadek ojciec </li> <li class="dziadek ojciec syn"> dziadek ojciec syn </li> <li class="dziadek syn"> dziadek syn </li> <li class="ojciec syn"> ojciec syn </li> <li class="syn"> syn </li> <li class=" ojciec"> ojciec </li> </ol> </body> </html>
4. Style narzucone, domyślne, alternatywne oraz wielokrotność klas 4.1. Przykład 1. Styl narzucony (color:blue), Styl narzucony (color:red) Styl domyslny1 (color:yellow) Styl narzucony (color), styl alternatywny1 - wybrany w przeglądarce (letter-spacing: 0.3em) Style alternatywny1 - wybrany w przeglądarce (letter-spacing: 0.3em) oraz domyślny1 (color:yellow) Styl alternatywny1 - wybrany w przeglądarce (letter-spacing: 0.3em) oraz (color:grey)
4.2. Przykład 2 Styl narzucony (color:blue), Styl narzucony (color:red) Styl narzucony (color:green) Styl narzucony (color), styl alternatywny1 - wybrany w przeglądarce (letter-spacing: 0.3em), styl domyslny 2 (font-size:20px) Style alternatywny1 - wybrany w przeglądarce (letter-spacing: 0.3em) oraz (color:grey) Styl alternatywny1 - wybrany w przeglądarce (letter-spacing: 0.3em) oraz (color:grey)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>arkusze stylów</title> <link rel="alternate stylesheet" title="alternatywny1" href="alternatywny1.css type="text/css"></link> <link rel="alternate stylesheet" title="alternatywny2" href="alternatywny2.css" type="text/css"></link> <link rel="stylesheet" title="domyslny1" href="domyslny1.css" type="text/css"></link> <link rel="stylesheet" title="domyslny2" href="domyslny2.css" type="text/css"></link> <link rel="stylesheet" href="narzucony.css" type="text/css"></link> </head> <body> <h1 class="body1">styl body1 nagłówka</h1> <p class="box1"> Styl box1 akapitu.</p> <p class="box2"> Styl box2 akapitu.</p> <p class="box3 box1 box2 box4"> Style box3 box1 box2 box4 akapitu.</p> <p class="box2 box4"> Styl box2 box4 akapitu.</p> <p class="box4 box5"> Styl box4 box5 akapitu.</p> </body> </html>
Pseudo-elementy Pseudo-elements On-line examples Pseudo-element :first-letter :first-child :first-line :before :after Purpose Adds special style to the first letter of a text Selects every elements that is the first child of its parent Adds special style to the first line of a text Inserts some content before an element Inserts some content after an element
:first-letter font properties color properties background properties margin properties padding properties border properties text-decoration vertical-align (only if "float" is "none") text-transform line-height float clear
font properties color properties background properties word-spacing letter-spacing text-decoration vertical-align text-transform line-height clear :first-line