akapit - Kurs HTML i CSS
Kaskadowe Arkusze Stylów / Dlaczego warto używać CSS?...To jest nadkreślenie tekstu Ten paragraf został napisany małymi literami, ale dzięki transformacji, jest wyświetlany za pomocą wielkich liter. Ten akapit zaczyna się wcięciem, którego można użyć jako tabulatora, rozpoczynającego każdy nowy akapit (normalny znak tabulatora wpisany w kodzie źródłowym strony, jest ignorowany przez przeglądarkę internetową, podczas wyświetlania dokumentu). Odstęp pomiędzy literami w tym paragrafie został powiększony. Nowe własności tła Przykład Tło pod...
- Selektory elementów CSS / Selektor dziecka
...że w arkuszu stylów strony została umieszczona następująca reguła: p > b { color: red } Dzięki temu, jeśli bezpośrednio 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 (nie powinno być czerwone) umieszczone wewnątrz p, ale i wewnątrz znacznika pochylenia. Natomiast to jest pogrubienie (powinno być czerwone) umieszczone bezpośrednio wewnątrz znacznika...
- Selektory elementów CSS / Ogólny selektor braci
...temu, jeśli wewnątrz tego samego znacznika (rodzica), będą znajdowały się znaczniki i oraz b, to te drugie uzyskają określone atrybuty: To jest akapit, wewnątrz którego znajduje się: pochylenie (nie powinno być czerwone), klawiatura (nie powinien być czerwony) oraz pogrubienie (powinno być czerwone)... następne pogrubienie (powinno być czerwone). A to jest pogrubienie (nie powinno być czerwone) wewnąrz pochylenia (nie powinno być czerwone). Tutaj kończy się akapit. Zwróć uwagę, że...
- Selektory pseudoklas CSS / Korzeń :root
...wymogu co do nazwy elementu-korzenia. Przykład :root Po wpisaniu w arkuszu stylów: :root p { color: red } a w dowolnym miejscu strony: <p>To jest akapit</p> powinniśmy otrzymać tekst koloru czerwonego: To jest akapit Pytania i odpowiedzi :root Co to jest "root" w CSS? W CSS termin root odnosi się do głównego elementu struktury dokumentu, czyli do korzenia drzewa dokumentu. Jest to punkt wyjścia dla stylów CSS, które mogą być zastosowane do całej strony. Jaki znacznik jest...
- Selektory pseudoklas CSS / Ostatnie dziecko :last-child
...nazwę znacznika rodzica. Przykład :last-child Po wpisaniu w arkuszu stylów: b:last-child { color: red } a w dowolnym miejscu strony: <p>To jest akapit, wewnątrz którego znajduje się <b>pierwsze pogrubienie (nie powinno być czerwone)</b> oraz <b>drugie pogrubienie (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 pogrubienie (nie powinno być czerwone) oraz drugie...
- Tekst CSS / Odstęp między wyrazami tekstu {word-spacing}
selektor { word-spacing: odstęp } Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "odstęp" należy podać konkretną wielkość odstępu między poszczególnymi wyrazami używając jednostek długości. Wpisanie "normal" przywróci wartość domyślną. Polecenie to pozwala ustalić odstęp pomiędzy wszystkimi poszczególnymi wyrazami w bloku. Dzięki temu wyrazy w linijkach mogą być bardziej...
- Tekst CSS / Odstęp między literami tekstu {letter-spacing}
selektor { letter-spacing: odstęp } Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "odstęp" należy podać konkretną wielkość odstępu między poszczególnymi literami używając jednostek długości. Wpisanie "normal" przywróci wartość domyślną. Polecenie to pozwala ustalić odstęp pomiędzy wszystkimi poszczególnymi literami w wyrazach bloku. Dzięki temu cały tekst w linijce może być...
- Pozycjonowanie CSS / Wyświetlanie {display}
...wyświetlony jako blok. Brat ("inline") Ten element zostanie wyświetlony jako blok. Tekst Przykład {display} To jest zwykły tekst To jest normalny akapit (wyświetlany w bloku). To jest zwykły tekst To jest akapit w linii. To jest zwykły tekst display: block display: block display: inline display: inline display: none display: none (obrazek nie został wyświetlony, pomimo że polecenie odpowiedzialne za jego wstawienie zostało umieszczone na stronie) <div style="display: list-item">...</div>...
- Dziedziczenie stylów CSS / Wymuszenie dziedziczenia {...: inherit}
...kolor. Ale jednocześnie chcielibyśmy zrobić jeden wyjątek: jeśli pogrubienie znajduje się wewnątrz pochylenia, to powinno mieć kolor taki jak cały akapit. Nie możemy zatem w prosty sposób usunąć koloru, bo wtedy utracilibyśmy go dla wszystkich elementów pogrubienia, a nie tylko w tym jednym, o który nam chodzi. Właśnie na taką okoliczność została stworzona wartość inherit, którą można przypisać do dowolnej cechy CSS. Wymusza ona powrót do standardowego zachowania wynikającego z...
Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanegoJeżeli nie odpowiada nam podstawowy wygląd menu, można go zmienić wykorzystując polecenia CSS. W tym celu w pliku menu.css należy wkleić np.: #menu0 { width: 200px; margin: 10px; padding: 0; } #menu0 dt { background-color: #888; color: #fff; font-weight: bold; text-align: center; cursor: pointer; margin: 10px 0 0 0; padding: 2px; } #menu0 dd { background-color: #eee; color: #000; border-width: 0 1px 1px 1px; border-style: solid; border-color: #888...