Formatujemy wygląd elementu "ul"
- Data publikacji
- Ostatnio edytowano
W poprzedniej części kursu CSS usunęliśmy domyślne cechy z elementu ul
, który tworzy strukturę naszego pionowego menu w kodzie HTML.
W tej części kursu zajmiemy się dodaniem do elementu ul
pewnych właściwości wyglądu, które pomogą nam utworzyć nasze docelowe pionowe menu CSS.
Naszym pierwszym krokiem będzie dodanie obramowania do elementu ul
, czyli dodanie do niego właściwości border:1px solid #CCC;
Właściwość border:1px solid #CCC;
spowoduje utworzenie obramowania po każdej stronie elementu ul
. Wspomniane obramowanie będzie wyróżniało się następującymi cechami:
1px
- szerokość obramowania będzie wynosiła 1 piksel.solid
- stylem obramowania będzie ciągła pojedyncza linia.#CCC
- kolorem obramowania będzie jeden z odcieni koloru szarego.
Od tej pory nasze pionowe menu CSS prezentuje się w następujący sposób:
- to jest element - li
- to jest element - li
- to jest element - li
- to jest element - li
Widząc elementy HTML, które zostały wyświetlone powyżej, możemy dojść do wniosku, że nasz element ul
jest nieco za szeroki, ponieważ po dodaniu do niego obramowania, zauważyliśmy granicę elementu ul
. Do określenia własnej szerokości dla elementu ul
wykorzystamy właściwość width:250px;
Właściwość width:250px;
spowoduje ustawienie wartości szerokości dla elementu ul
. W tym wypadku będzie ona wynosiła 250 pikseli.
A tak teraz prezentuje się nasze pionowe menu CSS:
- to jest element - li
- to jest element - li
- to jest element - li
- to jest element - li
Do reguły CSS, która zmienia wygląd elementu ul
i którą utworzyliśmy w poprzedniej części kursu CSS, należy dodać właściwości odpowiadające za obramowanie i szerokość elementu ul
, które poznaliśmy w tej części kursu CSS.
Cały poprawny zapis został przedstawiony poniżej:
ul {
list-style-type:none;
margin:0;
padding:0;
border:1px solid #CCC;
width:250px;
}
Dla ułatwienia, kod w istniejącej regule CSS, który jest nowy względem poprzedniej części kursu, będzie zaznaczany za pomocą wyróżnienia o kolorze żółtym.
Pełny kod HTML z tej części kursu CSS znajduje się pod spodem:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
ul {
list-style-type:none;
margin:0;
padding:0;
border:1px solid #CCC;
width:250px;
}
</style>
</head>
<body>
<ul>
<li>to jest element - li</li>
<li>to jest element - li</li>
<li>to jest element - li</li>
<li>to jest element - li</li>
</ul>
</body>
</html>
W następnej części kursu zajmiemy się formatowaniem wyglądu elementów li
.