CSS Web Design for Dummies Cheat Sheet - dummies

Av Richard Mansfield

Cascading Style Sheets (CSS) fungerer sammen med HTML for å forenkle webdesign. Hvis du forstår hvordan du bruker CSS-regler, kan du spesifisere en stil en gang som kan brukes på hver side (eller til hvert enkelt element) på nettstedet ditt. En liste over tips og triks kan hjelpe alle webdesignere til å bygge nettsteder som er både tiltalende og at brukerne vil like å besøke.

Hvordan Cascading Style Sheets Forbedre HTML

CSS (Cascading Style Sheets) var en teknologi anbefalt av World Wide Web Consortium (W3C) i 1996. En enkel måte å forstå formålet med CSS er å se det som et tillegg til HTML som bidrar til å forenkle og forbedre webdesign. Faktisk er noen CSS-effekter ikke mulige via HTML alene.

En annen fordel med CSS er at den lar deg spesifisere en stil en gang, men nettleseren kan bruke den stilen mange ganger i et dokument. Hvis du for eksempel vil ha noen av bildene som vises på nettstedet ditt for å ha en tynn, blå ramme rundt dem, kan du definere denne rammen som en stil i CSS. Deretter, i stedet for å måtte gjenta en HTML-definisjon av tynn og blå ramme - hver gang du vil ha den bestemte rammen, kan du bare sette inn CSS-stilen som et attributt for hvert grafisk element du vil ha innrammet.

På annen måte bruker du CSS til å definere generelle regler for hvordan elementene i websidene dine oppfører seg og hvordan de ser ut - hvor de er plassert, deres størrelse, deres ugjennomsiktighet og så videre. Deretter kan du bare henvise til regelens navn når du vil håndheve det på HTML-siden din.

Her er en CSS-regel som definerer et par kvaliteter du bestemmer deg for å søke på de største overskriftene, H1:

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

Med denne CSS-regelen gjelder alle HTML-kode som inneholder et H1-element, blir automatisk gjengitt i 16-punkts-typen og farget blå:



denne overskriften er blå og 16 pt.

CSS-regler kan defineres i en separat. css-fil eller innebygd i HTML-filen. Her er CSS-overskriftens stilregel innebygd i overskriften til en HTML-fil:

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


denne overskriften er blå og 16 pt.

Merk elementet. Du kan definere CSS-stilene dine inne i dette elementet. (Du kan også ha flere elementer på en side hvis du ønsker det.)

8 Gode CSS-tips og triks

Selv når du bruker Cascading Style Sheets (CSS), må du bygge en funksjonell (men likevel attraktiv) nettside nøye ut og planlegger. Her er noen tips som gjør at nettstedet ditt skiller seg ut.

La brukerne kontrollere skriftstørrelsen

Prøv å unngå å spesifisere kroppens skriftstørrelse.Ikke gjør dette, for eksempel:

body {font-size: 24px;}

Folk har angitt nettleserens alternativer til en tekststørrelse som er lesbar for dem. Du vet ikke om de har en pikseloppløsning på 1680 × 1050 eller 800 × 600 piksler. Det gjør en forskjell. Brukeren bør være den som bestemmer hvor stor de vil ha sin tekst, ikke du.

Sørg for at grensene dine vises.

Her er en vanlig CSS programmeringshode-scratcher:

p {border: 12px;}

Til tross for denne regelen du skrev, vises ingen kant rundt avsnittene. Du vil logisk tenke at ved å spesifisere en grenseverdi, ser du en grense. Ikke så. Med mindre du også angir en grense stil , får du ikke en ramme. Standardstilen er ingen, så endre den for å inkludere en stil:

p {grense: solid 12px;}

Se opp for fargekamp

Hva om du angir en tekstfarge, men mislykkes i å angi en bakgrunnsfarge? Høres ufarlig, men det kan være et problem. Enkelte brukere bruker personlige stilark, inkludert deres favorittfarger. Hva skjer hvis en bruker spesifiserer brun for bakgrunnen og hvitt for teksten sin? Si at du spesifiserer brun for teksten din:

BODY {color: brown;}

Brukeren vil ikke se teksten i det hele tatt fordi bakgrunnsfargen og forgrunnsfargen din er identisk. Løsningen? Alltid angi en bakgrunn hvis du skal farge teksten. Da har du kontroll over hvordan teksten ser ut mot den bakgrunnen:

BODY {color: brown; bakgrunnsfarge: gul;}

Timing uskarphet og andre effekter

Kombiner timere, skript og filtre for å skape mange dynamiske visuelle effekter. Prøv denne kule effekten i Internet Explorer:

Forestill deg denne effekten som beveger seg, som om skyggen vokste sakte.

