I bordi vengono utilizzati nelle pagine HTML per delimitare ed evidenziare il contenuto. Quando su una pagina sono presenti molte informazioni e desideri attirare l'attenzione dell'utente su parti specifiche, utilizza i bordi attorno a quel contenuto. In questo articolo sui bordi nei CSS tratterò i seguenti argomenti:
- Quando usare i bordi
- Bordi in CSS
- Attributi di CSS Border
- Valori predefiniti per gli attributi del bordo
- Definisci i bordi in stenografia
- Punti da tenere a mente durante la progettazione dei bordi in CSS
Quando usare i bordi
La pratica standard è quella di utilizzare i tag di bordo CSS per definire i bordi nelle pagine HTML per:
- Intorno a titoli importanti
- Per evidenziare poscritto o note importanti
- Per allegare immagini, illustrazioni, citazioni di persone, video
- Per attirare l'attenzione su prezzi, tempistiche o informazioni così significative
Potresti voler leggere su prima di iniziare a conoscere i bordi CSS.
Per un tutorial CSS completo, visita Edureka CSS Tutorial per principianti . Avrai un eccellente avvertimento sul modo in cui i CSS devono essere utilizzati per aumentare il web design HTML.
Bordi in CSS
I bordi CSS possono essere assegnati a diverse sezioni della pagina HTML, sia che si tratti di racchiudere titoli o paragrafi. Cominciamo con un esempio. Qui definiamo un bordo attorno all'intestazione e un altro bordo attorno al testo del paragrafo.
body {background-color: lightblue} h1 {text-align: center border-style: solid} p {font-family: verdana font-size: 20px border-style: punteggiato}Bordo anche intorno al paragrafo!
Attributi di CSS Border
I bordi CSS hanno 3 attributi principali per loro
- stile:Ilstileattributo definisce il modello del bordo.
- colore: Il colore può essere uno qualsiasi del set definito dai colori CSS.
- larghezza: La larghezza serve per variare lo spessore del bordo, per renderlo più prominente.
Nell'esempio sopra, abbiamo visto che è definito un solo attributo border, ovvero il suo stile. Gli altri attributi, quando non definiti, assumono valori predefiniti. C'è un altro attributo chiamato raggio, che è usato meno frequentemente. È usato per arrotondare i bordi del bordo.
- stile del bordo attributo
| Stile | Descrizione |
| stile bordo: solido | |
| stile bordo: doppio | |
| stile bordo: scanalatura | |
| stile bordo: cresta | |
| stile bordo: inserto | |
| stile bordo: inizio | |
| stile bordo: nessuno | |
| stile bordo: nascosto | |
| stile bordo: punteggiato | |
| stile bordo: tratteggiato |
Noterai che c'è anche un'opzione 'nessun bordo' e 'bordo nascosto'. Uno sviluppatore può semplicemente evitare di definire un confine, perché definirlo esplicitamente come un 'confine nascosto'? Questo viene fatto per l'utilizzo dello spazio e per scopi di allineamento con altri elementi nella pagina.
Anche gli stili di bordo possono essere combinati all'interno di un elemento. A tale scopo, i 4 lati del bordo individuali possono essere definiti separatamente con stili diversi. Questo può essere fatto in 2 modi. Definisci tutti e 4 i lati in un unico tag. In questo caso, il conteggio inizia dalla riga superiore e poi si sposta in senso orario. In alternativa, ciascuna delle 4 linee di confine può essere definita anche in singoli tag. Entrambi i casi sono mostrati nel prossimo esempio.
| Stile | Descrizione |
| stile bordo: doppio pieno tratteggiato tratteggiato stile bordo superiore: punteggiato border-right-style: tratteggiato stile bordo inferiore: solido stile bordo sinistro: doppio |
- colore del bordo attributo
L'attributo color per un bordo può essere impostato in più modi. È simile all'impostazione del colore per altri elementi. I colori possono essere impostati con uno dei seguenti metodi:
- nome - specificare un nome di colore, ad esempio 'blu'. Puoi anche provare alcune fantasiose opzioni di colore come 'BlanchedAlmond'!
- Esadecimale - specifica un valore esadecimale, come '# ff0000'
- RGB - impostare il codice RGB. Ad esempio, rgb (255,255,0) significa Giallo.
- ambientazione - come 'trasparente' o 'opaco'
- larghezza del bordo attributo:
La proprietà width, come suggerisce il nome, definisce lo spessore dei 4 lati del bordo. Se un valore è definito, è per tutti i lati, altrimenti è possibile impostare anche valori di larghezza individuali.
La larghezza può essere specificata in qualsiasi unità standard come pixel ('px'), punti ('pt') o in centimetri ('cm'). È inoltre possibile specificare la larghezza utilizzando i valori predefiniti di 'spesso', 'sottile' e 'medio'.
| Stile | Descrizione |
| larghezza del bordo: 10 px | |
| larghezza del bordo: 0,1 cm | |
| larghezza del bordo: media |
- border-radius attributo
Lo scopo della definizione del raggio è ottenere angoli arrotondati per il bordo. Il fattore raggio definisce l'entità dell'arrotondamento. Maggiore è il valore, più curvi diventano gli angoli. Come pratica standard, i valori del raggio vengono mantenuti tra 1-3 volte la larghezza del bordo.
Il codice seguente genererà:
larghezza del bordo: 10 px
border-radius: 30px
Valori predefiniti per gli attributi del bordo
L'unico attributo obbligatorio è il stile . Se manca lo stile, il bordo non apparirà.
Se il colore non è specificato, il colore dell'elemento sottostante viene preso come valore predefinito. Ad esempio, se il colore del testo di un paragrafo è definito come 'blu', anche il colore del bordo predefinito sarà blu. Nel caso in cui non vi sia alcuna definizione di colore anche per l'elemento, il colore predefinito è 'nero'.
Il valore predefinito per la larghezza è 'medio'.
Definisci i bordi in stenografia
Alcuni sviluppatori preferiscono definire gli attributi del bordo in un tag conciso di una riga. Questo formato abbreviato aiuta a ridurre al minimo le righe di codice e gli sviluppatori esperti preferiscono questo formato. Si consiglia di utilizzare il formato abbreviato quando la definizione del bordo è semplice e abbastanza standardizzata. Tuttavia, se è necessario evidenziare ogni lato del bordo in uno stile diverso, è necessario attenersi al formato di definizione dei singoli tag.
Viene utilizzato il codice seguente:
stile bordo: tratteggiato
colore del bordo: verde
larghezza del bordo: 5px
bordo: verde tratteggiato 5px
Punti da tenere a mente durante la progettazione dei bordi in CSS
Non utilizzare troppi bordi in una pagina, può distrarre e rendere difficile la concentrazione dell'utente.
È importante mantenere la coerenza nello stile e nei colori del bordo. Gli elementi nello stesso livello di gerarchia in una pagina devono avere uno stile e una larghezza del bordo simili per uniformità. Ad esempio, se paragrafo è definito con un bordo pieno e una larghezza di 5px, mantieni questo formato in tutti gli altri paragrafo elementi durante la progettazione del sito web.
Attenersi a uno stile di definizioni dei tag. Alcuni sviluppatori sono a proprio agio con le definizioni dei collegamenti con tutti i valori assegnati a un singolo file confine etichetta. Alcuni altri preferiscono un elenco esplicito di tutti i tag per larghezza, colore e stile. La convenzione è che quando in una pagina sono richieste decorazioni di bordo elaborate, i singoli tag vengono elencati separatamente. Ciò aiuta durante il debug di tali definizioni di bordo personalizzate. Per i casi normali, sarebbe sufficiente una definizione di scorciatoia.
differenza tra lanci e lanci
Spero che tu abbia trovato le informazioni che stavi cercando sui bordi CSS e wCon questo, arriviamo alla fine di questo articolo Borders in CSS.
Dai un'occhiata al nostro che viene fornito con formazione dal vivo con istruttore e esperienza di progetto nella vita reale. Questa formazione ti consente di acquisire competenze per lavorare con tecnologie web back-end e front-end. Include formazione su sviluppo Web, jQuery, Angular, NodeJS, ExpressJS e MongoDB.
Hai domande per noi? Per favore menzionalo nella sezione dei commenti del blog 'Border in CSS' e ti risponderemo.