|
|
|
Baskunskaper inom CSSSom första guide inom CSS skall vi förklara grunderna i språket.CSS står för Cascading Style Sheets och används till att bestämma designen på ett HTML dokument. Varje element i HTML kan få egna värden för t.ex färg, storlek etc.. Kod-strukturen ser ut som följer: element { egenskap: värde } Om vi tillexempel vill sätta färgen i alla våra H1-taggar till blå så blir CSS-koden som nedan: H1 { color: blue } För att browsern skall kunna läsa CSS koden korrek måste vi inkludera ovan kod i HTML-dokumentets <HEAD> tagg: <HTML> <HEAD> <STYLE TYPE="text/css"> H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Här är sidans innehåll och den här texten blir blå!</H1> </BODY> </HTML> Att ha en extern CSS filOm du sparar radenH1 { color: blue } i en fil med filändelsen ".css" kan du anropa den i ett html dokument som nedan: <HTML> <HEAD> <link href="/filnamn.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <H1>Här är sidans innehåll och den här texten blir blå!</H1> </BODY> </HTML> Om man gör såhär så sparas filnamn.css i surfarens dator och css-koden behöver därför inte laddas hem varje gång användaren byter sida. Klasser i CSSTänk dig att du har en bunt <H1> taggar i ditt dokument men endast vill ge en av dem blå textfärg och kanske tillochmed ge dom andra orange textfärg.Då måste du på något vis urskilja taggarna så att du kan sätta färgen på endast en av dem, till detta använder man klasser. Vi gör detta genom att i HTML-dokumentet lägga till attributen class="klassnamn" i H1 taggen. <H1 class="bla"> Och för att sedan kunna ge klassen "bla" värden skriver vi i CSS-filen: .bla { color:blue } Om vi också beslutar oss för att göra alla dom andra H1 taggarna oranga ändrar vi CSS-filen till H1 { color:orange } .bla { color:blue } Fler CSS guider från webbdesign.info Externa resurser: w3c.org ger dig alla andra tags Kommentarer Antal 0 Medelpoäng 0/10Bli medlem för att kunna skriva kommentarer! Logga in om du redan är medlem. |
|
|
|
![[XML]](/images/xml.gif)
Svenska webhosts:
Använd gärna denna länk för att länka till oss: