Kurssitaulukko

CSS-yleiskatsaus

• CSS课外书
• CSS esittely
• CSS perus语法
• CSS edistyneet kieliopit
• CSS johdannaisvalitsimet
• CSS id-valitsimet
• CSS luokka-valitsimet
• CSS luominen
• CSS tausta
• CSS teksti
• CSS kirjasin
• CSS luettelot

CSS-konttorimalli

• CSS kehyksen yleiskatsaus
• CSS sisäpuolinen tyhjiö
• CSS reunat
• CSS ulkoreunus
• CSS ulkoreunusten yhdistäminen

CSS-sijoittelu

• CSS sijoittaminen yleiskatsaus
• CSS suhteellinen sijoittaminen
• CSS absoluuttinen sijoittaminen
• CSS kellastus

CSS-valitsimet

• CSS elementti-valitsimet
• CSS valitsimen ryhmittely
• CSS luokka-valitsimen yksityiskohtaiset tiedot
• CSS ID-valitsimen yksityiskohtaiset tiedot
• CSS ominaisuus-valitsimen yksityiskohtaiset tiedot
• CSS jälkeläisvalitsimet
• CSS lapsenvalitsimet
• CSS seuraava veli-valitsimet

Valinnainen kurssi

Kurssivinkki:

• CodeW3C.com kattauksen

Elementin reunus (border) on yksi tai useampi viiva, joka ympäröi elementin sisällön ja sisäpiirteet.

CSS border-ominaisuus mahdollistaa elementin reunuksen tyylin, leveyden ja värin määrittämisen.

CSS reunat

HTML:ssä käytämme taulukoita luodaksemme tekstiin ympäröivän reunuksen, mutta käyttämällä CSS-reunusominaisuuksia voimme luoda vaikuttavia reunuksia, jotka voidaan soveltaa mihin tahansa elementtiin.

Elementin ulkopuolella oleva reunavyöhyke on elementin reunus (border). Elementin reunus on yksi tai useampi viiva, joka ympäröi elementin sisällön ja sisäpiirteet.

Jokaisella reunalla on kolme näkökulmaa: leveys, tyyli ja väri. Seuraavassa kuvauksessa selitämme nämä kolme näkökulmaa yksityiskohtaisesti.

Reunat ja tausta

CSS-säännöt sanovat, että reunat piirretään "elementin taustan yläpuolelle". Tämä on tärkeää, koska jotkut reunat ovat "katkeraa" (esimerkiksi pistemäinen reunus tai viivainen reunus), ja elementin tausta tulisi näkyä reunan näkyvien osien välillä.

CSS2 sanoo, että tausta ulottuu vain sisäpiirteiden puolelle, ei reunusten puolelle. CSS2.1 korjasi tämän: elementin tausta on sisältö, sisäpiirteet ja reunavyöhykkeen tausta. Suurin osa selaimista noudattaa CSS2.1-määrittelyä, mutta jotkut vanhemmat selaimet saattavat käyttäytyä eri tavalla.

Reunusten tyyli

Tyyli on reunuksen tärkein osa, ei siksi, että tyyli hallitsee reunuksen näyttämistä (totta kai, tyyli todella hallitsee reunuksen näyttämistä), vaan siksi, että ilman tyyliä ei olisi ollenkaan reunuksia.

CSS: border-style-ominaisuusMääritettiin 10 erilaista ei-inherit-mallia, mukaan lukien none.

Esimerkiksi, voit asettaa kuvan reunuksen "outset", jotta se näyttää "nostetuksi painikkeeksi":

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

Määritä useita malleja

Voit määrittää useita malleja reunukselle, esimerkiksi:

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

Yllä oleva sääntö määrittää luokan "aside"-kappaleen neljä reunusmuotoa: reuna yläpuolella, pistemäinen reunus oikealla, viivainen reunus alapuolella ja kaksirivinen reunus vasemmalla.

Näimme jälleen täällä, että arvot käyttävät top-right-bottom-left-järjestystä, ja tämä järjestys on myös nähty useiden arvojen asettamisessa eri sisäpiirteille.

Määritä yksipuolinen tyyli

Jos haluat asettaa elementtipalkkeen yhden reunan reunusmuodon, ei kaikkien neljän reunan reunusmuodon, voit käyttää seuraavaa yksipuolista reunusmuototyyliä:

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

Siksi nämä kaksi menetelmää ovat yhtä hyödyllisiä:

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

Huomaa:Jos käytät toista menetelmää, sinun täytyy sijoittaa yksittäinen ominaisuus lyhennetyn ominaisuuden jälkeen. Koska jos yksittäinen ominaisuus sijoitetaan border-style: none ennen lyhennettyä ominaisuutta, lyhennetyn ominaisuuden arvo korvaa yksittäisen arvon.

Reunan leveys

Voit border-width-ominaisuusReunan leveyden määrittäminen.

Reunan leveyden määrittämiseen on kaksi tapaa: voit määrittää pituusarvon, kuten 2px tai 0.1em, tai käyttää yhtä kolmesta avainsanasta, jotka ovat thin, medium (oletusarvo) ja thick.

