Kuvien tai tekstin ympärille sijoitetut kehykset koristavat sivustoa ja lisäävät vaihtelua sen suunnitteluun. Jos luot taulukoiden avulla reunuksia, kunkin reunan koodi vie liikaa tilaa. Lisäksi tässä tapauksessa sinun on kirjoitettava uudelleen jokaisen kehyksen HTML-koodi. CSS: n avulla voit helposti luoda haluamasi paksuuden ja värin reunan kirjoittamalla yksinkertaisen koodin kerran kaikille elementeille, joita tämä reunus ympäröi. Tämän tekniikan avulla voidaan tarvittaessa muuttaa sivuston kehystyyppi muutamassa minuutissa.
Se on välttämätöntä
- - sinulla on oma verkkosivusto
- - tiedä mikä CSS on ja missä nämä tyylit on kirjoitettu sivustolle.
Ohjeet
Vaihe 1
Luo reuna kirjoittamalla ensin seuraava koodi CSS: ään:
ramka {}
Vaihe 2
Jos haluat tehdä reunasta haluamasi koon, käytä reunan leveys-parametria, joka asettaa viivan leveyden pikseleinä. Esimerkiksi, jos kehysviivan tulisi olla 3 pikseliä leveä, merkintä näyttää tältä:
ramka {reunan leveys: 3px;}
Vaihe 3
Määritä nyt reunan tyyli käyttämällä border-style-parametria. Jos haluat luoda reunuksen, jonka sivut ovat säännöllisiä kiinteitä viivoja, aseta seuraava merkintä koodiin kiharoiden aaltosulkeiden väliin - reunustyyli: kiinteä.
Vaihe 4
Pisteviivainen reuna voidaan saada kirjoittamalla se näin: reunatyyli: pisteviiva. Rajatyylin tarkistaminen: katkoviiva antaa sinulle katkoviivan.
Vaihe 5
Voit tehdä reunasta kaksinkertaisen yhtenäisen viivan: reunan tyyli: kaksinkertainen. Käytä reunatyyliä: ura tai reunatyyli: harjanne kehystää tekstiä tai kuvia kehyksiksi 3D-sivuvaikutuksilla. Ero näiden kahden vaihtoehdon välillä on se, että ensimmäisessä tapauksessa kehys koostuu sisennyksistä ja toisessa kuperista.
Vaihe 6
Käytä tätä koodia: border-style: inset luodaksesi lisäyksen vaikutuksen sivuston elementin reunalla. Jos haluat, että reunan sisältö yhdessä reunan kanssa päinvastoin on kupera, kirjoita reunan tyyli: alku.
Vaihe 7
Voit lisätä haluamasi värin kehykseen reunan väri -parametrilla, joka on myös asetettu kiharoiden olkainten väliin. Jos haluat tehdä reunasta punaisen, kirjoita reunan väri: punainen, sininen - reunan väri: sininen, oranssi - reunan väri: oranssi.
Vaihe 8
CSS-rajakoodi, joka sisältää kaikki vaihtoehdot, näyttää tältä:
ramka {reunan leveys: 3px; reunatyyli: kiinteä; reunaväri: sininen;}
Vaihe 9
Kirjoita nyt HTML-muodossa tämä:
Kehyssisältö Lausekkeen "Kehyssisältö" sijasta lisää haluamasi kuvan teksti tai koodi.
Vaihe 10
Siksi voit suunnitella rajoittamattoman määrän elementtejä sivustolle. Kehyksen ulkoasun muuttamiseksi sinun on vaihdettava vain CSS-koodi.
