Uno dei vantaggi dell'utilizzo di CSS è che è possibile creare effetti utilizzando codice che altrimenti avrebbe bisogno di software di grafica per ottenere. CSS aumenta il numero di opzioni di progettazione disponibili, che è possibile utilizzare tramite codice. Utilizzando codice anziché grafica può ridurre la pagina tempo di caricamento, quindi visitare il vostro sito è un'esperienza più piacevole.

Istruzioni

1

Tipo < stile tipo = "text/css" > racchiuso nella testa del < >< / testa > Tag sotto il tag HTML testa e sopra qualsiasi tag JavaScript incluso nell'intestazione. Tipo <! — e saltare una riga. Tipo--> e vai alla riga successiva. Digitare < / stile > per chiudere il tag di stile. Dovrebbe assomigliare a questo:

< style type = "text/css" >
<!...

-->
< / stile >

2

Assegnare un attributo di classe al vostro tavolo nella tabella apertura tag nel corpo del documento. Se si desiderano che le impostazioni del bordo da applicare a ogni singola tabella nel documento, è possibile non assegnare una classe al vostro tavolo. Per controllare quali tabelle specifiche impostazioni di bordo applicano a, impostare un attributo di classe. Nell'esempio seguente, l'attributo di classe incaricato è campione:

< table class = "esempio" >

3

Digitare "table.sample" senza virgolette nella riga vuota in mezzo il <!---> Tag. Vai alla riga successiva. Digitare la parentesi graffa ({}), saltare una riga e la parentesi graffa chiusa (}). Questo dice il browser che qualsiasi proprietà che si digita all'interno delle parentesi sono valide per gli elementi della tabella con l'esempio di nome di classe in questo documento. Dovrebbe assomigliare a questo:

< style type = "text/css" >
<!...
Table.Sample
{

}
-->
< / stile >

4

Digitare la proprietà border sulla riga vuota tra le parentesi graffe. Per applicare i valori per l'intera tabella, digitare "bordo". Per applicare valori singoli lati, digitare l'opzione appropriata. Bordo, bordo sinistro, bordo destro, bordo-top e bordo inferiore sono disponibili. Seguire la proprietà di bordo con i due punti (:).

5

Impostare le proprietà dei tre bordi (larghezza, stile e colore). La larghezza è impostata in pixel (px). Le opzioni di stile disponibili sono inizio, ridge, inset e punteggiato, tratteggiato, solido, doppio, groove. Impostare il colore utilizzando un nome (nero), RGB (rgb(0,0,0)), o un valore esadecimale (#000000). La larghezza del bordo, stile e colore (in questo ordine) deve essere presente per il bordo a comparire sulla pagina. Per visualizzare il dettaglio nei vari stili, è possibile utilizzare un'impostazione minima di 5px per la larghezza.

Nell'esempio che segue, le impostazioni si applicano a tutti i quattro lati del bordo delle tabelle nel documento con un esempio di nome di classe. La larghezza del bordo è cinque pixel, lo stile del bordo è solido e il colore del bordo è nero. Dovrebbe assomigliare a questo:

< style type = "text/css" >
<!...
Table.Sample
{
border: 5px nero a tinta unita;
}
-->
< / stile >

Consigli & Avvertenze

• Gli attributi vengono utilizzati in HTML per modificare gli elementi HTML. In questo caso, l'elemento HTML è la tabella--cominciando con < table >. Classe è un attributo HTML. Ci sono più di 10 attributi disponibili per l'elemento table. Essi controllano diverse impostazioni comprese cellpadding, cellspacing, bgcolor e bordo di larghezza. Impostazioni CSS override gli attributi HTML.
• Il selettore (table.sample), proprietà e valori sono su diverse linee nell'esempio citato per chiarezza solo. È possibile inserire tutti gli elementi in una singola riga come nel seguente esempio:
• < style type = "text/css" >
• <!...
• Table.Sample {border: 1px verde fisso; border-left: dashed #550000; border-destra: dotted #007700;}
• -->
• < / stile >
• Sostituire HTML CSS impostazioni.