dim counter funksjon startTimer () timerhandle = setInterval ("sizeit", 130) sluttfunksjon funksjon stopTimer () clearTimeout (timerhandle) sluttfunksjon funksjon sizeit () counter = counter + 1 hvis counter> 49 deretter counter = 1 n = "uskarphet (add = 1, direction = 125, strength =" & counter & ")" divider. stil. filter = n sluttfunksjon div {posisjon: absolutt; filter: uskarphet (legg til = 1, retning = 15, styrke = 90 ";}

Dette er en uklarhet over tid.

Prøv å variere hastigheten på filteret ved å justere verdien 130 i denne linjen: > timerhandle = setInterval ("sizeit",

130 ) Finn en liste Apart

En kilde til gode ideer, eksempler og artikler - levert av noen av de mest talentfulle webdesignerne rundt En liste fra hverandre, som har et forum dedikert til CSS.

Bruke dine egne kuler i lister

Med CSS er det enkelt å designe tilpassede kuler i et grafikkprogram, og deretter tilordne dem til listeoppføringer. Følgende kode gir resultatet

Legg til skreddersydde kuler på listen din, den enkle CSS-måten.

ul {

listestil-bilde: url ("mybullet. jpg") ; skrifttype: 32px;} første

andre
tredje
Angi grafiske steder

Hvis du lagrer en grafikkfil i samme mappe som din. htm eller. html-fil, trenger HTML-koden bare navnet på grafikkfilen, som th er:

listestil-bilde: url ("mybullet.jpg ")

Men hvis filen er på et annet sted, må du angi banen til den plasseringen, og gjør også noen bisarre tegnsetting - legger til en ///, av en eller annen grunn. Dette neste eksempel finner denne filen i rotkatalogen av c: stasjonen:

listestil-bilde: url (

"fil: /// C: mause.jpg" ) Her er en fil som ligger i bildene undermappen av f: stasjonen:

listestil-bilde: url ("file: /// F: Photosmause. jpg")

Her er den ekstra bizarre tegnsetting (///) du må legge til for en lokal nettverksplassering:

listestil-bilde: url ("file: /// HpservrPHOTOSmause. jpg")

Hvis du beholder grafikkfilene dine på et nettsted, oppgir du nettadressen.

Til slutt, Hvis grafikkfilen din er lagret i mellomrommet, bruk denne tegnsetting:

"fil: /// \ / ^^^ outerspaceservrPHOTOSmause. jpg "

Samme tegnsetting og konvensjoner brukes når du angir src = attributtet for å laste inn en grafikk i et HTML

-element.

Du kan ikke se noen av grafikkene dine når du flytter websidene dine fra din lokale datamaskin til en server for å sende dem på Internett. Hvis det skjer, sjekk filbaner for å sikre at grafikkfilene er plassert der koden sier at de er. Den enkleste taktikken er å bare beholde alle avhengighetsfiler (for eksempel grafikkfiler) i den samme katalogen som dine. htm og. css-filer. På den måten kan du bruke

relative stier, noe som betyr at du ikke spesifiserer noen vei i ditt kode, bare filnavnet. Nettleseren forstår at den skal se etter grafikken din på samme måte som den fant HTML-filen. Kombinere klasser

Du kan spare deg litt tid og problemer ved å definere klasser som blir kombinert senere, som adjektiver kombinere med substantiv. Si at du vil ha litt av avsnittene dine innrammet i grønt, noen i blått og andre i rosa. Du kan cr Spis en egen klasse for hver type av avsnitt,

eller du kan være smart og lage en generell grense-stilklass, og tre tilleggsklasser for fargen. Slik fungerer det. Først lager du fire stiler, og så kombinerer du klassenavnene i HTML-elementene når du bruker klassen = attributt: . innrammet {

border: solid 3px rød; polstring: 6px;}. rosa {bakgrunnsfarge: rosa;}. blå {bakgrunnsfarge: blå;}. grønn {bakgrunnsfarge: grønn;} class = "innrammet grønn" >> Du kan spare deg litt tid og problemer ved å definere klasser som kombineres senere, som adjektiver kombinere med substantiv.
class = "framed blue" >> Du kan spare deg litt tid og problemer ved å definere klasser som blir kombinert senere, som adjektiver kombinere med substantiv. class = "framed pink" >> Du kan spare deg litt tid og problemer ved å definere klasser som blir kombinert senere, som adjektiver kombinere med substantiv.
Delene til en CSS-regel Følgende figur viser delene av en CSS
regel . Denne regelen sier, "Vis rødt teksten til et hvilket som helst avsnitt

i dokumentet med et klassenavnetattributvarsel. "

Du kan lage noe navn på klassenavnet (forfatteren av den forrige koden valgte varsel ), men navnet i CSS-regelen må samsvare med navnet som senere ble brukt i HTML-attributten.

Følgende tabeller viser vanlige CSS-egenskaper og verdier.