padding - Kurs HTML i CSS
Wykazy CSS / Odstęp wyróżnika wykazu {marker-offset}...marker-offset przez zespół reguł CSS interpretowanych praktycznie wszędzie: ul, li { list-style-type: none; display: block; margin: 0; padding: 0; } ul li { background: url(marker.gif) no-repeat left top; padding-left: 20px; } Pierwsza z reguł stylów powyżej usuwa domyślne formatowanie wykazu oraz jego punktów. Trzeba tutaj nadmienić, że z uwagi na różnice w interpretacji nie wszystkie z wymienionych poleceń formatujących w tej deklaracji jest wymagana we wszystkich...
- Selektory pseudoklas CSS / Łączenie selektorów
...position: absolute; color: #000; background-color: #eee; font-size: 10px; border-width: 1px 2px 2px 1px; border-style: solid; border-color: #888; padding: 1px 5px } Jeśli wskażesz ten odsyłacz myszką, powinien pojawić się zaraz za nim nowy element z napisem "Rollover". A oto bardziej zaawansowany przykład: div.przyklad_selektory5 > ul:first-child[dir="ltr"]:lang(pl) + p[title]:first-letter { color: red; font-weight: bold; font-size: larger } To jest blok, który posiada klasę...
- Tło CSS / Atrybuty mieszane tła {background}
...tradycyjny sposób (znacznik IMG). Przykład {background} Po wpisaniu w arkuszu stylów: *.obrazek { background: url(obrazek.jpg) no-repeat left top; padding-left: 110px } a następnie na stronie: <p class="obrazek">Po lewej stronie tego tekstu znajduje się obrazek, który... (itd.)</p> otrzymamy: Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie...
- Marginesy CSS / Załamywanie marginesów
...są załamywane. Trzeba wyraźnie rozróżnić, że proces załamywania dotyczy tylko i włącznie pionowych marginesów zewnętrznych, a nie wewnętrznych (padding). Przykład Po wpisaniu następującego kodu: <div style="margin-bottom: 20px">1</div> <div style="margin-top: 50px">2</div> na ekranie zobaczymy dwa bloki, pomiędzy którymi margines będzie wynosił 50px, a nie 70px (nie suma).
- Dobre praktyki / CSS Zorientowane Obiektowo
...może wyglądać na przykład tak: .Menu { background-color: white; } .Menu ul, .Menu li { display: block; list-style: none; margin: 0; padding: 0; } .Menu li { float: left; margin-right: 1em; } .Menu a { color: blue; text-decoration: none; } Kompozycja Zwróćmy uwagę, że typowy artykuł może zawierać informacje o: autorze - np. z jego imieniem, nazwiskiem i zdjęciem źródle - nazwa, logo i odnośnik Każdy z tych elementów można traktować jako osobny obiekt (zmiana...
- Dobre praktyki / Przykazania webmastera
...będzie możliwości sterowania szerokością takich wcięć czy odstępów. Do ustalania wcięć używaj własności CSS text-indent, a do odstępów - margin albo padding. Nie nadużywaj znacznika div ani span Do stylizacji możesz przecież wykorzystać znaczniki semantyczne, które już znajdują się w kodzie źródłowym - wstaw jeden element div, będący pojemnikiem całego obiektu, a potem korzystaj z selektora potomka w celu wystylizowania elementów, które zawiera obiekt. Wstawianie zbędnych znaczników nie...
- Komendy CSS3 / Tło i obramowanie CSS
...none Zastosowanie wszystkie elementy Dziedziczenie nie Procenty nie background-origin Pozycja początkowa tła Wartość <box> Inicjalizacja padding-box Zastosowanie wszystkie elementy Dziedziczenie nie Procenty nie background-position Pozycja tła Wartość <bg-position> Inicjalizacja 0% 0% Zastosowanie wszystkie elementy Dziedziczenie nie Procenty odnosi się do powierzchni pozycjonowania tła minus rozmiar obrazka tła background-repeat Powtarzanie tła Wartość...
Dla nauczycieli / Scenariusz lekcji informatyki dla liceum i technikum...marginesy, tapety, interakcje Czas trwania: 45 minut Cele szczegółowe Uczeń stosuje klasy CSS i przypisuje je do elementów HTML. Uczeń używa paddingów, ramek i marginesów. Uczeń stylizuje tło obrazkiem. Uczeń modyfikuje wygląd odsyłaczy w interakcji. Materiały Klasy selektorów CSS Ramki z tekstem CSS Marginesy strony CSS Tapeta CSS Kolor odsyłaczy CSS Przebieg 5 min - Powtórka z poprzedniej lekcji Przypomnienie struktury CSS i pliku *.css 10 min - Klasy CSS i ich...
- Obramowanie CSS / Atrybuty mieszane zaokrąglenia obramowania {border-radius}
...użyj właściwości border-radius i określ wartość promienia zaokrąglenia. Na przykład: <div style="border-radius: 10px; background-color: lightgray; padding: 20px">Treść</div> zaokrągli rogi <div> o promieniu 10 pikseli. Jak zaokrąglić rogi w zdjęciu? Aby zaokrąglić rogi w zdjęciu (<img>) w CSS, użyj właściwości border-radius i określ promień zaokrąglenia. Przykład: <img src="obraz.jpg" style="border-radius: 50%" alt="Zdjęcie"> zaokrągli rogi zdjęcia na pół obrazu, tworząc efekt...
- Rozmiary CSS / Blok obejmujący CSS
...tekstu rtl (od prawej do lewej) wszystko jest odwrotnie. W przeciwnym razie obejmujący blok jest tworzony przez krawędzie marginesu wewnętrznego (padding) przodka.