CSS eli Cascading Style Sheets on erityisesti WWW-dokumenteille kehitetty tyyliohjeiden laji. CSS-tiedostoihin kirjoitetaan tyyliohjeita. CSS-tiedostojen pääte on yleensä .css.
20 CSS-parametriä
font-family
Font-family-parametrillä muutetaan tietyn elementin fonttia tai fonttiperhettä.
elemetti {
font-family: Impact;
font-familt: Arial;
}
font-size
Font-size-parametrillä muutetaan tietyn elementin fonttikokoa pikseleinä tai prosenttina verrattuna peruskokoon.
elementti {
font-size: 20px;
font-size: 180%;
}
color
Color-parametrillä voit muuttaa elementin tekstin väriä. Värin voi määrittää valmiilla nimillä (red, blue, chocolate, black), RGB tai Hex-väreillä.
elementti {
color: black;
color: rgb (0, 0, 255);
color: #00BB99;
}
text-align
Text-align-parametrillä voit muuttaa elementin tekstin tasausta vasemmalle, keskelle tai oikealle.
elementti{
text-align: center;
text-align: right;
text-align: left; (oletuksena)
}
border
Border-parametrillä muutetaan valitun elementin reunaa. Reunan voi asettaa diveihin, tableihin, kuviin ja teksteihin (lähes kaikkeen). border-parametriin ilmoitetaan reunan paksuus, väri sekä tyyli. Myös tietyn suunnan reunaa voi muuttaa erikseen.
elementti {
border: black solid 3px;
border: dotted chocolate 10px;
border-bottom: blue solid 10px;
-top:
-left:
-right:
}
border-radius
Border-radiuksella voit muuttaa elementtisi reunoja pyöreiksi
elementti {
border-radius: 100px;
}
background-color ja -image
Background-parametrillä muutetaan tietyn elementin taustaa. Taustan voi muuttaa tietyksi väriksi tai valituksi kuvaksi. Background-parametrin voi asettaa kaikkii elementteihin, joihin voi myös laittaa reunat.
elementti {
background-color: black;
background-image: url("http://rekt.d20142.com");
background-image url("kuvat/kuva.jpg");
}
height
height-parametrillä voi muuttaa valitun elementin korkeutta. Korkeuden voi määrittää pikseleinä tai prosenttina. Jos saman elementin widht on jo syötetty, ja haluat pitää elementin (esimerkiksi kuvat) suhteen saman kokoisena, voit syöttää heightiin auto;. Sama toimii myös toisinpäin.
elementti {
height: 200px;
height: 30%;
height: auto;
}
width
width-parametrillä voit muuttaa valitun elementin leveyttä. Width-parametri toimii samalla tavalla kuin height, mutta vaakasuunnassa.
elementti {
width: 200px;
width: auto;
width: 60%;
}
padding
Padding-parametrillä voit muuttaa elementin täyttöä. padding-parametrin voi asettaa reunan lailla elementin eri sivuihin.
elementti {
padding: 20px;
padding-bottom: 10px;
-left: 15px;
-right: 10px;
-top: 25px;
}
text-decoration
Text-decoration-parametrillä voit muuttaa elementin tekstin koristelua. Koristelumahdollisuuksia ovat: none, underline, overline, line-through sekä inherit.
elementti {
text-decoration: underline;
text-decoration: line-through;
}
margin
Margin-parametrillä voit muuttaa elementin marginaalia. Marginin voi määrittää pikseleinä sekä prosentteina. Marginin voi paddingin lailla laittaa haluamallesi sivulle.
elementti {
margin: 20px;
margin-top: 1%;
-bottom: 100px;
-left: 5%;
-right: 20px;
}
position
Position komennolla voit muuttaa elementin asemaa. Asemaksi voit asettaa absolute, static, fixed, relative, initial ja inherit.
elementti {
position: static/absolute/fixed/relative/initial/inherit;
}
top, bottom, left ja right
Näillä parametreillä voit muuttaa elementin sijaintia näytössä vasemmalta, oikealta, ylhäältä tai alhaalta mittaamalla. mitaksi voit laittaa pikseli- tai prosenttimäärän.
elementti {
top: 25%;
right: 20px;
}
opacity
Opacityllä voit muuttaa elementin läpinäkyvyyttä. Opacity syötetään 0.1-1.0 välisillä luvuilla, joista 1.0 on 100% ja 0.1 on 10%.
elementti {
opacity: 0.6;
}
cursor
Cursor-parametrillä voit muuttaa sivun hiiren olomuotoa. Olomuodoksi voit syöttää monia kymmeniä eri muotoja. Tässä lista:
->Linkki<-
element {
cursor: wait;
}
box-shadow
Box-shadow-parametrillä voit lisätä valittuun elementtiin varjon, jonka kokoa ja väriä voit muuttaa.
element {
box-shadow: 10px 10px 5px black;
}