border style - Kurs HTML i CSS
Menu w CSS / Poziome menu...ul a:link, ul a:visited { text-decoration: none; display: block; width: 80px; text-align: center; background-color: #ccc; color: #000; border: 2px outset #ccc; padding: 5px; } ul a:hover { border-style: inset; padding: 7px 3px 3px 7px; } Odnośniki zostały wyświetlone blokowo, aby można było ustalić jednakową szerokość wszystkich przycisków. Czcionki Tekst Tło Marginesy Obramowanie ul, ul li { display: block; list-style: none; margin: 0; padding: 0; } ul...
Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanego...bold; text-align: center; cursor: pointer; margin: 10px 0 0 0; padding: 2px; } #menu0 dd { background-color: #eee; color: #000; border-width: 0 1px 1px 1px; border-style: solid; border-color: #888; margin: 0; padding: 1px 5px; } #menu0 dd.active { font-weight: bold; } W wyróżnionych miejscach wpisano zdefiniowany uprzednio identyfikator menu. Teraz w nagłówku dokumentu HTML (<head>...</head>), na którym wstawione jest menu, wystarczy wstawić odwołanie do...
- Obramowanie CSS / Atrybuty mieszane zaokrąglenia obramowania {border-radius}
(CSS 3 - interpretuje Internet Explorer 9, Firefox 4, Opera, Chrome) selektor { border-radius: wartości atrybutów } Selektorem może być dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "wartości atrybutów" należy wpisać kolejne wartości zaokrąglenia rozdzielone spacjami (w kolejności: górne-lewe, górne-prawe, dolne-prawe, dolne-lewe). Polecenie pozwala ustalić kilka wartości promieni zaokrąglenia jednocześnie. Możliwe jest przy tym podanie...
- Pozycjonowanie CSS / Wyświetlanie {display}
...list-item">...</div> <div style="display: list-item">...</div> <div style="display: list-item">...</div> <div style="display: table; border-spacing: 1px; border: 1px solid black"> <div style="display: table-row"> <div style="display: table-cell; border: 1px solid gray">komórka1</div> <div style="display: table-cell; border: 1px solid gray">komórka2</div> </div> <div style="display: table-row"> <div style="display: table-cell; border: 1px solid gray">komórka3</div> <div...
- Menu w CSS / Menu z nagłówkami
...dl a:link, dl a:visited { display: block; width: 186px; text-decoration: none; background-color: #ccc; color: #000; padding: 5px; border: 2px outset #ccc; } dl a:hover { border-style: inset; padding: 7px 3px 3px 7px; } CSS Czcionki Tekst Tło Marginesy Obramowanie dl, dt, dd { display: block; margin: 0; padding: 0; } dl { width: 200px; padding: 1px 2px; background-color: #9ce; border: 3px double #28e; } dt { padding: 7px 15px...
- 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...
- Menu w CSS / Pionowe menu
...200px; } ul a:link, ul a:visited { display: block; width: 186px; text-decoration: none; background-color: #ccc; color: #000; padding: 5px; border: 2px outset #ccc; } ul a:hover { border-style: inset; padding: 7px 3px 3px 7px; } I jak Ci się podoba? A to wszystko bez jakiejkolwiek zmiany wcześniej ustalonego kodu HTML! Krótkie wyjaśnienie użytych deklaracji CSS: Na początku wstawiamy znaną już regułę, która usuwa domyślne formatowanie listy. Ustalamy szerokość menu, aby nie...
- Tryb Quirks / Co zmienia przejście z trybu Quirks do trybu zgodności ze standardami?
...stylów nakładają się lub są ze sobą sprzeczne. Pozioma pozycja i szerokość niepływających elementów blokowych jest ustalana przez własności margin, border, padding i width. Suma tych wartości (z lewej i z prawej strony) równa się szerokości bloku, który zawiera dany element; szerokość jest dziedziczona z obejmującego bloku. Nie można zmienić szerokości obejmującego (zewnętrznego) bloku poprzez zmianę wartości margin, border, padding lub width dla bloku wewnętrznego. Kiedy określamy wartości...
- Aktualizacja / System newsów
...14px; /* rozmiar czcionki */ text-align: left; /* wyrównanie tekstu: left, right, center, justify */ padding: 5px; /* margines wewnątrz */ border-width: 1px; /* grubość obramowania */ border-style: solid; /* styl obramowania: solid, dashed, dotted, double, groove, ridge, inset, outset */ border-color: gray; /* kolor obramowania */ font-weight: bold; } .news dt, .news dt a:link, .news dt a:visited { background: silver; /* tło tytułu */ color: #505050; /* kolor tytułu...
- Rozmiary CSS / Szerokość i marginesy automatyczne
...swoje proporcje. 3. Elementy blokowe, nie-zastępowane Przykład: DIV i inne. Elementy takie muszą spełniać następujące równanie: 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = szerokość bloku obejmującego Jeżeli 'width' nie ma przypisanej wartości auto, a suma 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' (plus 'margin-left' lub 'margin-right' nieposiadające wartości auto)...