Forum tylko o oprogramowaniu!
Strony: 1
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
Offline
Strony: 1