Gratis Bloggdesign #4 | Hiawolfyra

 
GRATIS BLOGGDESIGN #4 | Du kan Ladda Ner Designen Här.
 
OM DESIGNEN;
Färgtema; Vit, Lila och Grå.
Meny; Dropdownmeny .
Övrigt; Speciella Fonter.
Bredd på Inlägg; 960px
Bredd på Profilbild; -
Bredd på Bilder; 960px
Bredd på Header; 991px


CSS / Stilmallen - "vad är vad"

Body - Bakgrund.

Wrapper - Själva bloggens "bakgrund", oftast vit.
Header - Bilden längst upp. Oftast med flera bilder och ett namn eller text
Side - Side, alltså menyn.
Content - Själva inläggen.(rubrik+inlägg). Du kan ändra på bredden där.
Entry headers - Inläggens rubrik.
Navheader - Menyns "header". Alltså rubrikerna
NavDet under rubrikerna i menyn, "innehåll".
Nav ul - Tillexempel, egna flikar i menyn som kanske inte är såna där Arkiv, kategori osv. Saker som te x "Om mig, bloggsvar," osv. Alltså eget = UL
Nav li - Flikar i menyn som har länkar, som inte är UL eller NAV. Tillexempel, "Tillbaka till bloggens startsida".
Post's body text - Inläggen. Man ändrar tillexempel skrivstil där
Posted by txt - "kommentarer, Allmänt, Kommentera här" Såna under inlägget.
Commentheader - Header på kommentarer. "postat av *namn*"
Commenttext - Kommentarer, texten.
Commentmeta - "Skrivet *datum och klocka* URL"
Commentform - Där du kommenterar ett inlägg

FLYTTA OBJEKT
margin:
Flyttar själva objektet.
padding: Flyttar själva texten inuti objektet.

1px 2px 3px 4px - 1px flyttar uppåt, 2px höger, 3px nedåt, 4px åt vänster
float: välj om du vill positionera objektet till höger eller vänster (inte center)

TEXT
font-weight: väljer om du vill ha tjock, kursiv eller normal text (bold, normal etc)
font-family: anger typsnitt (ex arial, verdana, sans-serif)
text-transform: anger om du vill ha stor eller liten text
text-decoration: anger om du vill ha understreck eller liknande på text

FÄRGER
Background - anger bakgrunden
color: anger färgen på texten glöm ej och skriva  före färgkoden

STORLEK
height: anger höjd
width: anger bredd


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.