Introducció:
Les capses ens serviràn entre d'altres coses per:
- Marcar zones d'una pàgina web per aplicar estils de cascada diferenciats als d'altres zones.
- Delimitar la zona d'actuació d'uns estils en concret.
Segons W3C una capsa es defineix com una una zona rectangular constituida per:
Amb CSS es pot configurar per separat:- contingut
- marge intern (padding)
- borde
- marge exterior (margin)
- Els quatre marges per separat.
- Els quatre bordes del quadre (dimensions, estil, color) per separat.
- Els quatre marges interns per separat.
- Les dimensions (amplada i alçada del contingut) per separat.
Noció d'herència:
Junt amb la noció de Cascada podem utilitzar les capses per que s'apliquin estils cap a lo local, això sí, sempre i quan a lo local no indiquem el contrari. Per exemple: podem fer que la etiqueta BODY es representi amb la tipografia ARIAL simplement posant l'atribut STYLE a la etiqueta BODY de la següent manera: <BODY STYLE="font-family: Arial, Verdana, sans-serif">, llavors totes les etiquetes que estiguin anidades a BODY que continguin text heretaràn l'estil de BODY. D'això se'n diu herència.
Etiquetes HTML que es comporten com capses entre d'altres poden ser:
- BODY
- TD
- TABLE
- DIV
- SPAN
- H1,...H7
- P
- ...
<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Ò ÉS UNA CAPSETA</p>
</body>
</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Ò ÉS UNA CAPSETA</p>
</body>
</html>
Estils CSS aplicats a capses.
Amplada
- width:100px;
- width:50%;
- width:auto;
Alçada
- height:300px;
- height:75%;
- height:auto;
- border-color:#ff3300;
- border-top-color:#f65123;
- border-right-color:#456723;
- border-left-color:#456723;
- border-bottom-color:#000000;
- border-width:2px;
- border-top-width:2px;
- border-bottom-width:4px;
- border-left-width:5px;
- border-right-width:1px;
- border-style: solid; [altres possibles valors: dashed, dotted, double, groove, ridge, inset, ouset, hidden i none].
- border-top-style: dashed;
- border-bottom-style: dotted;
- border-left-style: double;
- border-right-style: groove;
- margin:20px;
- margin-top:15px;
- margin-bottom:25px;
- margin-left:15px;
- margin-right:30px;
- padding:20px;
- padding-top:15px;
- padding-bottom:25px;
- padding-left:15px;
- padding-right:30px;
Entrades
0 comentaris:
Publica un comentari a l'entrada