Slik tilpasser en blåkopi i CSS

June 19

CSS Blueprint er en utrolig nyttig startpakke for web-designere og nybegynnere. Det gir flere stilark, støttedokumentasjon og et par HTML-maler for å få deg i gang. Imidlertid er det Blueprint ikke mye bruk på egen hånd. Du må tilpasse både HTML og CSS stilark før websiden kan virkelig ta form. Hvis du er en nybegynner, er det vanskelig å vite hvor du skal begynne, som Blueprint inneholder mange forskjellige filer og mapper.

Bruksanvisning

1 Finn Blueprint kit mappen hvor du pakket det på harddisken din og åpne den. Åpne "screen.css" ligger i "Blueprint" -mappen i din favoritt HTML eller tekst editor. Denne filen inneholder alle stilene levert av Blueprint.

2 Åpne HTML-dokumentet. Hvis du ikke har en, er en prøveside som ligger i malen mappen under "tester> deler." Lagre begge filene til et nytt sted, for eksempel en ny mappe på skrivebordet som du kan kalle "Blueprint Tutorial."

3 Knytte stilark til HTML-dokumentet ved å legge til en "link" tag til toppen av dokumentet, rett nedenfor "<title>" tags. Hvis du bruker sample.html dokumentet, vil denne koden allerede være der, men du må fikse banen. Koden skal se slik ut:

4 Gå tilbake til screen.css filen. Bla ned til "typografi css" -delen, som er der de fleste av dine tilpasninger vil bli gjort. Finn "kroppen" velgeren. Dette kan være den første stilen du ønsker å tilpasse, som det styrer standard stiler for bakgrunn og skrifter for hele websiden. For eksempel endre "font-size" attributt til "14px" i stedet for dagens verdi. Hvis en skriftstørrelse ikke er definert for en gitt velgeren, vil denne standard brukes. Du kan også legge til en bakgrunnsfarge som "bakgrunn: # 000000", som vil gjøre din bakgrunn svart.

5 Rediger H1-H6 overskriften størrelser neste, om ønskelig. De er for tiden satt til "EMS" i Blueprint, og bør forbli slik. Den "em" enhet forteller leseren å skalere skrift et bestemt beløp som er høyere eller lavere enn din base skriftstørrelsen på 14 piksler, noe som tilsvarer en em verdi på 1,0.

6 Finn "a" og "a: hover" velgere under overskriftene og still inn ønsket kobling farge. Denne koblingen fargen vil være standard for nettsiden din hvis du ikke angir en bestemt farge for et element ved hjelp av en klasse erklæring senere.

7 Fortsett med å bygge din webside og bruk av velgere og klasser fra Blueprint til designelementer. Du kan forhåndsvise HTML i redigeringsverktøyet eller nettleseren og justere hvert element tilsvarende. Ved hjelp av et verktøy som Operas Inspiser Element eller Firebug for Firefox vil tillate deg å velge en bestemt del av din webside og se den tilhørende CSS, noe som gjør det enklere å finne og endring i screen.css dokumentet.

Hint

Bruk referansebibliotek tilgjengelig på forfatterens hjemmeside for å få en rask forståelse av stiler tilgjengelig i Blueprint. Å vite hvilke elementer stiler tilhører vil gjøre dem mye enklere å tilpasse senere.
Legg til flere velgere og stiler til bunnen av dokumentet, slik at de er enkle å finne.
Endre filnavnet til "screen.css" til "style.css" hvis du bygger en mal for bruk med et CMS rammeverk som Drupal eller Wordpress.