Olen lukenut että olisi hyvä laittaa css ym määrittelyt kuten font erilliseen tyylitiedostoon. Miten tämä tapahtuu? Millä koodilla linkitän tyylitiedoston sivulle, ja mitä siellä tyytiedostossa pitäsi lukea? Riittäkö jos heitän pätkä CSS:ää sinne ja se on siinä?
CSS tyylimäärittelyt??
Jarmo
5369
0Äänestä
Muut lukivat myös
Odottaa vastausta
Näihin keskusteluihin ei ole vielä vastattu. Ole ensimmäinen.
Vastaukset 5
Vanhimmat
HTML-dokumenttiin jossa haluat tyylitiedostoa käyttää lisää määrittely
tyyli.css voit nimetä haluamallasi tavalla, kunhan sen pääte vain on css
Itse tyylitiedosto voi näyttää vaikka tältä
BODY
{
scrollbar-face-color:#41A1D1;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#125798;
scrollbar-darkshadow-color:#000000;
scrollbar-shadow-color:#2980A9;
scrollbar-arrow-color:#FFFFFF;
scrollbar-track-color:#E0E0E0;
}
{
font-family:verdana,arial,helvetica;
font-size: 8pt;
}
P
{
font-family:verdana,arial,helvetica;
font-size: 8pt;
}
LI
{
font-family:verdana,arial,helvetica;
font-size: 8pt;
}
TD
{
font-family:verdana,arial,helvetica;
font-size: 8pt;
}
A
{
color: #28458f;
text-decoration: none;
}
A:visited
{
color: #28458f;
text-decoration: none;
}
A:hover
{
color: #28458f;
text-decoration: underline;
}
.intro
{
font-family:verdana,arial,helvetica;
font-size: 8pt;
}
.title
{
font-family:verdana,arial,helvetica;
font-size: 8pt;
font-weight: bold;
}
.subtitle
{
font-family:verdana,arial,helvetica;
font-size: 8pt;
font-weight: bold;
}
--------------------------------------------------
Käyttäessäi esim .subtitleä jossakin (oheisessa esimerkissä sijoitettu taulukkoon :
..... koodia......
Alaotsikko
koodia......
CSS:ssä ei tietenkään käytetä HTML-kommentteja tyyliin , vaan C-tyylisiä, eli /* nnn */
Tuosta varsinaisesta css tiedostosta vielä. Millä käskyllä se siis alkaa ja mihin loppuu? entäpä jos haluan sinne vain linkkien ja scrollarin värin määritykset, niin mitä pistän? ja mitä varten nuo { merkinnät on?
Entäpä, pitääkö tiedostot siirtää palvelimelle että näkee toimiiko homma vai toimiiko ihan offlinella selaimessa tarkasteltuna?
Toimii Offlinessä.
Tiedosto alkaa millä alkaa, mutta tai muitakaan HTML-tageja sielä ei saa olla.
/* Alkaa tästä */
/* kommentit näin */
/* tämä vaikuttaa koko bodyyn */
body{
background-color: #F0F0F0;
background-image: url('kuvat/body_tausta.gif');
margin-left: 10px;
margin-top: 20px;
font-family: Verdana, Arial, Helvetica;
font-size: 10pt;
color: #000000;
}
/* tämä vaikuttaa kaikkiin soluihin */
td{
background-image: url('kuvat/td_tausta.gif');
}
/* 1. luokka */
.luokka1 {
font-family: Verdana, Arial, Helvetica;
font-size: 10pt;
color: #FF0000;
}
/* 2. luokka */
.luokka2 {
font-family: Verdana, Arial, Helvetica;
font-size: 10pt;
color: #0000FF;
}
/* loppuu tähän */
Siinä koko tiedoston sisältö, siis tuota varten ovat { ja } -merkit
Sivulle esim. näin
Punaista
Sinistä
Tässä pelkästään vierityspalkin ja linkkien tyylitiedosto.
/* määritellään vierityspalkin värit */
BODY
{
scrollbar-face-color:#41A1D1;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#125798;
scrollbar-darkshadow-color:#000000;
scrollbar-shadow-color:#2980A9;
scrollbar-arrow-color:#FFFFFF;
scrollbar-track-color:#E0E0E0;
}
/* linkkien määritykset */
A
{
color: #28458f;
text-decoration: none;
}
A:visited
{
color: #28458f;
text-decoration: none;
}
A:hover
{
color: #28458f;
text-decoration: underline;
}