Rėmeliai, išdėstyti aplink paveikslėlius ar tekstą, puošia svetainę ir suteikia įvairovės jos dizainui. Jei kraštinėms kurti naudojate lenteles, kiekvienos kraštinės kodas užims per daug vietos. Be to, tokiu atveju turėsite perrašyti kiekvieno kadro HTML kodą. Naudodami CSS galite lengvai sukurti bet kokio storio ir spalvos kraštą, vieną kartą parašę paprastą kodą visiems elementams, kurie bus apsupti šia kraštine. Ši technologija leis prireikus per porą minučių pakeisti rėmelių tipą svetainėje.
Tai būtina
- - turėti savo internetinę svetainę;
- - žinoti, kas yra CSS ir kur šie stiliai parašyti svetainėje.
Nurodymai
1 žingsnis
Norėdami sukurti kraštinę, pirmiausia parašykite šį kodą CSS:
ramka {}
2 žingsnis
Norėdami, kad kraštinė būtų norimo dydžio, naudokite parametrą „border-width“, nustatantį linijos plotį pikseliais. Pvz., Jei kadro linija turėtų būti 3 taškų pločio, įrašas atrodys taip:
ramka {border-width: 3px;}
3 žingsnis
Dabar apibrėžkite kraštinės stilių, naudodami krašto stiliaus parametrą. Jei norite sukurti kraštinę, kurios kraštinės yra taisyklingos vientisos linijos, tarp garbanotų petnešėlių kode įrašykite šį įrašą - border-style: solid.
4 žingsnis
Punktyrinę kraštinę galima gauti parašius ją taip: kraštinės stiliaus: punktyrinė. Tikrinant kraštinės stilių: brūkšninis duosite brūkšniuotą kraštinę.
5 žingsnis
Kraštą galite padaryti kaip dvigubą ištisinę liniją: krašto stiliaus: dviguba. Naudokite kraštinės stilių: griovelio ar kraštinio stiliaus: kraigą, kad tekstą ar vaizdus įrėmintumėte į kadrus su 3D šalutiniais efektais. Skirtumas tarp šių dviejų variantų yra tas, kad pirmuoju atveju rėmelis susideda iš įtrauktų linijų, o antruoju - išgaubtų.
6 žingsnis
Naudokite šį kodą: border-style: inset, kad sukurtumėte intarpo su svetainės elemento kraštu efektą. Norėdami, kad sienos turinys, kartu su kraštu, priešingai, būtų išgaubtas, parašykite border-style: outset.
7 žingsnis
Norimą spalvą prie rėmelio galite pridėti naudodami kraštinės spalvos parametrą, taip pat įdėtą tarp garbanotų petnešų. Jei norite, kad kraštinė būtų raudona, tada parašykite krašto spalvą: raudona, mėlyna - krašto spalva: mėlyna, oranžinė - krašto spalva: oranžinė.
8 žingsnis
CSS sienos kodas, įskaitant visas parinktis, atrodo taip:
ramka {border-width: 3px; sienos stiliaus: kietas; krašto spalva: mėlyna;}
9 žingsnis
Dabar, HTML, parašykite tai:
Rėmelio turinys Vietoj frazės „Rėmelio turinys“įterpkite norimo paveikslėlio tekstą arba kodą.
10 žingsnis
Taigi svetainėje galite sukurti neribotą skaičių elementų. Norėdami pakeisti rėmelio išvaizdą, turite pakeisti tik CSS kodą.
