color strony - Kurs HTML i CSS
Selektory elementów CSS / Reguły stylów...wartości takie jak: left, right, center, justify. Przypisanie do niej np. wartości koloru nie miałoby sensu. Przykład /* Pierwsza reguła: */ p { color: red } /* Druga reguła: */ p b { color: red; background-color: yellow } Powyżej mamy przykład dwóch reguł stylów: W pierwszej selektorem jest znacznik p, a deklaracja ma postać { color: red }. Cechą jest color, a wartością red. W drugiej selektorem jest zestawienie znaczników p b. Deklaracja zawiera dwa zespoły cecha-wartość. Pytania...
- 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...
Podcast HTML / #1 HTML dla zielonych...tego samego znacznika można łączyć, rozdzielając je średnikami. Rozmiar: <span style="font-size: large">Tu wpisz tekst</span> Kolor: <span style="color: red">Tu wpisz tekst</span> (np. na czerwony) Rodzaj czcionki: <span style="font-family: Arial">Tu wpisz tekst</span> Przykład łączenia formatowania (pogrubienie, kursywa, podkreślenie, rozmiar i kolor): <p style="text-align: center"><span style="font-size: large; color: red"><b><i><u> To jest jakiś tekst </u></i></b></span></p>...
- 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...
- Podcast HTML / #9 HTML5
...formularzy i interakcji: Nowe typy pól <input>: wprowadzono nowe typy dla elementu <input>, które ułatwiają wprowadzanie danych, takie jak: color, date, datetime-local, email, month, number, range, search, tel, time, url, week. <datalist>: tworzy listę rozwijaną z podpowiedziami dla elementu <input>, dodając autouzupełnianie pól formularza. <progress>: wstawia pasek postępu, przedstawiający stopień ukończenia zadania. Może wskazywać określony stopień (value, max) lub nieokreślony...
- 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 / Wewnętrzny arkusz stylów <style>
...w nagłówku dokumentu. Przykład <style> Jeśli w treści nagłówkowej strony zostałby umieszczony następujący wewnętrzny arkusz stylów: <style> h6 { color: red } </style> to po wpisaniu w dowolnym miejscu strony po prostu: <h6>To jest tytuł rzędu 6</h6> otrzymalibyśmy tytuł rzędu szóstego koloru czerwonego (color: red) i to niezależnie od tego, ile będzie na stronie takich tytułów. Wygodne, prawda? 🙂 Pytania i odpowiedzi <style> W jakim elemencie powinien być umieszczony wewnętrzny arkusz...