Szövegdoboz készítése
2012.12.27. 19:22
Első lépés, hogy kigondoljuk milyen legyen a kinézet. Második lépés, hogy értsünk kicsit a css-hez és kigondoljuk a megvalósítását. Harmadik lépés pedig a html kód. Nézzük.
HTML kód:
<html>
<div id="elso">
Ide jön a szöveged!</div>
<p>
</html>
Itt semmit sem kell átalakítanod, majd a div nevét, ha akarod, de szerintem jó lesz ez. Ezután jön a css kód, amibe megformázzuk az egész szövegdobozt.
Példa:
#elso {
font-family: georgia, serif; /*betűtípus*/
font-size: 14px; /*betű mérete*/
color: #000000; /*betű színe*/
font-style: italic; /*betű stílusa, itt dőlt*/
font-weight: normal; /*vastag, vagy sima betűk*/
font-variant: normal; /*minden betű nagy, de itt normál*/
text-align: justify; /*szöveg igazítása, itt sorkizárt*/
letter-spacing: 1.2px; /*térköz*/
line-height: 22px; /*sorok távolsága*/
}
Innentől már könnyű az egészet átirni. :) Ez a demó:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus mi tristique ante imperdiet gravida. Fusce nulla lorem, accumsan vel lobortis vitae, rutrum et leo. Aliquam sapien leo, aliquet eu eleifend quis, elementum id turpis. Nunc purus massa, convallis ut faucibus id, varius vitae libero. Cras tempor lacinia massa, sit amet commodo ligula suscipit ut. Proin sagittis vulputate pharetra. Mauris felis lorem, dictum non sollicitudin vitae, dictum sit amet risus. In hac habitasse platea dictumst. Curabitur ac varius elit. Quisque vulputate, augue vel mollis porta, risus orci molestie orci, ac porttitor lorem leo quis elit. Donec eget metus vitae purus imperdiet fermentum. Quisque velit dolor, scelerisque et porta sit amet, mattis aliquet odio.
|