QUAD Web Handbook

HTML

Javascript (Js)

Sammankopplande

Resurser

PowerPoints

Hemside-input

Explore

CSS

Francisco Padilla

CSS (Cascading Style Sheets)

Utseende & styling

CSS Selectors:

Tips:

https://www.w3schools.com/cssref/css_selectors.asp⁠

⁠

https://www.youtube.com/watch?v=EeZKHmNJipE⁠

⁠

# = Namnge ett ID i CSS

E.x

#mitt-id {

}

Klass

. = Namnge en klass i CSS

E.x (Påverkar alla element med klassen .min-klass)

.min-klass {

}

E.x (Påverkar endast elements som har klassen “min-klass-innuti” och som ligger i ett element med klassen “min-klass”

</div>

.min-klass .min-klass-innuti {

}

E.x (Påverkar endast elements som har båda klasserna “min-klass” och “min andra klass”)

.min-klass.min-andra-klass {

}

Element

= Namnge en elements-typ i CSS

E.x (påverkar ALLA “p”-element)

p {

}

E.x (påverkar alla “div”-element med klassen .klass2)

div.klass2 {

}

Styling

background-color

background-image: url("HÄR INNE SKRIVER DU ADRESSEN TILL BILDFILEN");

⁠

https://www.w3schools.com/cssref/pr_background-image.asp⁠

⁠

Påverkar bredden.

width: 10px;

Påverkar minsta möjliga bredden för elementet.

min-width: 10px;

Påverkar största möjliga bredden för elementet.

max-width: 10px;

Påverkar höjden.

height: 10px;

Påverkar minsta möjliga höjden för elementet.

min-height: 10px;

Påverkar största möjliga höjden för elementet.

max-height: 10px;

Tjockleken på “ramen” runt elementet

border: 1px;

Hur “rundade” kanter elementet ska ha

border-radius: 10px;

Centrerar text & element inuti elementet eller lägger det åt “left” eller “right”.

text-align: center;

Dölj elementet helt.

display: none;

Gör så att elementet kan ligga ovanpå/under andra element.

display:block;

Gör så att elementet kan ligga bredvid andra element.

display: inline;

Textfärg

color:red;

Typsnitt, textutseende.

font-family: arial;

Textens tjocklek (light, medium, bold)

font-weight: bold;

Textstorlek:

font-size: 12px;

Extrapålägg när man “trycker” på elementet.

:active

(tex a:active { } )

Extrapålägg när man håller musen över elementet.

:hover

(tex a:hover { } )

färg

color: red; (text-färgen)

background-color: #fffff; (bakgrundfärgen)

storlek

height: 100px;

width: 100px;

margin / ((padding))

⁠

https://www.w3schools.com/css/css_boxmodel.asp⁠

⁠

margin: 10px; (utrymme runtom elementet. Upp, ner, höger, vänster)

margin-top: 15px; (utrymme ovanför elementet)

padding: 10px; (extra-utrymme inom elementet)

padding-bottom: 15px; (extra-utrymme inom elementets nedre del)

Float

//Om du vill att ett element ska läggas / tryckas så mycket åt höger eller vänster det går kan du använda float.

#mitt-elemet {

float:left;

}

#mitt-andra-element {

float:right;

}

text (font)

font-size: 10px;

font-weight: bold;

Storlekar i förhållande till hela sidan och elementet ovan:

% , vw och vh.

10% = 0- 100% av storleken på elementet man ligger inuti. Ärver bredd eller höjd från elementet man ligger inuti.

10vw = 0-100 HELA bredden på själva hemsidefönstret. Ärver bredden från hela fönstret.

10vh = 0-100 HELA höjden på själva hemsidefönstret. Ärver höjden från hela fönstret.

em & rem (textstorlekar)

1em = 100% exakt samma textstorlek som är satt i elementet ovanför. Alltså det elementet som man ligger inuti.

(em = i relation till textstorleken i elementet man ligger inuti. Man “ärver” textstorlek från elementet man ligger i)

1.5rem = 150% exakt samma textstorlek som är satt för hela dokumentet.

(rem = i relation till textstorleken för hela elementet. Man “ärver” textstorlek från hela dokumentet)

⁠

https://css-tricks.com/confused-rem-em/⁠

⁠

