CSS farver og typografi

Via nemprogrammering.dk fik vi et kursus på brugen af CSS (fra video 1-6).

Imens html er et struktur-sprog er CSS et layout-sprog, hvor du så at sige "farvelægger" den eksisterende html struktur.

Vi kunne eksempelvis omformatere skriftstørrelsen eller fonten på et par af de sætninger vi vil fremvise på hjemmesiden via "style" attributten:

<p style="font-size":20px> TEKST </p>

Her har vi altså sat fonten til 20 pixels. Dog kan man udover px bruge em, som giver en flere muligheder for valget af størrelsen for fonten på en tekst (eks. til mobil hjemmesider, som skal bruge mindre pixels af tekst osv.)

Derudover er der 3 muligheder for anvendelsen af CSS, som vises her:

Vi har altså:

1. Inline (tilføjelse af en attributten i én streg af kode)

2. Eksternt stylesheet (inklusion af et eksternt stylesheet via et link til den oprindelige kode (som vist på billede 1) (nyt dokument)

3. Internt stylesheet (indlagt stylesheet under attributten "style", som dermed kun gælder på den html side, hvor den optræder) (samme dokument)

Dog skal det nævnes at "inline" deklarationen er mindre effektiv på en større mængde af html sider, idet man skal kode den samme linje igen og igen. Inline deklarationen overskrider derudover også in- og eksterne kommandoer.

For farvningen af teksten kan man bruge color deklarationen under style attributten, som eksempelvis kunne se ud som følgende:

<h2 style="color:red;">Ekstern</h2>

Syntax:

I opførelsen af en attribut forekommer der, som sagt, flere forskellige deklarationer. Dette kan forklares med eksemplet:

h1 {

font-size:50px;

color:#eee;

font-family:sans-serif;

}

Her er h1 en selector, fordi den vælger hvilket punkt man har at gøre med. De andre tre punkter der befinder sig inde i attributten er kaldt deklarationer, hvor alle har formen: property:value;.

Usynlig tekst:

For at skrive en kommando, som er usynlig for brugeren af hjemmesiden og kun optræder i koderne, skal man skrive:

/* TEKST */

Gentagelser:

Da gentagelser ikke er den bedste ting for dataende i et html og CSS program, kan man omformatere de samme kommandoer i ét stylesheet:

Før (hvor h2, h3 og h4 har de samme kommandoer).

Efter (hvor h2, h3 og h4 er blevet sammenlagt under et stylesheet).

ID og klasse:

Et ID er en attribut, som kun kan bruges én gang pr. html side, imens en klasse kan bruges på flere elementer på en html side, på en gang.

Man kan bl.a. godt have flere klasser på det samme element.

Eksempler på text kommandoer under style attributten:

1. Text-decoration: KOMMANDO;

Kommandoerne er:

- line-through

- overline

- udnerline

- osv.

2. Text-transform: KOMMANDO;

Kommandoerne er:

- capitalize

- full-width

- lowercase

- uppercase

- osv.

Der er dog mange forskellige style kommandoer, som man kan tage brug af i ATOM programmet (og mange andre kodningsprogrammer).

Baggrundsfarve og baggrundsbillede

*For en baggrundsfarve skal man bruge "body" attributten, som ville have følgende kommando:

body {

background-color: FARVE

}

*For et baggrundsbillede skal man bruge "body" attributten, som ville have følgende kommando:

body {

background-image: url (FIL);

}

Hvis billedet ikke skal gentages i en gitter-formation skal man tilføje deklarationen:

background-repeat: no repeat

Man kan ligeledes vælge billedets position med deklarationen:

background-position: VALG AF POSITION

Opsummering af tags brugt:

Man plejer som regel, at skrive style attributten inden under "body" tags (pga. der er tale om en ændring på layoutet for "indholdet" på hjemmesiden). Derudover tager man som regel brug af CSS under "style" attributten, hvori man kan inkludere links til eksterne stylesheets.