Els marcs col·locats al voltant d’imatges o text decoren el lloc i aporten varietat al seu disseny. Si feu servir taules per crear vores, el codi de cada vora ocuparà massa espai. A més, en aquest cas, haureu de reescriure el codi HTML de cada marc. Amb CSS, podeu crear fàcilment una vora de qualsevol gruix i color que vulgueu escrivint un codi senzill una vegada per a tots els elements que hi haurà envoltats. Aquesta tecnologia permetrà, si cal, canviar el tipus de marcs del lloc en un parell de minuts.
És necessari
- - tenir el seu propi lloc web;
- - saber què és CSS i on s’escriuen aquests estils al lloc.
Instruccions
Pas 1
Per crear una vora, primer escriviu el codi següent a CSS:
ramka {}
Pas 2
Per fer que la vora sigui la mida que vulgueu, utilitzeu el paràmetre border-width, que defineix l’amplada de la línia en píxels. Per exemple, si la línia del marc hauria de tenir 3 píxels d’amplada, l’entrada tindrà aquest aspecte:
ramka {border-width: 3px;}
Pas 3
Ara definiu l'estil de la vora mitjançant el paràmetre border-style. Si voleu crear una vora amb els costats de línies contínues regulars, poseu la següent entrada al codi entre els claus: estil de vora: sòlid.
Pas 4
Es pot obtenir una vora puntejada escrivint-la així: border-style: puntejat. Comprovació de l’estil de la vora: discontínua us proporcionarà una vora discontínua.
Pas 5
Podeu convertir la vora en una línia contínua doble com aquesta: border-style: double. Utilitzeu l'estil de la vora: groove o l'estil de la vora: ridge per emmarcar text o imatges en marcs amb efectes secundaris en 3D. La diferència entre aquestes dues opcions és que, en el primer cas, el marc consisteix en línies sagnades i, en el segon, convexes.
Pas 6
Utilitzeu aquest codi: border-style: inset per crear l’efecte d’una inserció amb la vora d’un element del lloc. Per fer que el contingut de la vora, juntament amb la vora, sigui al contrari, convex, escriviu estil border: outset.
Pas 7
Podeu afegir el color desitjat al marc mitjançant el paràmetre border-color, situat també entre els claus. Si voleu que la vora sigui vermella, escriviu border-color: vermell, blau - border-color: blau, taronja - border-color: taronja.
Pas 8
El codi de vora CSS, incloses totes les opcions, té aquest aspecte:
ramka {border-width: 3px; estil de vora: sòlid; color de la vora: blau;}
Pas 9
Ara, en HTML, escriviu això:
Contingut del marc En lloc de la frase "Contingut del marc", inseriu el text o el codi de la imatge desitjada.
Pas 10
Per tant, podeu dissenyar un nombre il·limitat d’elements al lloc. Per canviar l'aparença del marc, només heu de canviar el codi CSS.