https://www.digitalocean.com/community/tutorials/css-rem-vs-em-units⁠

⁠

state & visibility

display: none; ( Syns inte alls och försvinner från sidan)

display:inline; (Elementet kan lägga sig bredvid ett annat, men blir av med sin height & width.

display:inline-block; (Elementet kan lägga sig bredvid ett annat, behåller sin height & width.

visibility: hidden; (Gör elementet osynligt, men tar fortfarande upp samma yta och storlek som vanligt)

a:hover ( Vad som ska ske i CSSn när du håller muspekaren över elementet)

a:active ( Vad som ska ske i CSSn när du trycker på elementet)

Flex

⁠

https://www.w3schools.com/cssref/css3_pr_flex.asp⁠

⁠

Lite mer info:

⁠

https://css-tricks.com/snippets/css/a-guide-to-flexbox/⁠

⁠

// Sätt elementet (tex “div” eller container ) som display:flex;. Dess innehåll får då möjligheten att bli flexibelt vad deet gäller storlek och position. Antingen som en “row” eller “column”. Den “lila” delen i bilden ovan

.my-container {

display:flex;

}

.my-container {

flex-direction: row;

/* Kan välja mellan flow-direction: tex. row eller column för att ha dragspelet längs med höjden eller bredden*/

}

// Sätt sedan så att alla element inuti containern har ett “flex”-värde. Så att den kan fördela sin bredd inuti flex-containern. De “orangea” delarna i bilden ovan.

// Flex 2 blir dubbelst så stor som flex 1 i det gemensamma utrymmet på bredden eller höjden.

.mitt-flixibla-element {

flex:1;

}

.mitt-andra-flixibla-element {

flex:2;

}

Grid

Grid använder du för mer helhets-layouts, i samma stil som i Figma.

Kan kombineras med “Flex”-elements som används i de mer specifika ytorna om man vill.

Det går även att med “Flex” få till likadana vyer men med en annan typ av kontroll.

Detta sätter du i det yttre elementet, på samma vis som med flex, men istället för att styra uppdelning av avstånd och hur mycket plats som ska tas av elements inne i varje element så gör man det från det stora, yttre elementet:

⁠

https://codepen.io/francisco-gaddr/pen/xxLJbaG⁠

⁠

.mitt-yttre-grid-element {

/* Informera om att detta element ska vara ett GRID-element*/

display:grid;

/* Rita ut hur mycket plats varje kolumn ska ta och hur många kolumner ska finnas */

/* fr (fragment) är precis som "flex" , alltså hur stor andel av ytan som ska tas upp av varje ruta. Om en kolumn har 2fr och en annan kolumn har 1fr så tar den första upp dubbelt så mycket utrymme./*

/* Här nedan är 8 stycken kolumner som tar olika mycket utrymme i bredd*/

grid-template-columns:

2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

/* Rita ut hur mycket plats varje rad ska ta och hur många rader ska finnas */

/* fr (fragment) är precis som "flex" , alltså hur stor andel av ytan som ska tas upp av varje ruta. Om en rad/row har 3fr och en annan rad/row har 1fr så tar den första upp tre gånger så mycket utrymme./*

/* Här nedan är 3 stycken rader som tar olika mycket utrymme i höjd*/

grid-template-rows:

3fr /* kommer ta upp tre gånger så mycket som 1fr */

2fr /* kommer ta upp dubbelt så mycket som 1fr */

1fr;

/* Rita ut hur alla namngivna element ska ligga i rutnätet och hur många rutor de ska ta upp. OBS måste matcha rutnätet ovan och namnen ska vara "grid-area"-namnen */

grid-template-areas:

"ruta1 ruta2 ruta2 ruta2 ruta2 ruta2 ruta2 ruta2"

"ruta1 KNAPPEN KNAPPEN botten botten botten botten botten";

}

Såhär namnger du de olika elementen som finns i “Grid”-elementet. OBS behöver ej vara samma som ID-namnet eller klass-namnet. Detta grid-area-namn används sedan ovan för “grid-template-areas:”

#ett-element-i-gridden {

grid-area: ruta2;

background-color: red;

}

⁠

https://codepen.io/francisco-gaddr/pen/gOxvjOL⁠

⁠

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines⁠

⁠

Grid-info för desktop & mobile:

⁠

Loading…⁠