Css v2

Introducció
Amb CSS aconseguim separar les etiquetes
html dels seus atributs que modifiquen el
seu estil.
HTML + CSS = WEB
Exemple: per canviar el grossor de les
vores d'una taula ja no caldrà anar al codi
html, ho farem des del css → més ràpid i
clar.

Introducció
La idea es tenir un o diversos fitxers per
al codi html i un o diversos fitxers css
separats per als estils.
Els arxius css són arxius de text amb
extensió css.
Quan comencem a escriure codi html, li
haurem de dir quin fitxer css volem
oncloure.
Primera feina → incloure el full d'estils.

Incloure el full d'estil
Cal dir en l'arxiu html d'on s'agafen els
estils.
Poden anar directament en l'apartat del
head de l'arxiu html:
<head>
<style type="text/css">
p { color: red; font-family:
Verdana, Arial, Helvetica,
sans-serif; }
</style>
</head>

La millor forma de fer-ho és fer un fitxer
abanda amb extensió .css
En aquest fitxer definirem totes les regles
d'estils. Després l'inclourem en l'apartat
del head del fitxer html de la següent
manera:
Abans:
Ara:
< l i n k r e l = " s t y l e s h e e t " h r e f = " l o u n g e . c s s " >
< l i n k t y p e = " t e x t / c s s " r e l = " s t y l e s h e e t "
h r e f = " l o u n g e . c s s " >

Activitat: crea un fitxer amb extensió
.css, en ell còpia la regla d'estil de la
diapositiva anterior. Inclou el fitxer .css
en un fitxer .html i comprova que s'aplica
l'estil que li has donat. Prova diferents
colors i tipus de lletra.

Definició de regles
Totes les regles les definirem de la
mateixa manera:
● A_qui(selector) {atribut:valor;
atribut: valor;...}
Exemples:
● p {
color: black;
}
● h1 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-
serif;

Selector
Nom de l'etiqueta: totes les etiquetes es
ficaran amb eixe estil.
● H1{...}, h1,h2,h3{...}
Etiquetes descendents: s'aplica a les
etiquetes que estan dins d'altres.
● P span {…}, p table {…}
Per classe: totes les etiquetes que tenen
l'atribut class igual.
● destacado{...},p.destacado{...}
Per identificador: etiquetes amb
l'identificador indicat.
● #destacado{...},p#destacado{...

Selector
Activitat:Crea un estil per a una taula en
que aparega el text de color verd. Prova
que funcione. A continuació, crea un estil
per a una taula que estiga dins d'una
etiqueta div i mostre el color de text
blau. Comprova que funcione.

