Come combinare attributi CSS Into One

December 27

Come combinare attributi CSS Into One


Cascading Style Sheets, o CSS, dettare l'aspetto generale di un sito definendo lo stile di ogni elemento - potrebbe essere il layout di font, il colore o la pagina. In genere, un sito web utilizza un file CSS in tutte le sue molte pagine. Siti di grandi dimensioni hanno file CSS con numerose linee di codice, creando spesso un file CSS di grandi dimensioni. Se si desidera ottimizzare la velocità di caricamento del tuo sito, una cosa si può cambiare è la dimensione del file CSS. Combinando diversi attributi in uno utilizzando abbreviazioni CSS riduce le linee di codice, risultando in un file CSS più piccolo.

istruzione

Utilizzando Stenografia on Borders

1 Aprire il file CSS del tuo sito nel Blocco note.

2 Cerca il codice di istanze wher attributi di confine sono definiti. Per esempio:

.sidebar {

border-width: 1px;

border-style: dotted;

border-color: # 000;

border-top-width: 1px;

border-right-width: 2px;

border-bottom-width: 3px;

border-left-width: 4px;

}

3 Unire attribuisce al confine con la proprietà abbreviata "confine" e "border-width":

.sidebar {

border: 1px dotted # 000;

border-width: 1px 2px 3px 4px;

}

L'abbreviazione "confine" combina larghezza, lo stile e il colore, mentre "border-width" combina alto, a destra, in basso a sinistra e gli attributi.

Utilizzando Stenografia su sfondi

4 Aprire il file CSS.

5 Cerca il codice per i casi in cui sono definiti gli attributi di sfondo. Per esempio:

body {

background-color: #ccc;

background-image: URL ( 'mybackground.jpg');

background-repeat: no-repeat;

background-attachment: fixed;

background-position: in alto a destra;

}

6 Unire lo sfondo attributi utilizzando la scorciatoia "di fondo":

body {

sfondo: #ccc URL ( 'mybackground.jpg') no-repeat fissata in alto a destra;

}

Gli attributi combinati dovrebbero essere digitati nel seguente ordine: colore, URL immagine, ripetere, l'attaccamento e la posizione.

Utilizzando Stenografia il font

7 Aprire il file CSS

8 Cerca il codice per i casi in cui sono definiti gli attributi dei font. Per esempio:

h1 {

font-style: underline;

font-variant: small-caps;

font-weight: bold;

font-size: 16px;

line-height: 30px;

font-family: "Arial", sans-serif;

}

9 Unire il carattere attributi utilizzando il "carattere" scorciatoia:

h1 {

fonte: underline small-caps grassetto 16px / 30px "Arial", sans-serif;

}

Gli attributi combinati dovrebbero essere digitati nel seguente ordine: stile, variante, peso, dimensioni, line-height e famiglia di font.

Utilizzando Stenografia sui margini e padding

10 Aprire il file CSS.

11 Ricerca per le istanze del codice in cui sono definiti gli attributi margin e padding. Per esempio:

.scatola {

margin-top: 5px;

margin-right: 0;

margin-bottom: 3px;

margin-left: 6px;

padding-top: 5px;

padding-right: 0;

padding-bottom: 3px;

padding-left: 6px;

}

12 Combinare gli attributi margin e padding utilizzando il "margine" e stenografia "padding":

.scatola {

margin: 5px 0 3px 6px;

padding: 5px 0 3px 6px;

}

Gli attributi combinati dovrebbero essere digitati nel seguente ordine: in alto, a destra, in basso ea sinistra.

Consigli e avvertenze

  • Non tutti gli attributi sono necessari e possono essere lasciati vuoti.
  • Per il codice CSS per lavorare, è importante seguire la sequenza corretta per ogni CSS proprietà abbreviata.