Utvide Effektivitet med Cascading Style Sheets

February 27  by Eliza

Definere en stil på ett sted som CSS gjør har flere fordeler. Først, eliminerer det redundans: Du trenger ikke å holde spesifisere sin skriftstørrelse og farge hver gang du bruker <h1> -taggen i dokumentet, for eksempel. Det gjør websiden koden lettere å lese og å endre senere. Hvis du er kjent med programmering, tenke på en enkel CSS stil regel som noe sånt som et programmeringsspråk konstant: Du angir, for eksempel, den lokale skattesatsen ved å gjøre opp et navn som LocalTax, og deretter sette en verdi på det som dette: Konstant LocalTax = 0,07. Deretter gjennom hele programmet, du trenger ikke å gjentatte ganger spesifisere 0,07. Du bare bruke konstanten navn LocalTax.

På samme måte, etter at du har definert en CSS overskrift stil, kan du deretter bare bruke klassenavnet for den stilen, uansett hvor lang og kompleks at stilen kan være. I dette eksempelet bruker du ingen klassenavnet, så hver H1 overskriften er gjengitt med denne stilen:

<Style>
h1 {font-size: 16pt color: blue;}

</ Style>

En annen fordel med å samle alle stildefinisjoner i en enkelt plassering er at du lettere kan gjøre globale endringer. Hva hvis du har besluttet å endre alle H1 overskrifter til rødt i stedet for blått? Hvis du ikke bruker et stilark, ville du ha for å søke etter alle H1 elementer gjennom hele nettet nettsted HTML-filer og endre hver av de elementene i sving.

Men hvis du hadde framsyn å bruke et stilark, trenger du bare endre enkel definisjon av stilen for H1 i stilark selv. Specs brukes automatisk i løpet av HTML. Med andre ord, bare gjøre denne endringen fra blått til rødt i style sheet:

H1 {font-size: 16pt color: red;}

Alle overskriftene mellom <h1> og </ h1> koder i hele websiden blir nå vist som rød tekst.

Endre Web design for bedre

HTML opprinnelig ble utviklet for å fungere noe som en disposisjon, spesifiserer strukturen i et dokument, uten for mye oppmerksomhet til den faktiske visuelle stilen, eller design, av dokumentet. En disposisjon bare organiserer ideer hierarkisk: A, B, C, og så videre er de store ideer. Innenfor disse kategorier, har man underinndelinger som 1, 2, 3, 4 og enda lavere avdelinger som a, b, c, d og så videre. Den tilsvarende ytre struktur i HTML er beskrevet med forskjellige nivåer overskrift som H1, H2, H3, og så videre.

HTML skulle bare definere innhold: Dette er hovedteksten, dette er en overskrift, dette er et bord, og så videre. Men Webdesignere naturligvis ønsket å tilby stadig mer overbevisende, visuallyattractive websider. Tross alt, Internett oftere konkurrerer med livlige TV-annonser enn med tørre, svært strukturerte, akademiske tidsskrifter. HTML begynte å vokse willy-Bulle ved å legge til mange spesielle formaterings elementer og attributter som kursiv og farge. Dette inflasjon av tags laget skape, lese og modifisere HTML stadig mer tungvint. Skille innhold (struktur) fra sidens design og layout ble nødvendig. Tast CSS. Når du bruker CSS, er HTML igjen å primært håndtere strukturen og CSS-filen inneholder stiler som definerer hvordan HTML-elementer ser.

Også, CSS tilbyr også websiden designer har tilgjengelig i vanlig HTML. CSS gir en designer mye større kontroll over utseendet på en webside.

Å være klar for alt

Selvfølgelig, vil du aldri ha absolutt kontroll over websider hvis du opprette områder for Internett. Det vil aldri bli en virkelig stabil, enkel, forutsigbar display for websider. Hvorfor? Fordi, som noen kjendiser, aldri vet en nettside hvor det kommer til å ende opp med fra minutt til minutt. Det må være forberedt på å være på skjermen i alle slags situasjoner.

En webside kan vises på en Pocket PC PDA-skjermen - med svært få piksler og i svart og hvitt. Eller det kan bli vist på den enorme Diamond Vision visning i Hong Kong, som er lengre enn en Boeing 747, eller til Jumbotron skjermen i Torontos Skydome, som måler 110 meter bred med 33 meter høye.

Ikke bare har du å vurdere store forskjeller i størrelse, men også i størrelsesforhold (form). Mange dataskjermer er fortsatt den tradisjonelle firkantede form, men i økende grad Internett-brukere bytter til widescreen-skjermer - bredere enn de er høye, som en film skjermen - til bedre skjerm HDTV og DVD-er. For Internett-brukere, widescreen betyr bare at du ser mer horisontal informasjon per side. Websider som er designet med absolutt (uforanderlig) posisjonering la flere inches av tomt hvitt område langs høyre side av en widescreen-skjerm. Hva ville Vincent gjøre?

Hvordan ville Van Gogh har jobbet med problemet med å utforme et bilde av en vase av solsikker som kan bli vist på en widescreen Jumbotron, men også på en liten firkantet skjerm?

Den grunnleggende løsning på dette problemet er å angi størrelse og posisjon i forhold heller enn absolutte termer. For eksempel, i stedet for å si: "Solsikken er 2 inches høy og ligger 12 inches fra venstre side," (en absolutt spesifikasjon), sier du, "Solsikken er 6 prosent stor og 35 prosent fra venstre side" ( en relativ spesifikasjon). Andre måter å spesifisere størrelser relativt inkludere piksler (som er de minste enhetene med informasjon som en gitt skjermen kan vise, så de varierer fra skjerm til skjerm) eller slike generelle vilkår som x-large eller stor.

Våkne lesere spør kanskje på dette punktet, "Seks prosent av hva?" Prosentandelen er beregnet på grunnlag av det som inneholder blokken. Det kan være nettleservinduet (<body>), men det kan også være slike blokker som en <div> i <body>. I dette eksempelet er den inneholder blokken den totale størrelsen på nettleseren, men du kan også angi prosent for andre, mindre, containere i nettleservinduet.

Relative specs sette godt inn i ulike størrelser av skjermer. En solsikke 6 prosent stor ville bli vist med ca 48 piksler på en 800x600 dataskjerm, men vises 18 meter bred på en Jumbotron som er 300 meter bred.

Med andre ord - når du angir relative målinger eller posisjoner - grafikk eller tekst blir automatisk skalert som nødvendig for å passe uansett størrelse skjermen blir brukt på den tiden.

Selvfølgelig, hvis du bygge sider for intranettet, kan du vel vite at alle i kontornettverket er nødvendig for å bruke samme størrelse skjermen, den samme nettleseren, det samme operativsystemet, og tillot ingen familiebilder i sin bås . I de situasjoner hvor ensartethet håndheves på tvers av hele selskapet, kan du gi absolutte spesifikasjoner, men slike situasjoner er relativt sjeldne.