Avatar billede gertnissen Nybegynder
07. december 2003 - 23:14 Der er 8 kommentarer og
1 løsning

CSS class/id, arv osv hvordan hænger det præcist sammen

Jeg er løbet lidt sur i hvordan bla. class og id hænger sammen og bruges, samt hvordan jeg kan gøre brug af at arve definitioner fra eksempelvis body{} til #min.

1.) Er der nogen der ligger inde med en god forklaring og nogle eksempler/holdninger til hvornår/hvorfor man bruger class og id ?

Jeg er med på at jeg f.eks kan skrive:
<style>
body{color:red}
p.ny {background-color=yellow}
#min {word-spacing: 3px;}
</style
<p class=ny id=min>Test</p>

2.) Hvad ville der ske hvis jeg skrev .ny istedet for p.ny ?

3.) Hvordan får jeg alle 3 gjort aktive i samme <p>, dvs så min bruger color:red fra body, så den def ikke skal skrives mere end en gang ?

Jeg har nogle steder set f.eks.
div:before
img[alt] {}
td > td {}
e + f {}
font, font * {}

4:) Hvordan bruger man det og/eller til hvad/hvornår

Et langt spørgsmål med mange del-spørgsmål - derfor 60 point, flere mulige for gode svar !
Avatar billede roenving Novice
07. december 2003 - 23:37 #1
1. Generelt set skal du bruge class, hvis der er tale om en klasse af elementer, altså normalt flere, som skal have de samme egenskaber ...

-- deraf følger, at du, når du skal angive egenskaber for et element, som er unikt, bør bruge id til at angive egenskaberne !-)

Du kan iøvrigt også angive flere classes på samme element:

<p class="ny gul">

-- den går ikke med id, som _skal_ være unikt i _hele_ dokumentet !o]

2. Intet !-)

3. Block-level-elementer overtager ikke alle egenskaber fra omkransende elementer, som det ellers er standard i css, der er ikke andet at gøre end at nærlæse http://www.w3.org/TR/REC-CSS2/selector.html og http://www.w3.org/TR/REC-CSS2/propidx.html -- eller eventuelt hele http://www.w3.org/TR/REC-CSS2/

-- men du kunne jo sætte alle egenskaber som classes:

<style>
.red{color:red}
.ny {background-color=yellow}
.min {word-spacing: 3px;}
</style>

<body class="red">
<p class="ny min red">Test</p>

4. Kig i det første link, men kort:

: betyder, at det er en pseudo-selector, altså at det er en tilstand for elementet, at det er en speciel del af elementet eller lignende !-)

[] henviser til en property defineret i elementet (og den kan bruges som til stede -- den du viser -- eller som havende en bestemt værdi !-) men understøttelsen er ikke så voldsom i browserne ...

> betyder umiddelbar efterkommer, dvs. at elementet skal være direkte barn af det foranstående element, så umiddelbart er dit eksempel noget vrøvl, men der har sikkert stået tr>td, hvilket dog også skulle være overflødigt !-)

+ henviser til et element, som har et andet umiddelbart foran, altså i dit eksempel et f-element, som har et e-element lige foran ...

, betyder bare opremsning af elementer egenskabslisten gælder for, og

* betyder et hvilkensomhelst element her med mellemrum foran, hvilket betyder, at det skal være efterkommer af det foregående (i et vilkårligt antal generationer !-), altså betyder den sidste, at alle font-elementer og alle elementer, som på nogen måde er omkranset af font-elementer skal have de angivne egenskaber !-)
Avatar billede roenving Novice
07. december 2003 - 23:41 #2
-- og så var der jo en fejl i .ny-klassen:

.ny {background-color:yellow;}

-- og det er en god vane altid at afslutte med ; for et manglende kolon vil betyde at begge egenskaber ikke bliver godkendt, hvis man glemmer det midt inde i !-)
Avatar billede bjoarn Nybegynder
09. december 2003 - 20:41 #3
Du er ude i noget med css-selectors.

