HTML DIV Tutorial

January 30

Den <div> tagg i HTML är den generiska sätt att bryta dina webbsidor i sektioner eller \ "divisioner. \" Att använda <div> tag till sin fulla verkan, du måste kombinera det med \ "id \" eller \ "class \" attribut, som gör att du kan ge varje <div> ett unikt namn, och sedan använda CSS för att göra varje <div> se precis som du vill. Använda <div> tag definitivt faller under rike avancerad HTML-kodning, men med lite övning, kommer du förmodligen att upptäcka att <div> är det verktyg du behöver för att skapa någon typ av sida som du vill.

Syntax och namngivning

De <div> tag funktioner som de flesta andra taggar i HTML: den använder en starttagg, <div>, och en sluttagg, </ div>. Du kan namnge enskilda uppsättningar av <div> taggar vad du vill använda \ "id \" och \ "class \" attribut så här:

Skillnaden mellan \ "id \" och \ "class \" är att det bara kan finnas en id per sida, men det kan vara så många klasser som du vill. Så medan dina sidor kanske bara har en sidofältet kan de ha en mängd olika lådor med artiklar i dem. Och kom ihåg, du kan namnge ids och klasser vad du vill; Du kan ringa sido \ "bigtallsectionontheright \" om du verkligen vill.

Block vs. Inline

<Div> taggar är \ "blockera \" element, vilket innebär att varje gång du skapar en <div>, existerar det på sin egen linje som standard. Inline-element, å andra sidan, kan som standard existerar på samma linje som något annat. Inline-versionen av <div> kallas <span>. In-line element kan gå in blockera element, men det kan inte vara tvärtom; du kan inte hålla <span> taggarna runt en <div> blocket, till exempel.

CSS

Kombinera <div> taggar med dina stilmallar är där du verkligen kan börja att anpassa. Cascading Style Sheets (eller CSS), om du inte vet, är reglerna för dina HTML-dokument som du kan fastna i varje sidas avsnittet <head>. Här är en enkel formatmall skriven i CSS:

div {
font-weight: bold
GÅ
}

div # sidofältet {
bredd: 200px
GÅ
font-family: Arial
GÅ
float: right
GÅ
}

div.articlebox {
bredd: 500 pixlar
GÅ
gräns: 1px solid svart
GÅ
}

</ Style>

Som ni kan se, kan du skapa särskilda regler för alla de olika delarna på din sida. Först förklarar formatmall som texten i alla <div> taggar på din sida måste vara fet. Sedan förklarar det att \ "sidofältet \" <div> -element måste vara 200 pixlar bred, använda Arial, och \ "float \" till höger på sidan. Slutligen förklarar det att \ "articlebox \" <div> element måste vara 500 pixlar bred och har en svart ram runt dem.

Om du förklara reglerna för en id använder du ett nummertecken för att separera elementet från namnet (\ "div # sido \"). Om du förklara reglerna för en klass använder du en period för att separera elementet från namnet (\ "div.articlebox \").

Det enda riktigt udda del är \ "float \" -regeln. Kom ihåg hur <div> är ett blockelement? Det betyder ingenting kan visas till höger eller vänster om <div>. Använda \ "float \" -regeln, du säger att i stället för att i sin egen blocket, det \ "flyter \" till vänster eller höger, så att andra saker att visas bredvid den. Det är en hård begrepp att vänja sig; se Resurser för mer information.

Cancel reply Välkommen till dig för att skicka en kommentar:

DU KANSKE OCKSÅ GILLAR

•hp 4100 köpa
•fördel med hyperthread