33 svar · 1 619 visningar · startad av anderszon
Börja lära mig css för ca 1 timma sen och har kommit en bit iaf.. vet inte vad som är fel i min css kod men kan nån kolla iaf:
<style type="text/css">
color: black;
ground-color: white;
font-family: arial,helvetica;
body {
font-family: arial,helvetica;
font-size: 2em;
color: black;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
p {
letter-spacing: 0.5em;
word-spacing: 2em;
line-height: 1.5;
text-align: center;
}
</style>
Lite felaktigheter hittade jag allt!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
body
{
background-color: white;
font-family: arial,helvetica;
font-size: 2em;
color: black;
}
h1
{
font-size: 2em;
}
h2
{
font-size: 1.5em;
}
p
{
letter-spacing: 0.5em;
word-spacing: 2em;
line-height: 1.5;
text-align: center;
}
</style>
</head>
<body>
Text
<h1> text </h1>
<h2> text </h2>
<p> Text </p>
</body>
</html>
Jag har inte förståt vad dem här h1, h2 är till för och hur dem används kan nån förklara?
anderszon skrev:
Jag har inte förståt vad dem här h1, h2 är till för och hur dem används kan nån förklara?
kolla in på: http://www.webdesignskolan.com/
och klicka på CSS grunder, där får du lite förklaringar : )
det ända felet jag kan hitta i din kod är ground istället för background.
jag har iofs aldrig använt "em" så jag kan inte kommentera det : )
mvh // micke
h1 osv är för olika rubriker. Du börjar med h1 som huvudrubrik och sedan h2 för underrubriker.
Du har angett 2 em för storlek på bokstäverna i body vilket är väldigt stort. Det vanliga är någonstans mellan 0.7 till 0.9 ungefär... det bör i vilket fall vara mindre än de du har i rubrikerna.
em är en relativ storlek som användaren kan förstora i IE.
De andra webläsarna förstorar även px.
Alltså om jag ska skriva en rubrik ska jag skriva h1DETTA ÄR EN RUBRIK/h1 eller är jag helt dum i huvudet?
Nej det stämmer bra.
H1 Står väll för Heading 1 Alltså rubrik 1 på sidan :)
HEJ!
För att få enklast att räkna bör du sätta din basfont till 10px.
Eftersom basfonten är 16px tar man 62.5% av det.
*{margin:0; padding:0;}
/*nollar alla marginaler, sedan sätter du dem där du behöver dem. enklast.*/
body{
margin:0; /*behövs igen för body (ev för html{} också, men brukar jag ej ha)*/
padding:0;
font:62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
color:#FFF;
}
h1{font-size:2em;} /*10x2=20px*/
h2{font-size:1.25em; /*10x1.25=12.5px*/
h3-h6 om man behöver dem.
OBS! CSS, liksom all programmering, kan man göra på olika sätt, och jag gör som de flesta gör. Bli dock inte förvånad om du hittar andra sätt att koda på.
hn-taggarna behövs även för att sökmotorerna ska veta vad som är viktigt på sidan, h1 är det viktigaste. Även för de som behöver hjälpmedel för webbläsaren behöver veta vad hur strukturen på sidan är uppbyggd.
Bra referens hittar du på DevGuru.
1600 inlägg!
Jag antar att bara experimenterar med typografin i exemplet för att se hur saker och ting funkar. Ett bra sätt att lära sig. Kolla gärna information om typografi på webben. T ex http://webtypography.net/toc/ .
Kommentar om ditt CSS-exempel:
Ta det lugnt med formateringen av p-taggen. Som det är nu så är det rätt saftigt avstånd mellan bokstäverna och det blir ganska jobbigt att läsa.
Någon av rubrik-taggarna H1-H6 kanske skulle funka bättre att formge så dramatiskt, eftersom rubriker inte brukar innehålla så mycket text.
Sen har jag lite andra frågor.. när jag ska lägga in css på en sida klistar jag då inte texten:
<link rel="stylesheet" type="text/css" href="css.css" />
Om jag nu har döpt css filen till css.css?
Och ska den ligga efter:
<html>
<head>
<title>Untitled Document</title><br>
<link rel="stylesheet" type="text/css" href="css.css" />
Tack för alla svar! Fortsätt svara. =)
EDIT: Jag vill ha h1: vanlig arial,helvetica - vanlig storlek (vet inte vad det är :()
h2: arial,helvetica med FET Text - Vanlig storlek
h3: arial,helvetica med FET Text (+0 står det i dreamweaver men jag vet inte vad det blir i pixlar)
Skulle vart snällt om ni kunde hjälpa mig med dem också =)
CSS.css är en referens om hur din sida ska "bete" sig i utseende med hjälp av CSS. Denna fil ska ligga inom headers.
i css.css filen lägger du in dina CSS format som du vill att sidan skall användas av.
Ett tips är att använda en doctype (allra först i HTML-koden) som triggar "standards mode" i webbläsare.
<!doctype html>
(Det finns längre varianter också, men inte alla triggar standards mode.)
Annars kommer webbläsare bete sig mer som gamla webbläsare, och det är inte lika förutsägbart och inte heller enligt "standarden".
Så det borde se ut typ såhär:
<!doctype html>
<html>
<head>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css.css">
Ang. rubriker, vad menar du med vanlig storlek? Storleken som rubrikerna normalt har eller samma storlek som brödtext?
Om du vill att all text ska vara "arial, helvetica", räcker det med att ange det på rotelementet så kommer det att ärvas till resten av sidan.
html { font-family:Arial, Helvetica, sans-serif; }
Ang "vanlig storlek" vet inte vi heller vad det är för din webb. Det kan vara 8 px, eller 33px. OM du menar vad som är vanligt generellt får du 9px eller 10px.
Dock gäller det för brödtext, för rubriker bör det vara lite större.
Utgå från denna kod.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>titel</title>
<style>
body{font:62.5%/1.5 Arial, Helvetica, sans-serif; color:#000;}
p{/*tom, blir 10px, eftersom 62.5x16=10*/}
h1{font-size:2em;} /*10x2=20px*/
h2{font-size:1.25em;} /*10x1.25=12.5px*/
h3{font-size:1.1em;} /*10x1.1=11px*/
</style>
</head>
<body>
<h1>h1h1h1h1h1</h1>
<h2>h2h2h2h2h2</h2>
<h3>h3h3h3h3h3</h3>
<p>paragraf-text paragraf-text paragraf-text paragraf-text</p>
</body>
</html>
J.N. skrev:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
En liten notis bara... :) Den här doctypen är lika dålig som ingen doctype för den triggar quirks mode. Jag skulle rekommendera en "Strict" doctype eller den kortare varianten ovan.
zcorpan skrev:
En liten notis bara... :) Den här doctypen är lika dålig som ingen doctype för den triggar quirks mode. Jag skulle rekommendera en "Strict" doctype eller den kortare varianten ovan.
Säkerligen.
Det är den som HomeSite själv skriver som standard, och den har jag aldrig brytt mig om att byta till det jag vanligen använder, som kommer från återanvända filer. I detta fall gjorde jag koden från början.
J.N. skrev:
Ang "vanlig storlek" vet inte vi heller vad det är för din webb. Det kan vara 8 px, eller 33px. OM du menar vad som är vanligt generellt får du 9px eller 10px.
Dock gäller det för brödtext, för rubriker bör det vara lite större.Utgå från denna kod.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>titel</title> <style> body{font:62.5%/1.5 Arial, Helvetica, sans-serif; color:#000;} p{/*tom, blir 10px, eftersom 62.5x16=10*/} h1{font-size:2em;} /*10x2=20px*/ h2{font-size:1.25em;} /*10x1.25=12.5px*/ h3{font-size:1.1em;} /*10x1.1=11px*/ </style> </head> <body> <h1>h1h1h1h1h1</h1> <h2>h2h2h2h2h2</h2> <h3>h3h3h3h3h3</h3> <p>paragraf-text paragraf-text paragraf-text paragraf-text</p> </body> </html>
Vad menar du med: <h3>h3h3h3h3h3</h3> (Ska det inte stå eller? :S)
Och samma sak med: <p>paragraf-text paragraf-text paragraf-text paragraf-text</p>
VIKTIGA: hur lägger jag in en css script på en sida.. genom att skriva in den koden jag skrev överst eller ska man includa.. har inte förstått.
css script? Css fil ja det kan du.. ta bara bort <style...> och lägg det i en css fil och inkludera det i headern som vi har visat.
Om du gör så här:
kopiera den här texten
<!doctype html>
<html>
<head>
<title>titel</title>
</head>
<body>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<p>paragraf-text<br>och lite mer text! </p>
</body>
</html>
Klistra in den i anteckningar och spara som test.html
När du gjort det så öppnar du filen med den webläsare du har.
Då ser du hur det ser ut utan css.
Ta sedan någon av de förslag på css du fått och klistra in det i head och mickla sedan med värdena för att se hur de ändras. Eller ta din egen du hade från början. Här:
<style type="text/css">
body {
font-family: arial,helvetica;
font-size: 2em;
color: black;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
p {
letter-spacing: 0.5em;
word-spacing: 2em;
line-height: 1.5;
text-align: center;
}
</style> {
Den är lite lättare att förstå än de som är forkortade.
Hoppas det blir lite lättare att förstå då :-)
Vi låter kanske lite olika med hur man gör med css. Det bästa är att lägga den i en egen fil som man länkar till. Men när man testar sig fram och provar kan det vara lite lättare att bara ha en fil att "leka" med och då placeras den i head.
http://www.anderszon.net/test.html <- Ser det bra ut kolla källkod också.
Du kan inte ha ett header-element inom en p-tagg.