Der findes en masse og kun få er understøttet.
Men class og ID virker i stort set alt, hvad enten du skriver:
p#min, #min, *#min, body #min, body p#min...

Jeg nøjes fint med brug af almindelige tag-selectors og class/ID.
Hvis du vil vide om avancerede css-selectors:
http://gallery.theopalgroup.com/selectoracle/

Hvad angår inheritance... så burde al tekst være rød hvis du definere det i body(gælder ikke gammel netscape o.l.).
Eller kan selectors grupperes:
body, #min, p, td.roedtekst{color: #ff0000;}
Avatar billede gertnissen Nybegynder
28. december 2003 - 16:58 #4
ups, et glemt spørgsmål - sorry

Hvis jeg nu bruger farvekoden yellow mange steder i mit stylesheet, og ønsker at ændre den til red, er det så kun muligt med søg og erstat eller kan man erklære nogle 'variable' eller lign. til at lette dette arbejde, evt script ?

Ligeledes ønsker jeg at f.eks. baggrunden i mine divs skal være ens (læs samme farve), det kan umiddelbart løses ved at ikke at give omkransende/efterfølgende divs en farve, hardcode farven eller lade dem være transperante - Indimellem er det dog nødvendigt at give dem en farve af andre hensyn til f.eks. scripts.

roenving er inde på en løsning
<style>
.red{color:red}
.ny {background-color=yellow}
.min {word-spacing: 3px;}
</style>

<body class="red">
<p class="ny min red">Test</p>

meeen jeg ville helst kunne arbejde med dette direkte i mit stylesheet ellers kunne det også nemt blive en meget lang class="" for hvert html element.

Har I en løsning på dette ?

Mht mit punkt 2, er det så korrekt at det ingen betydning har om jeg skriver .ny eller p.ny ? Det var mit indtryk at med det foranstillet p ville jeg kun kunne bruge .ny i class for p elementer og at p.ny dermed ikke kan anvendes af eks. class i div - eller hvordan ?

bjoarn skiver at mine selectors kan grupperes. Betyder det at jeg eks. kan skrive body {color:yellow;}, #min, p, td.roedtekst{color: red;} ?
Umiddelbart vikrer det som om at mit stylesheet kan gå hen og få en ret kompleks struktur mht indbyrdes afhængigheder og der er jo ikke sikkert at f.eks. font farve og baggrund altid skal 'følges' ad.

Var det en løsning på mine tilfældige eksempler eller anbefaling på god skik/stil ved brug/opbygning af stylesheets ?
Avatar billede roenving Novice
28. december 2003 - 22:29 #5
-- der er ikke nu i css mulighed for variabler ...

-- du kan godt definere en style for _alle_ tags af en bestemt type:

div{background-color:yellow;}

-- og så efterfølgende have enkelte, som ikke bruger det:

redDiv{background-color:coral;}

-- bare husk at rækkefølge er _alt_ i et css-stylesheet, en efterfølgende værdi for den samme property vil overskrive en tidligere defineret ...

-- og du kan definere et id (eller en class !-) over flere gange og gruppere dem undervejs, f.eks.

<style type="text/css">
body,div{background-color:coral;font-size:24px;}
#minDiv,#minSpan{background-color:white;color:coral;}
#minSpan{text-decoration:underline;}
</style>

-- og en style defineret med p.ny skal kun virke på p-tags med class="ny" ...
Avatar billede roenving Novice
28. december 2003 - 22:29 #6
.redDiv sæ'fø'li'
Avatar billede gertnissen Nybegynder
29. december 2003 - 10:27 #7
Dit sidste eksempel med div, minDiv og minSpan

<style type="text/css">
body,div{background-color:coral;font-size:24px;}
#minDiv,#minSpan{background-color:white;color:coral;}
#minSpan{text-decoration:underline;}
</style>

tror jeg har sat det hele fast - tak for hjælpen, smider du et svar ?
Avatar billede roenving Novice
29. december 2003 - 13:44 #8
Oki, og velbekomme '-)
Avatar billede roenving Novice
10. januar 2004 - 03:09 #9
-- og da også tak for points ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester