Technologie internetowe Zofia Kruczkiewicz Arkusze stylów – część 2 Technologie internetowe Zofia Kruczkiewicz
Dziedziczenie stylów – 1a – użycie kilku stylów w jednej deklaracji class <!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 {color:green; letter-spacing: 0.3em} .ojciec {color: red} .syn {font-weight: bold; font-size:xx-large;} </style> </head> <body> <p class="dziadek"> dziadek </p> <p class="dziadek ojciec"> dziadek ojciec </p> <p class="dziadek ojciec syn"> dziadek ojciec syn </p> <p class="dziadek syn"> dziadek syn </p> <p class="ojciec syn"> ojciec syn </p> <p class="syn"> syn </p> <p class=" ojciec"> ojciec </p> </body> </html>
Kolejność podawanych klas nie wpływa na kolejność użytych stylów Kolejność podawanych klas nie wpływa na kolejność użytych stylów. Na kolejność użytych stylów decyduje kolejność definiowania stylów – ostatnia definicja ma najwyższy priorytet
Dziedziczenie stylów – 1b <!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 {color:green; letter-spacing: 0.3em} .ojciec {color: red} .syn {font-weight: bold; font-size:xx-large;} </style> </head> <body> <p class="dziadek"> dziadek </p> <p class="ojciec dziadek"> ojciec dziadek</p> <p class="dziadek ojciec syn"> dziadek ojciec syn </p> <p class="dziadek syn"> dziadek syn </p> <p class="ojciec syn"> ojciec syn </p> <p class="syn"> syn </p> <p class=" ojciec"> ojciec </p> </body> </html>
Kolejność podawanych klas nie wpływa na kolejność użytych stylów Kolejność podawanych klas nie wpływa na kolejność użytych stylów. Na kolejność użytych stylów decyduje kolejność definiowania stylów – ostatnia definicja ma najwyższy priorytet
Dziedziczenie stylów – 2 – o kolejności stylów decyduje kolejność definiowania w arkuszu stylu <!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 {color:green; letter-spacing: 0.3em} .ojciec {color: red} .syn {color:blue; font-weight: bold; font-size:xx-large;} </style> </head> <body> <p class="dziadek"> dziadek </p> <p class="dziadek ojciec"> dziadek ojciec </p> <p class="dziadek ojciec syn"> dziadek ojciec syn </p> <p class="dziadek syn"> dziadek syn </p> <p class="ojciec syn"> ojciec syn </p> <p class="syn"> syn </p> <p class=" ojciec"> ojciec </p> </body> </html>
Kolejność definiowanych klas wpływa na kolejność użytych stylów – ostatnia deklaracja anuluje poprzednią. Styl ojciec z kolorem czerwonym anuluje kolor zielony stylu dziadek Kolejność definiowanych klas wpływa na kolejność użytych stylów – ostatnia deklaracja anuluje poprzednią. Styl syn z kolorem niebieskim anuluje kolor zielony stylu dziadek oraz czerwony stylu ojciec
Style narzucone, domniemane, domyślne Styl narzucony - narzucony styl body Styl domyslny1 - zignorowany styl body Styl domyslny2 - zignorowany styl body Styl alternatywny1 - wybrany w przeglądarce Styl narzucony i styl przeglądarki - zignorowany styl alternatywny
<!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"> Styl box3 akapitu.</p> <p class="box4"> Styl box4 akapitu.</p> <p class="box5"> Styl box5 akapitu.</p> </body> </html>