March 29
CSS (Cascading Style Sheets) offre ai progettisti e sviluppatori Web con la possibilità per lo stile vari aspetti della pagina Web markup in HTML. Una delle caratteristiche principali di CSS che rende così efficace è la capacità di applicare lo stesso stile di pagina e del sito più elementi. Utilizzando i CSS per creare uno stile simile o identico per un certo numero di elementi in un sito web è semplice. Anche i principianti possono svolgere questo compito, che è un elemento chiave per imparare a progettare siti web.
1 Crea la tua pagina HTML. Aprire un nuovo file in un programma di editing di testo e inserire il seguente codice di struttura, salvare la pagina con l'estensione ".html":
<Html>
<Head>
</ Head>
<Body>
</ Body>
</ Html>
Questa è la struttura di base di una pagina HTML. Il contenuto della pagina deve essere collocata all'interno della sezione del corpo.
2 Creare il file CSS. Aprire un nuovo file nel vostro editor di testo e salvarlo con l'estensione "css", ad esempio "multistyle.css" per riflettere il suo scopo. Aggiungere un link al tuo file CSS all'interno della sezione head della pagina, che riflette la sua posizione. Inserire la seguente sintassi tra l'apertura e la chiusura della testa tag nella pagina HTML:
<Link rel = "stylesheet" type = "text / css" href = "multistyle.css" />
Modificare il valore "href" attributo se è stato salvato il file CSS con un nome diverso o se non sta per essere memorizzati all'interno della stessa directory pagina.
3 Creare alcuni elementi HTML nella vostra pagina. Inserisci il seguente codice di esempio HTML tra l'apertura e chiusura tag body nella tua pagina:
<Div class = "style1"> div style 1 </ div>
<Div class = "style2"> div style 2 </ div>
<Div class = "style1"> Style Div 1 di nuovo </ div>
<Div class = "style2"> Style Div 2 di nuovo </ div>
Gli elementi sono stati dati un attributo di classe. più elementi in una pagina possono condividere lo stesso attributo di classe, "style1" e "style2" in questo esempio. Utilizzando le classi, si identifica alcuni elementi come appartenenti a una particolare categoria.
4 Aggiungere alcune regole CSS per definire come dovrebbero apparire gli elementi. Immettere il seguente codice CSS che definisce lo stile dei tuoi elementi "div":
div {
font-family: Arial, Helvetica, sans-serif;
font-size: grande;
font-weight: bold;}
Questo codice CSS utilizza il tipo di elemento per definire lo stile, in questo caso, l'applicazione di proprietà dei font a tutti gli elementi "div" nella pagina. Questo è uno dei principali modi di stile più elementi nello stesso modo, ma significa anche che ogni elemento di questo tipo incluso all'interno della pagina avrà queste proprietà applicate.
5 Utilizzare la classe di attributi HTML per lo stile della pagina. Aggiungere il seguente codice CSS, che utilizza la classe di ogni elemento per determinare come dovrebbe essere in stile:
div.style1 {
color: # FF0000;
background-color: # 333333;}
.style2 {
color: # 0000FF;
background-color: # FF99FF;}
Questo codice si applica stili diversi per gli elementi che utilizzano i loro attributi di classe. Ciò consente di dichiarare le proprietà di stile per un sottoinsieme di elementi all'interno del tuo sito, piuttosto che semplicemente applicando le stesse proprietà a tutti gli elementi di un tipo particolare. La seconda classe di stile dimostra anche che non è necessario includere il tipo di elemento per identificare una classe in CSS. È possibile assegnare lo stesso attributo class agli elementi di tipo diverso in HTML.