CSS:n säätäminen: Whitewash

29.10.2008 - 16:38 / Rami Rautkorpi.


Perusjutut: Taustaväri, tekstin fontti, koko ja väri:

body {
background: #fff; /* tai #ffffff tai rgb(255,255,255) tai white */
font-family: Arial, Helvetica, sans-serif;
font-size: 12px; /* Yleensä yksikkö on pt */
line-height: 18px;
color: #333333;;
}

Linkit:

a {
color: #878C8D;
text-decoration: none;
}

a:hover {
text-decoration: underline;
color : #bbb;
}

Otsikkokuva:

#header {
height: 150px; /* Pitää olla vähintään yhtä korkea kuin taustakuva */
border-bottom: 1px solid #bbb; /* Reunaviiva katoaa laittamalla none */
/* Lisätään taustakuva */
background: url('http://kuvan.osoite/kokonaisuudessaan') no-repeat 0% 0%; /* Kuvan suhteellinen sijainti */
}

Otsikkoteksti:

#header h1 {
font-size: 50px;
font-weight: 100;
font-family: Arial, Helvetica, sans-serif;
padding: 55px 0 5px 0; /* Tekstin etäisyydet laatikon reunoista: ylä oikea ala vasen */
/* Väri */
color: #00ffff;
/* Tasaus left / center / right */
text-align: left;
/* Pois näkyvistä kokonaan */
display: none;
}

Kuvausteksti:

#header h2 {
color: #555;
font-size: 19px;
font-weight: 100;
padding: 0 0 0 0;
letter-spacing: -1px;
line-height: 12px;
/* Tasaus left / center / right */
text-align: left;
/* Pois näkyvistä kokonaan */
display: none;
}

Sivupalkin (oikea) otsikot:

.right h2 {
height: 30px;
font-size: 15px;
color: #000;
line-height: 30px;
text-decoration: underline;
/* Pois näkyvistä kokonaan (Laita oma otsikkokuva teksti-vimpaimella) */
display: none;
}

Sivupalkin elementit:

.right ul {
list-style-type: none;
padding: 5px 10px 10px 10px; /* Etäisyydet laatikon reunoista ylä oikea ala vasen */
}

Kategoria: Ylläpito.
Tagit: ,



Trackback URI | Kommenttien RSS

Jätä vastaus




Sivut

Viimeisimmät artikkelit

Viimeisimmät kommentit

Kategoriat

Arkistot

Muiden blogit

Muut blogini

Sosiaalinen media