CSS - Cascading Style Sheets

Tillbaka till artikelarkivet

Filer

Verktyg

Kommentarer (8)
Utskriftsvänligt format

Betyg

markedunmaked 6.3

Ska bli en kort introduktion till CSS där du får lära dig de simplaste grunderna.

Navigation:

Text - CSS - Cascading Style Sheets

Användning

För att kunna använda CSS på din hemsida så behöver du bara inkludera följande rad och ändra href=¿¿ till något passande men kom ihåg att filändesen ska vara .css.
  1.  
  2. <link rel="stylesheet" type="text/css" href="css/style.css" />
  3.


Exempel
HTML:
  1.  
  2. <html>
  3. 	<head>
  4. 		<title>
  5. 		</title>
  6. 	<link rel="stylesheet" type="text/css" href="css/style.css"/>
  7. 	</head>
  8. 	<body>
  9. 	</body>
  10. <html>


Det behövs faktist inget mer i din hemsida för att göra det möjligt att använda CSS i den.


Formgivning och Färg

För att bestämma storlekar på objekt i css används width och height effektivt.
För att göra en fyrkant, 100x100 pixlar gör man på följande sätt. Detta behöver inte bara användas på en div utan kan med fördel användas på bilder också det fungerar precis likadant då.

CSS:
  1.  
  2. .box {
  3. 	height: 100px;
  4. 	width: 100px;
  5. }
  6.


HTML:
  1.  
  2. <html>
  3. 	<head>
  4. 		<title>
  5. 		</title>
  6. 	<link rel="stylesheet" type="text/css" href="css/style.css"/>
  7. 	</head>
  8. 	<body>
  9. 		<div class="box">	
  10. 		[/CODE]			
  11. 	</body>
  12. <html>


Placering

För placering utav objekt i CSS används margin-left och margin-top framför allt.
För att tillexempel placera ett objekt 200 pixlar från toppen och 250 pixlar ifrån vänster kanten används följande. Detta kan också med stor fördel användas på bilder.
Man kan välja om man vill att saker ska placeras relativt till andra saker så om du har en bild ovanför den andra så kommer margin-top vara i relation till den övre bilder för den undre. Men har du däremot absolute så är det alltid i relation till fönsterkanterna på webbläsaren. Jag kommer använda mig utav absolute men du kan givetvis ändra om du vill och prova på det.

CSS:
  1.  
  2. .box {
  3. 	position: absolute; 
  4. 	height: 100px;
  5. 	width: 100px;
  6. 	margin-top: 200px;
  7. 	margin-left: 250px;
  8. }
  9.


HTML:
  1.  
  2. <html>
  3. 	<head>
  4. 		<title>
  5. 		</title>
  6. 	<link rel="stylesheet" type="text/css" href="css/style.css"/>
  7. 	</head>
  8. 	<body>
  9. 		<div class="box">	
  10. 		[/CODE]			
  11. 	</body>
  12. <html>


Är det så att du vill ha den precis i mitten i sidled så finns det faktist en lösning på detta för att få det fungera oavsett upplösning. Detta fungerar i Internet Exlorer, FireFox och Opera vad jag vet.

Man skappar då en extra div som ligger över den som innehåller information och det ska då se ut såhär i HTML:en.

HTML:
  1.  
  2. <html>
  3. 	<head>
  4. 		<title>
  5. 		</title>
  6. 	<link rel="stylesheet" type="text/css" href="css/style.css"/>
  7. 	</head>
  8. 	<body>
  9. 		<div class="ie_center">
  10. 			<div class="box">	
  11. 			[/CODE]		
  12. 		[/CODE]	
  13. 	</body>
  14. <html>


CSS:
  1.  
  2. .box {
  3. 	position: absolute;
  4. 	height: 100px;
  5. 	width: 100px;
  6. 	margin: auto;
  7. 	/* 
  8. 	margin-top: 200px;
  9. 	margin-left: 250px;
  10. 	*/
  11. }
  12.  
  13. .ie_center {
  14. 	text-align: center;
  15. }
  16.


Där är margin-top och margin-left kommenterad för att inte webbläsaren ska kunna se det och då inte använder det. margin: auto; gör som så att den automatiskt väljer korrekta värden för -left och -top beroende på webbläsarens storlek.



Färger och Border

Färger och borders är väldigt enkelt uppnåt med hjälp utav CSS, bakgrundsfärger så som färger på text. För färger används RGB-skalan, Red Green Blue står RGB för det fungerar även på svenska Röd Grön Blå. RGB-skalan använder sig utav tre hexadecimala siffror och en siffra kan vara allt ifrån 00-FF. Så det blir alltså FF0000 blir rött, 00FF00 blir grönt och 0000FF blir blått. För andra färger får du exprimentera eller använda dig utav något hjälpmedel.

För att få en blå bakgrund i exemplet tidigare så kan du ändra i .box{} så den ser ut såhär

CSS:
  1.  
  2. .box {
  3. 	position: absolute;
  4. 	height: 100px;
  5. 	width: 100px;
  6. 	margin: auto;
  7. 	background-color: #0000FF;
  8. }
  9.


Sen vill du kanske också ha en annan färg på texten också då lägger du till följande för att få en vit text.

CSS:
  1.  
  2. .box {
  3. 	position: absolute;
  4. 	height: 100px;
  5. 	width: 100px;
  6. 	margin: auto;
  7. 	background-color: #0000FF;
  8. 	text-color: #FFFFFF;
  9. }
  10.


För att få en border på en bild eller en div så använder man border. Det ser då ut såhär om vi använder föregående exempel för att göra en streckad 2px grön border.

CSS:
  1.  
  2. .box {
  3. 	position: absolute;
  4. 	height: 100px;
  5. 	width: 100px;
  6. 	margin: auto;
  7. 	background-color: #0000FF;
  8. 	text-color: #FFFFFF;
  9. 	border: 2px dotted #00FF00;
  10. }
  11.

Slut

Navigation:

Till toppen