Pretty baby spin-doktorer http://1apotekonline.com/cialis/ sterling sølv pille kasse

Så funkar CSS grunder

I videon ovan förklarar jag både CSS & HTML, och du kan ta hjälp av den om du har svårt att förstå texten, men annars ska det nog gå att förstå texten nedan om CSS grunder lika bra.

CSSCSS grunder

REGEL: En regel är allt det du ser på bilden ovan. Du har namnet på regeln (selektor), sedan brackets (måsvingar – {}) och däri en deklaration i form av egenskaper och värden.
SELEKTOR: Är det du döper din regel till, skulle man kunna säga. Vissa regler har en punkt framför sig (då blir det en <div class=””> i kodmallen), andra har en hashtag (#) framför sig (då blir det en <div id=””> i kodmallen) och andra har ingenting, som h1 ovan (då blir de bara taggar – <h1>). En punkt betyder att din regel kommer användas mer än en gång, och en hashtag betyder att det bara kommer användas en gång. Exempel på punkter är .entrybody, .nav & .commentheader, exempel på hashtags är #side, #header & #content. Man får tänka efter när man ska göra en ny regel och fundera på hur många gånger webbläsaren kommer att läsa regeln, och det avgör om det är en punkt eller en hashtag framför. Till exempel så skriver du bara <div class=”entrybody”> en gång i varje kodmall, men ändå är det en class(en punkt) och inte ett id(en hashtag), varför då? Jo, för att det kommer ju komma fler än ett inlägg på din blogg, men det är ett automatiskt programmeringsavsnitt som styr det och som går igenom alla inlägg för att vi inte ska behöva lägga taggar varje gång, eller blogga från kodmallen. Det avgörande är hur många gånger man ser en regel på en sida (startsidan till exempel), ser du menyn (#side) mer än en gång? Nej, då är det en hashtag. Ser du inläggstexten (.entrybody) mer än en gång? Ja, i mer än ett inlägg på framsidan – då är det en punkt. Regler utan något framför hittar vi inte på själva, utan de är redan bestämda, som body, h1 & input.
EGENSKAP: Egenskaper (och värden) är det som vi skriver inom måsvingarna ({}) för att bestämma hur regeln ska se ut när den väl presenteras i webbläsaren. En egenskap kan vara font-size, color, background osv. Här har vi gjort en guide i alla de egenskaper som finns just nu (i CSS3).
VÄRDE: Vi ger varje egenskap ett värde, alltså color får en färgkod, font-size får ett antal och background kanske får en bild.
DEKLARATION: Vi deklarerar allt som regeln ska ta in och skapa i webbläsaren inom måsvingar ({}) och det blir då en deklaration.

Tänk på detta med CSS grunder

1. Det går inte att använda åäö i CSS. Webben är till stor del byggd på det engelska språket, som inte tar åäö i sitt alfabet. Därmed kan du inte döpa en regel till något med åäö.
2. En regel kan inte börja med en siffra, men det kan däremot sluta med en. Du kan alltså inte döpa en ny regel till .1link, utan du får döpa den till .link1 eller något liknande.
3. Du kan använda bindestreck i dina regler, men inte punkter.
4. Om du ska vara korrekt så ska du inte blanda svenska och engelska namn på dina regler, utan håll dig till engelska selektorer.
5. Väldigt viktigt att man inte sätter hashtag framför de regler som ska synas mer än en gång, det blir då svårt för webbläsaren att förstå.
6. Om du tar en egenskap två gånger i CSS, så kommer webbläsaren att läsa den nedersta, alltså den sista som skrevs.
7. Om du skriver en regel två gånger i CSS så kommer webbläsaren att läsa den som är nederst i dokumentet och skriva över de egenskaper som inte redan finns deklarerade högre upp i dokumentet.

24 år, läser till Webbutvecklare, driver eget företag inom design, grafik & SEO samt ett företag som designar posters. På fritiden skapar jag bloggar, hemsidor och gör andra projekt inom webb. Jag har bloggat sedan 2007 under namnet Sannas Rum och har också två egna Youtubekanaler.

Läs mina andra inlägg

2 comments

  1. SvaraMalin Sahlén

    Hej!

    Jag undrar ifall ni möjligen har gjort ett inlägg med förklaring hur man gör en drop down header? Jag skulle vilja ha en drop down header. Vill ha en likadan som http://www.kenzas.se har och om du inte gjort ett sådant inlägg skulle jag bli jätteglad om du vill visa hur man gör en. Tack på förhand!

    Kärlek

  2. SvaraFredrik Le Falk

    Hej Malin,

    vi har flera inlägg med olika typer av dropdownmenyer! Denna borde vara vad du söker efter: Testa annars att söka på vår sida så hittar du ett par andra också.

Lämna ett svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *