Unitat1 CSS Activitats

UNITAT 1: PRÀCTIQUES I EXERCICIS SOBRE CSS
1. Activitats pràctiques
1.1. Element de bloc

Creeu el fitxer css1.html que tingui el següent contingut:
<HTML>
<HEAD>
<TITLE>Cas Pràctic 1</TITLE>
<STYLE TYPE="text/css">
#capa1 { /*aquí definim les propietats de la capa*/
background-color: #bbb;
margin: auto;
color: #fff;
}
</STYLE>
</HEAD>
<BODY>
<DIV ID="capa1">
Aquí podem posar el que volguem: imatges, text, etc.<br>
</DIV>
</BODY>
</HTML>
Comproveu els estils aplicats i mireu el resultat amb IE i Firefox.
1.2. Ús dels selectors

Creeu el fitxer css2.css que tingui el següent contingut:
1
Ara creeu el fitxer css2.html que tingui el següent contingut:
<HTML>
<BODY>
<P>Et recordo quin era el contingut de l'<I>style sheet</I>:</P>
<PRE CLASS="codi">
<SPAN CLASS="element">A</SPAN> { text-decoration: none }
<SPAN CLASS="element">:visited</SPAN> { color: olive }
<SPAN CLASS="element">:active</SPAN> { color: green }
<SPAN CLASS="element">:hover</SPAN> { text-decoration: underline }
<SPAN CLASS="element">A.menu:hover</SPAN> {
text-decoration: underline overline }
P#titol <SPAN CLASS="element">A:hover</SPAN> {

border-style: solid; border-width:1px; padding:4px;
text-decoration: none }
</PRE>
<BR><BR>
<P>I finalment, el resultat obtingut:</P>
<DIV CLASS="resultat">
<P ID="titol">
Això és un element P amb id="titol".
Conté un <A HREF="#trash">link</A>.
</P><BR />
<DIV ALIGN="center">
<A HREF="#trash" CLASS="menu">inici</A> |
2
<A HREF="#trash" CLASS="menu">contacte</A> |

<A HREF="#trash" CLASS="menu">links</A>
</DIV><BR/>
<A NAME="trash"></A>
<P>I per acabar, un paràgraf amb links 'normals',
com ara <A HREF="#trash">aquest</A>.</P>
</DIV>
</BODY>
</HTML>
Comproveu els estils aplicats i mireu el resultat amb IE, Netscape i Firefox.
1.3. Background
<HTML>
<BODY>
<p>
Lorem ipsum ut hinc scaevola nec. Sint rebum eu quo. Ea iracundia voluptaria eos.
Unum exerci complectitur quo eu, in ius idque blandit dissentiunt, magna aliquam
ponderum ne mel. Dicam probatus evertitur at ius, mea ea dico option. Qui te
aliquip erroribus.<br>
<br>
Ius ei omnis erant, duo cu accusam vulputate. Id atomorum patrioque usu, in
scripta malorum delicatissimi vix. Everti omittantur ea quo, veri dissentias
scriptorem an sit. Vel ut vidit dicant meliore, no vis mazim utinam, decore
fierent definitionem no his. Est quando quaeque phaedrum id.<br>
<br>
Sint vocent sea ex, quo ne suas facer nemore. Facete eloquentiam qui eu, enim
omnesque accommodare an his. Cu ius vide sale incorrupte. Dolores insolens ex
est, alia pertinax pertinacia in cum, ei partiendo ocurreret aliquando est. Ei
sit aeterno persequeris. Ferri velit oratio in est, exerci malorum molestiae an
eam, vim in modo efficiendi philosophia. Est sanctus tractatos id, pri omnesque
disputando disputationi at.<br>
<br>
Cu sea persius nonummy suavitate, aliquid commune evertitur vim ut. Eos id
ancillae accusata, has congue lucilius voluptatum ex, facete feugiat voluptatibus
mea eu. Mandamus salutatus moderatius ne vim. Ut sea regione nostrud posidonium.
Mei in velit nobis vocent, his agam sonet no. Id pro congue percipit temporibus,
usu an nobis utinam deserunt. <br></p>
3
</BODY>
</HTML>
Procureu que la mida de la imatge sigui petita i comproveu que aquest exemple crea una banda vertical
infinita que roman “enganxada” a l’esquerre de l’àrea de visualització del navegador.
1.4. Paràgraf amb imatge de fons

Procureu que la mida de la imatge sigui petita i comproveu que el paràgraf d’aquest exemple té una imatge
de fons.
1.5. Posicionar imatges

<HTML>
<HEAD>
<TITLE>Prova de background-position</TITLE>
<STYLE type="text/css">

</STYLE>
</HEAD>
<BODY>
Text del cos. Text del cos. Text del cos. Text del cos.<br><br>
4
Text del cos. Text del cos. Text del cos. Text del cos.<br><br><br><br>
Text del cos. Text del cos. Text del cos. Text del cos.<br><br><br>
Text del cos. Text del cos. Text del cos. Text del cos.
</BODY>
</HTML>
Aquí la imatge es situa en la cantonada inferior dreta de l’àrea de visualització. Comproveu-ho.

Ara modifiqueu la posició de la imatge perquè estigui sempre a la part superior dreta de la finestra:
background-position: right top;
Comproveu que sempre està allà.

Ara modifiqueu la posició de la imatge perquè estigui sempre al centre:
background-position: center;
Comproveu que sempre està al centre.

Ara modifiqueu la posició de la imatge perquè estigui sempre a la part inferior dreta de la finestra:
background-position: 100% 100%;
Comproveu que sempre està a la part inferior dreta.
1.6. Repetir imatge del fons

<HTML>
<HEAD>
<TITLE>Prova de background-repeat</TITLE>
BODY {
background-image: url('imatge/imatge.jpg');
background-repeat: no-repeat;
}
</STYLE>
5
</HEAD>
<BODY>
</BODY>
</HTML>
Aquí hi ha una sola imatge en el fons de la pantalla. Comproveu-ho.

Modifiqueu la següent línia:
background-repeat: repeat;
Aquí hi ha la imatge repetida en el fons de la pantalla. Comproveu-ho.

background-repeat: repeat-x;
Aquí hi ha la imatge repetida en la part superior de la pantalla. Comproveu-ho.

background-repeat: repeat-y;
Aquí hi ha la imatge repetida verticalement a l’esquerre de la pantalla. Comproveu-ho.
1.7. El format del text

Comproveu els estils del text que apareixen a la pantalla.
1.8. Mida de la font

<HTML>
<HEAD>
<TITLE>Prova de la propietat font-size</TITLE>
P { font-size: 12pt; } /* font de mida 12pt */
BLOCKQUOTE { font-size: larger } /* font de mida igual al valor
6
que representa la paraula

clau següent més gran que
la de l'element pare */
EM { font-size: 150% } /* font de mida un 50% o 1.5 vegades
més gran (1.5em) que la de l'element pare */
</STYLE>
</HEAD>
<BODY>
<P>Paràgraf</P>
<BLOCKQUOTE>Font de l'etiqueta <EM>BLOCKQUOTE</EM>. A veure com es veu en
el navegador.</BLOCKQUOTE>
</BODY>
</HTML>
Mireu el resultat dels estils del text resultant que apareixen a l’àrea de visualització del navegador.
1.9. Àrea margin de la caixa

<HTML>
<HEAD>
<TITLE>Proves de propietats de fonts</TITLE>
H1 { font-style: italic; }
H1.pes1 { font-weight: normal; }
H1.pes2 { font-weight: 400; }
H1.pes3 { font-weight: border; }
H1.pes4 { font-weight: lighter; }
H2 { font-style: oblique; }
H3 { font-style: normal; }
H4.petites { font-variant: small-caps; }
</STYLE>
</HEAD>
<BODY>
<H1>Títol 1</H1>
<H2>Títol 2</H2>
<H3>Títol 3</H3>
<H4 class="petites">Títol 4: Utilitzant small-caps</H4>
<H4 class="petites">Títol 4: UTILITZANT SMALL-CAPS</H4>
<H4>Títol 4: Utilitzant small-caps</H4>
<HR>
<H1 class="pes1">Títol 1</H1>
<H1 class="pes2">Títol 1
</H1>
<HR>
</BODY>
</HTML>
7
1.10. Propietats del text

<HTML>
<HEAD>
<TITLE>Test de propietats del text</TITLE>
H1 { font: oblique normal bold 1.2em/0.5em "Courier New"; }
P.le1 { letter-spacing: 0.1em; }

P.le4 { letter-spacing: 2em; }
P.lh1 { line-height: 24px; text-indent: 3em; }

