solid - Kurs HTML i CSS
Obramowanie CSS / Atrybuty mieszane obramowania {border}...mogą dotyczyć różnych własności. Dzięki temu możemy uniknąć pisania długich deklaracji, np. zamiast wpisywać: border-width: medium; border-style: solid; border-color: blue wystarczy podać: border: medium solid blue a otrzymamy ten sam efekt. Przy tworzeniu obramowania możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj. ✅ Rozpocznij konfigurację obramowania Przykład {border} border-top: thick double green border: medium solid blue Podkreślenie tekstu Ciekawym...
- Menu w CSS / Poziome menu
...list-style: none; margin: 0; padding: 0; } ul { position: absolute; } ul li { float: left; border-width: 0 1px 1px 1px; border-style: solid; border-color: transparent #25b #25b #9ce; } ul a:link, ul a:visited { text-decoration: none; display: block; width: 95px; text-align: center; padding: 5px 0; font-weight: bold; background-color: #27c; color: #def; border-top: 10px solid #25b; } ul a:hover { background-color: #28e; color: #fff; border-top: 20px solid #26d; }...
- Pozycjonowanie CSS / Wyświetlanie {display}
...<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 style="display: table-cell; border...
- Menu w CSS / Menu z nagłówkami
...{ padding: 7px 15px; font-weight: bold; font-size: larger; background-color: #25b; color: #9ce; text-align: right; border-right: 20px solid #26d; margin-top: 1px; } dd { border-top: 1px solid #9ce; } dl a:link, dl a:visited { display: block; width: 176px; text-decoration: none; padding: 7px; font-weight: bold; background-color: #27c; color: #def; border-left: 10px solid #25b; } dl a:hover { width: 166px; background-color: #28e; color: #fff...
Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanego...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 utworzonego właśnie...
- Aktualizacja / System newsów
...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 */ text-decoration: none; } /* Treść */ .news dd...
- Menu w CSS / Pionowe menu
...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 listy...
- Obramowanie CSS / Szerokość obramowania {border-...-width}
...generatora zamieszczonego tutaj. ✅ Rozpocznij konfigurację obramowania Przykład {border-top-width} border-top-width: 5mm; border-top-style: solid border-top-width: thin; border-top-style: solid border-top-width: medium; border-top-style: solid border-top-width: thick; border-top-style: solid
- Obramowanie CSS / Atrybuty mieszane szerokości obramowania {border-width}
...ze specjalnego generatora zamieszczonego tutaj. ✅ Rozpocznij konfigurację obramowania Przykład {border-width} border-width: 2mm; border-style: solid border-width: thin thick; border-style: solid border-width: thin thick medium; border-style: solid border-width: thin medium thick 3mm; border-style: solid
- Obramowanie CSS / Atrybuty mieszane koloru obramowania {border-color}
...ze specjalnego generatora zamieszczonego tutaj. ✅ Rozpocznij konfigurację obramowania Przykład {border-color} border-color: red; border-style: solid border-color: red blue; border-style: solid border-color: red blue green; border-style: solid border-color: red blue green #eb3; border-style: solid