Reflektert dagbok – multimediedesign

CSS font og farger

Som en fortsettelse av forrige oppgave skulle vi lage en separat tekstfil og kalle den index_CSS.css, og linke den inne i HTML-dokumentet i <head>-området. Denne tekstfilen skulle vi deretter kode med enkel CSS slik at skriften skiftet og fargen på skriften skiftet. Her er litt utprøving med CSS font og farger. CSS er helt nytt for meg, og veldig gøy å se hvor lett det skifter – magisk!

CSS-kode for rød overskrift <h1< i Verdana:

Slik så det ut i nettleseren:

Skiftet til grønn Times New Roman overskrift, kode og nettleser:

Jeg gjorde om innledningen en ingress ved å gjøre den bold, ved å bruke <b> og </b> i HMTL-dokumentet.

Så ville jeg prøve i forandre selve teksten i dokumentet til samme farge i CSS, det vil si all tekst som var innenfor paragraf-klammer <p> og </p>. Jeg fikk til de fleste tekstbolkene, men den delen av teksten som var med kulepunkter, ville den ikke farge grønn! Selv om jeg sørget for <p> og </p> foran og bak de tre setningene med kulepunkter. Jeg synes dette er litt merkelig, er det noen som vet hvorfor? Hva kunne jeg har gjort annerledes?

Se kode i HTML og CSS, samt skjermbilder. (Ps. Det første dokumentet index.html som opprinnelig ble laget i Notepad måtte åpnes i ett nytt program for å bli redigerbart, og jeg valgte Dreamweaver. Det er første gang jeg har brukt Dreamweaver, så det er temmelig spennende!🙂

CSS:

Nettleser:

 HTML i to deler:

Tar gjerne tips om hvorfor CSS ikke forstår <p>taggene når der er <li> tagger også…?

Ny versjon

Laget en ny versjon av HTML og CSS’en. Først fjernet jeg p-taggene foran og bak li-taggene, de var visst overflødige. P betyr «paragraph» og li betyr «list», så jeg trengte ikke begge. Når det var gjort skjedde det ikke noe før jeg hadde definert at «li» skulle ha fargen grønn i CSS’en. Som det var kodet før, stod det kun at «p» skulle være grønn. Slik ble HMTL og CSS riktig:

Da ble all tekst grønn i browseren som jeg hadde tenkt:

7 responses

  1. Har du prøvd å legge til en ‘ style’? Hva jeg mener er å legge inn dette, e.l:

    li {
    font, farge bla bla

    }

    Jeg regner med at siden er en tag, så blir utseendet av kulepuktene ikke påvirket av . Jeg har ikke prøvd dette selv, men man må vanligvis opplyse om absolutt alt, selv om det for oss virker som en selvfølge at det er forståelig og logisk🙂 Håper dette virker!

    januar 23, 2011, kl. 11:17

    • Herregud, god morgen Sara.. Jeg skrev jo selvfølgelig selve tagene i kommentaren, så nå synes jo ikke de på denne sida, siden det er html:P

      Jeg mente å si ‘li style’ og «Jeg regner med at siden er en tag, så blir utseendet av kulepuktene ikke påvirket av .»

      Skal gå å lage meg kaffe nå..🙂

      januar 23, 2011, kl. 11:22

  2. Ok, samme skjedde igjen, selv med mellomrom, tror jeg skal slutte å skrive <'er i det hele tatt, haha.

    “Jeg regner med at siden li er en tag, så blir utseendet av kulepuktene ikke påvirket av p.”

    Sorry at jeg spammer kommentarboksen din!😀

    januar 23, 2011, kl. 11:25

    • Komplimentet ovenfor var til DEG, Sara, altså og ikke til meg…😉

      februar 3, 2011, kl. 21:28

  3. Hei Sara! Takk for hyggelig spam!🙂
    Jeg skal teste det ut, er bare litt sliten for tiden så det går litt tregere enn vanlig. Det blir litt på skippertaksmåten i disse dager.

    Fikk også en kommentar fra Kristin på forumet som må testes ut.

    januar 23, 2011, kl. 22:17

    • Jeg hadde en ekstra p-tag som jeg fjernet før og etter, trengte bare li-taggene. Og så var det akkurat slik du sa, jeg trengte å definere fargen på li-tagget område i CSS’en. Etter jeg hadde gjort dette ble alt grønt!🙂 Du er så flink!

      februar 3, 2011, kl. 21:28

  4. Jeg svarer på mine egne kommentarer isteden for på dine, Sara, så ble det surr i rekkefølgen her. Nå er det jeg selv som spammer min egen blogg… he he he he😀

    februar 3, 2011, kl. 21:50

Legg igjen en kommentar

Fyll inn i feltene under, eller klikk på et ikon for å logge inn:

WordPress.com-logo

Du kommenterer med bruk av din WordPress.com konto. Logg ut / Endre )

Twitter picture

Du kommenterer med bruk av din Twitter konto. Logg ut / Endre )

Facebookbilde

Du kommenterer med bruk av din Facebook konto. Logg ut / Endre )

Google+ photo

Du kommenterer med bruk av din Google+ konto. Logg ut / Endre )

Kobler til %s