Web Elementer

Web Workshop # 3

I dag laver vi nogle web komponenter! F.eks. en Knap

Men først opsummering fra sidst:

html tags, f.eks. <p></p> eller <div></div>

css selektorer, f.eks. .klassenavn { } eller p { }

css deklarationer, f.eks. color: 'red';


De næste 2 gange laver vi en hjemmeside!

Vi følger et simpelt design

Jeres side kan komme op på en underside her

I må selv bestemme hvad indholdet er

https://i.imgur.com/FIINSY1.jpg


Element Selektoren

Når du skal skrive noget CSS som gælder en enkelt type element så skal du lave en element selektor. Man skriver en element selektor ved at skrive et elementnavnet og derefter blokken med deklarationer.

//CSS
p {
  color:red;
}
<!-- HTML -->
<p> Rød Farve </p>

Rød Farve

Prøv andre værdier som:

blue
yellow
#7833FF
RGB(255, 160, 122)

Klasse Selektoren

Når du skal skrive noget CSS som gælder for elementer der har en bestemt klasse så skal du bruge en klasse selektor. Man skriver en klasse selektor ved at skrive et punktum foran sin klasse og derefter blokken med deklarationer. Et HTML element kan have flere klasser, så der kan være flere klasser der gælder for et html element!

//CSS
.red {
  background-color: red;
}
.white-text {
  color: white;
}
<!-- HTML -->
<div class="red white-text"> Rød Farve </div>
Rød Farve

CSS: width og height

Hvis du vil have at dit element har en fast bredde eller højde, så kan du bruge width og height og give dem en værdi i px eller andet.

//CSS
.redbox {
  background-color: red;
  width: 100px;
  height: 50px;
}
<!-- HTML -->
<div class="redbox"> Rød Kasse </div>
Resultat:
Rød Farve

Prøv andre værdier som:

75px
10%
5rem
4em
8vh

CSS: border-radius

Med border-radius kan du give et element runde hjørner ved at sætte en værdi på fx. 10px
f.eks.

//CSS
.rund {
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 10px
}
<!-- HTML -->
<div class="rund"> Hej </div>
Hej

Pseudo Klasser

Pseudo klasser er lidt ligesom en selektor.
Den kan dekorere med css når man har musen over et element, eller hvis du har klikket på den.
Den har denne syntaks

selektor:pseudo-klasse {
    egenskab:værdi;
}

Pseudo Klasse :hover

:hover giver en anden farve når musen er over elementet

//CSS
.redbox {
  background-color: red;
  width: 100px;
  height: 50px;
}
.redbox:hover {
  background-color: blue;
}
<div class="redbox"> Flyt musen ovenpå mig! </div>
Flyt musen ovenpå mig!

Pseudo klassen :active

:active giver en anden farver når du trykker på elementet

//CSS
.bluebox {
  background-color: blue;
  width: 60px;
  height: 80px;
}
.bluebox:active {
  background-color: green;
}
<div class="bluebox"> Tryk på mig! </div>
Tryk på mig!