Gör egna stilmallskoder

Hej hörrni! Idag blir det ett skriftligt tips som senare kan komma att kompletteras med video om så önskas. Detta tips handlar om hur du gör egna stilmallskoder som du sedan kan styra din kodmall med.

Det finns två typer av css-koder; de som är återkommande, och de som bara finns med en gång. Exempel för det som bara finns med en gång: content (alltså inläggen, den vanligtvis vita bakgrunden bakom inläggen, alltså det vita som finns bakom denna text), det finns bara en gång. Det finns inte två content. Det som bara finns med en gång har en hashtag (#) framför sig i stilmallen och styrs utav div id-taggar i kodmallen. Exempel på återkommande: länkar de finns inte bara med en gång, utan dessa kan ju finnas på flera ställen; i menyn, i inläggen, i headern, i kommentarerna - de är återkommande. Det som finns med flera gånger har en punkt (.) framför sig i stilmallen och styrs utav div class-taggar i kodmallen.

När du sedan ska styra en text eller något annat med en css-kod i kodmallen så kan du göra många olika koder, men för de återkommande gäller class och för de som bara finns med en gång gäller id. Vanligtvis använder vi oss utav div, men man kan också lägga in section id eller liknande. Det pratar jag om i detta tips.

Tillbaka till CSS - om det är en kod som ska vara återkommande så ska den se ut som följande:
.exempel {
color: #000000;
font-family: georgia, arial, tahoma;
font-size: 10px; }

Vad säger denna kod? (i kronologisk ordning)
Jo, den säger till kodmallen att allt som styrs av denna kod ska vara svart text, ha typsnittet georgia (om georgia inte är kompatibelt på läsarens dator, så blir det arial istället, funkar inte det blir det tahoma) och vara i storleken 10px. Det finns massor av fler saker man kan styra via, men jag kan inte ta upp alla, som ni säkert förstår. Det som gör att detta är en återkommande kod är punkten innan ordet exempel i första raden.

Om det är en kod som bara finns en gång i kodmallen så ska den se ut som följande:
#exempel {
background: #ffffff;
width: 200px;
height: 700px;
}

Vad säger denna kod? (i kronologisk ordning)
Denna kod säger att det som ska styras av koden ska ha en bakgrund som är vit, vara 200px bred, 700px hög. Det finns massor av fler saker man kan styra via, men jag kan inte ta upp alla, som ni säkert förstår. Det som gör att detta är en kod som bara ska finnas en gång är hashtagen/fyrkanten innan ordet exempel i första raden.

Du kan alltså lägga till sådana här stycken i din stilmall när du vill och döpa dem till vad du vill. Ett exempel på vad jag har för "lösa koder" är till exempel hur jag styr min profiltext (under profilbilden här till vänster). och denna kod ser ut såhär:

.profiltext {
border-right: 6px solid #fff;
font-family: tahoma;
font-size: 9px;
text-align:center;
font-weight: normal;
color: #c0c0c0;
padding: 0px 8px 0px 8px;
margin: 0px 0px 0px 0px;
border-bottom: 0px dotted #e4dede;
margin-top: -20px;
}

Kommentarer:

1 ▲ S A N N A:

skriven

jag förstår inte riktigt hur man bestämmer vad som ska styras från stilmallskoden? Man kan väl inte bara lägga in koden i stilmallen, för då är det ju inget som ändras. hoppas du förstår hur jag menar! :)

Svar: Du måste ju lägga den med div class eller div id i din kodmall, sedan styr du den från stilmallen.
sannas rum

2 Hannah Danielsson:

skriven

jag har ju min dropdown som hoppar runt p.g.a blogg.se's banner och du sa att jag skulle ta hjälp med detta tips menjag förstår fortfarande inte riktigt. Vad är det för kod jag ska lägga in i kodmallen coh vilken är det jag ska ha i stilmallen? och är den i kodmallen återkommande? hihi känner mig helt lost! kram :)

Svar: Du gör en egen .-kod i stilmallen. Förslagsvis .dropdown { } också får du lägga värden då inom den (Margin och padding), och sedan gör du div tagg med Class (i och med att det är en . Innan din tagg i stilmallen. Sedan lägger du div class="dropdown" runt dropdownkoden, men inom div id="header". Ska försöka göra en video om hur man löser dropdownkoden trots bannern ikväll.
sannas rum

Kommentera här: