color strony - Kurs HTML i CSS
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...
- Selektory pseudoklas CSS / Atrybut języka :lang
...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 lang="en-US">2. This is paragraph with...
- Selektory pseudoklas CSS / Pierwsze dziecko :first-child
...Natomiast drugie polecenie pozwala dodatkowo określić nazwę znacznika rodzica. Przykład :first-child Po wpisaniu w arkuszu stylów: b:first-child { color: red } a w dowolnym miejscu strony: <p>To jest akapit, wewnątrz którego znajduje się <b>pierwsze pogrubienie (powinno być czerwone)</b> oraz <b>drugie pogrubienie (nie powinno być czerwone)</b>.</p> na ekranie powinniśmy otrzymać tekst, w którym zawiera się pogrubienie koloru czerwonego: To jest akapit, wewnątrz którego znajduje się pierwsze...
- Tło CSS / Tło obrazkowe {background-image}
...do zdjęcia z elementami przezroczystymi w CSS, można jednocześnie użyć właściwości background-image do ustawienia obrazka jako tła oraz background-color do określenia koloru tła. Na przykład, jeśli obrazek ma format GIF lub PNG z elementami przezroczystymi i chcesz dodać kolor tła, możesz użyć: "background-image: url('sciezka/do/zdjecia.png'); background-color: #EFEFEF", gdzie #EFEFEF to wybrany kolor tła. Takiego efektu nie można uzyskać ze zdjęciem w formacie JPG, ponieważ nie obsługuje on...
- Kaskadowe Arkusze Stylów / Cascading Style Sheets
...Język HTML wywodzi się od SGML (Standard Generalized Markup Language - Standardowy Uogólniony Język Oznaczania). SGML miał opisywać ogólną strukturę strony: nagłówek oraz ciało dokumentu, w którym mogły znajdować się akapity z tekstem, wykazy, tabele i inne elementy. SGML odpowiada tylko za wstawienie tych elementów, ale nie określa ich wyglądu. Jak łatwo się domyślić, szybko przestało to wystarczać - dlatego wprowadzono HTML. Zawarcie poleceń formatujących w samym HTML spowodowało jednak, że...
- Wstawianie stylów CSS / Wydzielone bloki <div style>
...możemy nadać kilka atrybutów (cech). Są one wtedy rozdzielone średnikami. Przykład <div style> Po wpisaniu w edytorze: <div style="background-color: yellow"> <span style="color: red"> <b>To jest pogrubienie w ramach DIV oraz SPAN i dlatego jest czerwone na żółtym tle</b>, a to jest zwykły tekst - również wewnątrz DIV i SPAN. </span> To jest zwykły tekst, ale tylko wewnątrz DIV - dlatego nie jest czerwony, ale ma żółte tło. <p>A to jest akapit (element blokowy) w ramach DIV.</p>...
- Pozycjonowanie CSS / Wyświetlanie {display}
...</tr> </table> komórka1 komórka2 komórka3 komórka4 To jest zwykły tekst display: inline-block; width: 150px; height: 100px; background-color: silver To jest zwykły tekst Dla porównania zwykły blok: To jest zwykły tekst width: 150px; height: 100px; background-color: silver To jest zwykły tekst Pytania i odpowiedzi {display} Do czego służy "display" w CSS? W CSS, właściwość display kontroluje sposób, w jaki element jest renderowany w przeglądarce. Określa, czy element jest...
- Tryb Quirks / Co zmienia przejście z trybu Quirks do trybu zgodności ze standardami?
...CSS: font, background, background-position, text-decoration, margin, padding, border, border-top, border-right, border-bottom, border-left, border-color, border-width, border-style, list-style-image, list-style, clip oraz behavior, text-autospace i layout-grid. W trybie zgodności dla własności font musimy obowiązkowo podać przynajmniej wielkość i rodzaj czcionki, w przeciwnym razie cała deklaracja zostanie zignorowana. Wcześniejsze wersje Internet Explorera przyjmowały także częściowe...