style border - Kurs HTML i CSS
Menu w CSS / Poziome menu...tego, tak jak poprzednio, usuniemy zbędne domyślne formatowanie, które w tym przypadku tylko by przeszkadzało: ul, ul li { display: block; list-style: none; margin: 0; padding: 0; } ul li { display: inline; white-space: nowrap; } Efekt: Czcionki Tekst Tło Marginesy Obramowanie Dodatkowo blokujemy zawijanie tekstu (white-space: nowrap), aby w przypadku gdy linki nie zmieszczą się w jednej linii, przełamanie wiersza nastąpiło pomiędzy nimi, a nie wewnątrz nich. Zalety...
Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanego...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 utworzonego właśnie...
- Obramowanie CSS / Atrybuty mieszane zaokrąglenia obramowania {border-radius}
...Jak zaokrąglić DIV CSS? Aby zaokrąglić rogi <div> w CSS, 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">...
- Pozycjonowanie CSS / Wyświetlanie {display}
...miał być wyświetlony, jest widoczne puste miejsce. Działanie "display: run-in" jest bardziej skomplikowane, dlatego posłużę się przykładem: <div style="display: run-in"> Ten element zostanie wyświetlony w linii w ramach brata. </div> <div> Brat ("block") </div> <br> <div style="display: run-in"> Ten element zostanie wyświetlony jako blok. </div> <span>Brat ("inline")</span> <br><br> <div style="display: run-in"> Ten element zostanie wyświetlony jako blok. </div> Tekst Na ekranie...
- Menu w CSS / Menu z nagłówkami
...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; font-weight: bold; font-size: larger...
- Obramowanie CSS / Szerokość obramowania {border-...-width}
...specjalnego 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
- Menu w CSS / Pionowe menu
...zrobić, to usunąć wyróżniki punktów wykazu (tzw. markery) oraz zniwelować niepotrzebny margines z lewej strony: ul, ul li { display: block; list-style: none; margin: 0; padding: 0; } W efekcie uzyskamy: Czcionki Tekst Tło Marginesy Obramowanie W niektórych przeglądarkach nie jest konieczne wstawienie wszystkich powyższych deklaracji, jednak tylko taki zestaw właściwie gwarantuje uzyskanie zamierzonego efektu w każdych warunkach. Teraz mamy już przygotowany teren do właściwej...
- Tryb Quirks / Co zmienia przejście z trybu Quirks do trybu zgodności ze standardami?
...do bloku "pojemnika". Jeśli zarówno lewy jak i prawy margines jest ustalony jako auto, ich wartości stają się równe. Przykład <div>1</div> <div style="width: 50%; margin-left: 0">2</div> <div style="width: 50%; margin-right: auto">3</div> <div style="width: 50%; margin-left: auto">4</div> <div style="width: 50%; margin-left: auto; margin-right: auto">5</div> Pierwszy blok jest wyświetlany tak samo w trybie zgodności jak i w Quirks - szerokość przyjmuje wartość 100% a marginesy zero...
- Aktualizacja / System newsów
...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 */ text-decoration: none; } /* Treść */ .news dd...
- Rozmiary CSS / Szerokość i marginesy automatyczne
...do brakującej szerokości bloku obejmującego, wynikającej z mniejszej wartości sumy pozostałych składników równania. Przykład: Po wpisaniu: <div style="width: 600px"> <div style="margin-left: auto; border-left: 5px solid red; padding-left: 10px; width: 400px; padding-right: 10px; border-right: 5px solid red; margin-right: 20px">...</div> </div> powinniśmy otrzymać na ekranie blok, którego lewy margines wynosi: 600 - 5 - 10 - 400 - 10 - 5 - 20 = 150 pikseli UWAGA! W trybie Quirks...