Unitats de mesura
Absolutes
● in(polzades),cm,mm,pt(0'35mm),
pc(4'23mm)
Relatives (més recomanades)
● Em(relativa a la lletra que
s'està utilitzant), ex(0'5em),
px(píxels),% (relatiu a un
element pare)

Colors
A través de l'atribut color
● p{color:#4685BC;}
Si els valors són iguals els podem
comprimir:
● body{background-color:#FFF;
color:#000;}
● H1,h2,h3{color:#F00;}
Colors predefinits:
● Els mateixos que en html

Atributs per al text
Aplicables a etiquetes com: p, a, span, td,
h1...
Font: s'aplica grossor, mida i tipus de lletra
al mateix temps.
Text-decoration: decoració de text com
subratllat → underline, overline, line-through,
blink, none.
Color: color de la lletra
Font-size: mida de la lletra → 12pt, x-large
Font-weight:grossor de la lletra → normal, bold
Font-family: tipus de lletra
● Exemple: .estil1{font: bold 10px Arial;
color:green; text-decoration:none;}

Atributs per al text
Activitat: defineix una nova classe amb
lletra arial, mida 14, color blau i
negreta. Fes un identificador de color
roig, mida 20 i tipus de lletra verdana.
Aplica’ls a una etiqueta p i a un altra
span que vaja dins de l'etiqueta p.

Atributs per als enllaços
Més importants: text-decoration, font-
weight
Segons el seu estat(sub-classes):
● a:link: enllaços no visitats
● a:visited: enllaços visitats
● a:hover: ratolí sobre l'enllaç
● a:active: estil al fer clic
Exemple:
● a:hover {text-decoration:none;}

Activitat: fes que els links normals
estiguen de color roig. Quan passe el
ratolí per sobre que es fique lletra blanca
i fons roig. Els enllaços visitats
apareixeran en gris
L'atribut target=“_blank“ de l'etiqueta <a>
farà que la nostra web s'obriga en una
pestanya diferent.
L'ordre adient a l'hora d'aplicar els
estils és:
● :link,:visited,:hover,:active

Enllaços com a botons:
a { margin: 0.2em 0; float: left; clear: left; }
a.boton {
text-decoration: none;
background: #EEE;
color: #222;
border: 1px outset #CCC;
padding: .1em .5em; }
a.boton:hover { background: #CCB;}
a.boton:active { border: 1px inset #000;}
<a class=“boton“ href=“http:...“> Enllaç </a>

A l'exemple anterior hem vist:
● Margin: distància de la vora a altre
element, s'accepta també margin-top,
margin-bottom,margin-left...
● Padding: distància entre la vora i
el contingut.
● Float: alínia un element a
l'esquerre o a la dreta: none, left
i right
● Clear: despeja elements flotants al
seu costat i es queda baix: left,
right, both.
Activitat: crea 4 botons amb enllaços a
diferents pàgines. Personalitza'ls.

Posicionament
Elements en bloc i de línia.
Atribut position.
● Static: normal, no li se diu
altra posició
● Relative:desplacem amb top,
right, left i bottom
● Absolute: origen en el seu
contenidor
● Fixed: element inmòbil en la
pantalla sempre
● Atributs float i clear:
desplaça la imatge segons els

Posicionament
Activitat: anem a crear 4 capes amb
l'etiqueta div que ja coneixeu de mida
50px. La primera capa tindrà un
posicionament static, la segon relative i
la moureu 150px cap a la dreta i 150px cap
avall. La tercera tindrà un posicionament
absolute, separat 200px per dalt i a
l'esquerre. La quarta capa fiqueu-la fixa
al centre de la pàgina. Pinteu cada div
d'un color diferent. Escriviu text en la
pàgina web després dels elements per veure
com flueix el text més endavant.

Posicionament
Float: right/left

Posicionament
Clear: left/right/both

Visualització
Display i visibility
● Display:none → oculta un
element, els altres ocupen el
seu lloc.
● Visibility: hidden → crea
l'element però no el mostra.

Visualització
Overflow: per a que el contingut d'un
element no se n'isca d'ell.
Valor: hidden/visible/scroll/auto (feu-ho)

Visualització:
Z-index: quant més nombre, més davant
quedarà l'objecte.
Opacity: indicarem quin grau d'opacitat
volem en l'objecte. Exemple: opacity 0.2
Activitat: activitat sobre imatges.
Activitat: activitat sobre visibilitat.
Activitat: en un full html nou, prova
l'atribut overflow en tres div diferents.

Atributs per a les imatges
Width i height: amplària i altura.
Border:
● Border: mida estil color
● Estil:
none/solid/dotted/double/dashed
/groove/ridge/inset/outset
També tenim: border-width, border-color,
border-style
Activitat: prova en un mateix full web els
diferents tipus de vores que tenim.

Atributs per a llistes
List-style-position: inside/outside
List-style-image: url(“ruta“)/none
List-style: type position image
Activitat 1: activitat llistes
Activitat 2: modifica la llista
que et passe el professor:
● Colors de fons
● Canviar imatges
● Vores més grosses
● Crear enllaços

Atributs per a taules
Recordem selectors que ens seran útils
● Table th
● Table td.nom
● Table tr.nom td

Activitat: Fiqueu la segona fila amb el mateix estil
però color del text roig. Com ficaries les dates amb
el mateix estil?

Border-collapse: collapse/separate; Fica
vores senzilles o separades.
Etiqueta caption: per donar un títol a la
taula. Es fica després d'obrir la taula.
● Caption-side:
bottom/top/left/right
Rowspan i colspan els podem indicar en el
html, ja que es refereixen al disseny de la
taula i no a l'estil.
Thead, tfoot, tbody: s'han de ficar en
aquest ordre. Donen un estil per a la fila
d'encapçalament, per al cos de la taula i
la fila del peu de la taula.

Activitat: crea la següent taula.

So i video
Es poden ficar un format o diversos, el
navegador reproduirà el que entenga. HTML5
ja no utilitza flash.
Incloure so:
<audio src="mar.mp3" autoplay
controls width="50" height="50" />
Incloure video:
<video width="600" height="600"
autoplay loop controls>
<source src="video1.mp4"
type="video/mp4" />
</video>

So i video
Incrustar un vídeo de youtube
<iframe width="420"
height="315"
src="https://www.youtube.com/em
bed/1oRqDkadeUw"
frameborder="0"
allowfullscreen></iframe>

Disseny de pàgines
Les taules es divideixen en blocs: menú,
capçalera, continguts i peu de pàgina.
Abans aquesta organització es feia amb
taules, ara es fa amb div. Aconseguim
● Millor manteniment,
accessibilitat, velocitat de
càrrega, semàntica.
Com existeixen diferents mides de pantalla,
s'està escollint per definir blocs d'una
mida fixa.

Disseny de pàgines
Centrar una pàgina: creem un contenidor per
a les dades que sempre tindrà la mateixa
mida. Els màrgens laterals seran automàtics

Disseny de pàgines
Dos columnes amb capçalera i peu de pàgina

Disseny de pàgines
3 columnes amb capçalera i peu de pàgina

Disseny de pàgines
Definir mides màximes i mínimes:
● Max-width, min-width, max
height, min-height

Disseny de pàgines
Activitat: creeu una web amb l'estructura
de dos columnes, encapçalament i peu de
pàgina. Fiqueu la columna del menú a la
dreta (als exemples estava al contrari). En
l'encapçalament i el peu de pàgina fiqueu
una imatge que ocupe tot el div. En la
columna del menú fiqueu el menú que vàrem
fer d'exercici. Per a la columna de
continguts fiqueu la taula creada en
l'últim exercici.

Css v2

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (13)

Similar to Css v2

Similar to Css v2 (20)

Css v2