Bia Rask Webbkurs

HTML & CSS

CSS

 


CSS Tutorials och CSS Referens från w3schools är ovärderliga som upplsagsböcker för dig som vill använda CSS.

Adobes Hjälp om Dreamweaver förklarar hur du kan skapa CSS-stilar och CSS-filer. Där hittar du även fler hjälpsidor om CSS.

Se även Adobes film Edit CSS propoerties visually.


CSS

Om CSS

CSS står för Cascading Style Sheets och är stilmallar som styr webbplatsens utseende. Man kan koppla flera stilmallar till en och samma html-sida och man kan använda en och samma stilmall till flera html-filer.

Stilmallar namnges ofta style.css eller stilmall.css, men kan egentligen kallas vad som helst, förutsatt att filändelsen är rätt och att reglerna om vilka tecken som får användas följs. Har man flera stilmallar är det viktigt att man ger dem logiska namn så man direkt förstår vilken som är vilken (till exempel stilmall_ fotoskola.css).

I stilmallen skriver man reglerna direkt, inget inledande DOCTYPE, head, body eller liknande alltså, förutom att teckenkodningen (@charset ”UTF- 8”;) brukar anges.

Skapa en CSS-fil

Man kan göra på flera sätt, men denna beskrivning utgår från att du redan skapat en HTML-fil som är öppen.

  1. Öppna panelen CSS Designer. (Om du inte ser den finns den under menyn Fönster.)
  2. Klicka på + vid Källor
  3. Välj Skapa en ny CSS-fil. (Om du redan har en och vill koppla HTML-dokumentet till den väljer du Koppla befintlig CSS-fil istället.)
  4. Klicka på Bläddra. Förutsatt att du redan definerat rotmappen kommer Dreamweaver automatiskt att lägga stilmallen i den, men om du inte valt rotmapp är det mycket viktigt att du ser till att den hamnar i den (eller i en undermapp i rotmappen).
  5. Ge CSS-filen ett bra namn så du vet vad som är vad.
  6. Klicka Spara. (Om du inte hunnit spara HTML-filen får du en varningsruta som du kan ignorera.)
  7. Nu är du tillbaka i rutan Skapa en ny CSS-fil. Se till att Länk är valt och klicka OK.

 

Skriva måsvingar på mac

Alt + Shift + 8 ger {
Alt + Shift + 9 ger }

 

Kommentera CSS

Vänj dig vid att kommentera CSS-filen flitigt. Du kommer att tacka dig själv när det blir lättare att hitta. Exempel:

/* Här är inställningarna för menyn */
/* Ändra färgen på rubrikerna här */

I stilmallen används kommentarer mest för att göra koden tydlig och lätt att hitta i och ibland för instruktioner. Man kan också kommentera bort kod istället för att radera den om man är osäker om man kommer att vilja ha med den eller inte.

Det är ofta enklast skriva allt direkt i koden, men det finns en knapp för kommentarer (rödmarkerad på skärmdumpen) till vänster om fönstret du skriver i. Ser du inte knappen klickar du på pilarna som visar mer innehåll (blåmarkerad). Klicka på "Lägg till HTML-kod" och skriv sedan in texten du vill i ha din kommentar direkt i koden.

 

Du hittar mer på w3schools.com > CSS. Skrolla ner till CSS Comments.

 


Regler

Regler

En regel består av en väljare (selektor) och, inom måsvingar, en deklaration som består av egenskap (attribut) och värde.

väljare {deklaration}
väljare {egenskap:värde;}

