Corso di CSS - Tutorial 4: Bordi | CSS Borders скачать в хорошем качестве

Corso di CSS - Tutorial 4: Bordi | CSS Borders

🙏 Fai una donazione → https://www.paypal.com/paypalme/Franc... 🌍 Richiedi il prontuario attraverso il modulo contatti del mio sito → https://www.fantasticamenteing.com/ 💻 #CSS - #Tutorial 4: Bordi CSS In questo quarto tutorial del corso di CSS (in italiano) parleremo di bordi CSS, più in particolare tratteremo le seguenti proprietà: 🔹 border-style 🔹 border-width 🔹 border-color 🔹 border (proprietà abbreviata / shorthand property) 🔹 border-radius inoltre parleremo di 🔹 #Border Sides Vediamo un po' meglio nel dettaglio. Le proprietà CSS relative ai bordi consentono di specificare lo stile, la larghezza e il colore del bordo di un elemento. 🔹 border-style Sono ammessi i seguenti valori: • dotted → definisce un bordo punteggiato • dashed → definisce un bordo tratteggiato • solid → definisce un bordo solido • double → definisce un doppio bordo • groove → definisce un bordo scanalato 3D (l'effetto dipende dal colore del bordo) • ridge → definisce un bordo increspato 3D (l'effetto dipende dal valore del colore del bordo) • inset → definisce un bordo incassato 3D (l'effetto dipende dal colore del bordo) • outset → definisce un bordo outset 3D (l'effetto dipende dal colore del bordo) • hidden → definisce un bordo nascosto • none → non definisce alcun bordo Nota: nessuna delle altre proprietà relative al bordo avrà alcun effetto se la proprietà border-style non è impostata! 🔹 border-width La proprietà border-width specifica la larghezza dei quattro bordi. La larghezza può essere impostata come una dimensione specifica (in px, pt, cm, em, ecc.) oppure utilizzando uno dei tre valori predefiniti: thin, medium o thick (ovvero: sottile, medio o spesso). Anche la proprietà border-width può avere da uno a quattro valori: per il bordo superiore (top), il bordo destro (right), il bordo inferiore (bottom) e il bordo sinistro (left). Vale la stessa logica. 🔹 background-color La proprietà border-color viene utilizzata per impostare il colore dei bordi. Il colore può essere impostato attraverso: • nome: si specifica un nome di colore, ad esempio "red" • HEX: si specifica un valore HEX, ad esempio "#ff0000" • RGB: si specifica un valore RGB, ad esempio "rgb(255,0,0)" • HSL: si specifica un valore HSL, ad esempio "hsl(0, 100%, 50%)" • transparent Nota: se border-color non è impostato, eredita il colore dell'elemento. 🔹 BORDER SIDES Nel caso in cui si voglia far riferimento a un bordo specifico, in CSS, esistono proprietà dedicate: border-top, border-right, border-bottom, border-left da queste derivano le proprietà composite; per lo stile: border-top-style, border-right-style, border-bottom-style, border-left-style per la larghezza: border-top-width, border-right-width, border-bottom-width, border-left-width per il colore: border-top-color, border-right-color, border-bottom-color, border-left-color 🔹 border - proprietà abbreviata Per abbreviare il codice, è anche possibile specificare tutte le singole proprietà di bordo in un'unica proprietà: border. La proprietà border sintetizza le seguenti proprietà: • border-width • border-style (obbligatoria) • border-color 🔹 border-radius La proprietà border-radius viene utilizzata per aggiungere bordi arrotondati a un elemento. 🇬🇧 🔹 CSS borders The CSS border properties allow you to specify the style, width, and color of an element's border. 🔹 CSS Border Style The border-style property specifies what kind of border to display. The following values are allowed: • dotted - Defines a dotted border • dashed - Defines a dashed border • solid - Defines a solid border • double - Defines a double border • groove - Defines a 3D grooved border. The effect depends on the border-color value • ridge - Defines a 3D ridged border. The effect depends on the border-color value • inset - Defines a 3D inset border. The effect depends on the border-color value • outset - Defines a 3D outset border. The effect depends on the border-color value • none - Defines no border • hidden - Defines a hidden border The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border). 🔹 Border Width The border-width property specifies the width of the four borders. The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick. 🔹 Border Color The border-color property is used to set the color of the four borders. The color can be set by: • name - specify a color name, like "red" • HEX - specify a HEX value, like "#ff0000" • RGB - specify a RGB value, like "rgb(255,0,0)" • HSL - specify a HSL value, like "hsl(0, 100%, 50%)" transparent Note: If border-color is not set, it inherits the color of the element. 🔹 Border Shorthand The border property is a shorthand property for the following individual border properties: • border-width • border-style (req) • border-color 💼 Ing. F. Martorana