Jag skulle vilja använda olika Storlekar på en och samma sida med hjälp utav Css, jag vet att man ska använda sig utav class, men vet inte riktigt på vilket sätt, tex en text variant ska vara fet, och den andra inte, nån som förstår hur jag menar hehe?
Olika texter på samma sida
HTML & CSSur HTML, XHTML & CSS
1 svar · 267 visningar · startad av Pumba
Jag tror det...
Här är ett exempel som jag hoppas skall hjälpa dig reda ut begreppen lite...
Förutsättning:
------------------
<div> är ett block med text (det börjar alltid på ny rad, och slutar allytid med en radbrtning - i övrigt påverkar det inte innehållets utseende om man inte lägger till CSS)
<span> är bara en markerad del av texten, men eftersom <span> inte påverkar innehållets utseende alls, får man lägga till utseende för det som ligger i ett <span> med CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="sv" xml:lang="sv">
<head>
<title>Ett exempel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* klasser */
.fetstil {font-weight:bold;}
.gulaktig {color:#cccc00;}
.trist {font-weight:normal;}
</style>
</head>
<body>
<div>
Detta är normalt flödande text,
men ett <span class="fetstil">ord</span>
är formaterat med CSS-klassen som heter fetstil
</div>
<div class="gulaktig">
Detta är normalt flödande text som är formaterad med CSS-klassen gulaktig
</div>
<div class="gulaktig">
Detta är normalt flödande text som är formaterad med CSS-klassen gulaktig,
men ett <span class="fetstil">ord</span>
är formaterat med CSS-klassen som heter fetstil
</div>
<div class="fetstil">
Detta är normalt flödande text som är formaterad med CSS-klassen fetstil,
men ett <span class="gulaktig">ord</span>
är dessutom formaterat med CSS-klassen som heter gulaktig, så det är både gult och fett
</div>
<div class="gulaktig fetstil">
Detta är normalt flödande text som är formaterad med CSS-klasserna gulaktig och fetstil,
men ett <span class="trist">ord</span>
är formaterat med CSS-klassen som heter trist, och det har annan färg och är inte fett
eftersom klassen trists värden "skriver över" de grundvärden som finns i gulaktig och fetstil
</div>
</body>
</html>
Hoppas detta kan vara till lite hjälp.. (och CSS ihop med <div> och <span> funkar likadant i HTML, så du behöver inte fundera över att exemplet är skrivet i XHTML om du inte vill ;) )
När du känner att du börjar få grepp om detta kan du sedan "brodera ut" och lägga på dina klasser på nästan vilket element (vilken "tagg") som helst...
... eller börja med att skapa klasser med olika font-size och så vidare ;)
Lycka till! :bire