Cascading Style Sheets

CSS. Cascading Style Sheets. Perché sono il nome che?

Questo è un tutorial su come la cascata parte dei CSS opere, e come lavorare con più classi.

La principale cosa da ricordare è la regola di base vincente. Qualsiasi nuova proprietà definite sovrascrivere qualsiasi proprietà precedentemente definiti. Esempio:

  p (color: red;) 
  p (color: blue;) 

Avendo queste due dichiarazioni in un foglio di stile in ultima analisi, la <p> etichetta blu con il testo. Ricordando questo principio di base di "sovrascrivere" vi terrà sul binario giusto. Ecco un mondo reale esempio di questo:

 CSS: 

  . class1 (font-size: 12px; color: # 00ccff; font-weight: bold) 

  . class2 (color: # 800080; text-decoration: underline) 

 HTML: 
   <span class = "class1"> Qualcosa come questo sarebbe bene <span class = "class2"> sottolineare </ span> 
  importanza in una frase </ span> 

E Ecco come appare: qualcosa come questo sarebbe bene a sottolineare l'importanza in una frase

Non cercano la cosa più bella del mondo, ma si ottiene attraverso il punto. La dimensione dei caratteri e il tipo di carattere peso rimane costante. Il colore viene sovrascritto quando il "class2" etichetta è attuato, e sottolineare la nuova proprietà è aggiunto come bene.

Adesso un esempio di utilizzo di più classi in una sola etichetta. Per semplicità, io uso lo stesso tag.

 HTML: 

  <p> Questa volta, stiamo usando uno standard di font, e invece desidera sottolineare 
  <span style = "class1 class2"> questo punto </ span> <span e stile = "class2 class1"> 
  questo punto </ span> pure. </ p> 

Ecco come appare: Questa volta, stiamo usando uno standard di font, e invece desidera sottolineare questo punto, e questo punto come bene.

Avviso la differenza, e ricordare la regola di base vincente. L'unica proprietà simile in entrambe le classi è il colore, in modo che sia l'ultimo elencate è quella che verrà visualizzato.

Ci sono alcuni tag avanzati e le norme che possono modificare la regola di base vincente, e io post su quelle di domani.

Stumble it!

Post Info

Questa voce è stato postato il Sabato, 22 dicembre 2007 ed è elencato sotto css, il design. Ha 75 punti di vista

Tag: CSS, layout, suggerimenti

Commenti feed. | Lascia un commento | Lascia Trackback.

Post Precedente: Google Android Telefono Live! »
Post Successivo: Blog Rush »

Più visti posti