CSS Tutorial

June 26

Cascading Style Sheets (CSS) er en metode, der anvendes til at styre layout af websider. De stilarter styre skrifttype, baggrundsfarve og link interaktion effekter. Hvad er stor om CSS er, at du opretter klasser for websider, der føjes til områder på siden uden omkodning disse effekter for hver enkelt webside. En nybegynder i CSS brug for at vide det grundlæggende før dykning i mere avancerede teknikker.

Det grundlæggende

Før man kan forstå det grundlæggende i CSS, er det vigtigt at forstå webside HTML-tags. Disse tags definere elementerne i en webside. For eksempel, den <p> tag definerer et afsnit. Når du opretter CSS klasser, CSS henvender specifikke elementer i siderne. Når en klasse er oprettet, til den eneste, der skal føjes til elementets tag er den \ "klasse \" ejendom. Nogle webmastere indsætte stilarter direkte ind i elementet. Det betyder, at med hvert <p> element indsat i en side, skal genskabes den stil. Dette bremser udviklingen, og det skaber en masse arbejde, når sidetypografier ændres. Når du bruger CSS, i stedet for at ændre hver <p> element i side til en ny stil, den eneste kode, der skal ændre er CSS-klasse skabt i CSS-side.

Oprettelse af en CSS klasse

Klasser for CSS er defineret i en CSS-side. Disse sider er separate filer hostes på webserveren. CSS class side slutter med CSS forlængelse. Brug af <p> tag som et eksempel, webmasters ønsker at skabe en stil for den <p> element, der definerer den tekst stil og farve, der viser op på siden. Det følgende eksempel definerer skrifttype, farve og størrelse, der vises i en webside:

p.myParagraphFont
{
font-family: Verdana, sans-serif

farve: blå

font-size: 12pt
}

I ovenstående eksempel, den skrifttype, der vises i afsnittet er Verdana, farven er blå, og størrelsen er 12 point. Klassen bruges kun i <p> ​​tag, så webmaster kan vælge at have forskellige skrifttyper og stilarter i andre områder af websiden.

Brug af klasse

Nu der er blevet skabt i klassen, det skal gennemføres i tags. I dette eksempel, koden skabt, er for <p> -mærket. Klassen defineres i elementet ved hjælp af følgende syntaks:

<P class = \ "myParagraphFont \"> Min tekst. </ P>

Derudover før denne klasse vil være effektiv, skal indsættes på den hjemmeside, CSS class fil. Følgende kode omfatter CSS-klasse-fil. Denne kode skal indsættes i <head> tag af websiden.

<Link rel = \ "stylesheet \" type = \ "text / css \" href = \ "myNewClassFile.css \" />


relaterede artikler