CSS Boxmodellen:
HUSK!
Det er meget vigtigt altid at starte fra en LF eller HF Wireframe,
før du begynder at kode din hjemmeside.
Dette er fordi det giver dig mulighed for at have en præcis og klar idé om de rum,
der skal oprettes, og indholdet, der skal indsættes.
CSS-boksmodellen bruges til at definere, hvordan elementer på en hjemmeside
bliver vist og interagerer med hinanden. Modellen består af fire hovedkomponenter:
Indhold: Det faktiske indhold af elementet, som tekst eller billeder.
Polstring (padding): Pladsen mellem indholdet og kanten af elementet.
Kant (border): En ramme omkring polstringen og indholdet.
Margin: Pladsen uden for kanten, som adskiller elementet fra andre elementer.
Ved at bruge boksmodellen kan du præcist styre layoutet og placeringen af elementer på en hjemmeside,
hvilket gør det muligt at skabe mere komplekse og visuelt tiltalende designs.
CSS box modellen hjælp til at huske foskellige fra Padding, margin osv.
Kilde: Billder kommer fra W3School.com
Noter om centrale elementer
Hvordan indsætter man en ny FONT i html og css?
Brug Google Fonts til skrifttyper.
Når du har valgt skrifttype, skal du bruge indlejringskoden.
Når du indsætter en ny skrifttype, er det vigtigt at kopiere indlejringskoden både ind i html-filen:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet">
i CSS-filen:
.indie-flower-regular {
font-family: "Indie Flower", cursive;
font-weight: 400;
font-style: normal;
}
Og angiv den klasse (.font-name), hvor skrifttypen skal bruges.
Eks.:
<h1 class=".indie-flower-regular"> Kloge ord...</h1>
Hvordan virker Pseudoselectors
Pseudoselector:
- giver dig mulighed for at vælge elementer baseret på specifikke kriterier
(f.eks. tilstanden, positionen eller andre egenskaber for elementerne)
- de begynder med et kolon (::) eller en enkelt periode (:) afhængigt af deres type
:hover --> bruges til at vælge et element, når musemarkøren er over det.
Det er almindeligt brugt til at tilføje interaktive stileffekter til elementer.
:active
for at vælge et element i dets aktiverede tilstand, eks button
:focus
for at vælge et element, når det får fokus. ofte brugt til at tilføje
stilarter til at indtaste elementer såsom tekstfelter og afkrydsningsfelter.
:nth-child
vælger underordnede elementer baseret på deres placering i deres overordnede.
:first-child
for at vælge det første barn af en forælder.
:last-child
for at vælge det sidste barn af en forælder.
:not()
for at ekskludere specifikke elementer fra udvalget: eks. ul li:not(.special)
:nth-of-type()
vælger elementer baseret på deres placering i deres overordnede, idet der kun tages hensyn til den angivne type.
:empty
for at vælge elementer, der ikke indeholder andre elementer eller tekst i dem.
:checked
for at vælge input-elementer, der er valgt eller aktiveret, såsom afkrydsningsfelter eller radioknapper.
Hvad er GRID-SYSTEM til for?
Grid-systemet tjener til at organisere og strukturere layoutet af en webside på en systematisk og fleksibel måde.
Hvorfor er det vigtigt at bruge et grid-system, når man designer et hjemmeside?
Indholdsorganisering: Et gittersystem tilbyder en velordnet struktur baseret på kolonner og rækker, så du nemt kan organisere indhold i klart definerede sektioner. Dette gør det nemmere for udviklere og designere at administrere og placere elementer som tekst, billeder, knapper og andre komponenter på siden.
Visuel konsistens: Ved at bruge et grid-system er det muligt at opretholde visuel konsistens på en hjemmeside. Kolonner og rækker hjælper dig med at justere elementer jævnt, hvilket hjælper med at skabe et ensartet, professionelt udseende for hele dit websted.
Responsivitet: Et grid-system er særligt vigtigt i forbindelse med design af en responsiv hjemmeside, som automatisk tilpasser sig forskellige skærmstørrelser. Ved at bruge grid-systemets muligheder kan du skabe fleksible layouts, der tilpasser sig skærmstørrelserne på forskellige enheder, såsom desktops, tablets og smartphones. Kolonner og rækker kan ændres
eller flyttes for at sikre en god brugeroplevelse på tværs af forskellige platforme.
Kilde: Rold, M. (2021). Interfacedesign: Fra idé til digital prototype. 1. udgave, 2. oplag. København: Samfundslitteratur, side 131ss.
Hvordan kan jeg bruge grid system på en responsiv hjemmeside?
For at bruge et gittersystem på et responsivt websted skal du tage følgende trin i betragtning:
1. Definition af kolonner:Du skal definere det ønskede antal kolonner til dit layout, for eksempel 12 kolonner.
Kolonner kan defineres med faste eller fleksible størrelser.
2. Oprettelse af rækker: Ved hjælp af rækker kan du opdele layoutet i lodrette sektioner. Rækker kan bruges til at organisere elementer i hver kolonne,
hvilket sikrer, at layoutet tilpasser sig jævnt til skærmstørrelsen.
3. Tildeling af elementer til gitteret:Ved at bruge det eller de relevante klassesystem eller vælgere kan du tildele HTML-elementer til de forskellige kolonner og rækker i gittersystemet. Dette giver dig mulighed for at placere de ønskede elementer præcist i layoutet,
baseret på gitterspecifikationerne.
4. Håndtering af lydhørhed:For at gøre gittersystemet responsivt kan du bruge CSS-medieforespørgsler til at ændre dets layout baseret på forskellige skærmstørrelser. For eksempel kan du definere regler, der ændrer størrelse eller flytter
kolonner og rækker, når skærmstørrelsen ændres.
Samlet set giver brug af et gittersystem i dit webstedsdesign en solid struktur, større fleksibilitet og en bedre brugeroplevelse på tværs af forskellige skærmstørrelser.
Disse svar kommer fra Niels' slides plus hjælp fra copilot
Er det muligt at oprette et autoresponsivt grid?
Ja det er muligt. (se footer)
Kilde: Billede kommer fra W3School.com.
PRAKTISK ANVENDELSE
CSS Kaskadereglerne
Kaskade mekanismen bruges til at bestemme, hvilken regel der skal tage
over i tilfælde af en konflikt mellem flere regler.
Man kan anvende CSS via:
- EKSTERNE style sheets
- INTERNE style sheets
- stylingline
udover disse skal vi også overveje, at hver browser har et indbygget style sheets.
Hvilken regel gælder, hvis der er modstridende regler?
Hvis flere stil regler, der kan være i konflikt, tildeles til et givet html-element på samme tid, skal nogle regler anvendes:
HEREDITY
Der er forældre-TAG'er og børne-TAG'er
Eks: "<strong>" er søn af <p>, så det arver sine egenskaber, som vil blive tilføjet til stærke:
<p>Italo Calvino blev født i <strong> Milano</strong> bla bla bla</p>
det bliver:
Italo Calvino blev født i Milano bla bla bla
SPECIFICITY
Det gælder, når flere modstridende regler anvendes på det samme element. JO MERE SPECIFIK SELECTOR, JO STÆRKERE ER REGLEN og har derfor prioritet frem for de andre. Eks. v. KLASSE og ID
POSITION
De regler, der vises sidst, er gældende. Så browsertypografiark vil være mindre vigtige end eksterne typografiark. Interne style sheets råder over eksterne. Indlejrede stilarter tilsidesætter indre og ydre arkformater.
GENOPTAG
Rækkefølgen af CSS-regler er som følger:
1. Browser standard stilarter
2. Eksterne style sheets
3. Interne style sheets
4. Inline stilarter
5. Selector specificitet
Regler med !important
Hvad er kaskaderegler?
Kaskadereglerne i CSS bestemmer - hvilken stilregel der skal anvendes, når der er flere regler, der gælder for det samme element. - det virke med en proces kaldet "cascading", hvor reglerne vurderes og prioriteres baseret på deres specifikation, oprindelse og vigtighed.
Specifikationsniveauer
CSS-regler kan komme fra forskellige kilder, og de har forskellige specifikationsniveauer: 1. Browserens standardstilarter: De indbyggede stilarter, som browseren anvender, hvis ingen andre stilarter er angivet. 2. Brugerdefinerede stilarter: Stilarter, som brugeren har defineret i deres browserindstillinger. 3. Forfatterens stilarter: De stilarter, som er defineret af udvikleren i CSS-filerne.
Specificitet
Specificitet er en måde at beregne, hvilken regel der er mest specifik og derfor skal anvendes. Det afhænger af typen af selektorer: - ID-selektorer har høj specificitet. - Klasse- og pseudo-klasse-selektorer har lavere specificitet end ID-selektorer. - Element- og pseudo-element-selektorer har den laveste specificitet.
Vigtighed
Regler kan også markeres som vigtige ved at bruge `!important`. En regel markeret med `!important` vil tilsidesætte andre regler, uanset deres specificitet.
Eksempel
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<title>CSS Kaskaderegler</title>
<style>
body {
background-color: lightblue;
}
#main {
background-color: white;
}
.highlight {
background-color: yellow !important;
}
p {
background-color: lightgreen;
}
</style>
</head>
<body>
<div id="main" class="highlight">
<p>Dette er et eksempel på kaskaderegler i CSS.</p>
</div>
</body>
</html>
I dette eksempel vil `div`-elementet med id `main` og klassen `highlight` have en gul baggrundsfarve på grund af `!important`, selvom der også er en regel, der sætter baggrundsfarven til hvid.
Forberedelse FTP
WEBSERVER
En webserver er en computer eller software, der håndterer anmodninger fra klienter
(typisk webbrowsere eller webcrawler) og leverer websider til dem.
Den fungerer som en mellemmand mellem klienten og de filer,
der udgør en webside. Når du besøger en hjemmeside,
sender din browser en anmodning til webserveren, som derefter leverer de relevante filer
(HTML, billeder, CSS, JavaScript osv.) til din browser, så den kan vise websiden korrekt.
(kilde: IONOS-Digital Guide - hjemmesiden: https://urly.it/313cam)
FTP-client
En FTP-client (File Transfer Protocol-client)
- er en softwareværktøj, der opretter forbindelse mellem en værtscomputer og en fjernserver
--> normalt en FTP-server.
Med FTP-client
- må vi overførsel af data og filer mellem to computere via et TCP-netværk eller en internetforbindelse.
- Den bruges ofte til at overføre filer mellem en lokale computer og en webserver.
FTP-clienter
- hjælper os med at udføre forskellige operationer på live-servere via vores computer,
såsom at flytte, tilføje, slette eller omdøbe filer på dit websted.
Sådan fungerer en FTP-client
Forbindelse: FTP-klienten opretter forbindelse til en FTP-server med brugernavn
og adgangskode (fra provider af hosting, systemadministrator o personlig konfiguration).
Filoverførsel: Når du er tilsluttet (connesso), kan du uploade eller
downloade filer mellem din computer og serveren.
Kommandoer: Klienten (il client) sender kommandoer til serveren
for at udføre (eseguire) operationer såsom (come) liste over mapper (elencare directory),
oprettelse af mapper (creare cartelle), sletning af filer (cancellare file) osv.
Overførselstilstand: Kan fungere i aktiv eller passiv tilstand (modalitá),
afhængigt af (a seconda del) netværks- og firewallkonfigurationer.
FTP-client til Windows
FileZilla: af de mest populære og gratis FTP-klienter.
Understøtter FTP, FTPS og SFTP.
WinSCP: en gratis klient, der understøtter FTP, SFTP og SCP.
Det er kendt for sin intuitive grænseflade (interfaccia) og scripting funktioner.
FTP-client til Mac
Cyberduck: En gratis og open source FTP-klient, der understøtter FTP,
SFTP, WebDAV og andre overførselsprotokoller.
Transmit: En betalt FTP-klient, højt vurderet for sin hastighed
og veldesignede brugergrænseflade.
AUTORESPONSIVE GRID
HTML - file
<body>
<div class="grid">
<div class="col-3">
Sidebar
</div>
<div class="col-7">
Content
</div>
<div class="item">
lorem
</div>
<div class="item">
lorem
</div>
<div class="item item--wide">
lorem
</div>
<div class="item">
lorem
</div>
<div class="item">
lorem
</div>
<div class="item">
lorem
</div>
<div class="item">
lorem
</div>
<div class="item">
lorem
</div>
<div class="item">
lorem
</div>
<div class="item">
lorem
</div>
</div>
</body>
CSS - file
<!-- Reset -->
<style>
body, html { font-family: 'Intro', Arial, Helvetica, sans-serif; line-height: 1; font-size: 16px; box-sizing: border-box; margin: 0; padding: 0; }
*, *:before, *:after { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6, p, ol, ul { margin: 0 0 1rem 0; padding: 0; }
ol, ul { padding-left: 20px; line-height: 1.5; }
img { height: auto; }
h1 { font-size: 4rem; }
h2 { font-size: 3rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.8rem; }
h6 { font-size: 0.6rem; }
a { text-decoration: none; }
.grid {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
display: grid;
gap: 20px;
max-width: 1300px;
margin: 50px auto;
border: 3px solid green;
padding: 20px;
}
.item { border: 3px solid red; padding: 20px; height: 50vh; }
@media (min-width: 988px) {
.col-2 { grid-column: span 2; border: 1px solid red; padding: 20px; }
.col-3 { grid-column: span 3; border: 3px solid red; padding: 20px; min-height: 200px; }
.col-4 { grid-column: span 4; border: 1px solid red; padding: 20px; }
.col-5 { grid-column: span 5; border: 1px solid red; padding: 20px; }
.col-6 { grid-column: span 6; border: 1px solid red; padding: 20px; }
.col-7 { grid-column: span 7; border: 3px solid red; padding: 20px; }
.col-8 { grid-column: span 8; border: 1px solid red; padding: 20px; }
.col-9 { grid-column: span 9; border: 1px solid red; padding: 20px; }
.col-10 { grid-column: span 10; border: 1px solid red; padding: 20px; }
}
@media (max-width: 768px) {
.grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
}
</style>
For at halvere arbejdstiden bad jeg copilot om at omskrive kodeteksten med HTML-enheder,
& l t ; (mindre end) og & g t ; (større end), i stedet for symboler.
Fra mit synspunkt er den sværeste del ved at skabe et Grid-system at beregne arbejdsrummene korrekt på forhånd: det vil sige de nødvendige kolonner og rækker, men også hvor mange kolonner og rækker vi skal bruge til det enkelte indhold. Det betyder, at før du overhovedet begynder at kode en hjemmeside, skal du arbejde meget på Wireframe og grid-strukturen. Grid-systemet danner grundlaget for webstedet. Jeg tror, jeg stadig har meget arbejde at gøre med dette.
Alle emner