docFormatowanie tekstu
download 
Reklamacja 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; }
