Technologie internetowe Zofia Kruczkiewicz

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" " <html xmlns=" 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> dziadek dziadek ojciec dziadek ojciec syn dziadek syn ojciec syn syn ojciec </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" " <html xmlns=" 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> dziadek ojciec dziadek dziadek ojciec syn dziadek syn ojciec syn syn ojciec </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" " <html xmlns=" 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> dziadek dziadek ojciec dziadek ojciec syn dziadek syn ojciec syn syn ojciec </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"
" <html xmlns=" 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> Styl box1 akapitu. Styl box2 akapitu. Styl box3 akapitu. Styl box4 akapitu. Styl box5 akapitu. </body> </html>

Technologie internetowe Zofia Kruczkiewicz

Podobne prezentacje

Prezentacja na temat: "Technologie internetowe Zofia Kruczkiewicz"— Zapis prezentacji:

Podobne prezentacje

О projekcie

Zwrotny adres

Wejść

Zaloguj się poprzez sieć społeczną:

Technologie internetowe Zofia Kruczkiewicz

Podobne prezentacje

Prezentacja na temat: "Technologie internetowe Zofia Kruczkiewicz"— Zapis prezentacji:

Podobne prezentacje

О projekcie

Zwrotny adres