HTML Div Styles

HTML Div Styles


Den DIV tag definerer en division eller afsnit af en HTML-dokument og bruges til at anvende formater til en gruppe af elementer. Svarende til <body> tag, DIV elementer arbejder bag kulisserne gruppering andre mærker sammen. Brugt i indhold style sheets DIV elementer definerer stil og struktur af en webside og understøttes på alle større browsere.

Inline Style

Den DIV tag understøtter flere standard attributter, herunder stil. Stilen tag specificerer oplysninger stil for et HTML-dokument, såsom farve, skriftstørrelse eller justering.

Inline stilarter miste mange af fordelene ved eksterne eller interne style sheets, så skal bruges sparsomt. Style attributter føjes til den relevante HTML-tag kan indeholde enhver CSS ejendom, såsom farve, margin, og skriftstørrelse.

<Div style = "baggrund: blå"> <p> Dette stykke vises i en blå boks </ p> </ div>.

<P> Men dette stykke ikke har en blå baggrund som det sidder uden for <div> container-området. </ P>

Style Sheet

En mere effektiv måde at producere HTML websider anvender en ekstern eller intern stil ark. Det giver dig mulighed for at foretage ændringer nemt på tværs af et websted og eliminerer kodning rod fra din side.

Følgende eksempel viser kraften i <div> element ved udformningen websider. Også, når der indgår i et eksternt typografiark eller CSS, hjemmeside-wise ændring er meget nemmere.

<Style type = "text / css">

div.important {

background-color: blue;

font-style: italic;

farve: #FFF;

}

</ Style>

<Div class = "vigtige">

<P> Dette stykke vises i en blå boks. </ P>

<P> Teksten vil være hvid og kursiv. </ P>

</ Div>

<P> Men dette felt vises ikke i en blå kasse er heller ikke kursiv eller hvid. </ P>

Juster Ejendom

DIV tags tilbyder en hurtig og nem måde at anvende egenskaber tekstblokke, såsom tilpasning. I stedet for at anvende "align" ejendom til hvert afsnit af div tag kan du nemt anvende ejendommen til blokke af stykker.

Eksempel 1:

<P align = "center"> Afsnit en af ​​din tekst, der er centreret på siden. </ P>

<P align = "center"> Afsnit to af din tekst, der også centreret og Juster ejendom anvendt. </ P>

Eksempel 2:

<Div align = "center">

<P> Afsnit en af ​​din tekst, der er centreret på siden. </ P>

<P> Punkt to af din tekst, der også centreret men skrives lige som en normal afsnit, med brug af DIV-tag til centrum alle oplysninger mellem åbning og lukning DIV tags. </ P>

</ Div>

Span Element

Svarende til den DIV element span element grupper inline elementer i et HTML-dokument. Anvendes som en pladsholder eller mærkning punkt, den <span> element angiver begyndelsen og slutningen af ​​den stil inden for et afsnit. Selvom inline styles kan anvendes, er interne eller eksterne CSS klasser anbefales.

<Style type = "text / css">

span.example {

background-color: blue;

font-style: italic;

farve: #FFF;

}

</ Style>

<P> Dette punkt vises som grundlæggende sort tekst på hvid side. Når span element indføres, <span class = "eksempel"> det tager på de stilarter, der er fastsat i CSS på en blå baggrund, hvid, kursiv tekst. </ Span> Al tekst efter lukketid span vender tilbage til den oprindelige visning af sort tekst på hvid bund. </ p>


relaterade artiklar