stronie - Kurs HTML i CSS
Selektory pseudoelementów CSS / Co to są pseudoelementy CSS?...struktury dokumentów - takie jak XHTML czy HTML - nie dostarczają mechanizmów dostępu do pewnych specyficznych elementów występujących na każdej stronie. Na przykład nie można wprost odnieść się do pierwszej litery ani pierwszej linii w akapicie. Tymczasem często zachodzi potrzeba ich specjalnego wystylizowania. Obejmowanie pierwszej litery w każdym akapicie znacznikiem <span>...</span> jest nieoptymalne i czasochłonne. Z pomocą przychodzą pseudoelementy CSS, które pozwalają odnieść się...
- Selektory pseudoklas CSS / Odsyłacz odwiedzony :visited
...się tylko do odsyłaczy, w regule stylu można pominąć selektor elementu a: :visited { cecha: wartość } Przykład :visited Jeżeli byłeś już na stronie głównej organizacji W3C, to ten odsyłacz powinien być pogrubiony.
- Selektory pseudoklas CSS / Jedyne dziecko :only-child
...ale tylko 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 / Negacja :not
...elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Wyobraźmy sobie sytuację, kiedy chcemy zmienić kolor całego tekstu na stronie z wyjątkiem np. tabelek. Moglibyśmy to zrobić, przypisując najpierw określony kolor całemu tekstowi, a następnie przywracając kolor domyślny wszystkim tabelom. Łatwiej będzie jednak takie działanie połączyć w pojedynczym selektorze negacji. Jeszcze ciekawsze efekty możemy uzyskać poprzez połączenie negacji z bardziej złożonymi selektorami...
- Czcionki CSS / Rodzaj czcionki {font-family}
...{font-family} Co robi "font-family"? Właściwość font-family w CSS definiuje rodzaj czcionki, który ma być używany do wyświetlania tekstu na stronie. Można podać listę nazw rodzajów czcionek, aby przeglądarka wybrała pierwszą dostępną opcję na liście lub zastąpiła ją innym rodzajem czcionki, jeśli wybrana nie jest dostępna. Jak ustawić rodzaj czcionki w CSS? Rodzaj czcionki w CSS można ustawić za pomocą właściwości font-family, która określa preferowany rodzaj czcionki lub listę...
- Tekst CSS / Kolor tekstu {color}
...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 służy właściwość color. Możesz podać...
- Tło CSS / Gradient liniowy {background: linear-gradient repeating-linear-gradient}
...nim można utworzyć tło, w którym określone barwy będą łagodnie przechodzić pomiędzy sobą. Wcześniej jedyną możliwością wstawienia takiego efektu na stronie WWW było przygotowanie pliku graficznego i umieszczenia go jako tło obrazkowe. Jest to jednak rozwiązanie nieco kłopotliwe, gdyż każdą zmianę trzeba było przygotowywać w programie graficznym. Do tego taki plik graficzny z zapisanym gradientem mógł mieć niemałe rozmiary, niepotrzebnie wydłużając czas wczytywania strony w przeglądarce...
- Marginesy CSS / Górny margines wewnętrzny {padding-top}
...1cm) Rzeczywiście w wielu przypadkach, praktycznie nie można ich odróżnić, np.: Dla tego akapitu został określony margines wewnętrzny po lewej stronie, który wygląda tak samo, jak zwykły margines (margin). Aby zrozumieć, jaka jest różnica pomiędzy zwykłym a wewnętrznym marginesem, spójrz na poniższy przykład: Po wpisaniu: <p style="background-color: silver; margin: 1cm; padding: 5mm">...</p> Otrzymamy: To jest akapit z określonym marginesem zewnętrznym - 1cm (to ta odległość między...
- Marginesy CSS / Atrybuty mieszane marginesu wewnętrznego {padding}
...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 / Atrybuty mieszane obramowania {border}
...można posłużyć się klasą selektorową, tzn. w arkuszu stylów wpisujemy np.: *.podkreslenie { border-bottom: 2px #f80 solid } a następnie na stronie: <span class="podkreslenie">...</span> Zagnieżdżanie obramowania <div style="border: solid red 3px"> <div style="border: solid green 3px"> <div style="border: solid blue 3px"> Potrójnie zagnieżdżone obramowanie </div> </div> </div> Potrójnie zagnieżdżone obramowanie Pytania i odpowiedzi {border} Jak zrobić obramowanie w...