Autore Messaggio
04-05-2007, 22:55
Messaggio: #1 (permalink)
larchitetto
Apprendista
**
Registrato: Apr 2007
Messaggi: 73
Reputazione:

ottimizzare CSS


una cosa che non so fare ? quella di colorare i siti... 18
dunque avrei creato sto CSS qua (un po' grezzo, lo so, cmq tutto fatto da me da 0), e vorrei sottoporlo a voi tutti per un'eventuale ottimizzazione al volo del codice (istruzioni ripetute e/o inutili o altri modi pi? brevi e semplici di fare la stessa cosa ad esempio, ma senza perderci troppo tempo) e cmq se vi vien in mente un accoppiamento di colori un pochino migliore del mio (niente stravolgimenti, per carit?, solamente il bilanciamento dei colori insieme ad esempio)...
il sito mi serve per il server locale e per poter interagire con i miei contatti msn (qualora servisse), qundi non avr? milioni di visitatori, e non dovr? essere indicizzato =)

codice del css (non ancora validato):

Codice:
/*applicato a tutti gli elementi*/
* {
    margin: 0px;
    border: 0px;
    padding: 0px;
    width: auto;
    height: auto;
}
/*regole base per html e body*/
    html, body {
background-color: #FFF;
color: #000;
font: 100% sans-serif;
width: 100%;
height: 100%;
    }
/*regole base per i div*/
div {
margin: 5px;
border-width: 2px;
border-style: solid;
border-top-color: rgb(99,0,255);
border-right-color: rgb(255,0,24);
border-bottom-color: rgb(156,0,255);
border-left-color: rgb(255,132,0);
padding: 5px;
background-color: #FFF;
color: #000;
}
/*l'intestazione della pagina*/
div.header {
margin: 0px 0px 10px;
border-width: 0px 0px 4px;
border-bottom-color: #F5F5F5;
padding: 10px;
background-color: #F5F5F5;
color: #000;
font: 900 100% arial sans-serif;
}
/*regoel per il logo nell'intestazione*/
#logo {
padding: 4px 2px 2px 2px;
width: 259;
height: 32;
}
/*regle per il titolo*/
#w, #a, #m, #p {
font-variant: small-caps;
}
#w {
color: rgb(99,0,255);
}
#a {
color: rgb(156,0,255);
}
#m {
color: rgb(255,0,24);
}
#p {
color: rgb(255,132,0);
}
/*regole per il sottotitolo*/
div.header h3 {
padding-left: 150px;
}
/*regole per il menu laterale*/
div.menu {
border-width: 2px 2px 0px;
padding: 0px;
width: 15%;
color: #F60;
letter-spacing: 1px;
float: left;
}    
/*i paragrafi figli del menu, contenitore dei link*/
div.menu p {
border-bottom: 2px solid rgb(156,0,255);
}
/*titolo in paragrafo del menu*/
div.menu p#titolo {
padding: 2px;
font: bold 90%/21px verdana sans-serif;
font-variant: small-caps;
text-align: center;
}
/*i link del menu*/
div.menu a {
display: block;
padding: 2px;
font: bold 90%/21px verdana sans-serif;
font-variant: small-caps;
color: #F60;
width: 150px;
}
div.menu a:hover, div.menu a:active {
color: #F00;
font-size: 100%;
}
/*regole per la colonna accanto al menu, nonch? corpo della pagina. user? stili maggiormente dettagliati in base alla sezione cliccata*/
div.corpo {
width: 80%;
height: 60%;
float: right;
overflow: auto;
}
/*finale della pagina*/
div.footer {
clear: both;
margin: 10px 0px 0px;
border-width: 4px 0px 0px;
border-top-color: #F5F5F5;
padding: 15px 0px 0px;
background-color: #F5F5F5;
color: #000;
font: 80%/21px arial sans-serif;
text-align: center;
width: 100%;
position: absolute;
bottom: 0px;
}
/*i link*/
div.footer a {
font: 100%/21px arial sans-serif;
color: #F60;
}
div.footer a:hover, div.footer a:active {
color: #F00;
}


lo stile si applica a questo file php (il risultato non ? stato ancora validato):

Codice:
<?php
    //sicurezza
    define("azzarola", true);
    //inclusioni
    include ("stat.php");
    include ("cont.php");
    echo"<!--dichiarazione applicazione xml-->\n";
    echo"<?xml version=\"1.0\"?>\n";
?>
<!--DTD xhtml 1.1-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!--pagina xhtml-->
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
<title><?php echo $cont['/index.php']['0']; ?></title>
<link rel="stylesheet" type="text/css" href="index.css" />
    </head>
    <body>
<div class="header">
<?php include ("header.php"); ?>
</div>
<div class="menu">
<?php include ("menu.php"); ?>
</div>
<div class="corpo">
<?php include ("corpo.php"); ?>
</div>
<div class="footer">
<?php include ("footer.php"); ?>
</div>
    </body>
</html>


LarchitettO

Ultima modifica di larchitetto : 04-05-2007 alle ore 23:01.

trova tutti i messaggi dell'autore Quota questo messaggio nella risposta