Tworzymy blok DIV i nadajemy mu wygląd

Danielos · 2010-05-28 14:36:17

Tworzymy blok DIV

Utworzenie elementu blokowego <div> jest bardzo proste - wystarczy w sekcji <body> dokumentu HTML wpisać znaczniki <div> i między nimi umieścić treść, która powinna być wyświetlona wewnątrz bloku (może to być zarówno tekst, jak i obrazek, a nawet inne elementy blokowe: <div> czy <span>).

------------------------------------------------
01.<div>
02. Przykładowa treść
03.</div>
------------------------------------------------

Po otwarciu strony w przeglądarce nasz blok zostaje wyświetlony.

Nadajemy wygląd blokowi

Aby stworzonemu przez nas blokowi nadać odpowiedni wygląd (kolor tła oraz obramowanie), musimy zastosować style CSS.

1. Najpierw warto w znaczniku bloku <div> umieścić identyfikator, czyli atrybut id z przypisaną do niego dowolną nazwą.

------------------------------------------------
<div id="blok1">
Przykładowa treść
</div>
------------------------------------------------

Dzięki temu będziemy mogli stworzyć definicję stylów, która zostanie zastosowana wyłącznie do tego pojedynczego bloku, a nie do wszystkich znajdujących się na stronie znaczników <div>.

2. Teraz możemy już w sekcji nagłówkowej (<head>), pomiędzy znacznikami <style type="text/css"> oraz </style>, umieścić definicję stylów dla naszego bloku. W tym celu wpisujemy znak krzyżyka oraz identyfikator przypisany do atrybutu id w naszym bloku <div>, a następnie w nawiasach klamrowych wpisujemy odpowiednie właściwości CSS.

------------------------------------------------
<style type="text/css">
#blok1 {
background-color: yellow;
border: 2px solid red;
padding: 3px;
}
</style>
------------------------------------------------

3. Za pomocą właściwości o nazwie background-color ustalamy kolor tła naszego bloku (na przykład yellow, czyli żółty).

4. Właściwość border pozwala na ustalenie grubości, stylu oraz koloru obramowania. Aby na przykład nadać naszemu blokowi obramowanie o grubości 2 pikseli, będące linią ciągłą o kolorze czerwonym, jako wartość własności podajemy 2px solid red.

5. Jeśli w naszym bloku będziemy chcieli umieścić tekst, warto ustawić wewnętrzne marginesy. Dzięki temu tekst nie będzie stykał się z obramowaniem. Wewnętrzne marginesy określamy, przypisując ich szerokość (w pikselach) do właściwości padding.

>Przejdź do następnego artykułu: http://www.centrumos.pun.pl/viewtopic.php?id=71

Danielos
Więcej znajdziecie na stronie KŚ Ekspert: www.ks-ekspert.pl

Ogłoszenie

#1 2010-05-28 14:36:17

Tworzymy blok DIV i nadajemy mu wygląd

Stopka forum