padding - Kurs HTML i CSS
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ść...
- 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.
Indeks, wyszukiwarka / Wygląd...wygląd indeksu, można go zmienić wykorzystując polecenia CSS. W tym celu w pliku indeks.css należy wkleić np.: #indeks { width: 300px; padding: 10px 0; background: #ccc; border: 2px outset #aaa; text-align: center; margin: 1em auto; } #indeks input.text { width: 290px; } #indeks select { width: 100%; margin: 2px 0 10px 0; } #indeks input.button { width: 100px; margin-left: 5px; margin-right: 5px; } W wyróżnionych miejscach wpisano identyfikator...