Søg
Avatar billede mvk Nybegynder
28. maj 2004 - 09:23 Der er 13 kommentarer og
2 løsninger

Hjælp til strukturering af CSS

jeg har et stylesheet som virker, men jeg tror overhovedet ikke det er struktureret rigtigt, bla kan jeg ikke få den til at acceptere forskellige definitioner af link properties for forskellige styles. PLS help - jeg ved ikke hvordan det kan/bør gøres. Skal bare have et eksempel så burde jeg selv kunne klare resten...

CSS:
.GreymellemBold {
    font-size: 9px;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-weight: bold;
    color: #777777;
}
.GreymellemNormal {
    font-size: 9px;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #777777;
}
.BlackmellemBold {
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: bold;
}
.stylefire {
    color: #00CCFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: bold;
}
.almBlackBold {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #000000;
}
.almBlackNormal {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #000000;
}
.almGreyNormal {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #C1C1C1;
}
.almWhiteBold {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: Bold;
    color: #ffffff;
}
.almWhitenormal {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: Normal;
    color: #ffffff;
}
.almRedNormal {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #CC0000;

}
.darkGreenBold {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #5B5E46;
}
.darkGreenBig {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #5B5E46;
}
.darkGreenNorm {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #5B5E46;
}
.multilineFields {
    background-color: white;
    padding-right: 3;
    padding-left: 3;
    border-style: solid;
    border-width: 1px;
    border-color: #666666;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font: 10px;
    color: #C1C1C1;
    width: 150;
}
.kontaktMultiline {
    background-color: #FFFFFF;
    padding-right: 3;
    padding-left: 3;
    border-style: solid;
    border-width: 1px;
    border-color: #CACACA;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font: 10px;
    color: #C1C1C1;
    width: 330;
}
.kontaktsingleline {
    background-color: #FFFFFF;
    padding-right: 3;
    padding-left: 3;
    border-style: solid;
    border-width: 1px;
    border-color: #CACACA;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font: 10px;
    color: #C1C1C1;
    width: 150;
}
.buttons {
    background-color: #FFFFFF;
    height: 18px;
    border: 1px normal dotted #CACACA;
    font-size: 10px;
    font-weight: normal;
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
.buttons_large {
    background-color: #FFFFFF;
    height: 22px;
    border: 1px normal dotted #CACACA;
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
A:link {
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #254321;
}
A:hover {
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #254321;
}
A:active {
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #254321;
}
A:visited {
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #254321;
}
body {
    scrollbar-arrow-color: none;
    scrollbar-3dlight-color: EFEFEF;
    scrollbar-highlight-color: white;
    scrollbar-face-color: EFEFEF;
    scrollbar-shadow-color: white;
    scrollbar-track-color: ffffff;
    scrollbar-darkshadow-color: EFEFEF;
}
.fields_medium {
    background-color: #FFFFFF;
    padding-right: 3px;
    padding-left: 3px;
    border-style: solid;
    border-width: 1px;
    border-color: #666666;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #666666;
    width: 120px;
    height: 14px;
}
.fields {
    background-color: #FFFFFF;
    padding-right: 3px;
    padding-left: 3px;
    border-style: solid;
    border-width: 1px;
    border-color: #666666;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font: 10px;
    font-weight: normal;
    color: #666666;
    width: 150px;
    height: 14px;
}
.fields_small {
    background-color: #FFFFFF;
    padding-right: 3px;
    padding-left: 3px;
    border-style: solid;
    border-width: 1px;
    border-color: #666666;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #666666;
    width: 30px;
    height: 14px;
}
.fields_postnummer {
    background-color: #FFFFFF;
    padding-right: 3px;
    padding-left: 3px;
    border-style: solid;
    border-width: 1px;
    border-color: #666666;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #666666;
    width: 35px;
    height: 14px;
}
.fields_large {
    background-color: #FFFFFF;
    padding-right: 3px;
    padding-left: 3px;
    border-style: solid;
    border-width: 1px;
    border-color: #666666;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #666666;
    width: 150px;
    height: 14px;
}
Avatar billede asterisk Nybegynder
28. maj 2004 - 10:29 #1
Hvad sker der med dine links?
Det burde vere ok, hvis du tilføjer dil dine A gruppe egenskaber:

A:visited:hover {
text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #254321;
    }
Avatar billede asterisk Nybegynder
28. maj 2004 - 10:31 #2
Jeg mener neden under andre A: 'ene, så bliver det pænt sat op
;)
Avatar billede asterisk Nybegynder
28. maj 2004 - 11:00 #3
og jeg kommer senere på dagen...
Avatar billede skovenborg Nybegynder
28. maj 2004 - 11:46 #4
den rigtige rækkefølge (som man bør følge) for link-pseudo-elementer er,
:link :visitid :hover :active

derfor skal du lige bytte om på de forskellige link-definitioner:
A:link {
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #254321;
}
A:visited {
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #254321;
}
A:hover {
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #254321;
}
A:active {
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #254321;
}
Avatar billede skovenborg Nybegynder
28. maj 2004 - 11:50 #5
og så et lille tip:

der hvor du skriver:
border-style: solid;
    border-width: 1px;
    border-color: #CACACA;

kan det forkortes til:
border:1px solid #CACACA;
Avatar billede roenving Novice
28. maj 2004 - 12:19 #6
-- og et par tip mere:

Du bruger samme font-family overalt, nøjes med at definere den een gang først:

*{font-family: Verdana, Arial, Helvetica, sans-serif;}

-- og så er css baseret på arv (cascading), så du kan med fordel lægge dine definitioner i forhold til de omkransende elementer, så du definerer f.eks. den grå ting på det omkransende element (som vel også indeholder den baggrund de forholder sig til !-)

-- et andet resultat af arven er, at du ikke behøver at gentage definitioner:

A:link {
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #254321;
}
A:visited {
    color: #254321;
}
A:hover {
    text-decoration: none;
    font-weight: bold;
}
A:active {
}

-- og den sidste lille ting her er, at du sagtens kan angive flere classes på samme element, så i stedet for at have:

.almWhiteBold {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: Bold;
    color: #ffffff;
}
.almWhitenormal {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: Normal;
    color: #ffffff;
}

kan du:
.almWhite {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: Normal;
    color: #ffffff;
}
.bold{font-weight:bold;}

og så:

<span class="almWhite">Almindelig hvid</span><span class="almWhite bold">Almindelig hvid fed</span>

-- så kan du sætte bold-klassen på alle de elementer, som skal være bold i stedet for at have en klasse almindelig og en anden klasse bold ...

Bemærk dog, at .bold-definitionen skal komme efter de almindelige definitioner, da en property overskrives, hvis et match forekommer senere i css-definitionerne !-)
Avatar billede mvk Nybegynder
29. maj 2004 - 12:56 #7
tak for al jeres input. kigger på det nu
bør jeg også kalde mine styles noget andet ?
er det noget med at man kan kalde dem eksempelvis "h1" i forhold til søgemaskiner ?
Avatar billede roenving Novice
29. maj 2004 - 13:02 #8
H1-tags har ganske rigtig en speciel betydning i forhold til søgemaskiner, men du skal være opmærksom på, at de også har nogle helt specielle egenskaber, som du så skal sørge for at overskrive (block-level, linjehøjde, evt. margin og padding !-)
Avatar billede mvk Nybegynder
29. maj 2004 - 13:10 #9
okay - tak
det tror jeg så jeg bør holde mig fra :)
Avatar billede skovenborg Nybegynder
30. maj 2004 - 00:17 #10
det ellers en meget god ide atlægge fx den øverste hovedoverskrift indeni et H1-element og underoverskrifter i H2,H3 osv. På den måde får man lidt mere strukturering af html-koden, og så kan man ellers altid lave lidt om på hvordan de skal se ud med CSS, som roenving bemærker.
Avatar billede mvk Nybegynder
27. august 2004 - 10:09 #11
skal jeg ikke lige dele pointene mellem jer ?
tak for hjælpen
Avatar billede roenving Novice
27. august 2004 - 12:17 #12
Velbekomme '-)

-- deleren lyder som en god idé !-)
Avatar billede skovenborg Nybegynder
27. august 2004 - 18:54 #13
willbekommen :-)
Avatar billede mvk Nybegynder
09. september 2004 - 11:17 #14
tak :)
Avatar billede roenving Novice
09. september 2004 - 12:28 #15
-- og tak for point ;~}
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
24/0820:07 Libra Office 26.2.5.2 - Er sort - Kan an ændre til lysere baggrund ? (Windows 11) Af Ikke-ekspert i Office & Kontorpakker
24/0811:24 Hvor kan jeg finde hjælp til at flytte fra min gamle Samsung Flip4 til min nye Samsung Galaxy S24 Af vbr i Apps til Android
24/0811:16 problem med mailbesked Af Pestilensen i Excel
24/0810:45 Powerbank Af postpeter@outlook.dk i Fri debat
22/0821:38 webui_forge_cu121_torch231 med AMD Grafikkort. Af jonpet i Andet software
White papers
Flere white papers »