wstawianie strony - Kurs HTML i CSS
Selektory pseudoklas CSS / Atrybut języka :lang...pozwala na bardziej inteligentny wybór - uwzględniając dziedziczenie języka określonego przez inne źródła, tj. nagłówek HTTP Content-Language, język strony, propagację atrybutu lang="..." przypisanego dla elementu 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)...
- Selektory pseudoklas CSS / Pierwsze dziecko :first-child
...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 pogrubienie (powinno być...
- Tekst CSS / Kolor tekstu {color}
...jako "kolor" należy podać definicję koloru. Polecenie pozwala ustalić dowolny kolor tekstu. Jeśli definiowane własności mają odnosić się do całej strony (np. kolor tekstu na całej stronie), można użyć selektora BODY lub HTML. Przykład {color} kolor red kolor #66AAFF kolor #69C kolor rgb(255,33,170) kolor rgb(25%,75%,75%) kolor systemowy Highlight Pytania i odpowiedzi {color} Która właściwość CSS służy do zmiany koloru tekstu elementu? Do zmiany koloru tekstu elementu w CSS...
- Czcionki CSS / Rodzaj czcionki {font-family}
...strona zostanie wyświetlona przy użyciu czcionki podobnej do zdefiniowanych, a nie domyślnej, która może zupełnie nie pasować do typografii naszej strony. Dlatego zawsze staraj się na końcu wpisywać rodzinę ogólną, do której należą czcionki, podane w pierwszej kolejności (najczęściej wykorzystuje się rodziny: serif lub sans-serif). Niestety, ponieważ w takim przypadku to przeglądarka automatycznie dobiera rodzaj czcionki, może się zdarzyć, że wybierze czcionkę, która niepoprawnie zapisuje...
- Marginesy CSS / Atrybuty mieszane marginesu {margin}
...Jak ustawić marginesy w CSS? Aby ustawić marginesy w CSS, można użyć właściwości margin i określić wartości dla górnej, prawej, dolnej i lewej strony marginesu. Na przykład: "margin: 10px 20px 10px 20px" ustawia marginesy 10 pikseli na górze i na dole oraz 20 pikseli po prawej i lewej stronie elementu. Co to jest "margin" w CSS? margin w CSS to właściwość określająca odstęp pomiędzy elementem a jego otoczeniem zewnętrznym. Może to być przestrzeń pomiędzy elementami lub między...
- Marginesy CSS / Górny margines wewnętrzny {padding-top}
...silver; margin: 1cm; padding: 5mm">...</p> Otrzymamy: To jest akapit z określonym marginesem zewnętrznym - 1cm (to ta odległość między brzegami strony (także sąsiadującymi elementami) a zewnętrznymi krawędziami szarego prostokąta). Natomiast margines wewnętrzny wynosi 5mm (to ta odległość między krawędziami szarego prostokąta a tekstem, który właśnie czytasz). Margines zewnętrzny leży na zewnątrz elementu (na zewnątrz szarego prostokąta), a margines wewnętrzny - wewnątrz. To jest...
- Marginesy CSS / Atrybuty mieszane marginesu wewnętrznego {padding}
...Aby ustawić margines wewnętrzny, czyli odstęp wewnątrz elementu, użyj właściwości padding i określ wartości dla górnej, prawej, dolnej i lewej strony marginesu wewnętrznego. Na przykład: "padding: 15px 20px 15px 20px" ustawia margines wewnętrzny o wymiarach 15 pikseli na górze i na dole oraz 20 pikseli po prawej i lewej stronie elementu.
- Pozycjonowanie CSS / Pozycja relatywna {position: relative}
...się wcześniej coś innego (tekst, grafika itp.), będzie to przykryte przez ten element. Należy przy tym pamiętać, że często ustawienie elementów strony zależy od rozdzielczości ekranu i rozmiarów okna przeglądarki! Przykład {position: relative} Szary prostokąt poniżej, który jest częściowo przykryty, przedstawia położenie spoczynkowe obrazka, poddanego pozycjonowaniu: position: relative; left: 50px; top: 45px. Dlatego obrazek ten jest oddalony od lewej krawędzi swojego położenia...
- Pozycjonowanie CSS / Pozycja ustalona {position: fixed}
...obliczana względem krawędzi okna przeglądarki (obszaru w którym znajduje się strona). Dodatkowo element taki jest nieruchomy podczas przewijania strony, przez co jest on przez cały czas widoczny na ekranie, dokładnie w tym samym miejscu. Daje to zbliżony efekt, jak nieruchome pojedyncze tło. Przykład {position: fixed} Przykład
- Drukowanie CSS / Blokada przełamania strony {page-break-inside}
...że będzie zbyt duży, aby się na niej zmieścić). Jest to przydatne, jeśli nie chcemy, aby np. wykaz albo tabela zostały przedzielone pomiędzy dwie strony. W takim przypadku lepiej żeby drukarka przełamała stronę trochę wcześniej, a element zostanie przeniesiony na następną kartkę. Przykład {page-break-inside} Jeśli to możliwe, drukuj wszystkie tabele na jednej kartce papieru: table { page-break-inside: avoid; }