Co to reguła CSS? - Kurs HTML i CSS

XHTML / Różnice między HTML 4 a XHTML 1.0
Znaczniki należy zamykać obowiązkowo w kolejności odwrotnej do ich otwierania: Poprawnie: wewnątrz paragrafu jest emfaza. Niepoprawnie: wewnątrz paragrafu jest emfaza. Nazwy znaczników i atrybutów obowiązkowo muszą być pisane małymi literami. Dla elementów niepustych znaczniki zamykające są obowiązkowe: Poprawnie: tutaj jest paragraf.tutaj jest następny paragraf. Niepoprawnie: tutaj jest paragraf.tutaj jest następny paragraf. Wartości...
Wstawianie stylów / Kaskadowość stylów
...Ci znacznie utrudnić analizę sposobu formatowania elementów. Przykład !important Gdyby w arkuszu stylów tej strony została umieszczona następująca reguła: h6 { color: blue !important; background-color: green } to pomimo wpisania następującego stylu inline (który ma pierwszeństwo przed arkuszami stylów) <h6 style="color: red; background-color: yellow"> Ten tytuł nie jest napisany czcionką koloru czerwonego, lecz niebieskiego, mimo wstawienia stylu inline. Natomiast tło pozostaje żółte...
Selektory elementów / Selektor typu
...UWAGA! W języku XHTML wszystkie selektory muszą być pisane małymi literami. Przykład Załóżmy że w arkuszu stylów została umieszczona następująca reguła: h6 { color: red } Jak widać jest to selektor typu (podstawowy). Dzięki niemu wystarczyłoby teraz napisać: <h6>To jest tytuł rzędu szóstego</h6> aby otrzymać tytuł, napisany czerwoną czcionką (red). Pytania i odpowiedzi Co to jest selektor CSS? Selektor CSS to wzorzec lub nazwa, która określa zbiór elementów HTML, do których ma być...
Selektory elementów / Selektor potomka
...nie odziedziczą one formatowania po przodkach. Przykład Załóżmy, że w arkuszu stylów strony została umieszczona następująca reguła: p b { color: red } Dzięki temu, jeśli wewnątrz znacznika p (akapit) znajdzie się znacznik b (czyli pogrubienie tekstu), to zostanie on automatycznie napisany czcionką koloru czerwonego: To jest akapit, a to jest pogrubienie (czerwone), umieszczone wewnątrz tego akapitu oraz wewnątrz znacznika tekstu pochylonego. A to jest pogrubienie...
Selektory atrybutów / Selektor atrybutu o określonej wartości
...wszystkie nazwy atrybutów w selektorach muszą być pisane małymi literami. Przykład Jeżeli w arkuszu stylów strony została umieszczona następująca reguła: p[title="To jest akapit"] { color: red } to każdy akapit, któremu został nadany atrybut title="..." o wartości "To jest akapit", powinien mieć kolor czerwony: To jest akapit, któremu został nadany atrybut TITLE o wartości "To jest akapit" (aby to sprawdzić, wskaż go myszką) i dlatego jest koloru czerwonego. Dla porównania, to akapit bez...
Selektory specjalne / Klasy selektorów <... class>
...cyfrą ani myślnikiem. Jeśli koniecznie chcemy użyć "zakazanych" znaków, należy w deklaracji klasy poprzedzić je odwróconym ukośnikiem "\", np. reguła: selektor.B\&W\? { cecha: wartość } odpowiada klasie: class="B&W?". Zdefiniowanie klasy selektorów w części arkuszu stylów, pozwala później się do niej odnosić już we właściwej treści dokumentu. Dzięki temu możemy np. ustalić określone atrybuty dla danego elementu (selektora) na całej stronie, a jednocześnie zmienić wygląd tylko...
Selektory specjalne / Selektor identyfikatora <... id>
...występuje tylko raz w drzewie dokumentu (w odróżnieniu od klasy). Przykład <... id> Jeżeli w arkuszu stylów strony została umieszczona następująca reguła: p#przyklad_identyfikator { color: red } to akapit o podanym identyfikatorze ID: To jest akapit. zostanie wyświetlony w kolorze czerwonym: To jest akapit. Dla porównania, to też jest akapit, ale bez podania identyfikatora i dlatego nie jest czerwony. Użycie selektora uniwersalnego pozwala przypisać styl...
Selektory pseudoklas / Łączenie selektorów
...może się znajdować tylko za ostatnim selektorem prostym w regule stylu. Przykład a.przyklad_selektory:hover { font-weight: bold } Taka reguła kojarzy każdy element typu a (czyli odsyłacz), który będzie posiadał klasę class="przyklad_selektory", kiedy zostanie on wskazany myszką: Wskaż ten odsyłacz myszką: class="przyklad_selektory". A tutaj jest odsyłacz bez klasy. Taki sposób tworzenia selektora odsyłaczy jest szczególnie przydatny, ponieważ zwykle chcemy część odnośników na...
Czcionki / Atrybuty mieszane czcionki {font}
...aby podawać w tej deklaracji pełną listę cech składowych, jednak jeśli jakąś opuścimy, zostanie jej przypisana wartość domyślna. Dlatego poniższa reguła stylów nie ustawi pogrubionej czcionki (bold), ponieważ nie zostało to określone w deklaracji font, która tutaj unieważnia font-weight: p { font-weight: bold; font: 12pt Arial; } Zgodnie z zasadą kaskadowości oczekiwany skutek (pogrubiony tekst) odniesiemy podając deklaracje w odwrotnej kolejności: p { font: 12pt Arial...
Tło / Atrybuty mieszane tła {background}
...aby podawać w tej deklaracji pełną listę cech składowych, jednak jeśli jakąś opuścimy, zostanie jej przypisana wartość domyślna. Dlatego poniższa reguła stylów nie ustawi tła koloru czerwonego (red), ponieważ nie zostało to określone w deklaracji background, która tutaj unieważnia background-color: p { background-color: red; background: url(tlo.gif) } Zgodnie z zasadą kaskadowości, oczekiwany skutek (czerwone tło) odniesiemy, podając deklaracje w odwrotnej kolejności: p { background...

1 2 3 4 »