Gå til innhold

Hvordan lære seg CSS - en liten statustråd

Aalton

Av Aalton
i Programmering og webutvikling

Anbefalte innlegg

Aalton

Aalton

Skrevet
Skrevet

Jeg har nå lenge sittet og tenkt på å lære meg webdesign; CSS og HTML er det jeg begynner med i første omgang, jeg kan nevne jeg har fått litt tips og hjelp i Webcaféen av de som kan dette ganske godt.

 

Jeg bruker denne siden for å lære meg det grunnleggende;

htmldog.com - CSS beginner

Og har brukt denne delen av siden for å lære meg det grunnleggende html kodingen;

htmldog.com - HTML beginner

 

Disse 2 delene av siden Htmldog.com er veldig fine til å se og skjønne kodespråket på en enkelt måte.

 

Jeg understreker at jeg ikke kan noe annet enn html, altså dette;

<html>
<head>   
   <title>Ole Marius tester</title>
<link rel="stylesheet" href="noespennende.css">
</head>
<body>
<h1>This is a test</h1>
<p style="background-color: #ffffff;">Dette er noe utrolig spennende som handler om ingenting</p>
</body></html>

 

Og jeg begynner så vidt med litt CSS-kode her;

 

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
background-image: url(http://www.eksempelside.jpg);
background-repeat: repeat-x;
background-color: #f1f2f7;
}

 

Jeg vil da også nevne at jeg har bare kopiert denen koden for å la dere skjønne hva jeg vil begynne med absoulutt først :)

 

Det kommer mer etterhvert som jeg lærer mer og det vil komme i updates; jeg blir ikke lei meg om dere gir meg tips o.l på veien.

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
PHPdude

PHPdude

Skrevet
Skrevet

htmldog.com er en veldig bra side, vis du har lest alle tutorials der og skjønner hva som menes er du godt på vei.

En annen side med veldig mye bra innhold er alistapart.com, litt vanskelig å finne fram i alt som er der men... Dette er mer en ressurs for hvordan du kan lage virkelig bra sider og ikke for å lære det grunnleggende

 

Lykke til!

Lenke til kommentar
Aalton

Aalton

Skrevet
  • Forfatter
Skrevet 

<style type="text/css">
p {
 color: red;
}

a {
 color: blue;
}
</style>

 

Jeg har prøvd ut dette i Opera og FF, siden noen mente vi måtte bruke en annen måte for å få frem fargene, men det ser ut til at dette ikke er nødvendig, da det funker slik :)

Lenke til kommentar
Aalton

Aalton

Skrevet
  • Forfatter
Skrevet

Dette er nå min følgende CSS-fil;

 

body {
font-family: arial, helvetica, sans-serif;
font-size: 0.8em;
}

h1 {
font-size: 2em;
}

h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 1em;
padding: 3em;
}

a {
text-decoration: none;
}

strong {
font-style: italic;
text-transform: uppercase;
}

p {
letter-spacing: 0.5em;
word-spacing: 2em;
line-height: 1.5;
text-align: center;
}

 

Det jeg har skjønt;

 

- du kan gjøre veldig mye med CSS, som:

- bagrunsfarge

- tesktfarge

- rammer

- fonter

- ulik styling

 

Eller for å si det veldig eneklt at alle de ulike lementene jeg har i i koden min, så kan jeg uansett gå inn å legge til justering som at jeg vil at det som er uthevet skal ha egene tekst høyder og linjer avstander, egne fonter og frager.

 

Dette er egentlig ganske spennende :)

Lenke til kommentar
PHPdude

PHPdude

Skrevet
Skrevet

Det du sier om bakgrunnsfarge, tekstfarge, rammer osv osv stemmer det, men det er jo bare toppen av isfjellet. Alt det der er jo ting som man greit har fått til med å kode stilen rett inn HTML-koden.

Funksjonalitet som gjør CSS unikt er ting som:

- Muligheten posisjonere elementer på forskjellige steder uten endringer i HTML

- Ha forskjellelige stilark i forskjellige situasjoner. f.eks når siden skal vises på en mobiltelefon etc eller printes. Man kan også tilby brukeren et alternativt stilark med et helt annet utseendet som brukeren kan benytte etter ønske.

