Kursusplan

CSS avanceret tutorial

• CSS ekstra bog
• CSS introduktion
• CSS grundlæggende syntaks
• CSS avanceret syntaks
• CSS afledte vælger
• CSS id vælger
• CSS klasse vælger
• CSS oprettelse
• CSS baggrund
• CSS tekst
• CSS skrifttype
• CSS liste

CSS boksmodel

• CSS rammemodel oversigt
• CSS indrykning
• CSS kant
• CSS margin
• CSS margin sammenfletning

CSS position

• CSS positionering oversigt
• CSS relativ positionering
• CSS absolut positionering
• CSS flydende

CSS vælger

• CSS element vælger
• CSS vælger gruppering
• CSS klasse vælger detaljeret
• CSS ID vælger detaljeret
• CSS egenskabs vælger detaljeret
• CSS efterkommer vælger
• CSS underordnet element vælger
• CSS næste bror vælger

Valgfri kursus

Kursus anbefaling:

• CodeW3C.com kassen

Elementets kant (border) er en eller flere linjer omkring elementets indhold og indrykning.

CSS border egenskab tillader dig at specificere elementets kantstil, bredde og farve.

CSS kant

I HTML bruger vi tabeller til at skabe kanter omkring tekst, men ved hjælp af CSS kantegenskaber kan vi skabe fremragende kanter og anvende dem på ethvert element.

Elementets kant (border) er inden for elementets kant (border). Elementets kant er en eller flere linjer omkring elementets indhold og indrykning.

Hver kant har tre aspekter: bredde, stil og farve. I de følgende afsnit vil vi give dig en detaljeret forklaring af disse tre aspekter.

Kant og baggrund

CSS-standarden pointerer på, at kant tegnes over 'elementets baggrund'. Dette er vigtigt, fordi nogle kanter er 'brudte' (f.eks. prikket kant eller tom kant), og elementets baggrund skal være synlig mellem kantens synlige dele.

CSS2 pointerer på, at baggrunden kun strækker sig til indrykning, ikke til kant. Senere blev CSS2.1 rettet: elementets baggrund er indhold, indrykning og kantområdet. De fleste browsere følger CSS2.1 definitionen, men nogle ældre browsere kan have forskellig adfærd.

Kantstil

Stil er den vigtigste side af kant, ikke fordi stil kontrollerer kantens visning (selvfølgelig, stil kontrollerer faktisk kantens visning), men fordi uden stil vil der ikke være nogen kant.

CSS border-style egenskabDefineret 10 forskellige ikke-inherit stilarter, herunder none.

For eksempel kan du definere en kant for et billede som outset, så det ser ud som en 'hævet knap':

a:link img {border-style: outset;}

Definer flere stilarter

Du kan definere flere stilarter for en kant, for eksempel:

p.aside {border-style: solid dotted dashed double;}

Reglen ovenfor definerer fire kantstilarter for afsnit med klassen aside: en solid øverste kant, en prikket højre kant, en tom under kant og en dobbelt venstre kant.

Vi har set her, at værdien følger rækkefølgen top-right-bottom-left, og vi har også set denne rækkefølge, når vi diskuterer at sætte flere værdier for forskellige indrykning.

Definer en kantstyle

Hvis du ønsker at sætte skrifttypen på en side af elementboksen, i stedet for at sætte skrifttypen på alle 4 kanter, kan du bruge de følgende en-sidede kantstilarter:

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

Derfor er begge metoder ekvivalente:

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

Bemærk:Hvis du skal bruge den anden metode, skal du placere den enkle egenskab efter den korte egenskab. Fordi hvis du placerer den enkle egenskab før border-style, vil værdien af den korte egenskab overskrive den enkle værdi none.

Kantens bredde

Du kan bruge border-width egenskabenSpecificer kantens bredde.

Der er to måder at specificere kantens bredde på: du kan specificere en længdeværdi, f.eks. 2px eller 0.1em; eller bruge et af de 3 nøgleord, der er thin, medium (standardværdi) og thick.

Bemærk:CSS definerer ikke de præcise bredder for de 3 nøgleord, så en brugeragent kan sætte thin, medium (standardværdi) og thick til henholdsvis 5px, 3px og 2px, mens en anden brugeragent sætter dem til henholdsvis 3px, 2px og 1px.

