css básico

Click here to load reader

Post on 08-Jul-2015

176 views

Category:

Documents

2 download

Embed Size (px)

DESCRIPTION

Presentación para la asignatura Llenguatges de Marques.

TRANSCRIPT

  • 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