Css v2

TEMA 5:CSS

Introducció

Amb CSS aconseguim separar les etiquetes html dels seus atributs que modifiquen el seu estil.

HTML + CSS = WEBExemple: 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 elements.

Posicionament

Relatiu

Posicionament

Absolut

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/embed/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àgines3 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

Technology

Transcript of Css v2