Piltide või teksti ümber asetatud raamid kaunistavad saiti ja lisavad selle kujundusele mitmekesisust. Kui kasutate piiride loomiseks tabeleid, võtab iga ääre kood liiga palju ruumi. Samuti peate sel juhul iga kaadri HTML-koodi ümber kirjutama. CSS-i abil saate hõlpsasti luua soovitud paksuse ja värviga piiri, kirjutades ühe korra lihtsa koodi kõigile elementidele, mida see piir ümbritseb. See tehnoloogia võimaldab vajadusel saidil mõne minuti jooksul raami tüüpi muuta.
See on vajalik
- - omada oma veebisaiti;
- - tea, mis on CSS ja kuhu need stiilid saidil on kirjutatud.
Juhised
Samm 1
Äärise loomiseks kirjutage esmalt CSS-is järgmine kood:
ramka {}
2. samm
Äärise soovitud suuruseks muutmiseks kasutage parameetrit border-width, mis määrab joone laiuse pikslites. Näiteks kui kaadrijoon peaks olema 3 pikslit lai, näeb kanne välja järgmine:
ramka {ääre laius: 3px;}
3. samm
Nüüd määrake piiri stiil, kasutades piiri stiilis parameetrit. Kui soovite luua piiri, mille küljed on korrapärased ühtsed jooned, sisestage lokkis trakside vahele järgmine kirje - border-style: solid.
4. samm
Punktilise piiri saab selle kirjutades järgmiselt: ääris-stiil: punktiir. Äärise stiili kontrollimine: katkendlik annab teile katkendliku piiri.
5. samm
Äärise saate muuta kahekordseks ühtseks jooneks: ääris-stiil: topelt. Kasutage ääristust: soon või äärisstiil: harjaga, et teksti või pilte raamida 3D-kõrvalmõjudega kaadriteks. Nende kahe võimaluse erinevus seisneb selles, et esimesel juhul koosneb raam taandatud joontest ja teisel kumeratest joontest.
6. samm
Kasutage seda koodi: border-style: inset, et luua saidi elemendi piiriga sisestatud efekti. Piiri sisu koos piiriga vastupidi kumeraks muutmiseks kirjutage piiri stiil: algus.
7. samm
Raamile saate lisada soovitud värvi, kasutades parameetrit „ääris-värv”, mis on paigutatud ka lokkis trakside vahele. Kui soovite äärise muuta punaseks, siis kirjutage äärisevärv: punane, sinine - äärisvärv: sinine, oranž - äärisvärv: oranž.
8. samm
CSS-i piirikood koos kõigi võimalustega näeb välja selline:
ramka {ääre laius: 3px; piiri stiilis: kindel; äärisvärv: sinine;}
9. samm
Nüüd kirjutage HTML-is see:
Raami sisu fraasi "Raami sisu" asemel sisestage soovitud pildi tekst või kood.
10. samm
Seega saate saidil kujundada piiramatu arvu elemente. Raami välimuse muutmiseks peate muutma ainult CSS-koodi.
