akapit - Kurs HTML i CSS
Selektory pseudoelementów CSS / Przed... :before...atrybutu przed... :before {content: attr} Przed... :before selektor:before { content: "treść" } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów]. Natomiast jako wyraz "treść" można wpisać dowolny tekst. Polecenie pozwala automatycznie dopisywać podaną treść przed określonymi elementami, na które wskazuje selektor. Przykład :before Jeżeli w arkuszu stylów została umieszczona następująca reguła: p:before...
- Selektory pseudoelementów CSS / Po... :after
...Wartość atrybutu po... :after {content: attr} Po... :after selektor:after { content: "treść" } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów]. Natomiast jako wyraz "treść" można wpisać dowolny tekst. Polecenie pozwala automatycznie dopisywać podaną treść po określonych elementach, na które wskazuje selektor. Przykład :after Jeżeli w arkuszu stylów została umieszczona następująca reguła: p:after { content...
- Selektory pseudoelementów CSS / Cudzysłowy {quotes}
...następująco: q:lang(pl) { quotes: "\201E" "\201D" "\00BB" "\00AB" } q:before { content: open-quote } q:after { content: close-quote } To jest akapit w języku polskim (pl). Ferdynand Wspaniały powiedział: Słyszałem, jak Bill G. mówił: Przeglądarka Chrome 10 tego nie wyświetli... i miał rację 😉 albo (rzadziej spotykane): q:lang(pl) { quotes: "\201E" "\201D" "\201A" "\2019" } q:before { content: open-quote } q:after { content: close-quote } To jest akapit w języku polskim (pl)...
- Tło CSS / Tło obrazkowe {background-image}
...Firefox, Opera, Chrome) selektor { background-image: url(ścieżka dostępu do obrazka) } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "ścieżka dostępu do obrazka" należy podać miejsce, gdzie znajduje się obrazek, który chcemy wstawić jako tło. Wpisanie "none" usunie obrazek. Ścieżkę dostępu należy konstruować względem lokalizacji arkusza CSS, a nie względem adresu dokumentu HTML! Polecenie...
- Marginesy CSS / Atrybuty mieszane marginesu {margin}
selektor { margin: wartości atrybutów } Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "wartości atrybutów" należy podać: Jedną wartość - wtedy wszystkie marginesy będą jednakowe. Przykład To jest akapit, który ma wszystkie marginesy równe 2cm (margin: 2cm) Dwie wartości - z których pierwsza oznacza górny i dolny margines, natomiast druga - lewy i prawy. Przykład To jest akapit, który ma górny i dolny margines...
HTML5 / Nowe elementy HTML5...<h2>Podsekcja 1.2</h2> <section> <h3>Podsekcja 1.2.1</h3> </section> ...utworzy następujący spis treści: Sekcja 1 Podsekcja 1.1 (zawiera akapit "Akapit podsekcji 1.1") Podsekcja 1.2 (nie ma żadnej zawartości oprócz nagłówka) Podsekcja 1.2.1 (nie ma żadnej zawartości oprócz nagłówka) Jest to równoważne następującej strukturze ze wszystkimi sekcjami jawnymi: <section> <h1>Sekcja 1</h1> <section> <h2>Podsekcja 1.1</h2> <p>Akapit podsekcji 1.1</p> </section> <section>...
- HTML dla zielonych / Pozioma linia HTML <hr>
<hr> Pozwala wstawić na stronie poziomą linię (ang. horizontal rule), za pomocą której np. można rozdzielić sąsiednie grupy akapitów wyraźnie różniące się między sobą tematycznie. UWAGA! Znacznik <hr> nie posiada w języku HTML znacznika zamykającego! Przykład <hr> <p>Akapit...</p> <p>Akapit...</p> <hr> <p>Akapit...</p> <p>Akapit...</p> Pytania i odpowiedzi <hr> Jak napisać poziomą linię w HTML? W celu dodania poziomej linii na stronie WWW należy posłużyć się znacznikiem <hr>. Jak...
- Selektory pseudoklas CSS / Jedyne dziecko :only-child
...jeśli rodzic nie ma już innych dzieci. Przykład :only-child Po wpisaniu w arkuszu stylów: b:only-child { color: red } otrzymamy na stronie: To jest akapit, wewnątrz którego znajduje się pogrubienie (powinno być czerwone). Ten akapit ma tylko jedno dziecko. Dla porównania to jest akapit, wewnątrz którego znajduje się pierwsze pogrubienie (nie powinno być czerwone) oraz drugie pogrubienie (również nie powinno być czerwone). Ten akapit ma więcej niż jedno dziecko.
- Selektory pseudoklas CSS / Pusty element :empty
...stylów: p:empty { background-color: red; width: 100%; height: 1em } a w dowolnym miejscu strony: <p></p> <p> </p> <p><b></b></p> <p>To jest akapit</p> otrzymamy cztery akapity, z których tylko pierwszy element (pusty) powinien mieć ustawione tło koloru czerwonego: To jest akapit Zwróć uwagę, że drugi akapit (zawierający tylko spację) ani trzeci akapit (zawierający tylko pusty element-dziecko), nie otrzymały zmienionego formatowania. Przykład z użyciem elementu, który nie posiada...
- Tekst CSS / Wcięcie w tekście {text-indent}
...Wcięcie w tekście oznacza dodatkowy odstęp pierwszej linijki w bloku od lewego marginesu (jak tabulator). Stosuje się je, gdy rozpoczynamy nowy akapit (na inny temat). Przykład {text-indent} To jest akapit, w którego pierwszej linijce wcięcie wynosi 1cm... To jest akapit, w którego pierwszej linijce wcięcie wynosi 1cm... To jest akapit, w którego pierwszej linijce wcięcie wynosi 1cm... Pytania i odpowiedzi {text-indent} Jaki atrybut pozwala definiować wcięcie pierwszego wiersza...