P.lh2 { line-height: 70%; text-indent: 30px; }
P.lh3 { line-height: 1.2em; text-indent: 20%; }
P.lh4 { line-height: 2em; text-indent: -15px; }
P.e { text-align: left; text-decoration: underline; }

P.d { text-align: right; text-decoration: overline; }
P.c { text-align: center; text-decoration: line-through; }
P.j { text-align: justify; text-decoration: blink; }
P.t1 { text-transform: capitalize; word-spacing: 0.5em; }

P.t2 { text-transform: uppercase; word-spacing: -0.5em; }
P.t3 { text-transform: lowercase; word-spacing: 50px; }
</STYLE>
</HEAD>
<BODY>
<H1>Propietats de fonts i text</H1>
<P class="le1">
No es pot dir que el contingut d'aquest paràgraf sigui gaire
interessant, però ens permetrà veure millor algunes
propietats de les fulles d'estils.
</P>
<P class="le2">
</P>
<P class="le3">
</P>
<P class="le4">
interessant, però ens permetrà veure millor
algunes propietats de les fulles d'estils.
</P>
<HR>
<P class="lh1">
interessant, però en aquest cas ens permetrà veure
millor algunes propietats de les fulles d'estils referents
a l'alçada entre les línies d'un paràgraf.
8
</P>
<P class="lh2">
</P>
<P class="lh3">
a l'alçada entre les línies d'un paràgraf.</P>
<P class="lh4">
a l'alçada entre les línies d'un paràgraf.</P>
<HR>
<P class="e">Mireu a quina banda es troba el text.</P>
<P class="d">Mireu a quina banda es troba el text.</P>
<P class="c">Mireu a quina banda es troba el text.</P>
<P class="j">
</P>
<HR>
<P class="t1">Finalment, mireu com queda aquest text.</P>
</BODY>
</HTML>
1.11. Àrea margin de la caixa

<HTML>
<HEAD>
<TITLE>Àrea margin de la caixa</TITLE>
H1.p1 { border-width: 2px; border-style: solid; margin-top: 6em; }
P.p1 { margin: 15px 20px }
P.p2 { margin-top: 15px; }

