Domanda sui css per Ivan
Ivan
darthxiong@libero.it
Wed, 10 Jan 2001 21:46:30 +0100
*** Lezione sui css ***
All'interno di un foglio di stile ( Cascading Style Sheet ) si possono
ridefinire i comandi html, o definirne di nuovi... un po come scrivere nel
.bashrc gli alias, per cui
alias ll='ls -la'
in un css si scrivera'
p { text-align: justify}
i questo caso abbiamo ridefinito il tag Paragraph, per cui tutte le volte che
scriviamo
<p> e' come se scrivessimo <p align="justify"> ( per inciso, e' la
giustificazione sia a destra che a sinistra, il testo assume un' aspetto
rettangolare, senza dentelli ne a destra ne a sinistra ). Vorrei porre la vostra
riverita attenzione sulla differenza tra la sintassi html, e quella del css che
si rifa' a java: in generale, un attributo html, scritto come
tag attributo="valore_per_l_attributo"
diventa in css
tag { tag-attributo : valore_per_l_attributo; tag-altroattributo : valore
per_l_attributo; ecc... }
* esempio pratico... per definire
<body bgcolor="#FFFFFF" text="#000000"> ( testo nero su fondo bianco )
in css scriveremo
body { background-color : #FFFFFF; font-color: rgb(255,255,255); } ( 255 = FF
in esadecimale, e' uguale... )
*questo puo' essere un buon css da studiare...
p { text-align: justify; font-style: italic; }
a:link { text-decoration: none; color: #003300 }
a:visited { text-decoration: none; color: #003300 }
a:hover { text-decoration: none; color: #FF0000 }
a:active { text-decoration: none; color: #FF0000 }
body {
font-family: serif, "Times New Roman";
font-style: italic;
color: rgb(50,25,0);
background-color: rgb(240,224,189);
}
*cosa significa? a:hover e' il colore che assume un link ( a: ) quando il mouse
gli passa sopra.... ww.darthxiong.net ha una cosa simile ( per inciso, questo e'
il css che ho fatto per www.ladispensadellanonna.it, andate a guardare e
comprate un po' di prugnolino, e' ottimo!!!! e nelle note, dite che vi mando io
;-)
*A che serve? in genere a non far vedere cosa si e' fatto, perche' si e' gelosi
del proprio lavoro... questa dicitura, anziche' in un file a parte, puo' essere
messa anche nella pagina tra due tag <style> e </style> infilate tra <head> e
</head> ( non e' obbligatorio ) oppure in linea direttamente in un tag. Un buon
utilizzo e' per sostituire una pappardella del tipo
<td bgcolor="#444444" align="left" ecc... > con un piu' asciutto <td> e basta!
se ci sono 80 <td> il risparmio in termini di grandezza del file e' notevole...
*Si puo' anche usare, oltre che per ridefinire, anche per definire nuovi tag, in
questo caso il nuovo tag sara' preceduto da un punto
.sttitle { font-size: 28pt; color: #000066; background-color: #3399FF}
.stprod { color: #0066FF; background-color: #CCFFFF; font-size: 14pt;
font-weight: bold}
.stmodel { font-size: 16pt; color: #000066}
questo e' parte del css che uso in www.silfradent.com, il primo definisce un
titolo alto 28 punti, blu scuro su un fondo blu chiaro, il secondo ed il terzo
non ricordo, cmq se andate sul sito, salvate una pagina e controllate, troverete
una cosa del tipo
<br>
<span class="sttitle"> Scalpello pneumatico </span><br>
<br>
notate che il punto non c'e' piu'.....
*Per tornare al problema iniziale delle tabrutte :) di eco .... o ridefinisci
l'attributo <td> ( consigliato, se hai tutti <td> secchi ), oppure ti definisci
un .tdpersonale.... io direi:
td { background-color: #FFFFFF ; text-align: justify; text-color: #000000;
ecc.... }
purtroppo gli attributi non sono intuitivi, ma se mi dici quello che vuoi
ottenere e mi mandi la pagina come la vuoi, il css te lo tiro fuori....
Spero di essere stato chiaro... ed era solo l'antipasto :>
Ciao a tutti
Ivan
--
---------------------------------------------------------------------
"The easy day was yesterday"
(o_ Ivan Fabris - S.Sofia (FO) - Powered by Linux Slackware 7.1
//\ http://www.darthxiong.net ( Home page )
V_/_ http://folug.cjb.net ( Forlė Linux user group )
^^^^^^ http://setiathome.ssl.berkeley.edu ( SETI at Home Project )
---------------------------------------------------------------------