bottom - Kurs HTML i CSS
Galeria zdjęć HTML / Skrypt galerii zdjęć...image: { maxWidth: '100%', maxHeight: '100%' }, progress: { position: 'absolute' }, caption: { position: 'absolute', bottom: 0, left: 0, boxSizing: 'border-box', width: '100%', padding: margin, color: '#fff', background: 'rgba(0, 0, 0, 0.5)', font: '15px sans-serif', textAlign: 'center' }, back: { left: margin }, forward: { right: margin }, close: { position: 'absolute', top: margin, right: margin, fontSize...
- 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 / 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...
- 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...
- 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...
- Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanego
...fff; background-color: #008; } #menu0 dl { position: absolute; border: 0; } #menu0 dl dd { position: relative; left: 151px; bottom: 22px; border-left: 1px solid #eee; border-right: 1px solid #aaa; } Aby ustawić kolejne menu otwierane obok siebie, należy wstawić kilka osobnych bloków <dl>...</dl>, a następnie wypozycjonować je w odpowiednim miejscu względem siebie: HTML Dla zielonych BODY i META Tekst Odsyłacze Tabele Multimedia Ramki Formularze CSS...
- 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...
- 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ć...