P.p2 { margin-bottom: 15px; }
P.p2 { margin-right: 20px; }
P.p2 { margin-left: 20px; }
DIV {
background-color: black;
margin: 20px;
9
P.p3 {
background-color: #bed3b4; /* un verd clar */
margin: 50px;
margin-bottom: 0;
}
</STYLE>
</HEAD>
<BODY>
<H1 class="p1">
Aquest text es troba '6em' per sota respecte la caixa de pàgina.
</H1>
<P class="p1">
Aquest text està en el primer paràgraf. Com podeu
observar deixa marges en la part superior de 15 pixels, en la part inferior
de 15 pixels, el la part esquerra de 20 pixels i en la part dreta de
20 pixels.
</P>
<P class="p2">
Aquest text està en el segon paràgraf. El seu marge
és el mateix que el del primer paràgraf. La definició
dels dos estils del paràgraf és el mateix encara que estiguin
escrits de forma diferent.
</P>
<HR>
<DIV>
<P class="p3">Aquest paràgraf està inclòs
en un element DIV. Com que tots dos tenen marge associat es
produeix col·lisió de marges.
</P>
</DIV>
</BODY>
</HTML>
Comproveu els diferents estils aplicats en cada paràgraf i dins del bloc DIV en el document web resultant.
Mireu aquest resultat en els diferents navegadors que teniu instal·lat a l’ordinador.
1.12. Àrea padding de la caixa

10
Comproveu els diferents estils aplicats en el document web resultant. Mireu aquest resultat en els diferents
navegadors que teniu instal·lat a l’ordinador.
1.13. El color de les vores

<HTML>
<HEAD>
<TITLE>Prova de border-color</TITLE>
H3 {
border-style: solid;
border-color: red aqua yellow blue;
}
P.1 { border: solid red }
P.2 { border-top: thin dotted fuchsia;

border-right: medium dashed lime;
border-bottom: thick double olive;
border-left: thick groove navy;
}
P.3 { border-top-style: groove;

border-right-style: groove;
border-bottom-style: groove;
border-left-style: groove;
border-color: fuchsia;
border-width: thin;
}
P.4 { border-style: ridge;

border-top-color: lime;
border-right-color: lime;
border-bottom-color: lime;
border-left-color: lime;
border-width: medium;
}
P.5 { border-style: solid;

border-color: olive;
11
border-top-width: 0px;
border-right-width: 5px;
border-bottom-width: 10px;
border-left-width: 15px;
}
P.6 { border-style: solid;

border-color: navy;
border-width: thin 0px 10px thick;
}
P.7 { border-style: outset; }

P.8 { border-style: inset; }
P.9 { border-style: groove; }
P.10 { border-style: ridge; }
</STYLE>
</HEAD>
<BODY>
<H3>Caixa de prova</H3>
<P class="1">Paràgraf 1</P>
</BODY>
</HTML>
Comproveu els diferents estils aplicats en cada paràgraf i la forma en què s’ha escrit aquests estils en el
document web.
Si no veiessis res d’especial, prova-ho amb un altre navegador.
1.14. Estil en taules

<HTML>
<HEAD>
<TITLE>Taula</TITLE>
H3 {
border-style: solid;
border-color: red aqua yellow blue;
}
P.1 { border: solid red }
P.2 { border-top: thin dotted fuchsia;

border-right: medium dashed lime;
border-bottom: thick double olive;
border-left: thick groove navy;
}
12
TABLE {
border-collapse: collapse;
border: 5px solid yellow;
}
#col1 { border: 3px solid black; }

TD { border: 1px solid red; padding: 1em; }
TD.solid-blue { border: 5px dashed blue; }
TD.solid-green { border: 5px solid green; }
</STYLE>
</HEAD>
<BODY>
<P>
<TABLE>
<COL id="col1">
<COL id="col2">
<COL id="col3">
<TR id="fila1">
<TD> 1
<TD> 2
<TD> 3
</TR>
<TR id="fila2">
<TD> 4
<TD class="solid-blue"> 5
<TD class="solid-green"> 6
</TR>
<TR id="fila3">
<TD> 7
<TD> 8
<TD> 9
</TR>
<TR id="fila4">
<TD> 10
<TD> 11
<TD> 12
</TR>
<TR id="fila5">
<TD> 13
<TD> 14
<TD> 15
</TR>
</TABLE>
</BODY>
</HTML>
Comproveu-ho els estils aplicats a la taula i la forma en què s’han representat aquests estils en el document
web. Sobretot mireu el resultat amb IE i Firefox.
1.15. Estil en el caption-side

<HTML>
<HEAD>
13
<TITLE>Prova de la propietat caption-side</TITLE>

CAPTION {
caption-side: bottom;
width: auto;
text-align: center;
}
</STYLE>
</HEAD>
<BODY>
<TABLE border="1" cellpadding="0" cellspacing="0">

<CAPTION>Títol de la taula</CAPTION>
<tr><td>Cel·la1</td><td>Cel·la2</td><td>Cel·la3</td></tr>
</TABLE>
</BODY>
</HTML>
Comproveu els estils aplicats a la taula i la forma en què s’han representat aquests estils en el document
web.
1.16. Les llistes

<HTML>
<HEAD>
<TITLE>Prova de propietats de llistes</TITLE>
H1 { font: oblique normal bold 1.2em/0.5em "Courier New"; }
UL.ls1 { list-style: url(imatge/punt.jpg) inside circle; }

UL.ls1 UL { list-style: url(imatge/punt.jpg) outside square; }
LI.ls1 {
list-style-position: inside;
list-style-type: circle;
}
LI.ls2 {
list-style-position: outside;
list-style-type: square;
}
LI.ls3 {
list-style-type: disc;
}
LI.ls4 {
list-style-type: none;
}
LI.ln1 {
list-style-type: decimal;
14
}
LI.ln2 {
list-style-type: decimal-leading-zero;
}
LI.ln3 {
list-style-type: lower-roman;
}
LI.ln4 {
list-style-type: upper-roman;
}
LI.ln5 {
list-style-type: lower-alpha;
}
LI.ln6 {
list-style-type: upper-alpha;
}
</STYLE>
</HEAD>
<BODY>
<H1>Propietats de llistes</H1>
<UL class="ls1">
<LI>
No es pot dir que el contingut d'aquest primer element de la llista
sigui gaire interessant, però ens permetrà veure millor
algunes propietats de les fulles d'estils referents a llistes.
</LI>
<LI>
No es pot dir que el contingut d'aquest segon element de la llista
</LI>
<LI>
No es pot dir que el contingut d'aquest tercer element de la llista
Subelements:
<UL>
<LI>
No es pot dir que el contingut d'aquest primer de la llista
sigui gaire interessant, però ens permetrà veure
</LI>
<LI>
No es pot dir que el contingut d'aquest segon de la llista
</LI>
<LI>
No es pot dir que el contingut d'aquest tercre de la llista
</LI>
</UL>
</LI>
</UL>
15
<HR>
<UL>
<LI class="ls1">
</LI>
<LI class="ls2">
</LI>
<LI class="ls3">
</LI>
<LI class="ls4">
No es pot dir que el contingut d'aquest quart element de la llista
</LI>
</UL>
<HR>
<OL>
<LI class="ln1">
</LI>
<LI class="ln2">
</LI>
<LI class="ln3">
</LI>
<LI class="ln4">
No es pot dir que el contingut d'aquest quart element de la llista
</LI>
<LI class="ln5">
No es pot dir que el contingut d'aquest cinquè element de la
llista sigui gaire interessant, però ens permetrà veure
millor algunes propietats de les fulles d'estils referents a llistes.
</LI>
<LI class="ln6">
No es pot dir que el contingut d'aquest sizè element de la
llista sigui gaire interessant, però ens permetrà veure
millor algunes propietats de les fulles d'estils referents a llistes.
</LI>
</OL>
</BODY>
</HTML>
16
Comproveu els estils aplicats a les llistes i sobretot mireu el resultat amb IE i Firefox. Mireu com mostren les
llistes resultants.
17

Unitat1 CSS Activitats

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unitat1 CSS Activitats

Uploaded by

Copyright:

Available Formats

UNITAT 1: PRÀCTIQUES I EXERCICIS SOBRE CSS

1.1. Element de bloc

Comproveu els estils aplicats i mireu el resultat amb IE i Firefox.

1.2. Ús dels selectors

Ara creeu el fitxer css2.html que tingui el següent contingut:

<P>Et recordo quin era el contingut de l'<I>style sheet</I>:</P>

<SPAN CLASS="element">:hover</SPAN> { text-decoration: underline }

P#titol <SPAN CLASS="element">A:hover</SPAN> {

<A HREF="#trash" CLASS="menu">contacte</A> |

Creeu el fitxer css3.html que tingui el següent contingut:

1.4. Paràgraf amb imatge de fons

1.5. Posicionar imatges

Aquí la imatge es situa en la cantonada inferior dreta de l’àrea de visualització. Comproveu-ho.

background-position: right top;

Comproveu que sempre està allà.

Comproveu que sempre està al centre.

background-position: 100% 100%;

Comproveu que sempre està a la part inferior dreta.

1.6. Repetir imatge del fons

Aquí hi ha una sola imatge en el fons de la pantalla. Comproveu-ho.

Aquí hi ha la imatge repetida en el fons de la pantalla. Comproveu-ho.

Aquí hi ha la imatge repetida en la part superior de la pantalla. Comproveu-ho.

Aquí hi ha la imatge repetida verticalement a l’esquerre de la pantalla. Comproveu-ho.

1.7. El format del text

Comproveu els estils del text que apareixen a la pantalla.

1.8. Mida de la font

que representa la paraula

1.9. Àrea margin de la caixa

1.10. Propietats del text

P.le1 { letter-spacing: 0.1em; }

P.lh1 { line-height: 24px; text-indent: 3em; }

P.e { text-align: left; text-decoration: underline; }

P.t1 { text-transform: capitalize; word-spacing: 0.5em; }

1.11. Àrea margin de la caixa

P.p1 { margin: 15px 20px }

P.p2 { margin-top: 15px; }

1.12. Àrea padding de la caixa

1.13. El color de les vores

P.1 { border: solid red }

P.2 { border-top: thin dotted fuchsia;

P.3 { border-top-style: groove;

P.4 { border-style: ridge;

P.5 { border-style: solid;

P.6 { border-style: solid;

P.7 { border-style: outset; }

Si no veiessis res d’especial, prova-ho amb un altre navegador.

1.14. Estil en taules

P.1 { border: solid red }

P.2 { border-top: thin dotted fuchsia;

#col1 { border: 3px solid black; }

1.15. Estil en el caption-side

<TITLE>Prova de la propietat caption-side</TITLE>

<TABLE border="1" cellpadding="0" cellspacing="0">

1.16. Les llistes

UL.ls1 { list-style: url(imatge/punt.jpg) inside circle; }

You might also like