PDA

View Full Version : [CSS] Come si leggono?!


Matrixbob
10-10-2006, 22:25
Non parto a digiuno di HTML, XML, XHTML.
Però mi è venuto il pallino di migliorare la grafica dei miei siti tramite CSS.
Aggiungendo righe, riquadri, e tutte le altre potenzialità possibili mantenendo lo standard.

Quindi per la sintassi mi ci ritrovo, ma la semantica 1 po' meno.


body
{
background-image: url(img/sfondo.gif);
background-repeat:no-repeat;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:black;
}

a:hover
{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:yellow;
background-color: black
}

h1
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:30px
}

#grigliasinistra
{
position: absolute;
background-image:url(img/immgrigliasin.jpg);
left:19px;
top:180px;
width:158px;
height:289px;
border:1px solid #003366;
}

#grigliacentrale
{
position:absolute;
background-image:url(img/sfondocentrale.jpg);
background-repeat:no-repeat;
top:0px;
left:0px;
background-color:#FFFFFF;
margin-left:186px;
margin-top:90px;
width:630px;
height:375px;
border:1px solid #003366;
}

#banner
{
position:absolute;
top:800px;
left:50px;
background:white;
width:10px;
height:10px;
}

#grigliabassosin
{
position: absolute;
background-image:url(img/immbassosin.jpg);
left:19px;
top:476px;
width:158px;
height:155px;
border:1px solid #003366;
}

body #banner { height:50px; width:580px; }

p,h1,h2,h3 { margin:0px 10px 10px 10px; }

Matrixbob
10-10-2006, 22:32
Quelli scritti così:
#nome

sono valori dell'attributo "id" dei tag vero?

C'è 1 "giusto" schema per realizzare 1 buon CSS?!

Ad esempio tutti quei valori di pxl a che cavolo servono?!

phlebotomus
11-10-2006, 00:50
Quelli scritti così:
#nome
sono valori dell'attributo "id" dei tag vero?
Esatto :)
C'è 1 "giusto" schema per realizzare 1 buon CSS?!
Non capisco molto bene la domanda... ma ci provo.
Se vuoi abbandonare tag ed attributi obsoleti ed in generale poco gestibili ed aggiornabili, ti devi dedicare alla definizione dei normali tag HTML (body, h1, ecc. nel tuo esempio), e poi all'aspetto dei blocchi, solitamente stabiliti da
<div id="">
quindi ai link e così via.
Non c'è un modo univoco e/o "giusto" per la loro stesura, ognuno si creerà un modus operandi che gli torna meglio. In questo CSS (http://www.leishmania.org/stili/stile.css) , per esempio, scrivo ogni elemento su una riga, anche per ragioni di spazio (compattezza) e peso del file. E' bene anche inserire i commenti, per poter capire, anche a distanza di tempo, cosa sono i vari elementi.
Ad esempio tutti quei valori di pxl a che cavolo servono?!
Ehmm... sono misure :D ...cioè spessori di testo, di bordi, distanze dei blocchi, ecc.
Ti consiglio di partire dalle basi, perché una volta appreso il funzionamento, poi sono abbastanza banali, anche se, ad un lievello approfondito, possono rappresentare una sfida non indifferente. Cioè un conto è usare i CSS per impostare i vari font, i colori e gli allineamenti del testo; un altro è usare una pagina HTML del tutto lineare (cioè senza impaginazione a tabelle) che fa riferimento ad un CSS.
La cosa più aberrante resta comunque la difformità di adesione agli standard CSS da parte dei browser; per esempio, mentre Mozilla Firefox è praticamente aderente agli standard, IE (almeno fino alla versione 6) non lo è... :cry:
Due linketti al volo: http://css.html.it/guide/leggi/2/guida-css-di-base/ e la reference ufficiale (http://www.w3.org/TR/REC-CSS2/) (immensa).
Ci sono anche dei programmetti che semplificano la vita, per la stesura dei CSS, uno è TopStyle (http://www.newsgator.com/NGOLProduct.aspx?ProdID=TopStyle)

Ciao

Matrixbob
11-10-2006, 15:24
Sto elaborando, grazie! :)