22 svar · 1 133 visningar · startad av Kalle M
Är jag rätt ute? Kommentera gärna.
1. 2 standarder:
CSS1 - formatering
Hur innehållet på sidan ska se ut.
Ex textformat,egenskaper för länkar, bakgrunder och kantlinjer.
CSS2-Lager/Placering
2. Kan användas på 3 sätt:
Extern mallfil
Inom head
I specifik tag.(Class)
3. Prioritet:
Html
I tagg (Class)
I Head
Extern mall
4. Exempel1:
H1 (Color:Red)
Väljare,egenskap,värde
5. Kan gruppera väljare:
H1,H2,H3(Text-align:center)
Gruppera egenskaper
H1(color:red;backgound-color:red;letter-spacing:3cm )
6. Classer:
Är något man definierar med namn och formatering inom Head eller i en extern CSS och som sedan kan användas på olika önskade märken genom att man skriver namnet på classen som man angett inom det märket man vill formatera.
7. Exempel:
Skapandet av classen:
<head>
<style type="text/css">
<!--
.Minclass{font-family: Verdana; font-size: 11px;}
-->
</style>
</head>
Använda classen:
<body>
<p class="minclass">texten i ett stycke...</p>
</body>
8. Exempelvis på en extern mall:
body { font-family: Verdana; font-size: 10px}
p { font-family: Verdana; font-size: 10px}
li{ font-family: Verdana; font-size: 10px}
table{font.family:verdana; font-size 10px}
td { font-family: Verdana; font-size: 10px}
tr { font-family: Verdana; font-size: 10px}
h3 { font-family: Verdana; font-size: 12px}
9. Kan gruppera:
table,td,tr{font-family: Verdana;font-size: 10px;}
10. Kommentera CSSkod:
/* detta är en kommentar */
11. Positionera med lager:
# = id (E en grej. Får bara skrivas en gång i htmldok)
. = class
Bra, du ser ut att ha snappat upp en del av diskussionerna iaf :)
Kan ju tilläggas att du kan använda css direkt på ett element också utan att behöva göra en klass eller liknande av det.
<p style="color: red; padding: 2px;>Text</p>
Självklart bättre att använda sig av klasser och liknande, men kan vara bra att veta att möjligheten finns.
Förstår inte riktigt vad du menar med css1 och css2.
Av vad jag förstått så är css2 en vidareutveckling av css1 för att andra medier och xml skulle kunna utnyttja stylesheet. som aurial m.m.
css1 skrevs 1996 och css2 1998 och css3 2001 och här kan du se om din webläsare har implementerat något från 3:an ännu.
http://www.css3.info/preview/
Målet är att lägga allt i en extern mall. alla classer och id också. ser inte ut som du tänkt så i ditt exempel. I ditt exempel så räcker det du skrivit i body. alla de andra kommer att ärva fonten och storleken.
Du bör skilja på "i tagg" som attribut och klasser.
CSS 2 inkluderar och reviderar CSS 1. CSS 3 kommer göra detsamma med CSS 2, även om "revisionen" är varsam. Du använder bara en standard åt gången. I praktiken är det CSS 2.1 som gäller nu (= den delmämgd av CSS 2.0 som faktiskt stöds av moderna browsers utom MSIE, som halkar efter.)
Det du kallar "prioritet" är i själva verket "kaskaden" och din ordning är fel:
Från lägre till högre värdering:
1. Webbläsaren default
2. Användarens default
3. Extern CSS-mall
4. Style-elementet
5. Style-attributet
Ordningen upphävs av "! important".
Kaskaden skall kompletteras med "specifitivitet" som är hur olika regler speglas mot varandra. http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html Kaskaden avgör vilken regel som gäller om två regler är lika specifika.
Att ha HTML-kommentarstecken i sin CSS kod är totalt onödigt sedan ett antal år tillbaka.
Pseudo-klasser och pseudo-element ingår i en grundläggande uppställning av selektorer. http://www.456bereastreet.com/archive/200509/css_21_selectors_part_1/ + del två och tre rekommenderas!
Tanten:
"Målet är att lägga allt i en extern mall. alla classer och id också. ser inte ut som du tänkt så i ditt exempel. I ditt exempel så räcker det du skrivit i body. alla de andra kommer att ärva fonten och storleken"
Kan du visa hur den externa mallen istället skulle se ut?
En väldigt enkel sådan...
spara som kalle.css
body {font: 0.8em/1.1em Verdana Geneva Arial Helvetica "sans-serif"; margin: 0; padding: 0; color: #00f;}
#engrej{background: #87ceeb; width: 12em; height: auto; margin: 3em; padding: 0.3em;}
.fet{font-weight: bold;}
h3{font-size: 12px; text-align: center;}
.svart{color: #000;}
och ett litet dokument
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="sv">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Kalles sida</title>
<link rel="stylesheet" type="text/css" href="kalle.css" />
</head>
<body>
<div id="engrej">
<h3><span class="svart">En</span> grej</h3>
<p>Och så lite text</p>
<p class="fet svart">Och lite till!</p>
</div>
</body>
</html>
Spara dem i samma mapp som de ser ut nu och titta i din läsare. Mixtra med koden... :-)
Tanten:
Bör man sätta ut padding ocb margin om det ändå ska vara noll? Det är så det funkar?
Margin=Marginaler!?
Padding: Är det avstånd?
Som itpastorn skrev så finns det något som man kallar default css, webläsarens egen inställning för att visa sidan.
Om det nu var så att alla webläsare visade detta likadant så vore saken enkel. Men t.ex IE6 lägger till lite pixlar här och där, och som kan göra det jobbigt att få sidan att se ungefär likadan ut i alla webläsare.
Man får det enklare om man någonstans "nollställer" alla margin och padding och sedan lägger till marginalerna där man vill ha dem i stället som jag t.ex gjorde i #mingrej.
Du kan också nollställa allt med att lägga in denna i din css-fil
*{
margin:0;
padding:0;
}
Kalle M skrev:
Tanten:
Bör man sätta ut padding ocb margin om det ändå ska vara noll? Det är så det funkar?
Margin=Marginaler!?
Padding: Är det avstånd?
Margin är marginal t.ex. avståndet mellan två <p>
padding är en sorts marginal inne i t.ex. <p>
Testa med att ändra på värdena jag skrev så ser du skillnaden.
kanske inte syns så bra så lägg till denna i css-filen och se vad som händer när du ändrar den.
p{margin: 0.5em;padding: 1em;}
Ok!
En fråga..ang positionering med div. Hur brukar du lägga upp det?
Anger du ID och formatering i CSS-mallen först och sedan skapar div i htmldokumentet?
En sak som man bör tänka på är att man namnger sina classer och ID med en semantisk åtanke, alltså om man vill formatera en ingress kan ett bra classnamn vara .preamble, ett dåligt classnamn för samma ingress är tex .class1 eller .boldArial10. Jag har sett sådana classnamn men om man vill göra en ny stilmall för samma html så kanske man inte vill ha en bold arial 10px text.....
mv icaaq
Kalle M skrev:
Ok!
En fråga..ang positionering med div. Hur brukar du lägga upp det?
Anger du ID och formatering i CSS-mallen först och sedan skapar div i htmldokumentet?
Lite svårt att svara på direkt. Men den tågordning jag brukar följa är att först göra html-dokumentet klart med all text, meny(er), logga och alla rubriker <h1> osv.
När jag konstaterat att sidan fungerar att "lyssnas" på, dvs att allt kommer i rätt ordning så börjar jag med designen. Då brukar jag oftast lägga in det som hör ihop i varsin <div>
Förhoppningsvis så behöver jag då inte göra så mycket mer med html-dokumentet och kan gå över till att bara jobba i css-filen.
Och sedan ser jag det som att "grovskissen" är klar för att kunna arbetas vidare med för t.ex php... men det är nästa steg...
Japp. Försökt följa ditt upplägg lite och samtidigt göra eget exempel för att lära mig.
Tycker positionering med divar är riktigt svårt.
Har nu lagt precis allt i en extern CSS-fil.
Så här ser min Externa CSS-fil ut än så länge:
Ge mig gärna tips.
Bör man lägga in svart färg om man ska ha det i body? Är det annars risk att webbläsaren gör som den vill?
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
margin: 10px;
padding: 10px;
}
a:link {
color: #000000;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: underline;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
.grönbakgr {
background-color: #00FF00;
}
p {
margin: 0px;
padding: 0px;
}
}
#Mindiv{
padding: 90px;
position: absolute;
top: 200px;
height: 175px;
width: 250px;
left: 200px;
background-color: #999999;
}
Som ny så är det kanske lättast att positionera divar med position: absolute; men egentligen är det svårast. Väldigt lätt att saker hamnar utanför fönstret eller över andra saker när man ändrar fönsterstorleken.
Gjorde en sida för länge sedan som illustrerar detta http://member.webforum.nu/9656/positionering.html
Gå in på den sidan och "dra ihop sidan så ser du...
Jag råder dig att försöka med de andra metoderna, t.ex float, tills du vet vad du gör.
Använd inte åäö när du namnger dina klasser eller divar
Relativ: Texten e kvar vid förminskning av fönster.
Absolut: Texten försvinner vid förminskning av fönster.
Har försökt greppa det där med relativ och absolut men jag kan aldrig förstå det där.
Det tar sin tid:-) Men rätt vad det är så trillar poletterna ner.
Tjuvkika på andras koder och css-filer, det gjorde jag nästan hela tiden när jag började.
Experimentera med float:left. Absolut enklast när man vill att <divar> eller <p> ska radas upp bredvid varandra... vilket man oftast vill ganska fort.
Experimentera med andras koder och läs lite tutorials lite här och där... så garanterar jag att du snart har kommit på hur det fungerar i stort. Använd en webläsare som följer standard t.ex ff för att se vad du gör. IE-problemen får du ta senare om det uppstått något, vilket det oftast gör :-)
Ok. Tackar för din hjälp! :-)
tanten skrev:
Du kan också nollställa allt med att lägga in denna i din css-fil
*{ margin:0; padding:0; }
Detta sätt att nollställa CSS har ett antal nackdelar:
1. Det tar tid för webbläsaren att gå igenom alla element.
2. En del element blir galna, speciellt vissa formulärelement. Titta på följande lösningar i stället:
http://developer.yahoo.com/yui/reset/
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
Längre, men klart bättre.