Les vores s’utilitzen a les pàgines HTML per delimitar i ressaltar el contingut. Si hi ha molta informació en una pàgina i voleu cridar l’atenció de l’usuari sobre parts específiques, feu servir vores al voltant d’aquest contingut. En aquest article sobre Fronteres a CSS tractaré els temes següents:
- Quan s’ha d’utilitzar Borders
- Vores a CSS
- Atributs de la frontera CSS
- Valors predeterminats per als atributs de frontera
- Definiu fronteres en taquigrafia
- Punts a tenir en compte durant el disseny de fronteres a CSS
Quan s’ha d’utilitzar Borders
La pràctica estàndard és utilitzar etiquetes de vores CSS per definir vores a les pàgines HTML per a:
- Al voltant de capçaleres importants
- Per ressaltar postdates o notes importants
- Per incloure imatges, il·lustracions, cites de persones, vídeos
- Per cridar l'atenció sobre preus, terminis o informació tan significativa
És possible que vulgueu llegir a abans d’aprendre sobre les fronteres CSS.
Per obtenir un tutorial complet de CSS, visiteu Tutorial Edureka CSS per a principiants . Vostè obtindrà un excel·lent avenç sobre la manera com CSS s'ha d'utilitzar per augmentar el disseny web HTML.
Vores a CSS
Els límits CSS es poden assignar a diferents seccions de la pàgina HTML, ja sigui per incloure encapçalaments o paràgrafs. Comencem amb un exemple. Aquí definim una vora al voltant del títol i una altra vora al text del paràgraf.
cos {background-color: lightblue} h1 {text-align: center border-style: solid} p {font-family: verdana font-size: 20px border-style: dotted}Voreja també el paràgraf.
Atributs de la frontera CSS
Les fronteres CSS tenen tres atributs principals
- estil:Elestilatribut defineix el patró de la vora.
- color: El color pot ser qualsevol del conjunt definit pels colors CSS.
- amplada: L'amplada s'utilitza per variar el gruix de la vora, per fer-la més destacada.
A l'exemple anterior, vam veure que només es defineix un atribut de vora, aquest és el seu estil. Els altres atributs quan no es defineixen prenen valors predeterminats. Hi ha un altre atribut anomenat radi, que s’utilitza amb menys freqüència. S'utilitza per fer arrodonides les vores de la vora.
- a la vora atribut
| Estil | Descripció |
| a la vora: sòlid | |
| a la vora: doble | |
| estil de vora: solc | |
| estil de frontera: cresta | |
| border-style: inset | |
| border-style: inici | |
| a la vora: cap | |
| a la vora: amagat | |
| estil de vora: puntejat | |
| estil de vora: ratllat |
Us adonareu que també hi ha una opció 'sense vora' i 'vora oculta'. Un desenvolupador simplement pot evitar definir una vora, per què definir-la explícitament com una 'vora oculta'? Això es fa amb finalitats d’ús i alineació de l’espai amb altres elements de la pàgina.
Els estils de vora també es poden barrejar dins d’un element. Amb aquest propòsit, es poden definir els 4 costats individuals de la vora amb estils diferents. Això es pot fer de dues maneres. Definiu els 4 costats en una sola etiqueta. En aquest cas, el recompte comença des de la línia superior i després es mou en sentit horari. Com a alternativa, cadascun dels 4 límits també es pot definir en etiquetes individuals. Tots dos casos es mostren al següent exemple.
| Estil | Descripció |
| estil de vora: doble sòlid discontinu border-top-style: puntejat border-right-style: discontinu estil vora-fons: sòlid php mysql_fetch_array border-left-style: doble |
- color de vora atribut
L'atribut de color d'una vora es pot configurar de diverses maneres. Això és similar a la configuració del color per a altres elements. Els colors es poden configurar mitjançant un dels mètodes següents:
- nom - especifiqueu un nom de color, com ara 'blau'. També podeu provar algunes opcions de colors elegants, com ara 'BlanchedAlmond'.
- Hex - especifiqueu un valor hexadecimal, com ara '# ff0000'
- RGB - definiu el codi RGB. Per exemple, rgb (255.255,0) significa groc.
- configuració - com ara 'transparent' o 'opac'
- ample de vora atribut:
La propietat ample, com el seu nom indica, defineix el gruix dels quatre costats de la vora. Si es defineix un valor, és per a tots els costats; en cas contrari, també es poden establir valors d'amplada individuals.
L'amplada es pot especificar en qualsevol de les unitats estàndard, com ara píxels ('px'), punts ('pt') o en centímetres ('cm'). També podeu especificar l’amplada mitjançant valors predefinits de ‘gruixut’, ‘prim’ i ‘mitjà’.
| Estil | Descripció |
| amplada de la vora: 10 px | |
| ample de vora: 0,1 cm | |
| ample de vora: mitjà |
- radi de frontera atribut
El propòsit de definir el radi és obtenir cantonades arrodonides per a la vora. El factor de radi defineix l’abast de l’arrodoniment. Com més gran sigui el valor, les corbes es tornen més corbes. Com a pràctica estàndard, els valors de radi es mantenen entre 1-3 vegades l'amplada de la vora.
Es generarà el següent codi:
amplada de la vora: 10 px
radi de la vora: 30 px
funció d'ordenació c ++
Valors predeterminats per als atributs de frontera
L'únic atribut obligatori és el estil . Si falta l'estil, la vora no apareixerà.
Si no s'especifica el color, es pren el color de l'element subjacent com a valor per defecte. Per exemple, si el color del text d'un paràgraf es defineix com a 'blau', el color de la vora per defecte també seria blau. En cas que no hi hagi cap definició de color per a l'element, el color per defecte és 'negre'.
El valor per defecte de l'amplada és 'mitjà'.
Definiu fronteres en taquigrafia
Alguns desenvolupadors prefereixen definir atributs de vora en una etiqueta concisa d'una línia. Aquest format abreujat ajuda a minimitzar les línies de codi i els desenvolupadors experts prefereixen aquest format. Es recomana utilitzar el format abreujat quan la definició de la vora és simple i bastant estandarditzada. Tot i això, si heu de ressaltar cada costat de la vora amb un estil diferent, haureu de complir el format de definició de les etiquetes individuals.
S'utilitza el següent codi:
estil de vora: ratllat
color de la vora: verd
amplada de la vora: 5 px
vora: 5px verd discontínua
Punts a tenir en compte durant el disseny de fronteres a CSS
No utilitzeu massa fronteres en una pàgina, pot distreure i dificultar la concentració de l'usuari.
És important mantenir la coherència en l’estil i els colors de la vora. Els elements del mateix nivell de jerarquia en una pàgina han de tenir un estil i una amplada de vora similars per garantir la uniformitat. Per exemple, si paràgraf es defineix amb un límit sòlid i una amplada de 5 px, mantenint aquest format a la resta paràgraf elements durant el disseny de llocs web.
Seguiu un estil de definició d'etiquetes. Alguns desenvolupadors són còmodes amb les definicions de dreceres amb tots els valors assignats a una sola frontera etiqueta. Alguns altres prefereixen un llistat explícit de totes les etiquetes per amplada, color i estil. La convenció és que quan es requereixen decoracions de vores elaborades en una pàgina, les etiquetes individuals es mostren per separat. Això ajuda a depurar aquestes definicions de fronteres personalitzades. Per als casos normals, només seria útil definir una drecera.
Espero que hagueu trobat la informació que cercàveu a les fronteres CSS i wAmb això, arribem al final d’aquest article de Borders in CSS.
Consulteu el nostre que inclou formació en directe dirigida per un instructor i experiència en projectes reals. Aquesta formació us permet dominar les habilitats necessàries per treballar amb tecnologies web d’interfície i front-end. Inclou formació sobre desenvolupament web, jQuery, Angular, NodeJS, ExpressJS i MongoDB.
Tens alguna pregunta? Si us plau, mencioneu-ho a la secció de comentaris del bloc 'Frontera a CSS' i us respondrem.