wstawianie strony - Kurs HTML i CSS
Selektory pseudoklas CSS / Pseudoklasy typu :first-of-type :last-of-type :only-of-type...> dt:last-of-type { font-style: italic } /* kursywa */ dl > dt:only-of-type { text-decoration: underline } /* podkreślenie */ a w dowolnym miejscu strony: <dl> <dt>Termin 1</dt><dd>Definicja 1</dd> <dt>Termin 2</dt><dd>Definicja 2</dd> <dt>Termin 3</dt><dd>Definicja 3</dd> </dl> <dl> <dt>Termin 1</dt><dd>Definicja 1</dd> </dl> na stronie powinniśmy otrzymać wykaz, w którym tekst pierwszego punktu będzie pogrubiony, a ostatniego - pochylony: Termin 1 Definicja 1 Termin 2 Definicja 2 Termin...
- Selektory pseudoklas CSS / Tylko do odczytu :read-only :read-write
...read-write Po wpisaniu w arkuszu stylów: input:read-only { border: 1px solid blue } input:read-write { border: 1px solid red } a w dowolnym miejscu strony: <form action="?"> <input type="text" value="Tylko do odczytu" readonly> <input type="text" value="Do odczytu i do zapisu"> </form> otrzymamy dwie tekstowe kontrolki formularza - pierwsza z niebieskim obramowaniem (zablokowana), a druga z czerwonym (odblokowana):
- 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...
- 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...
- 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.
- Obramowanie CSS / Zaokrąglenie obramowania {border-...-radius}
...Źródło: CSS Backgrounds and Borders Module Level 3 Zaokrąglone narożniki to bardzo ciekawy efekt wizualny, który może zwiększyć estetykę strony. Co ciekawe, element wcale nie musi mieć obramowania, aby miał zaokrąglone narożniki. Wystarczy jeśli będzie miał ustalone jakieś tło, aby efekt był widoczny na ekranie. Ale uwaga: tekst wewnątrz elementu nie zostanie zawinięty do zaokrąglonych rogów. Jeśli promień zaokrąglenia będzie zbyt duży, tekst wyjdzie na zewnątrz. Przy tworzeniu...
- Obramowanie CSS / Dekoracja przełamania obramowania {box-decoration-break}
...(domyślnie) Zdarza się, że na wydruku blok zostanie przełamany pomiędzy dwie kartki w taki sposób, że jego początek znajdzie się na końcu jednej strony, a koniec - na samym początku następnej. W takim przypadku standardowo na dole pierwszego fragmentu ani na górze drugiego nie będzie obramowania. Podobnie jeśli obramowanie zostanie przypisane do długiego elementu wyświetlanego w linii, tak że tekst się przełamie na końcu wiersza, przy prawym marginesie ani w następnej linijce przy lewym...
- Obramowanie CSS / Szerokość obramowania obrazkowego {border-image-width}
...jakby była wstawiona w tle. border-image-source: url(punkt.gif); border-image-slice: 15; border-image-width: 10px; border-width: 15px Z drugiej strony, ustalając szerokość tradycyjnego obramowania większą niż szerokość obramowania obrazkowego, możemy odsunąć grafikę krawędzi od zawartości tekstowej elementu - podobnie jak to ma miejsce w przypadku marginesu wewnętrznego. border-image-source: url(punkt.gif); border-image-slice: 15; border-width: 15px Dla porównania - tak wygląda ten sam...