color - 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
...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~="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 pseudoelementów CSS / Przed... :before
...w trybie Standards Compliance. Przykład :before Jeżeli w arkuszu stylów została umieszczona następująca reguła: p:before { content: "POCZĄTEK "; color: red } to wszystkie akapity będą rozpoczynały się od wyrazu "POCZĄTEK", mimo że nie wpiszemy tego wyrazu bezpośrednio w treści akapitu: To akapit, rozpoczynający się wyrazem "POCZĄTEK", pomimo że nie został on umieszczony w treści akapitu. Jeśli używasz Internet Explorera 7.0 lub starszego, powyższy akapit będzie się rozpoczynał normalnie...
- Selektory pseudoelementów CSS / Po... :after
...tylko w trybie Standards Compliance. Przykład :after Jeżeli w arkuszu stylów została umieszczona następująca reguła: p:after { content: " KONIEC"; color: red } to wszystkie akapity będą kończyły się wyrazem "KONIEC", mimo że nie wpiszemy tego wyrazu bezpośrednio w treści akapitu: To jest akapit, kończący się wyrazem "KONIEC", pomimo że nie został on umieszczony w treści akapitu. Jeśli używasz Internet Explorera 7.0 lub starszego, powyższy akapit będzie się kończył normalnie ("...w treści...
- 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...
- 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...
- Kaskadowe Arkusze Stylów / Cascading Style Sheets
Spis treści Kaskadowe Arkusze Stylów Źródła Kaskadowe Arkusze Stylów CSS - Cascading Style Sheets (z ang. Kaskadowe Arkusze Stylów) jest to specjalny język opracowany tylko w jednym celu: stworzenie możliwości bardziej elastycznego zarządzania sposobem formatowania (wyglądem) elementów znajdujących się w dokumentach elektronicznych. CSS nie może zatem istnieć samodzielnie, gdyż jest ściśle powiązane z językiem opisu struktury dokumentów takim jak HTML. CSS daje możliwość globalnego...
- 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>...