zrobić style - Kurs HTML i CSS
Selektory pseudoklas CSS / Pseudoklasy typu :first-of-type :last-of-type :only-of-type...terminów (DT) i definicji tych terminów (DD). Chcielibyśmy zmienić sposób formatowania tylko pierwszej definicji listy. Oczywiście można to zrobić nadając mu klasę. Nie jest to jednak najlepsze rozwiązanie, ponieważ niepotrzebnie zwiększa rozmiar dokumentu, a przy tym jeśli w przyszłości zrezygnujemy z takiego formatowania (lub jedna ze skórek nie będzie go wymagać), zbędna klasa zacznie zaśmiecać kod. Jednocześnie nie możemy się posłużyć selektorem pierwszego dziecka, gdyż pierwszym...
Zareklamuj się tutaj za darmo...głównej Kursu HTML! Wystarczy, że umieścisz u siebie poniższy obrazek (wraz z linkiem): Nie trzeba kopiować żadnego pliku. Jedyne co musisz zrobić, to wkleić na swojej stronie następujący kod: <a href="https://www.kurshtml.edu.pl"><img src="https://www.kurshtml.edu.pl/reklama/button.gif" alt="Kurs HTML - darmowe szkolenie: tworzenie stron internetowych" title="Kurs HTML - darmowe szkolenie: tworzenie stron internetowych" style="border: 0; width: 88px; height: 31px"></a> Możliwa jest...
- CSS dla zielonych / Arkusz stylów CSS
...arkuszy stylów na stronach internetowych, zobacz rozdziały: Wewnętrzny arkusz stylów, Zewnętrzny arkusz stylów. Pytania i odpowiedzi Jak zrobić style w CSS? W tym celu można się posłużyć edytorem CSS albo jeszcze lepiej edytorem HTML z wbudowaną obsługą również języka CSS. Utworzone style zapisujemy w dowolnym pliku z rozszerzeniem *.css, który stanowi tzw. arkusz stylów, a następnie dołączamy go do dokumentu HTML [zobacz: Wstawienie arkusza stylów]. Czym są i do czego służą...
- CSS dla zielonych / Wyrównanie tekstu CSS {text-align}
...akapitach. Dzięki temu będzie on bardziej czytelny dla użytkownika. W pojedynczym dokumencie HTML może się znajdować wiele oddzielnych akapitów. Co zrobić, aby tekst w każdym z nich był ułożony tak samo? Dzięki możliwościom jakie dają style CSS, nie musimy tego robić dla każdego akapitu osobno. Wystarczy że w arkuszu CSS wpiszemy następującą regułę stylów: p { text-align: wyrównanie; } Dzięki temu tekst we wszystkich akapitach na stronie zostanie wyrównany w określony sposób: left...
- Selektory pseudoklas CSS / Pseudoklasy cykliczne :nth-child :nth-last-child :nth-of-type :nth-last-of-type
...liczby przed n można pominąć: selektor:nth-child(-n) { cecha: wartość } Jawne oznaczanie liczby A dodatnim znakiem nie jest wymagane, ale można to zrobić: selektor:nth-child(+2n) { cecha: wartość } Białe znaki (np. spacje) są dozwolone po otworzeniu i przed zamknięciem nawiasu selektora: selektor:nth-child( odd ) { cecha: wartość } Można je również wstawiać przed i po znaku sumy bądź różnicy we wzorze: selektor:nth-child(-2n + 10) { cecha: wartość } Białe znaki są jednak niedozwolone...
- Dobre praktyki / CSS Zorientowane Obiektowo
...stylizację zarówno z klasy Information (np. tekst ujęty w ramkę) jak i Important (np. czerwony tekst albo wytłuszczenie). Przesłanianie Co zrobić, jeśli recenzja - szczególny przypadek ogólnego artykułu - ma wyglądać jednak nieznacznie inaczej od swojego pierwowzoru (klasy bazowej)? Wybrane deklaracje z klasy bazowej można przesłonić (ang. override), przypisując im zmienione wartości w klasie pochodnej. Na przykład: .Article { color: black; background-color: white...
- Selektory pseudoklas CSS / Łączenie selektorów
...własności selektorów CSS. Jak się można było przekonać, rodzajów selektorów jest bardzo wiele - każdy przeznaczony do innego celu. Co jednak zrobić, jeżeli potrzebujemy w jednej regule stylu zastosować kilka selektorów prostych? Czy jest to w ogóle możliwe? Oczywiście, że tak. Wystarczy po prostu wpisać je jeden po drugim (bez żadnych odstępów) w następującej kolejności: selektor typu lub selektor uniwersalny selektory atrybutów, selektor identyfikatora, selektor klasy lub...
- Tekst CSS / Transformacja tekstu {text-transform}
...transformacji tekstu, takiej jak zmiana wszystkich liter na wielkie litery, małe litery lub pierwsze litery słów na wielkie litery. Jak zrobić duże litery CSS? Aby przekształcić tekst na duże litery w CSS, możesz użyć właściwości text-transform i ustawić jej wartość na uppercase. Na przykład: <p style="text-transform: uppercase">...</p>. To spowoduje, że wszystkie litery w tekście będą wielkie.
Menu rozwijane, otwierane, wysuwane / Pozycja absolutna...przy jego rozwijaniu elementy poniżej są przesuwane w dół. Można temu zapobiec określając odpowiednią pozycję absolutną bloku. Oczywiście można to zrobić bezpośrednio dodając odpowiednie deklaracje CSS. Jednak trzeba przewidzieć, co się stanie, jeśli przeglądarka użytkownika nie będzie obsługiwać JavaScript. Samo menu nadal będzie funkcjonalne pod względem nawigacji, tzn. jego elementy (odsyłacze) będą dostępne, ale oczywiście funkcja rozwijania nie będzie działać. Jest to jednak sytuacja...
- Wykazy CSS / Odstęp wyróżnika wykazu {marker-offset}
...nas odstęp pomiędzy wyróżnikami wykazu a treścią poszczególnych punktów. Jeżeli chcemy dodatkowo ustalić margines z lewej strony wykazu, możemy to zrobić dodając deklarację margin-left do elementu ul (lub ewentualnie li). Analogicznie można dodać margines przed/po całym takim wykazem, oddzielający go od sąsiadującej treści, czy nawet odstępy pomiędzy poszczególnymi punktami wykazu. Warto zauważyć, że ten sposób pozwala również dokładnie określić pionową pozycję markera, co przy...