Huomautus:CSS ei määritä kolmen avainsanan tarkkaa leveyttä, joten yksi käyttäjäagentti voi asettaa thin, medium ja thick arvot 5px, 3px ja 2px, kun taas toinen käyttäjäagentti voi asettaa ne 3px, 2px ja 1px.

Siksi voimme asettaa reunan leveyden tällä tavalla:

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

Tai:

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

Määritä yksittäisen reunan leveys

Voit asettaa elementin jokaisen reunan reunan leveyden top-right-bottom-left -järjestyksessä:

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

Edellä oleva esimerkki voidaan myös kirjoittaa yksinkertaisemmin (tämä kirjoitusmuoto kutsutaan)Arvo kopioidaan）：

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

Voit myös asettaa reunan jokaisen puolen leveyden seuraavilla ominaisuuksilla:

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

Siksi seuraavat säännöt ovat yhtä hyödyllisiä kuin edellä olevat esimerkit:

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

Ei reunaa

Edellisessä esimerkissä olette nähneet, että jos haluat näyttää jonkinlaisen reunan, sinun täytyy asettaa reunan tyyli, kuten solid tai outset.

Mitä tapahtuu, jos asetat border-style: none?

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

Vaikka reunan leveys on 50px, reunan tyyli on asetettu none. Tässä tapauksessa ei vain reunan tyyli katoaa, vaan myös sen leveys muuttuu 0:ksi. Reuna katoaa, miksi?

Tämä johtuu siitä, että jos reunan tyyli on none, eli reuna ei ole olemassa, reunalla ei voi olla leveyttä, joten reunaleveys asetetaan automaattisesti 0, riippumatta siitä, mitä alun perin määrittelit.

Muista tämä on erittäin tärkeää. Itse asiassa unohtaminen reunatyylin määrittämistä on yleinen virhe. Seuraavien sääntöjen mukaan kaikki h1-elementit eivät ole missään tapauksessa reunoja, puhumattakaan 20 pikselin leveistä:

h1 {border-width: 20px;}

Koska border-style:n oletusarvo on none, jos tyylejä ei ole määritelty, se on kuin border-style: none.Siksi, jos haluat reunan näkyvän, sinun on määriteltävä reunan tyyli.

Reunaväri

Reunavärin asettaminen on erittäin yksinkertaista. CSS käyttää yksinkertaista border-color-ominaisuus，se voi ottaa enintään 4 väriarvoa kerralla.

Voi käyttää mitä tahansa väriarvoa, esimerkiksi nimettyä väriä, heksadesimaalin tai RGB-arvon:

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

Jos väriarvo on vähemmän kuin 4, arvon toistaminen vaikuttaa. Esimerkiksi seuraava sääntö määrittää kappaleen ylä- ja alareunat sinisiksi, vasen ja oikea reuna punaisiksi:

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

Huomautus:Oletusarvoinen reunaväri on elementin etualusväri. Jos reunaväriä ei ole määritelty reunalle, se on sama kuin elementin tekstin väri. Toisaalta, jos elementillä ei ole tekstiä, oletetaan, että se on taulukko, joka sisältää vain kuvia, niin taulukon reunaväri on vanhemman elementin tekstiväri (koska 'color' voidaan periytyä). Tämä isovanhempi elementti on todennäköisesti 'body', 'div' tai toinen 'table'.

Määritä yksittäinen väri

On myös yksittäisiä reunaväriominaisuuksia. Ne toimivat samalla tavalla kuin yksittäiset tyylit ja leveysominaisuudet:

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

Voit määrittää h1-elementille suoran mustan reunan ja oikean reunan suoran punaisen, niin määritellään:

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

Läpinäkyvä reuna

Kuten juuri puhuimme, jos reunalla ei ole tyylejä, se ei ole leveä. Joissakin tapauksissa saattaa olla kuitenkin haluttava luoda näkymätön reuna.

CSS2 lisäsi reunan väriarvon 'transparent'. Tämä arvo käytetään luomaan leveä, näkymätön reuna. Katso seuraava esimerkki:

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

Määrittelimme yllä olevat linkkien tyylit seuraavasti:

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

Kokeile itse

Jossain mielessä läpinäkyvän käytössä reunat toimivat kuin ylimääräinen sisätila; lisäksi on edun, että voit tehdä ne näkyviksi tarpeen mukaan. Tämä läpinäkyvä reuna on samanarvoinen sisätilan kanssa, koska elementin tausta ulottuu reunan alueelle (jos tausta on näkyvissä).

Tärkeää:Ennen IE7:ää IE/WIN ei tukenut läpinäkyvyyttä. Vanhemmissa versioissa IE asetti reunan värin elementin color-arvon mukaan.

CSS-reunavaran ominaisuudet

Työkalupakka

CSS-käyttöohje

CSS-esimerkki

CSS-testi

CSS-opas

Sponsoroitu linkki