Come fare Fancy tabella confini con i CSS

February 23

Come fare Fancy tabella confini con i CSS


Uno dei vantaggi di usare i CSS è che si può creare effetti utilizzando il codice si sarebbe altrimenti necessario un software di grafica per realizzare. CSS aumenta il numero di opzioni di design disponibili si possono utilizzare tramite il codice. Utilizzando il codice, invece di grafica in grado di ridurre il tempo di caricamento pagina, in modo da visitare il vostro sito web è un'esperienza più piacevole.

istruzione

1 Tipo <style type = "text / css"> racchiuso tra i tag <head> </ head> tag - sotto i tag head HTML standard e sopra ogni tag JavaScript incluso nell'intestazione. Tipo <! - E saltare una riga. Tipo -> e passare alla riga successiva. Tipo </ style> per chiudere il tag di stile. Dovrebbe sembrare come questo:

<Style type = "text / css">
<! -

->
</ Style>

2 Assegnare un attributo di classe al vostro tavolo nel tag tabella di apertura nel corpo del documento. Se si desidera che le impostazioni dei bordi da applicare ad ogni singola tabella nel documento, è possibile scegliere di non assegnare una classe al vostro tavolo. Per controllare che le tabelle specifiche impostazioni di confine si applicano a, impostare un attributo di classe. Nell'esempio che segue, l'attributo class assegnato è di esempio:

<Table class = "campione">

3 Tipo "table.sample" senza le virgolette sulla riga vuota tra le <! - -> Tag. Vai alla riga successiva. Digitare la parentesi graffa sinistra ({), saltare una riga e digitare la parentesi graffa destra (}). Questo dice il browser che tutte le proprietà digitati all'interno delle parentesi si riferiscono agli elementi di tabella con il campione nome della classe in questo documento. Dovrebbe sembrare come questo:

<Style type = "text / css">
<! -
table.sample
{

}
->
</ Style>

4 Digitare la proprietà border sulla riga vuota tra le parentesi graffe. Per applicare i valori per l'intera tabella, digitare "confine". Per applicare i valori a singole parti, digitare l'opzione appropriata. Le opzioni disponibili sono bordo, border-left, border-right, border-top e border-bottom. Seguire la proprietà border con i due punti (:).

5 Impostare le tre proprietà del bordo (larghezza, stile e colore). La larghezza è impostata in pixel (px). Le opzioni di stile disponibili sono punteggiate, tratteggiate, solido, doppio, groove, ridge, inset e fin dall'inizio. Impostare il colore utilizzando un nome (nero), RGB (RGB (0,0,0)), o il valore esadecimale (# 000000). La larghezza del bordo, lo stile e il colore (in questo ordine) devono essere tutti presenti per il confine di apparire sulla pagina. Per vedere il dettaglio nei vari stili, utilizzare un'impostazione minima di 5px per la larghezza.

Nell'esempio che segue, le impostazioni vengono applicate a tutti e quattro i lati del confine delle tabelle nel documento con un campione di nome di classe. La larghezza del bordo è di cinque pixel, lo stile del bordo è solida e il colore del bordo è nero. Dovrebbe sembrare come questo:

<Style type = "text / css">
<! -
table.sample
{
border: 5px nero solido;
}
->
</ Style>

Consigli e avvertenze

  • Gli attributi sono utilizzati in HTML per modificare gli elementi HTML. In questo caso, l'elemento HTML è la tabella - inizia con <table>. Class è un attributo HTML. Ci sono più di 10 attributi disponibili per l'elemento tavola. Essi controllano molte impostazioni, tra cui cellpadding, cellspacing, bgcolor e larghezza del bordo. impostazioni CSS sovrascrivono attributi HTML.
  • Il selettore (table.sample), proprietà ei valori sono su diverse linee nell'esempio citato solo per chiarezza. È possibile inserire tutti gli elementi su una singola linea come in questo esempio:
  • <Style type = "text / css">
  • <! -
  • table.sample {border: 1px solid verde; border-left: tratteggiata # 550000; border-right: punteggiata # 007.700;}
  • ->
  • </ Style>
  • impostazioni CSS sovrascrivono le impostazioni HTML.