CURSWEBS

Desitjo que us sigui útil aquest blog. Aquest blog no sustitueix al professor, el complementa. El seu ús és voluntari i no implica cap obligació per part del professor a escriure en ell. Els continguts d'aquest blog s'han de considerar material i apunts. Com a membres teniu dret a escriure en ell preguntes i suggeriments sota la meva supervisió i també penjar en el blog alguns dels vostres treballs a fí que en poguem fer un anàlisi o "feedback". Bona sort.

dissabte, d’octubre 07, 2006


CSS - (6a part) - Noció de clase, formes d'assignar estils CSS

FORMES D'ASSIGNAR ESTILS CSS

A. ESTILS APLICATS A ETIQUETES HTML
A l'exemple anterior veiem com definiem un estil que s'aplicava a totes les etiquetes de paràgraf de tota la pàgina. Fixeu-vos que per definir

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Element Capsa</title>
<meta http-equiv="content-Style-Type" content="text/css" />
<style type="text/css">
<!--
p {
width:200px;
border: 10px solid #f63;
padding: 20px;
background-color:#999999;
}
-->
</style>
</head>
<body>
<p>EM SEMBLA QUE AIX&Ograve; ÉS UNA CAPSETA</p>
</body>
</html>


B. ESTILS PERSONALITZATS O DEFINICIÓ DE CLASSES

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Element Capsa</title>
<meta http-equiv="content-Style-Type" content="text/css" />
<style type="text/css">
<!--
.lolailo {
text-size:15px;
color:#ff0000;
}

-->
</style>
</head>
<body>
<p CLASS="lolailo">EM SEMBLA QUE AIX&Ograve; TÉ UN ESTIL LOLAILO</p>
</body>
</html>


Fixeu-vos que per aplicar aquest estil fem servir l'atribut CLASS i que per definir l'estil posem un punt davant.


C. APLICACIÓ D'ESTILS A ZONES IDENTIFICADES DE LA PÀGINA O INSTÀNCIES.

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Element Capsa</title>
<meta http-equiv="content-Style-Type" content="text/css" />
<style type="text/css">
<!--
#TITULAR {
text-size:30px;
color:#ff0000;
font-weight:bold;
}

-->
</style>
</head>
<body>
<H1 ID="TITULAR">EM SEMBLA QUE AIX&Ograve; ÉS/ UN TITULAR </H1>
</body>
</html>

Fixeu-vos com apliquem un estil a una zona de la pàgina que l'hem anomenat "TITULAR" amb l'atribut ID.

escrit per apuntsweb @ 1:23 p. m.