Forum: CSS - Cascading Style Sheets

Forum huvudsida -> Kommentarer -> Paket -> CSS - Cascading Style Sheets

Sidor: 1

Till botten

Granden 20:06 - 12:a Mars 2006 | Post #1
Medlem
Inlägg: 70


Skicka PM 		= CSS EUR" 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=EUREUR till något passande men kom ihåg att filändesen ska vara .css. [CODE] [/CODE] Exempel HTML: [CODE] [/CODE] 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: [CODE] .box { height: 100px; width: 100px; } [/CODE] HTML: [CODE]
[/CODE] == 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: [CODE] .box { position: absolute; height: 100px; width: 100px; margin-top: 200px; margin-left: 250px; } [/CODE] HTML: [CODE]
[/CODE] ,,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: [CODE]
[/CODE] CSS: [CODE] .box { position: absolute; height: 100px; width: 100px; margin: auto; /* margin-top: 200px; margin-left: 250px; */ } .ie_center { text-align: center; } [/CODE] 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: [CODE] .box { position: absolute; height: 100px; width: 100px; margin: auto; background-color: #0000FF; } [/CODE] 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: [CODE] .box { position: absolute; height: 100px; width: 100px; margin: auto; background-color: #0000FF; text-color: #FFFFFF; } [/CODE] 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: [CODE] .box { position: absolute; height: 100px; width: 100px; margin: auto; background-color: #0000FF; text-color: #FFFFFF; border: 2px dotted #00FF00; } [/CODE]

Om tråden är låst kan det vara för att paketet inte har blivit godkänt.

-------------------------
With great power, comes great opportunity to abuse that power


Independence 21:23 - 14:e Mars 2006 | Post #2
Administratör
Inlägg: 1800


Skicka PM 		Som sagt kan du även ändå så att HTML-koden får syntax hilighting med html4scrict-argumentet till source-taggen (kolla BBCode-sidan).

-------------------------

Vi är riddarna som säger fiskbulle!


HärJ 22:03 - 14:e Mars 2006 | Post #3
Moderator
Inlägg: 1198


Skicka PM 		jag hade inte tänkt att godkänna den förrän det var fixat Smiley

-------------------------
Tänk om jag vore en skalärprodukt!


Granden 19:41 - 17:e Mars 2006 | Post #4
Medlem
Inlägg: 70


Skicka PM 		Aha det ska vara scrict Smiley Jag som skrivit strict eller ifall det var script trode du stavat fel Smiley

-------------------------
With great power, comes great opportunity to abuse that power


Independence 19:51 - 17:e Mars 2006 | Post #5
Administratör
Inlägg: 1800


Skicka PM 		Nej, jag stavade fel Smiley Det Ska vara html4strict

-------------------------

Vi är riddarna som säger fiskbulle!


Granden 09:51 - 18:e Mars 2006 | Post #6
Medlem
Inlägg: 70


Skicka PM 		Jäkla klant, först i IRC-kanalen och sen samma stavfel här. Smiley

-------------------------
With great power, comes great opportunity to abuse that power


Independence 11:24 - 18:e Mars 2006 | Post #7
Administratör
Inlägg: 1800


Skicka PM 		Jag sa båda gångerna att du skulle läsa i dokumentationen, men det var visst för svårt för dig.. Smiley

-------------------------

Vi är riddarna som säger fiskbulle!


Granden 16:52 - 18:e Mars 2006 | Post #8
Medlem
Inlägg: 70


Skicka PM 		Tycker vi abryter diskussionen dära, och ber alla strycka sitt senaste inlägg Smiley

-------------------------
With great power, comes great opportunity to abuse that power

Senast redigerad 18:50 - 18:e Mars 2006


Sidor: 1

Forum huvudsida -> Kommentarer -> Paket -> CSS - Cascading Style Sheets
Atom feed

Du får inte posta i den här tråden | Till toppen