Formatowanie tekstu
Transkrypt
Formatowanie tekstu
DOKUMENT HIPERTEKSTOWY IV Wstęp do CSS CSS • Kaskadowe arkusze stylów • Odpowiedzialne za warstwę prezentacji strony • <style></style> • style=ʺ ʺ • Plik .css Zagnieżdżanie CSS • liniowe – zagnieżdżenie w ramach danego elementu • Jako atrybut style=ʺ ʺ Zagnieżdżanie CSS • Wewnętrzne – zagnieżdżenie bezpośrednio w pliku html • Definiowane w części <head></head> • Jako znacznik <style></style> Zagnieżdżanie CSS • Zewnętrzne – zagnieżdżenie w osobnym pliku .css • Odnośnik do pliku definiowany w sekcji <head></head> Kaskadowość stylów • Określa priorytet w odziaływaniu na elementy; • jeden plik html, może mieć kilka źródeł CSS dotyczących tego samego elementu; • pierwszeństwo mają style znajdujące się "bliżej" formatowanego elementu. Dziedziczenie stylów • Ważna jest hierarchia elementów • Elementy zagnieżdżane wewnątrz innych, dziedziczą własności swojego rodzica np. kolor czcionki. Składania ID vs CLASS • ID – identyfikator, unikalny element na stronie • CLASS – klasa elementów na stronie ID, CLASS, element • ID może być tylko jeden, zatem nie jest uniwersalny • CLASS może wystąpić tyle razy ile potrzebujemy, możemy łączyć go z różnymi elementami. • Styl dla danego elementu np. p { color: blue; } ma zasięg globalny, dotyczy wszystkich paragrafów na stronie. ID, CLASS, element p { color:purple; } .title { color:green; } #paragraf1 { color:red; } Paragraf jaki jest każdy widzi. Paragraf jaki jest każdy widzi. Paragraf jaki jest każdy widzi. Paragraf jaki jest każdy widzi. Paragraf jaki jest każdy widzi. CLASS • Zagnieżdżanie elementów .title { color:green;} p.title { color:red; } div p.title { color:blue;} • Grupowanie elementów: div, p { color:yellow; } Formatowanie tekstu • color – pozwala ustawić kolor tekstu p { color: red; } p { color: #FF0000; } p { color: rgb(255, 0, 0); } Formatowanie tekstu Nazwa HEX RGB red #FF0000 rgb(255, 0, 0) Black #000000 rgb(0, 0, 0) #FFFF00 rgb(255, 255, 0) #87CEFA rgb(135, 206, 250) yellow LightSkyBlue Formatowanie tekstu Background-color: nazwa koloru p span { background-color: yellow; } <p>Szukane słowo: <span>turkuć</span> nie zostało znalezione.</p> Szukane słowo: turkuć nie zostało znalezione Formatowanie tekstu • text-align – wyrównanie tekstu • Wartości: left, center, right p { text-align:center; } Formatowanie tekstu • Font-size – rozmiar tekstu • Wartości: PX, EM, % p { font-size: 16px; } p { font-size: 1em; } p { font-size: 100%; } Formatowanie tekstu • Font-family – ustawianie kroju pisma body { font-family: ʺOpen Sans ʺ, Helvetica, Arial, sans-serif; } • Font-style – ustawienie stylu pisma • Wartości: normal, italic • Font-weight – ustawienie grubości pisma • Wartości: normal, bold, bolder, lighter, 100-700 Formatowanie tekstu • Line-height – interlinia • px, em, %, liczba • p { line-height: 2.5em; } "Jestokej: Substancja chemiczna pochodzenia naturalnego, która w odpowiednio wysokim stężeniu w mózgu wywołuje poczucie, że wszystko jest w porządku. Poziom jestokeju można regulować w sposób sztuczny, na przykład poprzez przyjmowanie błogonia." Formatowanie tekstu • Letter-spacing – odstęp między literami p { letter-spacing: -4px; } Formatowanie tekstu • Word-spacing – odstęp między wyrazami p { word-spacing: 40px; } Formatowanie treści • Kilka wartości CSS dla jednego elementu p { font-size:2em; color:#fff; background-color:#000; } • Kilka klas w jednym elemencie <p class=ʺparagraf title largeʺ>Zdanie w paragrafie</p> .paragraf { text-align:left; font-weight:bold; } .title { color:green; letter-spacing:2px; } .large { font-size:46px; }