body {background-color:#000000;}

Väljaren styr vilket/vilka element i html-filen som ska påverkas. Elementen i html har motsvarande väljare i css (till exempel body, a, h1).

Det kan finnas flera deklarationer i en och samma regel. Det spelar ingen roll om man göra radbrytningar i css-dokumentet, så många föredrar att dela upp regeln på flera rader när den har flera deklarationer (eller alltid) för att göra texten mer överskådlig. Du kan även lägga till mellanslag om du vill, men inte mellan siffror och måttenheten i ett värde.

img {
       border:1px solid black;
       padding:10px;
       margin:10px 0 10px 0;
       }

 

Lägg märke till att efter egenskapen skriver man kolon, och efter värdet semikolon!

Skapa/redigera regel i stilmall

Hoppa direkt till punkt 4 om du skapat regeln tidigare och vill redigera den och klicka på önskad väljare.

  1. Gå till panelen CSS Designer. (Om du inte ser den finns den under menyn Fönster.)
  2. Se till att stilmallen är markerad under Källor.
  3. Klicka på/i det du vill styra med CSS-regeln och klicka sedan på + vid Väljare. Du får nu förslag på väljare. Förslaget är ofta ganska specifikt, men du kan ta bort delar, lägga till eller skriva in något helt eget.
    - Regeln kan gälla en väljare, exempel: h1
    - Regeln kan gälla flera väljare, exempel: h1,h2,h3 (separaras med kommatecken)
    - Regeln kan vara mer specifierad, exempel: #huvudmeny a (i detta fall gäller regeln länkar, a, i boxen som fått namnet huvudmeny)
  4. Under Egenskaper hittar du ett antal knappar som leder till olika grupper av egenskaper. Välj önskad egenskap och klicka, välj eller fyll i önskat värde. (Vill du ta bort en egenskap klickar du på papperskorgen till höger på samma rad.)

Ibland krävs flera värden för att effekten ska synas. Lägger du till exempel in en kantlinje krävs det värden för färg, grovlek och stil för att du ska se kanten.

Kommentera din kod flitigt så blir det mycket lättare att hitta i den, särskilt om du i ett senare skede om man vill göra ändringar!

/*Inställningar för menyn*/
/*De grå faktarutorna*/

Om man vill testa olika designalternativ på en sida kan man kommentera bort regler istället för att radera dem. Då är det enkelt att ångra sig.

Mer om CSS hittar du på: http://helpx.adobe.com/se/dreamweaver/using/css-designer.html
https://helpx.adobe.com/dreamweaver/how-to/edit-css-properties-visually. html?set=dreamweaver--get-started--essential-beginners
http://www.w3schools.com/css/
http://www.w3schools.com/cssref/

Några exempel på regler

body {
       background-color:#b0c4de;
       background-image:url(’bakgrund.png’);
       background-repeat:repeat-x;
       }

Bakgrundsbilden repeteras bara horisontellt med repeat-x. Alternativ är repeat-y och no-repeat. Skriver man inget repeteras bakgrundsbilden både i sid- och höjdled.

#meny {
       background-color:#b0c4de;
       height:100px;
       width:100px;
       }

# visar att det är handlar om ett id. Det får bara finnas ett element med samma id (samma namn på id:et) på varje sida.

.gulmarkerat {color:#ffff00;}

. visar att det är handlar om en klass. Det kan finnas flera element med samma klass(namn på klassen) på varje sida.

P {
   font-family:"Times New Roman",Times,serif;
   font-size:0.875em; /* 14px/16=0.875em */
   font-style:italic;
   }

Kommentaren vid font-size krävs inte, men det är klokt att kommentera flitigt så man slipper undra senare hur man tänkt.

Font-size kan även anges på olika sätt. Man kan använda xx-small, x-small, small, medium, large, x-large och xx-large. Det går också ange storleken i procent av föräldraelementets teckenstorlek (50%), smaller eller larger än föräldraelementet. Många föredrar att använda enheten em. Då anges storleken i förhållande till storleken på em. Om inte annat angivits är 1em samma storlek som 16px. Det går blanda em och % i stilmallen.

Även fasta storlekar (32px) fungerar, men det bör man använda sparsamt, endast om storleken texten är avgörande, t.ex. i en header. Fasta storlekar hindrar besökarna från att justera storleken i webbläsaren. Det kan behövas då skärmarna har olika upplösning och ur ett tillgänglighetsperspektiv.

h1 {
    color:#00ff00;
    font-size:250%;
    font-weight:normal;
    }

För att tydliggöra var det finns länkar låter man ofta något hända när man håller muspekaren över den, till exempel kan den byta färg. Några exempel på regler för länkar följer här:

a {text-decoration:none;}     /* ingen understrykning*/

a:link {color:#FF0000;}     /* obesökt länk */

a:visited {color:#00FF00;}     /* besökt länk */

a:hover {color:#FF00FF;}      /* mus över länk */

a:active {color:#0000FF;}      /* vald länk */

Många fler exempel och möjlighet att experimentera själv finns på http:// www.w3schools.com/css/css_examples.asp.