color strony - Kurs HTML i CSS
Tło CSS / Usunięcie tła {background: none, background-color: transparent}...dotyczące tła. Można również usunąć tylko wybrane, stosując odpowiednie polecenia dla każdej własności, którą chcemy usunąć (np. background-color: transparent; background-image: none itd.). Pozwala to np. usunąć tło obrazkowe, lecz pozostawić kolor tła. Działają one oczywiście nie tylko z zewnętrznym arkuszem, ale również z wewnętrznym - zgodnie z zasadami kaskadowości. Przykład {background-color: transparent} Gdyby arkuszu stylów tej strony [zobacz: Wstawianie stylów], została...
- Selektory specjalne CSS / Klasy selektorów <... class>
...okazać wpisany wcześniej komentarz. Przykład <... class> Jeżeli w arkuszu stylów strony została umieszczona następująca reguła: p.przyklad_klasa { color: red } to jeśli teraz w dowolnym miejscu wpiszemy: <p class="przyklad_klasa">To jest akapit.</p> na ekranie zobaczymy tekst napisany czcionką koloru czerwonego: To jest akapit. Dla porównania, to też jest akapit, ale bez podania klasy i dlatego nie jest czerwony. W przypadku stosowanie klas, często podczas ich definiowania, nie wiemy...
Aktualizacja / System newsów...1px; /* grubość obramowania */ border-style: solid; /* styl obramowania: solid, dashed, dotted, double, groove, ridge, inset, outset */ border-color: gray; /* kolor obramowania */ font-weight: bold; } .news dt, .news dt a:link, .news dt a:visited { background: silver; /* tło tytułu */ color: #505050; /* kolor tytułu */ text-decoration: none; } /* Treść */ .news dd { background: white; /* tło */ color: black; /* kolor tekstu */ font-size: 12px; /* rozmiar czcionki...
- Tło CSS / Atrybuty mieszane tła {background}
...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: url(tlo.gif); background-color: red } albo przenosząc wartość background-color (red) do zbiorczej deklaracji background: p { background: red...
Dla nauczycieli / Scenariusz lekcji informatyki dla liceum i technikum...border, margin, border-radius. Tworzenie stylowych boksów z tekstem. 10 min - Tła i stylizowanie odsyłaczy Właściwości: background-image, color. Stylizacja odsyłaczy tak, aby zmieniały się po najechaniu kursorem (:hover). 5 min - Ćwiczenie praktyczne Strona z sekcją w ramce, linkami z efektem :hover, tłem obrazkowym i klasami CSS. 5 min - Zadanie domowe Rozbudować stronę o co najmniej 3 różne klasy stylów i dodać estetyczną sekcję z tłem i linkami. Lekcja 7 - Publikacja...
- Selektory specjalne CSS / Selektor identyfikatora <... id>
...(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 do dowolnego znacznika z określonym...
- Wstawianie stylów CSS / Zewnętrzny arkusz stylów <link "stylesheet"> @charset
...A oto przykładowy zewnętrzny arkusz stylów: /* SELEKTORY: */ body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #003868; background-color: #80B8E8; margin: 6mm; } p { text-align: justify; } pre, code { font-size: 8pt; } Strona kodowa @charset Jeżeli arkusz stylów zawiera narodowe znaki diakrytyczne, konieczne może być określenie strony kodowej. Można to zrobić umieszczając na samym początku arkusza stylów deklarację: @charset "strona...
- 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 (czerwone)...
- Selektory elementów CSS / Grupowanie selektorów
...przecinku i jednorazowo przypisać im wszystkim ten sam styl. Przykład Jeśli w arkuszu stylów strony została umieszczona następująca reguła: b, i { color: red } to po wpisaniu: <b>pogrubienie</b> <i>pochylenie</i> otrzymamy tekst, napisany w całości czcionką koloru czerwonego: pogrubienie pochylenie Przykład ten działa tak samo jak: b { color: red } i { color: red } jednak jak widać, dzięki użyciu znaku przecinka, oszczędzamy sobie pisania. Dodatkowo jeśli kiedyś musielibyśmy zmienić...
- Selektory atrybutów CSS / Selektor atrybutu zawierającego określony wyraz
...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~="jest"] { color: red } to każdy akapit, któremu został nadany atrybut title="..." o wartości, w której występuje wyraz "jest", 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. A to jest akapit z atrybutem TITLE o wartości "To...