Stylesheets på svenska 6 - marginaler och ramar

ilj@flowsim.se stylesheets på svenska 6 - stilmallar stylesheets: css/ stilmallar
	margin: ... margin-top: ... margin-right: ... margin-bottom: ... margin-left: ... padding: ... padding-top: ... padding-right: ... padding-bottom: ... padding-left: ... border: ... border-top-width: ... border-right-width: ... border-bottom-width: ... border-left-width: ... border-width: ... border-color: ... border-style: ... MARGIN - marginal margin-top: ... margin-right: ... margin-bottom: ... margin-left: ... margin: ... En bred vänstermarginal (70 pixlar) får sidan om man skriver så här: <STYLE TYPE="text/css"> <!-- BODY { margin-left: 70px } --> </STYLE> H3-rubriker får en högermarginal som är 30 pixlar bred om man skriver så här: <STYLE TYPE="text/css"> <!-- H3 { margin-right: 30px } --> </STYLE> Möjliga värden efter margin-top:, margin-right:, margin-bottom: och margin-left: förutom längdangivelse är: auto Om man vill bestämma bredden på sidans samtliga marginaler kan man skriva så här : <STYLE TYPE="text/css"> <!-- BODY { margin-top: 40px margin-right: 35px margin-bottom: 60px margin-left: 35px } --> </STYLE> Samma sak kan också skrivas så här: <STYLE TYPE="text/css"> <!-- BODY { margin: 40px 35px 60px } --> </STYLE> Första siffran bestämmer bredden på margin-top, andra siffran bestämmer bredden på margin-right osv. Ordningsföljden är alltså margin-top - margin-right - margin-bottom - margin-left Eftersom vänstermarginalen i exemplet ovan ska vara lika bred som högermarginalen (3.5 centimeter) behöver man inte ange något mått för den. Om alla marginaler ska vara lika breda kan man skriva så här: <STYLE TYPE="text/css"> <!-- BODY { margin: 40px } --> </STYLE> Om utrymmet över och under textmassan ska vara 40 pixlar och vänster- och högermarginalerna båda ska vara 60 pixlar breda och kan man skriva så här: <STYLE TYPE="text/css"> <!-- BODY { margin: 40px 60px} --> </STYLE> PADDING padding-top: ... padding-right: ... padding-bottom: ... padding-left: ... padding: ... Med hjälp av padding anger man hur mycket tomrum som ska finnas mellan t ex en textrad och dess omgivande element, t ex en ram (border). Så här kan man exempelvis bestämma alla H3-rubrikers padding: <STYLE TYPE="text/css"> <!-- H3 { padding-top: 10px } H3 { padding-right: 20px } H3 { padding-bottom: 30px } H3 { padding-left: 40px } --> </STYLE> Samma sak kan skrivas så här: <STYLE TYPE="text/css"> <!-- H3 { padding: 10px 20px 30px 40px} --> </STYLE> Första siffran bestämmer bredden på padding-top, andra siffran bestämmer bredden på padding-right osv. Ordningsföljden är alltså padding-top - padding-right - padding-bottom - padding-left Om tomrummet över och under rubriken ska vara 10 pixel och tomrummet till höger och vänster ska vara 20 pixel räcker det med att skriva så här: <STYLE TYPE="text/css"> <!-- H3 { padding: 10px 20px} --> </STYLE> BORDER - ram border-top-width: ... border-right-width: ... border-bottom-width: ... border-left-width: ... border-width: ... border-color: ... border-style: ... Alla H2-rubriker får en svart ram av varierande bredd om man skriver så här: <STYLE TYPE="text/css"> <!-- H2 { border-top-width: thick } H2 { border-right-width: thin } H2 { border-bottom-width: medium } H2 { border-left-width: thick } --> </STYLE> Samma sak kan skrivas så här: <STYLE TYPE="text/css"> <!-- H2 { border-width: thick thin medium thick} --> </STYLE> Om ramen ska vara lika bred runt om kan man skriva så här: <STYLE TYPE="text/css"> <!-- H2 { border-width: thick } --> </STYLE> Alla H1-rubriker får en 30 pixel bred ram om man skriver så här: <STYLE TYPE="text/css"> <!-- H1 { border-width: 30px} --> </STYLE> F�r att reglera ramens bredd kan man använda något av orden thin, medium eller thick men man kan också ange bredden i t ex pixel och skriva så här: 10px eller i centimeter och skriva så här: 0.5cm Ramens färg bestämmer man med hjälp av border-color:. Alla H4-rubriker får en svart ram om man skriver så här: <STYLE TYPE="text/css"> <!-- H4 { border-color: black } --> </STYLE> Ramens utseende bestäms med hjälp av border-style:, t ex: H1 { border-style: dotted} Möjliga värden efter border-style: är: none\| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset Så här ser en H2-rubrik med ram av typen inset ut i Netscape Navigator 4 (Windows): Stilmallen som bestämmer den här H2-rubrikens utseende ser ut så här: <STYLE TYPE="text/css"> <!-- H2 { background-color: white } H2 { color: black } H2 { border-color:gray} H2 { border-width:10px} H2 { border-style:inset} --> </STYLE> Samma H2-rubrik men med padding satt till 10px (10 pixel) och border-style satt till groove ser ut så här: Stilmallen ser ut så här: <STYLE TYPE="text/css"> <!-- H2 { padding:10px} H2 { background-color: white } H2 { color: black } H2 { border-color:gray} H2 { border-width:10px} H2 { border-style:groove} --> </STYLE> En H1-rubrik med en ram av typen ridge ser ut så här: Stilmallen ser ut så här: <STYLE TYPE="text/css"> <!-- H2 { padding:10px} H2 { background-color: white } H2 { color: black } H2 { border-color:gray} H2 { border-width:30px} H2 { border-style:ridge} --> </STYLE> OBS! Stilmallar fungerar i varierande grad i nyare webbläsare (Netscape 4.0+ o MIE 4.0+); det är definitivt bäst att kolla sidan i åtminstone både Netscape Navigator och MIE. Mer om stilmallar under rubriken STYLESHEETS på www.flowsim.se Sidan gjordes av ilj@flowsim.se Fungerar bäst med Netscape 4.0+. Senast ändrad 13 mars 2004 Den här sidan hör hemma i ett ramsystem hos: www.flowsim.se Stilmallar på svenska