Så kan vi indstille kantens bredde på denne måde:

p {border-style: solid; border-width: 5px;}

eller:

p {border-style: solid; border-width: thick;}

Definer ens bredde

Du kan indstille kantene for elementet i rækkefølgen top-right-bottom-left:

p {border-style: solid; border-width: 15px 5px 15px 5px;}

De ovenstående eksempler kan også skrives som (dette skrivemåde kaldesVærdi kopiering）：

p {border-style: solid; border-width: 15px 5px;}

Du kan også bruge følgende egenskaber til at sætte kantens bredde for hver kant separat:

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

Derfor er nedenstående regler ekvivalente med de ovenstående eksempler:

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

Ingen kantlinje

I de tidligere eksempler har du set, at for at vise en kantlinje, skal du sætte kantstilen, f.eks. solid eller outset.

Så hvad sker der, hvis du sætter border-style til none?

p {border-style: none; border-width: 50px;}

Selvom kantbredden er 50px, er kantstilen sat til none. I dette tilfælde forsvinder ikke kun kantstilen, men også bredden bliver 0. Kanterne forsvinder, hvorfor?

Dette skyldes, at hvis kantstilen er none, hvilket betyder, at kanterne ikke eksisterer, har kanterne ingen bredde, og dermed sættes kantbredden automatisk til 0, uanset hvad du oprindeligt definerede.

Det er meget vigtigt at huske dette. Faktisk er det at glemme at deklarere en kantstil en almindelig fejl. Ifølge følgende regler vil alle h1-elementer ikke have nogen kanter, endnu mindre 20 pixels bredde:

h1 {border-width: 20px;}

Da standardværdien for border-style er none, betyder det, at hvis der ikke er deklareret en stil, er det lig med border-style: none.Derfor, hvis du ønsker, at kanterne skal vises, skal du deklarere en kantstil.

Kantfarve

At sætte kantfarve er meget simpelt. CSS bruger en enkel border-color-egenskaben，den kan modtage op til 4 farveværdier ad gangen.

Man kan bruge enhver type farveværdi, for eksempel kan det være et navngivet farve, en hexadecimal eller en RGB-værdi:

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

Hvis farveværdien er mindre end 4, vil værdikopiering have virkning. For eksempel er nedenstående regelklause, der specificerer, at afsnittets øverste og nedre kanter er blå, og venstre og højre kanter er røde:

p {
  border-style: solid;
  border-color: blue red;
  }

Bemærk:Standardkantfarven er elementets egen forgrundsfarve. Hvis der ikke er deklareret en kantfarve, vil den være den samme som elementets tekstfarve. På den anden side, hvis elementet ikke har nogen tekst, antages det, at det er en tabel, der kun indeholder billeder, så tabellens kantfarve er dens forældres tekstfarve (da color kan arves). Denne forælder er sandsynligvis body, div eller en anden tabel.

Definer enkelt kantfarve

Der er også enkeltkanthjælpere til farve. Deres princip er det samme som enkeltstilar og breddeegenskaber:

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

For at specificere en solid sort kant for h1-elementet og en solid rød kant til højre, kan du specificere det på denne måde:

h1 {
  border-style: solid;
  border-color: black;
  border-right-color: red;
  }

Gennemsigtig kant

Vi har netop diskuteret, at hvis kanterne ikke har en stil, har de ingen bredde. Men i nogle tilfælde kan du måske ønske at oprette en usynlig kant.

CSS2 introducerede farveværdien transparent for kanter. Denne værdi bruges til at oprette usynlige kanter med bredde. Se nedenstående eksempel:

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

Vi har defineret følgende stil for de ovennævnte links:

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

Prøv det selv

På en vis måde fungerer transparent som ekstra indrykning af kantene; derudover har det også fordele, at det kan gøres synligt, når det er nødvendigt. Denne transparente kant svarer til indrykning, fordi elementets baggrund strækker sig til kantområdet (hvis der er en synlig baggrund).

Vigtigt:Før IE7, tilbydede IE/WIN ikke understøttelse af transparent. I tidligere versioner ville IE indstille kantfarven baseret på elementets farveværdi.

CSS-kantegenskaber

Værktøjskasse

CSS-referencemanual

CSS-eksempler

CSS-test

CSS-undervisning

Sponsorlinks