Hvordan legge til rammer i HTML5 og CSS3 programmering - dummies

Du kan bruke CSS3 til å tegne grenser rundt et hvilket som helst HTML5-element. Du har frihet i kantlinjens størrelse, stil og farge. Her er to måter å definere grenseegenskaper: Bruk av individuelle grenseattributter, og bruk av en snarvei. Grenser endrer ikke layoutet, men de legger til visuell adskillelse som kan være tiltalende, spesielt når layoutene dine er mer komplekse.

Slik bruker du grenseattributtene

Her er en side med en enkel kantlinje trukket rundt på overskriften.

Koden for borderProps. HTML-siden demonstrerer de grunnleggende prinsippene for grenser i CSS:

borderProps. html h1 {grensefarge: rød; kantbredde:. 25em; border style: double;}

Dette har en grense

Hvert element kan ha en ramme definert. Borders krever tre attributter:

• bredde : Bredden på grensen. Dette kan måles i en hvilken som helst CSS-enhet, men grensebredden er normalt beskrevet i piksler eller ems. ( Husk: En em er omtrent bredden på hovedbokstaven "M" i gjeldende skrift.)

• farge : Fargen som ble vist grensen. Fargen kan defineres som hvilken som helst annen farge i CSS, med fargenavn eller hex-verdier.

• stil : CSS støtter en rekke grenseformater. Eksemplet illustrerer en dobbel ramme. Dette trekker en grense med to tynnere linjer rundt elementet.

Du må definere alle tre attributter hvis du vil at grenser skal vises riktig. Du kan ikke stole på standardverdiene for å arbeide i alle nettlesere.

Slik definerer du rammestiler

CSS har en forhåndsbestemt liste over grensesnittstilter du kan velge mellom. Her er en side med alle de primære rammestillingene som vises.

Du kan velge noen av disse stilene for alle rammer:

• Solid: En enkelt solid linje rundt elementet.

• Dobbel: To linjer rundt elementet med et mellomrom mellom dem. Grensebredden er den samlede bredden på begge linjene og gapet.

• Groove: Bruker skygging for å simulere en spore etset på siden.

• Ridge: Bruker skyggelegging for å simulere en høyde som er tegnet på siden.

• Inset: Bruker skygging for å simulere en trykknapp.

• Outset: Bruker skygging for å simulere en knapp stikker ut fra siden.

• Dashed: En punktert linje rundt elementet.

• Stiplede: En prikket linje rundt elementet.

Slik bruker du grensesnittveien

Det er litt kjedelig å definere tre forskjellige CSS-attributter for hver kantlinje. Heldigvis inneholder CSS en praktisk grensesnittvei som gjør grenser mye enklere å definere.

Du kan ikke fortelle forskjellen fra utgangen, men koden for borderShortcut. html er ekstremt enkelt:

borderShortcut. html h1 {grense: rød 5px solid;}

Denne siden bruker grensesnittveien

Ordren der du beskriver grenseattributter, spiller ingen rolle. Bare spesifiser en farge, en størrelse og en kantlinje.

Slik lager du partielle grenser

Hvis du vil, kan du få mer presis kontroll over hver side av en kantlinje. Det er en rekke spesialiserte grensesnittveier for hver av undergrensene.

Denne siden gjelder en kantlinje nederst på overskriften, samt forskjellige grenser ovenfor, under og til sidene av avsnittene. Delte grenser er ganske enkle å bygge, som du kan se fra kodelisten:

subBorders. html h1 {grensebunn: 5px svart dobbel;} p {grense-venstre: 3px svart prikket; border-right: 3px svart prikket; border-top: 3px svart dashed; border-bottom: 3px black groove;}

Denne overskriften har en nederste kant
Stykker har flere grenser definert.
Stykker har flere grenser definert.

Legg merke til kantlinjestiler: kantlinje, kantlinje, kantlinje og grense høyre. Hver av disse stilene fungerer som grensesnittveien, men den virker bare på den ene siden av grensen.

Det er også bestemte grenseattributter for hver side (nederst på bredden justerer bredden på den nederste grensen, for eksempel), men de er nesten aldri brukt fordi snarvei-versjonen er så mye lettere.