bottom - Kurs HTML i CSS
Oprawa graficzna / "Duszki" CSS...{ display: block; list-style: none; margin: 0; padding: 0; line-height: normal; font-size: 12px; } ul { float: left; width: 100%; border-bottom: 1px solid #365; padding-left: 20px; } ul li { float: left; background: url(obrazek.gif) no-repeat -240px -25px; margin-right: 5px; } ul a:link, ul a:visited { text-decoration: none; display: block; font-weight: bold; background: url(obrazek.gif) no-repeat 100% 0; color: #365; padding: 5px 15px 5px 5px; margin-left: 10px; } ul...
- Dobre praktyki / Przykazania webmastera
...rozmiar arkusza CSS, co przyspiesza ładowanie strony. Używaj atrybutów mieszanych - np. margin zamiast zestawu: margin-top, margin-right, margin-bottom, margin-left. Nie dopisuj jednostki do wartości zero, ponieważ nie jest tam wymagana. Zero to zawsze zero - bez względu w jakich jednostkach. Jeśli nie jest to konieczne, nie łącz selektora typu z innymi. Zamiast div.klasa powinno wystarczyć samo .klasa, chyba że faktycznie zależy Ci na tym, aby zastosować odrębną stylizację dla...
Przeglądarka zdjęć...wystylizować przeglądarkę zdjęć, można do niej dołączyć np. taki arkusz CSS: .zdjecia { text-align: center; } .zdjecia_menu { margin-bottom: 10px; font-size: 10px; } .zdjecia_menu input, .zdjecia_menu select { font-size: 10px; } .zdjecia_opis { margin-top: 10px; text-align: justify; } Najwygodniej będzie zapisać go w osobnym pliku z rozszerzeniem *.css - np. przegladarka_zdjec.css i osadzić w nagłówku dokumentu za pomocą znacznika: <link rel="stylesheet...
- Menu drzewiaste / Skrypt menu drzewiastego
...{ display: block; margin-left: 0; padding-left: 0; } ul.tree ul { display: block; margin-left: 0; padding-left: 0; margin-top: 0; margin-bottom: 0; } ul.tree li { display: block; list-style-type: none; padding-left: 20px; background-image: url("document.gif"); background-position: left top; background-repeat: no-repeat; } ul.tree li.closed { background-image: url("closed.gif"); background-position: left top; background-repeat: no-repeat; } ul.tree li.opened...
- Obramowanie CSS / Styl obramowania {border-...-style}
Styl górnego obramowania: selektor { border-top-style: styl } Styl dolnego obramowania: selektor { border-bottom-style: styl } Styl lewego obramowania: selektor { border-left-style: styl } Styl prawego obramowania: selektor { border-right-style: styl } We wszystkich przypadkach selektorem może być dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "styl" należy wpisać: none - brak obramowania Przykład border-top-style: none hidden - ukryte...
- Obramowanie CSS / Szerokość obramowania {border-...-width}
Szerokość górnego obramowania: selektor { border-top-width: szerokość } Szerokość dolnego obramowania: selektor { border-bottom-width: szerokość } Szerokość lewego obramowania: selektor { border-left-width: szerokość } Szerokość prawego obramowania: selektor { border-right-width: szerokość } We wszystkich przypadkach Selektorem może być dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "szerokość" należy podać: thin - cienkie obramowanie...
- Pozycjonowanie CSS / Pozycja ustalona {position: fixed}
...wartość - odległość od lewej krawędzi okna top: wartość - odległość od górnej krawędzi okna right: wartość - odległość od prawej krawędzi okna bottom: wartość - odległość od dolnej krawędzi okna Wyraz "wartość" oznacza konkretną odległość od podanej krawędzi okna przeglądarki. Należy ją wpisać używając jednostek długości. Wartość ujemna oznacza przesunięcie w przeciwną stronę. Podanie auto oznacza położenie automatyczne. Można oczywiście łączyć parametry, np. left: 1cm; top: -10px...
- Drukowanie CSS / Kontekst strony @page
@page { cecha: wartość } Jako cecha i wartość można wstawić jedną lub więcej deklaracji: marginesy strony: margin, margin-top, margin-right, margin-bottom, margin-left rozmiar papieru: size W deklaracjach kontekstu strony nie wolno używać jednostek "em" (wysokość czcionki) ani "ex" (wysokość małej litery), ponieważ nie istnieje w nim pojęcie czcionki. Kontekst strony definiuje wygląd samej strony - np. arkusza papieru na wydruku - a nie jej zawartości. Można w ten sposób ustawić...
- Układ elastyczny CSS / Marginesy automatyczne
selektor { margin-top: auto } selektor { margin-right: auto } selektor { margin-bottom: auto } selektor { margin-left: auto } selektor { margin: auto } Selektorem mogą być dzieci kontenera elastycznego. Ustawiając wybrany margines na wartość automatyczną sprawimy, że wypełni on wolną przestrzeń pozostałą w kontenerze. Dzięki temu w bardzo prosty sposób możemy ustawić kilka bloków w jednej linii - część przy lewej krawędzi, a niektóre przy prawej. Przykład {display: flex, margin-left: auto}...
- Menu w CSS / Pionowe menu
...margin: 0; padding: 0; } ul { width: 200px; padding: 2px 2px 1px 2px; background-color: #9ce; border: 3px double #28e; } ul li { border-bottom: 1px solid #9ce; } ul a:link, ul a:visited { display: block; width: 176px; text-decoration: none; padding: 7px; font-weight: bold; background-color: #27c; color: #def; border-left: 10px solid #25b; } ul a:hover { width: 166px; background-color: #28e; color: #fff; border-left: 20px solid #26d; } Usuwamy domyślne formatowanie...