- Stilregler som gjelder alle elementer

- Separering av innhold (HTML) og presentasjon (CSS)

- Det at CSS er universalt og kan brukes utenfor HTML

Kunne sikkert ha fylt ut mye mer her men ser du ser nok bildet :)

Lenke til kommentar
Moonshine

Moonshine

Skrevet
Skrevet

Det jeg har funnet ut at jeg skulle lært meg når jeg var i samme situasjon om deg, var syntaxen til CSS.

 

W3schools går vel ikke grundig nok gjennom det, når jeg ser etter. Maxdesign derimot! Når du er ready, kan du lese igjennom det! :)

 

Det er essensielt for videre koding av CSS at du ikke gjør slik:

a { 
color: #fff; 
text-decoration: underline;
}
a.credit { 
color: #fff;
font-weight: bold;
text-decoration: none;
}
a.adress {
color: #ccc;
font-weight: bold:
text-decoration: none;
}

 

men gjør ting enkelt og greit ved å gjøre slik:

a {
color: #fff;
text-decoration: underline;
}
a.credit, a.adress {
font-weight: bold;
text-decoration: none;
}
a.adress { color: #ccc; }

 

Jeg slår altså sammen det som kan slåes sammen, og definerer kun en gang det som kun trenger å bli definert en gang. :p

Litt tørt eksempel, men jeg lover deg at komplekse siders CSS kan bli jævlig tricky og gjerne uforståelig uten gode rutiner.

 

:)

Lenke til kommentar
the_fire

the_fire

Skrevet
Skrevet

Jeg har jobbet litt med CSS og (X)HTML i det siste, og jeg vil si at det jeg har lært mest av har vært å lage sider med bruk av guider og tutorials. Det hjelper veldig med litt basiskunskaper fra htmldog og w3schools, men det å følge godt lagede tutorials hjelper også.

 

Her er en:http://www.subcide.com/tutorials/csslayout/

 

Det å kopiere layouts (eksempel) for så å videreutvikle disse hjelper også.

Mitt tips er å ikke prøve å lage alt fra grunnen av, i hvertfall ikke i starten.

Lenke til kommentar
qualbeen

qualbeen

Skrevet
Skrevet
gjør ting enkelt og greit ved å gjøre slik:

a {
    color: #fff;
    text-decoration: underline;
}
a.credit, a.adress {
    font-weight: bold;
    text-decoration: none;
}
a.adress { color: #ccc; }

Jeg slår altså sammen det som kan slåes sammen, og definerer kun en gang det som kun trenger å bli definert en gang. :p

Litt tørt eksempel, men jeg lover deg at komplekse siders CSS kan bli jævlig tricky og gjerne uforståelig uten gode rutiner.

7286629[/snapback]

I tillegg til å slå sammen fler ting, som du ga eksempel på, er det også greit å vite at elementer kan arve egenskaper! Riktignok ikke den samme typen arv som i objekt-orienterte språk, så istedefor en dårlig forklaring kommer jeg med et ekslempel:
*{
   padding:0;
   margin:0;
   border:0;
}

.idnr1{
  /* trenger ikke definere padding/margin/border, de er 0 pga stjernen over */
  text-size:3em;
}

I tillegg kan man gi css-egenskaper til html og body-taggen, på lik linje som med eksempelvis

p og a-taggene.

 

Ett css-dokument leses fra toppen og nedover, så setter du et element til først rød farge, og senere til grønn, er det siste spesifisjon som gjelder. Angir man ikke css bruker nettleseren default styling, og denne varierer gjerne bittelitt fra nettleser til nettleser. Derfor begynner jeg alltid et css-dokument med *{padding:0; margin:0; } (sleng gjerne med mer inn, f.eks. font, bakgrunnsfarge m.m.)

Lenke til kommentar
Haraldson

Haraldson

Skrevet
Skrevet

Hva lurer du på, egentlig?

 

* er wildcard og vil gjelde for alle elementer. Siden CSS leses ovenfra, vil da alle elementer først tilegnes margin, padding og border = 0, slik at du slipper å tenke på det hele tida.

 

Hvorfor absolutt nulle ut alle marginer, paddinger og borders? Forskjellige nettlesere har forskjellige standardverdier her, og ved å gjøre dette blir forskjellene mindre og det blir lettere å få ting likt i alle nettlesere.

Lenke til kommentar
qualbeen

qualbeen

Skrevet
Skrevet

Mulig jeg ikke forklarte meg godt nok, godt å bli backa opp av Mr.Berg ;)

 

