Co to reguła CSS? - Kurs HTML i CSS
Co to reguła CSS?
Reguła CSS to zbiór instrukcji, które określają wygląd i formatowanie elementów na stronie internetowej.
Selektory elementów CSS / Reguły stylówAtrybuty formatowania w języku CSS definiuje się za pomocą tzw. reguł stylów. Każda reguła odnosi się do konkretnego elementu (znacznika) i składa się z dwóch części: selektora i deklaracji. Selektor określa do jakich elementów ma zostać przypisane formatowanie, a deklaracja podaje to formatowanie i jest umieszczona w nawiasie klamrowym {...}. Każda deklaracja składa się przynajmniej z jednego zespołu cecha lub inaczej własność albo właściwość (ang. property) - wartość (ang. value), przy czym...
- Selektory specjalne CSS / 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 elementów CSS / 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 atrybutów CSS / Selektor atrybutu zawierającego łączniki
...muszą być pisane małymi literami. Ograniczenia tego nie posiada język HTML. Przykład Jeżeli w arkuszu stylów strony została umieszczona następująca reguła: p[title|="to"] { color: red } to każdy akapit, któremu został nadany atrybut TITLE z wartością, która rozpoczyna się od "to" (i może składać się z łączników), powinien mieć kolor czerwony: To jest akapit, któremu został nadany atrybut title="to-jest-akapit" (aby to sprawdzić, wskaż go myszką) i dlatego jest koloru czerwonego. A to jest...
- Selektory pseudoklas CSS / Atrybut języka :lang
...atrybutu lang="..." przypisanego dla elementu nadrzędnego: <body lang="pl"> <p>Ten akapit jest napisany w języku polskim.<p> </body> /* Ta reguła zostanie zastosowana: */ p:lang(pl) { color: red } /* Ta reguła nie zostanie zastosowana: */ p[lang|="pl"] { color: blue } Przykład :lang Po wpisaniu w arkuszu stylów: p:lang(en) { color: red } div:lang(en) { border: 1px solid red } a następnie w kodzie źródłowym: <p lang="en">1. This is paragraph with attribute <b>lang="en"</b>.</p> <p...
XHTML / Różnice między HTML 4 a XHTML 1.0Znaczniki należy zamykać obowiązkowo w kolejności odwrotnej do ich otwierania: Poprawnie: <p>wewnątrz paragrafu jest <em>emfaza</em>.</p> Niepoprawnie: <p>wewnątrz paragrafu jest <em>emfaza.</p></em> 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: <p>tutaj jest paragraf.</p><p>tutaj jest następny paragraf.</p> Niepoprawnie: <p>tutaj jest paragraf.<p>tutaj jest następny paragraf. Wartości...
- Wstawianie stylów CSS / 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 CSS / 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 specjalne CSS / 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: <p id="przyklad_identyfikator">To jest akapit.</p> 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 CSS / Łą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...