Hvordan Design nettsider med CSS

March 21

Siden de første nettlesere ble tilgjengelig, har nettsiden designere kjempet for å gjøre veien sidene ser og handle på skjermen samsvarer med det de ser i sine hoder. Ankomsten og aksept av Cascading Style Sheets (CSS) har gått en lang vei til å gjøre det mulig. Fordeler med CSS inkludere sin evne til å gjøre komplekse jakt områder, noen ganger med bare noen få enkle trinn, og måten det hjelper gre nettstedets innhold fra sin generelle utseende. CSS kan også tillate designere til å lage en webside som fortsatt er funksjonell for de som er svaksynte.

Bruksanvisning

1 Bygg innholdet på nettsiden. Åpne et dokument i din favoritt teksteditor og lage innholdet på nettsiden. Innhold omfatter ordene og bildene som vises i nettleseren. Innholdet bør pakkes i HTML-tagger som <a> eller <p>. Hver del av innholdet (eller objektet) bør tildeles en klasse eller id ved å angi class = "" eller id = "" eiendom. Et eksempel:. <a Class="link" href="eHow</a" rel="nofollow"> http://www.ehow.com/”> eHow & lt; / a> Dette ville skape en kobling til eHow.com hjemmesiden med en klasse med "linken." det er viktig å merke seg at det kan være bare en id per objekt (markup tag) og id navn kan ikke brukes mer enn én gang. objekter kan ha flere klasser, og mange objekter kan dele en klasse. siden du oppretter bør lagres med et filnavn som slutter med en \ ". html \" forlengelse.

2 Gjør CSS siden. Åpne et nytt dokument og lagre det med filnavn som slutter med en \ ". Css \" forlengelse. Dette er filen som beskriver utseendet på et nettsted. Ved å bruke CSS markup fra en CSS referansemanual, kan en designer endre størrelse, farge, orientering og oppførselen til innhold hele siden. Tildeling av attributtene til klassen og id navn lar designere til å gjøre globale endringer på ett sted. En typisk CSS oppføring kan se slik ut:

header {

font-weight: bold
GÅ
font-size: større
GÅ
farge: blå
GÅ
}

Dette ville gjøre tekst i kodetagger som har en id eiendom "header" større enn normalt, med en fet skrift vises i blått. CSS markup kan brukes på HTML-koder og klasse navn på samme måte. Hvis du vil bruke CSS til en HTML-kode, kan du bruke koden uten <> bukseseler. For klasse navn, bruk en periode før klassenavnet - \ ". Nyheter \" for eksempel. Du kan også kombinere de to. En klasse som heter \ "p.news \" ville bli brukt kun til avsnitt seksjoner (p tag) tildelt den \ "nyheter \" class.

3 Legg en referanse til stilark i HTML-dokumentet. I overskriften delen av HTML-dokumentet, plassere en link til stilarket som følger:

Den "href" attributtet skal peke til plasseringen av CSS-filen. Selv om det er mulig å inkludere CSS i topptekstdelen uten å lage et eksternt stilark, ved hjelp av en egen fil som beskrevet her - et eksternt stilark - er tilnærmingen anbefalt av World Wide Web Consortium (W3C), myndighet på webstandarder.