css básico

• 1. CSS Introducci a css

2. Qu s CSS

• Fulls d'estil en cascada ( Cascading Style Sheets ), s una forma de descriure com es mostrar un document a la pantalla.

• Aquesta forma de descripci d'estils ofereix als desenvolupadors el control total sobre estil i format dels seus documents.

3. Per a qu serveix?

• CSS s'utilitza per donar estil a documents HTML i XML, separant el contingut de la presentaci.

4. Com funciona?

• CSS funciona a base de regles, s a dir, declaracions sobre l'estil d'un o ms elements. La regla t dues parts: un selector i la declaraci. Al seu torn la declaraci est composta per una propietat i el valor que se li assigni.

5. Com funciona?

• h1 {color: blue;}

• h1 es el selector

• {color: blue;} es la declaracin, on color s la propietat i blue el valor

• Hello world al document html

6. Classes

• Mitjanant la definici de 'classes' s'estableixen estils que poden aplicar-se a qualsevol selector HTML

• L'estil definit en una classe no est vinculat a una etiqueta o element concret sin a una 'classe', i aquesta classe es pot lligar a qualsevol etiqueta HTML.

7. Classes

• h1.clas s e { color:blue; }

• . clas s e 2{color:green;}

• En aquest cas, podrem formatar a travs de classes el color de parts de codi HTML

• Hola mn

• Hola mn

• Text a imprimir

8. Classes

• Una mateixa etiqueta HTML pot tenir diferents "classes", permetent que un mateix element ofereixi diferents estils.

• h1.roja {font: 17pt; color:red;}

• h1.verd {font: 15pt; color: green;}

• h1.blau {font: 19pt; color: blue;}

9. Classes

• Finalment, tamb podem assignar ms d'una classe a una mateixa etiqueta:

• .text { color: yellow }

• .fons{ background-color: blue }

• lletres en groc, fons blau h3>

• lletres color groc; fons el que hereti de la pgina.

• p>

10. #ID

• Mitjanant l'atribut id podem establir una identitat nica per a un nic element de la pgina. La sntaxis html seria per exemple

  , on especifiquem la identitat "men" per a aquest nic pargraf.

11. #ID

• A l'element html poden assignar estils a travs del selector id: # menu {estils ...} o b p # menu {estils ...}

12. Selectors contextuals

• Per exemple, suposem que volem dos estils diferents, un per l'element (emfatitzat, cursiva) i un altre per l'element h1. Ja hem vist que es faria aix: h1 {color: blue;} em {color: red;}

13. Selectors contextuals

• Imaginem que noms volem veure en vermell el text emfatitzat que aparegui dins d'una capalera h1, i que la resta de text emfatitzat segueixi un altre estil. Aix es pot definir aix: h1 em {color: red;} em {color: green;}

14. Selectors contextuals

• Els selectors contextuals es poden agrupar: h1 b, h2 b, h1 em, h2 em {color: red;} que equival a: h1 b {color: red;} h2 b {color: red;} h1 em {color: red;} h2 em {color: red;}

15. Pseudo classes i pseudo elements

• Els pseudo-elements sn elements d'una pgina a qui el llenguatge html no atorga identitat prpia (i per tant no poden ser seleccionats) per que si poden ser identificats per les regles d'estil.

16. Pseudo classes i pseudo elements

• Per exemple, no hi ha capetiqueta htmlper marcar la primera lletra de cada pargraf, o la primera lnia. A travs dels pseudo elements podem accedir-hi i dotar-los d'estil.

17. Pseudo classes i pseudo elements

• Los pseudo elements disponibles en CSS sn :first-letter :first-line :before :after

• Son pseudo classes :first-child :link :visited :hover :active :focus:lang

• Exemple s

• p :first-letter {color: Green;font-size:x-large;}

• p:lang(Hola){background:yellow;}

18. Pseudoclasse :link

• Els navegadors normalment visualitzen de forma diferent els enllaos (links) visitats dels no visitats. En CSS, aquesta visualitzaci es pot definir a travs de pseudo classes en l'element o selector a (ANCHOR), amb les segents possibilitats:

• a: link enlla que no ha estat explorat per l'usuari. a: visited es refereix als enllaos ja visitats. a: active enlla seleccionat amb el ratol a: hover enlla amb el punter del ratol a sobre.

• a: focus enlla amb el focus del sistema

19. Com enllaar HTML amb CSS

• Linking

• Consisteix a utilitzar l'element LINK a la secci HEAD del document HTML per indicar quin arxiu .css s'ha d'utilitzar. s possible associar ms d'un arxiu .css, utilitzant un element LINK per cadascun.

• La sintaxi per 'enllaar' unstyle sheets:

20. Com enllaar HTML amb CSS

• Embe d ding

• L'altra opci s "incrustar" l' style sheeten el mateix document HTML (tamb a la secci HEAD), s a dir, escriure-hi el codi directament.

• ...aqu van totes les sentncies...

21. Com enllaar HTML amb CSS

• Inline style sheets

• Per fer-ho utilitzarem l'atribut style, que es pot aplicar a (gaireb) qualsevol element HTML, i com a valor escriurem el bloc de declaracionssenseles claus { i }.

• Un pargraf de color vermell i mida 20px