CSS Guide - Basic

I detta inlägg tänkte jag lite kortfattat förklara om upprepande problem ni kommenterar om. Till exempel att allting dras åt ena sidan, till den andra sidan, det är inget mellanrum, osv. Jag ska förklara så gott jag kan för att ni ska förstå vad som menas med de olika koderna. CSS för övrigt står för ”Cascading Style Sheets”.

 



MARGIN

Margin fixar mellanrum från kanterna av ett element. Desto större tal det är på ”Margin” desto större mellanrum blir det längst med elementet (objektet som du sätter margin på). Men om man vill att bara en sida utav elementet ska ha margin, så går det att fixa också. Dessa margin-val finns det:

margin-top – ifall du vill att det ska bli mellanrum mellan element och det ovanför elementet.
margin-right – ifall du vill att det ska bli mellanrum mellan element och det till höger om elementet.
margin-bottom – ifall du vill att det ska bli mellanrum mellan element och det under elementet.
margin-left - ifall du vill att det ska bli mellanrum mellan element och det till vänster om elementet.

Sen finns det olika värden du kan ge margin. Du kan antingen ge den:

px - sätter avståndet i pixlar.
em
- 1″em” är lika med den aktuella textstorleken. 2″em” betyder två gånger större än textstorleken. ”Em” är en mycket användbar enhet i CSS, eftersom den kan anpassa sig automatiskt till typsnitt som läsaren använder.
%
- sätter avståndet i procent.
pt
- sätter avståndet i punkter.
cm
- sätter avståndet i centimeter.
auto
- sätter margin automatiskt.
(Fler behöver ni inte veta).

Exempel: ”margin:5px;”, ”margin-top:5cm;”, ”margin-bottom:4em;”, ”margin-right:5%;”, ”margin-left:auto;”.

Sen kan man sätta negativa tal istället – då får den ett värde som är tvärtom. Om vi säger att du har till exempel ”margin-top:-10px;” så kommer den dras uppåt istället. Det blir precis som att man skulle skriva ”margin-bottom:10px;” istället! Du sätter ett negativt tal genom att sätta dit ”-” innan talet.

 

BORDER

En border är en linje runtom ditt element. Om vi säger att du skriver in till exempel ”border:3px solid #000;” så betyder det alltså att den kommer bli ”3 pixlar” bred, solid (en helt vanlig linje) och färgen #000 (svart). Denna linje kommer synas runt hela dit element!

Några border stilar:

Dotted  – en border med punkter som stil.
Dashed - en border med ”-” runt om elementet.
Solid - ett heldraget streck runt om ett element.
Double - Som solid, fast med 2 streck på varandra, runt om ett element.
Groove - en räfflad 3D effekt runt om ett element. Effekten påverkas av vilken färg den är.
Ridge - en räfflad 3D effekt runt om ett element. Effekten påverkas av vilken färg den är.
Inset - en infälld 3D effekt runt om ett element. Effekten påverkas av vilken färg den är.
Outset - en utfälld 3D effekt runt om ett element. Effekten påverkar av vilken färg den är.

Exempel: ”border:1px dashed #000;”, ”border:2em double red”.

Som du ser så behöver man inte skriva färger i hex (exempel: #FFF), utan du kan också använda ord för att definiera färgen, så som ”red”, ”black”, ”yellow”, osv.

En border går dessutom att sätta på 1 sida om man bara vill det. Här är koderna för hur man sätter dom på olika sidor av ett element:

border-top:1px solid #000; - sätter en border på toppen av ett element.
border-bottom:1px solid #000; - sätter en border längst ner på ett element.
border-right:1px solid #000; - sätter en border längst till höger av ett element.
border-left:1px solid #000; - sätter en border längst till vänster av ett element.

(Kom ihåg att man kan ändra på ”1px”, ”solid” och ”#000″ till sin egna tjocklek, stil och färg).

 

FONT (texter)

En font är din text. Texten går att ändra till så som du vill ha den. Men det är viktigt att veta hur man ändrar på olika text. Du kan INTE bara skriva ”font: Times new roman” eller ”font:black;”. Utan du måste ange i CSSet vad det är du vill ändra. Här har ni de olika font-koderna:

font-size:12px; - Denna kod säger åt hur stor texten ska vara. I detta fall så kommer texten vara 12 pixlar. Talet kan ni själv ändra till antingen större eller mindre.
font-family:”Times New Roman”,Georgia,Serif; - Detta är vilket typsnitt texten ska vara i. Om webbläsaren inte kan använda sig utav det första typsnittet så använder den sig utav ”Georgia”, som vi angav och ifall den inte funkar, ”Serif”.
font-style:italic; - I detta fall så kommer texten bli ”italic”, alltså kursiv. Det finns normal, italic och oblique (oblique är liknande italic (krusiv) fast ännu mer lutande).
font-variant:small-caps; - I detta fall så skulle alla små bokstäver bli till versaler, fast i samma storlek som gemener. Det finns normal och small-caps.
font-weight:400; –
”font-weight” säger åt ifall texten ska vara small eller tjock. 400 i värde är lika med normal. Det finns ”100, 200, 300, 400, 500, 600, 700, 800, 900″, ”bold”, ”bolder”, ”lighter” och ”normal”.

Andra text egenskaper man kan ändra:

text-shadow:#000 20px -12px 2px; - ”Textskugga”.
text-transform:uppercase; - I detta fall så kommer all text att bli versaler (i versalers storlek), även om du skriver med små bokstäver. Finns också lowercase som gör texten till gemener, även om du skriver med stora bokstäver.
word-spacing:15px; - Detta menas med att det kommer bli ”15 pixlars” mellanrum mellan varje ord.

Jag tar inte med allt då det inte behövs.

Textens färg skrivs ALLTID som ”color:red;”. Alltså är ”color” koden du ska skriva in för att ändra färg på texten.



Läs gärna detta Innan du Kommenterar...
Vill du Beställa en Bloggdesign, Header eller Grafik så hittar du Information och Pris Här.
Jag gör INTE Designer Gratis åt någon på beställning. Acceptera detta!
Respektera innehållet i blogginläggen! - Orelaterade kommentarer kan raderas utan förvarning!
Jag tolererar inte elaka eller stötande kommentarer. Respektera mig och min blogg.
Spam, Reklam och Besöksfiske är INTE okej här. - IP Spärras utan förvarning!
Är du en Stalker?

Namn:


E-postadress:


URL / Bloggadress:


Din Kommentar: