Systemy internetowe Wykład 2 CSS
CSS - definicja CSS (Cascading Style Sheets) kaskadowe arkusze stylów CSS - język opisujący w jaki sposób elementy HTML będą wyświetlane na ekranie komputera, tabletu, telefonu, czy też jak będą wyglądały po wydrukowaniu na papierze. CSS wprowadzono aby rozdzielić treść dokumentu od sposobu prezentacji. w HTMLu polecenia formatujące są porozrzucane, w CSS są zgromadzone w jednym miejscu.
CSS - zalety Czemu preferujemy style? Dokumenty są bardziej przejrzyste i krótsze (klasy i dziedziczenie). Ułatwiają zarządzanie serią dokumentów (zewnętrzne arkusze stylów). Dają dodatkowe możliwości formatowania.
Dołączanie stylów Style CSS nie mogą funkcjonować samodzielnie, ponieważ definiują jedynie sposób formatowania elementów dokumentu, ale same ich nie tworzą. Style można dołączyć do strony: wewnątrz znacznika (styl lokalny), w wewnętrznym arkuszu stylów, w zewnętrznym arkuszu stylów.
Styl lokalny Styl lokalny (inline) dołącza formatowanie wewnątrz konkretnego elementu strony. Atrybut style dla formatowanego elementu. <h1 style= font-size:30px; color:blue"> Tekst </h1> Formalizm zapisu: apostrofy, cudzysłowy, średnik, Przy większych fragmentach tekstu: znacznik <span>, znacznik <div>.
Wewnętrzny arkusz stylów Jest wstawiany w części nagłówkowej dokumentu. Formatowaniu ulegają wszystkie elementy danego rodzaju, Znacznik <style> - typ MIME wykorzystanego arkusza stylów (text/css). <style type="text/css"> h1 {color: blue} body {font-family: arial; font-size: 12pt} </style>
Zewnętrzny arkusz stylów Formatowanie wielu stron jednocześnie. Znacznik <link> - część nagłówkowa; atrybuty: type, href i rel (informuje, że <link> wskazuje arkusz stylów). <link rel="stylesheet" type="text/css" href="style.css" /> Ważniejsze są deklaracje z arkusza dołączonego PÓŹNIEJ. Plik style.css h1 {color: blue} body {font-family: Times; font-size: 12pt}
Selektor Reguła stylu składa się z: selektora - określa do jakich elementów ma zostać przypisane formatowanie, deklaracji - podaje sposób formatowania. Selektory zbudowane są z: nazw elementów, klas, identyfikatorów, pseudoklas, pseudoelementów, atrybutów i ich wartości, opcjonalnie połączonych łącznikami: spacja, >, +. Grupowanie selektorów przecinek
Deklaracja Deklaracja składa się z zespołów: cecha: wartość rozdzielonych średnikami 1 deklaracja - dowolna liczba zespołów. Każda grupa elementów ma określony zespół cech CSS, a każda cecha ma określoną listę wartości. h1 {color: red} p, h1 {color: red; font-family: arial; /*A to komentarz CSS*/ }
Rodzaje selektorów 1. Selektor typu 2. Selektor uniwersalny 3. Selektor identyfikatora 4. Selektor klasy 5. Selektor warunkowy 6. Selektor atrybutu 7. Selektor pseudoelementu 8. Selektor pseudoklasy
Selektor typu i selektor uniwersalny 1. Selektor typu - nazwa znacznika (np. h1, div, p.) 2. Selektor uniwersalny (*) odnosi się do wszystkich elementów strony. h1 {color: red} * {color: red}
Selektor identyfikatora selektor_typu#identyfikator #identyfikator *#identyfikator div#left {color: red} #left {color: red} Identyfikator to wartość atrybutu id elementu, Nazwa identyfikatora w CSS musi być taka sama jak wartość atrybutu id w HTML (wielkość liter!). Selektor uniwersalny pozwala przypisać styl do dowolnego znacznika z zadanym identyfikatorem.
Selektor klasy selektor_typu.nazwa_klasy.nazwa_klasy *.nazwa_klasy <znacznik class="nazwa_klasy">...</znacznik> Możemy przypisać kilka klas dla 1-go znacznika <selektor class="klasa1 klasa2 klasa3...">...</selektor> Kolejność klas nie wpływa na formatowanie (zasady kaskadowości decydują o formatowaniu).
Selektor klasy (1) <head> <style type="text/css"> p.czerwony {color: red } h1.niebieski {color: blue } *.zielony {color: green} </style> </head> <body> <h1 class="niebieski">... </h1> <p class="czerwony">... </p> <p class="zielony">... </p> <h1 class="zielony">... </h1> </body>
Selektor klasy (2) <head> <style type="text/css"> h1.niebieski {color: blue } p.czerwony {color: red } *.zielony {color: green} </style> </head> <body> <h1 class="niebieski">... </h1> <p class= niebieski">... </p> <p class="zielony">... </p> <h1 class="zielony">... </h1> </body>
Selektor klasy (3) <head> <style type="text/css">.czcionka {font-family:courier }.kolor {color: red }.wielkosc {font-size:40px} </style> </head> <body> <p class="czcionka"> akapit1 </p> <p class="wielkosc"> akapit2 </p> <p class="kolor"> akapit3 </p> <p class="czcionka kolor wielkosc"> akapit4 </p> </body>
Selektor warunkowy Potomka reguły są stosowane tylko wtedy kiedy selektor znajduje się wewnątrz innego elementu. przodek potomek {cecha: wartość } div h1 { color: red} div h1 b {color: red} Dziecka 1 rząd niżej w hierarchii. rodzic > dziecko {cecha: wartość } div > h1 { color: red} div > h1 > b {color: red} Braci ten sam poziom w hierarchii. i + b {color: red } brat1 + brat2 {cecha: wartość }
Selektor atrybutu Nadaje cechy elementom, które: posiadają zadany atrybut selektor[atrybut] {cecha: wartość } posiadają konkretną wartość zadanego atrybutu selektor[atrybut="wartość atrybutu"] {cecha: wartość } Istotna jest tylko część wartości atrybutu - operator ~= selektor[atrybut~="ciąg"] {cecha: wartość } p[title] {color: red } p[title="to jest akapit ] {color: red } p[title~=" akapit" {color: red }
Pseudoelement selektor : pseudoelement {cecha: wartość } Standardowe pseudoelementy to: first-line sformatowanie 1-szej linii wewnątrz elementu, first-letter - sformatowanie 1-szej litery wewnątrz elementu, before dopisanie treści/grafiki przed elementem, after dopisanie treści/grafiki na zakończenie elementu. p:first-line{color: red } p:first-letter{color: red } p:before {content: "obrazek.jpg } p:after {content: "treść" }
Pseudoklasy Pseudoklasy umożliwiają selekcję części dokumentu na podstawie informacji wykraczających poza drzewo dokumentu, albo takich, które nie mogą być wyrażone przy użyciu innych prostych selektorów.
Rodzaje pseudoklas Pseudoklasy dynamiczne: link, visited, hover, active, focus Pseudoklasy interfejsu użytk.: enabled, disabled, checked Pseudoklasy strukturalne: first-child, only-child, root, empty Pseudoklasy inne: lang, target a:link {color: red} input[type="text"]:enabled {background: red} p:first-child {background: yellow} p:lang(pl) {color: red} :target {border: 2px red}
Kolejność selektorów Kolejność selektorów: selektory typu lub selektor uniwersalny selektory atrybutów, identyfikatora, klasy, pseudoklas, selektory pseudoelementów. CSS: *.czerwony a:hover {color: red} HTML: <div class="czerwony"> <a.> </a> <a.> </a> </div>
Ustalenie kolejności reguł stylów (1) Ważniejsze są reguły zawierające bardziej szczegółowe selektory! Szczegółowość selektora określa: liczba użytych identyfikatorów - im więcej identyfikatorów, tym bardziej szczegółowy selektor (selektory identyfikatora mają pierwszeństwo przed innymi), liczba użytych w selektorze klas, pseudoklas oraz atrybutów, liczba użytych w selektorze elementów lub pseudoelementów, gdy żaden z powyższych punktów nie pozwala określić, który selektor jest bardziej szczegółowy, ważniejsze są te reguły, które zostały umieszczone na końcu arkusza.
Ustalenie kolejności reguł stylów (2) Pierwszeństwo mają style znajdujące się "bliżej" formatowanego elementu. Podstawowy priorytet ważności stylów (od najwyższego): styl lokalny, styl lokalny zawarty w znaczniku< span>, styl lokalny zawarty w znaczniku <div>, wewnętrzny arkusz stylów, style importowane do wewnętrznego arkusza stylów (przy pomocy polecenia @import), zewnętrzny arkusz stylów, style importowane do zewnętrznego arkusza stylów, atrybuty prezentacyjne HTML (np. align, color, width ).
Ustalenie kolejności reguł stylów (3) Polecenie dołączenia zewnętrznego arkusza stylów powinno znajdować się w dokumencie wcześniej niż definicja wewnętrznego arkusza stylów. Polecenie!important (w deklaracji stylu po wartości cechy) - cecha będzie miała pierwszeństwo przed innymi, nawet jeśli ma niższy priorytet. Polecenie!important nie jest zalecane - utrudnia analizę sposobu formatowania elementów.
Box model (1) margines zew obramowanie margines wew zawartość Prostokąt zawartości otacza: margines wewnętrzny (padding), obramowanie (border), margines zewnętrzny (margin). Marginesy - rozmiar (bezwzględny lub w procentach względem elementu otaczającego). Obramowanie: border-width, border-color, border-style.
Box model (2) Różne formatowanie dla marginesów i obramowania z poszczególnych stron: podanie od 2 do 4 wartości w kolejności: top, right, bottom, left gdy podane są 2 lub 3 wartości brakująca wartość jest taka sama jak dla przeciwległej strony, wykorzystanie wariantów właściwości, np. padding-right, padding-bottom. p#akapit2{ padding: 50px; margin: 50px 100px 2px 10px; border-style: solid; border-width: large}
Menu - html <body> <div id="menu"> <ul> <li> <a href="adres1"> Pierwsza opcja </a></li> <li> <a href="adres2"> Druga opcja </a></li> <li> <a href="adres3"> Trzecia opcja </a></li> <li> <a href="adres4"> Czwarta opcja </a></li> </ul> </div> </body>
Menu CSS (1) ul { a { list-style: none; padding: 0px} display: block; background-color: yellow; color: black; border: 1px solid blue; text-decoration: none; width: 140px; padding: 5px}
Menu CSS (2)
Menu CSS (3) ul { list-style: none; padding: 0px} a { float: left; display: block; background-color: yellow; color: black; border: 1px solid blue; text-decoration: none; width: 140px; padding: 5px}
Pozycjonowanie Właściwość position określa metodę pozycjonowania: static relative absolute fixed Właściwości przesuwające: top bottom left right
Static i relative position: static pozycja elementu jest zgodna z pozycją normalną: elementy blokowe są wyświetlane jeden pod drugim (display: block) elementy liniowe obok siebie (display: inline) Właściwości: top, leff, bottom, right tracą znaczenie. position: relative pozycja elementu jest wyznaczana jako przesunięcie określonej krawędzi elementu względem jego pozycji static (po elemencie zostaje puste miejsce).
top: 20px bottom: 20px
left: 20px right: 20px
Fixed position: fixed pozycja elementu jest wyznaczana względem okna przeglądarki (po elemencie nie zostaje puste miejsce).
top: 0px left:150px; top:10px; bottom:10px; left:90px; right:90px; top:80px; bottom:5px;
Absolute position: absolute pozycja elementu jest wyznaczana względem elementu nadrzędnego wypozycjonowanego za pomocą dowolnej metody, poza static. div#zew{ position: relative; width: 200px; height: 100px; border: 3px solid red} div#abs { position: absolute; top: 40px; right: 30px; left: 30px; bottom:10px; border: 3px solid blue}
div#zew{ position: static; width: 200px; height: 100px; border: 3px solid red; } div#abs { position: absolute; top: 40px; right: 30px; left:30px; bottom:10px; border: 3px solid blue;}
Float i clear Właściwość float pozwala na zdefiniowanie elementu jako elementu pływającego: float: right - element będzie pływał z prawej strony innych elementów, float: left - element będzie pływał z lewej strony. Konieczne jest wskazanie szerokości elementu width. Właściwość clear określa czy dany element pojawi się obok pływających elementów, które go poprzedzają, czy też ma zostać przesunięty poniżej nich (clear: none, left, right, both).
Float div#oplywany { float: left; width:100px; margin: 10px 10px 10px 10px; border: 2px solid blue } div#oplywany { float: left; width:100px; margin: 10px 10px 10px 10px; border: 2px solid blue }
Dziękuję za uwagę