Skip to content
Share
Explore
CSS (Cascading Style Sheets)
Utseende & styling
/ *____________ Tentastress ____________ */
Kunskapsmål:
Veta vad CSS är och varför det används.
Veta hur man kan få in CSS på en hemsida.
Antingen via ett separat CSS-dokument ( den övergripande stylingen )
Här rekommenderas så mycket som möjligt av stylingen att ligga.
<link rel="stylesheet" href="my-web-styling.css" >
inuti HTML-dokumentet med
<style>
#my-element {
background: red;
color:blue; /*text-färgen*/
</style>
eller direkt inuti HTML-elementet som overridear / överskrider annan css via
<div id=”my-element” style=” color:red;” >
Färdighetsmål:
Kunna påverka ett eller flera element med hjälp av dessa CSS-selectors:
#ID .klass element ( div, p)
#min-pryl {
/* påverkar specifikt elementet med ID min-pryl */
}
h1 {
/*påverkar ALLA h1-element */
}
Skilja på %, 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.
Kunna påverka minst 1 inom vardera:
färg, storlek, margin / padding, text (font)
:state ( :hover & :active) & visibility/display
Kunna använda FLEX
För att få saker att ta jämnt fördelat utrymme i antingen “row” eller column”.
Kunskap kring hur Grid listar upp en vy
Förstå hur “grid” listar upp en vy med Kolumn och Rader.
/ *____________________________
_____________________________
____________________________
SLUT PÅ målen
____________________________
____________________________ */
CSS Selectors:
ID
# = 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 class=”min-klass”>
<span class=”min-klass-innuti”> </span>
</div>
.min-klass .min-klass-innuti {
}
E.x (Påverkar endast elements som har båda klasserna “min-klass” och “min andra klass”)
<div class=”min-klass 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");
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))
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;
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.