CSS Cascading Style Sheets Varfr CSS Ltt att

CSS Cascading Style Sheets

Varför CSS • • • Lätt att underhålla Mindre filstorlekar Ökad tillgänglighet Olika media Större typografisk kontroll

INTRO TILL CSS L 2

• <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> • <html xmlns="http: //www. w 3. org/1999/xhtml"> • <head> • <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> • <title>L 2</title> • </head> • • • <body> <h 1>Rubrik nivå 1</h 1> <h 2>Rubrik nivå 2</h 2> <p> Lorem ipsum. . . </p> </body>

CSS-fil: L 2. CSS • h 1 { text-align: center; } • h 2 { font-style: italic; } • p { color: maroon; } <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>L 2</title> <link href="L 2. css" rel="stylesheet" type="text/css" /> </head>

Deklarationer • h 1 { text-align: center; } • h 2 { font-style: italic; } • p { color: maroon; }

Kommentar, kombinerade selektorer @charset "utf-8"; h 1, h 2 { text-align: center; color: #007 FFF; /*Färgerna anges som RR GG BB*/ } h 2 { font-style: italic; } p { color: maroon; }

Formattera font h 2 { font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 100%; line-height: 120%; font-family: Arial, Helvetica, sans-serif; }

Kantlinjer h 1 { border-width: 1 px; border-style: dashed; border-color: red; }

Padding p { color: maroon; padding-top: 1 em; padding-right: 2 em; padding-bottom: 3 em; padding-left: 4 em; border-width: 1 px; border-style: solid; border-color: blue; line-height: 130%; }

Margin p { color: maroon; margin-top: 1 em; margin-bottom: 3 em; border-width: 1 px; border-style: solid; border-color: blue; line-height: 130%; }

SELEKTORER L 3

Klasselektorer <div id="content"> <h 1>Rubrik 1</h 1> <p class="intro"> Lorem ipsum. . . </p> <p>Duis aute irure. . . </p> </div> <div id="nav"> <p>detta är nav</p> <ul> <li><a href="#" class="intro">item 1</a></li> <li><a href="#" >item 2</a></li> <li><a href="#" >item 3</a></li> </ul> </div> <div id="footer">Lorem ipsum dolor <a href="#">sit</a> amet </div>

Klasselektorer <div id="content"> <h 1>Rubrik 1</h 1> <p class="intro"> Lorem ipsum. . . </p> <p>Duis aute irure. . . </p> </div> . intro { font-weight: bold; <div id="nav"> <p>detta är nav</p> <ul> <li><a href="#" class="intro">item 1</a></li> <li><a href="#" >item 2</a></li> <li><a href="#" >item 3</a></li> </ul> </div> <div id="footer">Lorem ipsum dolor <a href="#">sit</a> amet </div> p. intro { color: red; } } a. intro { color: green; } #nav { color: blue; }

Klasselektorer <div id="content"> <h 1>Rubrik 1</h 1> <p class="intro"> Lorem ipsum. . . </p> <p>Duis aute irure. . . </p> </div> . intro { font-weight: bold; <div id="nav"> <p>detta är nav</p> <ul> <li><a href="#" class="intro">item 1</a></li> <li><a href="#" >item 2</a></li> <li><a href="#" >item 3</a></li> </ul> </div> <div id="footer">Lorem ipsum dolor <a href="#">sit</a> amet </div> p. intro { color: red; } } a. intro { color: green; } #nav { color: blue; }

Klasselektorer <div id="content"> <h 1>Rubrik 1</h 1> <p class="intro"> Lorem ipsum. . . </p> <p>Duis aute irure. . . </p> </div> <div id="nav"> <p>detta är nav</p> <ul> <li><a href="#" class="intro">item 1</a></li> <li><a href="#" >item 2</a></li> <li><a href="#" >item 3</a></li> </ul> </div> <div id="footer">Lorem ipsum dolor <a href="#">sit</a> amet </div> @charset "utf-8"; li {color: blue; }. intro {font-weight: bold; } p. intro {color: red; } a. intro {color: green; } #nav { color: blue; } #nav ul li a { color: green; }

STILMALLAR 3 sätt att stila på L 4

In-line-kod <h 1>Rubrik 1</h 1> <p style="font-family: Arial, Helvetica, sans-serif; margin: 15 px; padding: 1 em; backgroundcolor: gray; width: 10 em; color: yellow"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> (4 a)

Rubrikformat <title>L 4</title> <style type="text/css" media="screen"> p { font-family: Arial, Helvetica, sans-serif; margin: 15 px; padding: 1 em; background-color: red; width: 10 em; color: black; } </style> </head>

Extern stilmall @charset "utf-8"; p { font-family: Arial, Helvetica, sans-serif; margin: 15 px; padding: 1 em; background-color: gray; width: 10 em; color: white; } h 1 { margin: 15 px; }

Box-modellen L 5

Box-modellen <div id="content"> <h 1> Rubrik 1 </h 1> <p> Lorem. . . </p> </div> #content {margin: 10 px; border: 5 px solid gray; background-color: blue; width: 200 px; padding: 25 px; } p {font-family: Arial, Helvetica, sans-serif; margin: 15 px; padding: 10 px; background-color: gray; margin: 20 px; border: 10 px dashed white; background-color: red; width: 120 px; } h 1 {color: white; }