Skal man ikke angi hvilke nstandard man koder etter først, altså w3 standaren..

7304612[/snapback]

Nei, i et css-dokument angir man ingen standard, der begynner man rett på koding uten noe tant og fjas på toppen :p

 

Ta f.eks en titt på diskusjon.nos css-dokument, så ser du hvordan et større stylecheet kan se ut: http://static.diskusjon.no/diskusjon.no/css/diskusjon.css (dog lurer jeg på hvorfor de bruker store bokstaver i 'html' og 'img', men det er nå små-pirk)

Lenke til kommentar
Aalton

Aalton

Skrevet
  • Forfatter
Skrevet
Hva lurer du på, egentlig?

 

* er wildcard og vil gjelde for alle elementer. Siden CSS leses ovenfra, vil da alle elementer først tilegnes margin, padding og border = 0, slik at du slipper å tenke på det hele tida.

 

Hvorfor absolutt nulle ut alle marginer, paddinger og borders? Forskjellige nettlesere har forskjellige standardverdier her, og ved å gjøre dette blir forskjellene mindre og det blir lettere å få ting likt i alle nettlesere.

7304625[/snapback]

 

Så når jeg skriver som jeg gjør i CSS koden min over kan jeg slippe å skrive padding og borders o.l hele tiden?

Lenke til kommentar
qualbeen

qualbeen

Skrevet
Skrevet (endret)
Klikk for å se/fjerne innholdet nedenfor

Aha, da skjønte jeg mer, men htmldog.com sier noe annet :hmm:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>CSS Example</title>

<style type="text/css">

p {

  color: red;

}

 

a {

  color: blue;

}

</style>

 

 

Men hva betyr dette;

no-repeat;

7304812[/snapback]

jeg snakket om et css-dokument, mens du et html-dokument. Dette er to forskjellig ting. Riktignok er det ganske utbredt å skrive all css-stylingen inne <head>-taggen (i <style-tag>), men jeg vil anbefale å holde disse adskilt.

 

Bruk et dokument for html, og et annet for css. I <head>-delen i html-dokumentet linker du til css'en din vha <link rel="stylesheet" href="http://static.diskusjon.no/diskusjon.no/css/diskusjon.css" /> (bytt ut 'href' med din egen sti)

 

 

EDIT: no-repeat

Endret av qualbeen
Lenke til kommentar
Arve Systad

Arve Systad

Skrevet
Skrevet
Hva lurer du på, egentlig?

 

* er wildcard og vil gjelde for alle elementer. Siden CSS leses ovenfra, vil da alle elementer først tilegnes margin, padding og border = 0, slik at du slipper å tenke på det hele tida.

 

Hvorfor absolutt nulle ut alle marginer, paddinger og borders? Forskjellige nettlesere har forskjellige standardverdier her, og ved å gjøre dette blir forskjellene mindre og det blir lettere å få ting likt i alle nettlesere.

7304625[/snapback]

 

Så når jeg skriver som jeg gjør i CSS koden min over kan jeg slippe å skrive padding og borders o.l hele tiden?

7304819[/snapback]

 

Om du vil ha padding/margin-verdiane til å vere lik 0 (null), så slepp du det ved å ha den "universalregelen" øverst ja.

 

Grunnen til å ha med følgande:

* { margin: 0; padding 0; }

...øverst i dokumentet er rett og slett for å hindre ein del problem relatert til nettopp desse verdiane seinare i prosessen. Dessutan får du på denne måten fullstendig kontroll seinare, du ser veldig lett kvar du treng litt ekstra mellomrom - og då er det jo berre å gi det spesifike elementet den verdien av margin/padding som du synest ser bra ut :)

 

Rett og slett eit lite "triks i ludo", som vi seier her i forcen :)

Lenke til kommentar
  • 1 måned senere...

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...