Css básico

268 views

Published on

Presentación para la asignatura Llenguatges de Marques.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
268
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Css básico

  1. 1. CSS Introducció a css
  2. 2. Què és CSS <ul><li>Fulls d'estil en cascada ( Cascading Style Sheets ), és una forma de descriure com es mostrarà un document a la pantalla. </li></ul><ul><li>Aquesta forma de descripció d'estils ofereix als desenvolupadors el control total sobre estil i format dels seus documents. </li></ul>
  3. 3. Per a què serveix? <ul><li>CSS s'utilitza per donar estil a documents HTML i XML, separant el contingut de la presentació. </li></ul>
  4. 4. Com funciona? <ul><li>CSS funciona a base de regles, és a dir, declaracions sobre l'estil d'un o més 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. </li></ul>
  5. 5. Com funciona? <ul><li>h1 {color: blue;} </li></ul><ul><li>h1 es el selector </li></ul><ul><li>{color: blue;} es la declaración, on color és la propietat i blue el valor </li></ul><ul><li><h1> Hello world </h1> al document html </li></ul>
  6. 6. Classes <ul><li>Mitjançant la definició de 'classes' s'estableixen estils que poden aplicar-se a qualsevol selector HTML </li></ul><ul><li>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. </li></ul>
  7. 7. Classes <ul><li>h1.clas s e { color:blue; } </li></ul><ul><li>. clas s e 2 {color:green;} </li></ul><ul><li>En aquest cas, podríem formatar a través de classes el color de parts de codi HTML </li></ul><ul><li><h1 class=“classe”> Hola m&oacute;n </h1> </li></ul><ul><li><h1 class=“classe2”> Hola m&oacute;n </h1> </li></ul><ul><li><h2 class=“classe2”> Text a imprimir </h2> </li></ul>
  8. 8. Classes <ul><li>Una mateixa etiqueta HTML pot tenir diferents &quot;classes&quot;, permetent que un mateix element ofereixi diferents estils. </li></ul><ul><li>h1.roja {font: 17pt; color: red;} </li></ul><ul><li>h1.verd {font: 15pt; color: green;} </li></ul><ul><li>h1.blau {font: 19pt; color: blue;} </li></ul>
  9. 9. Classes <ul><li>Finalment, també podem assignar més d'una classe a una mateixa etiqueta: </li></ul><ul><li>.text { color: yellow } </li></ul><ul><li>.fons { background-color: blue } </li></ul><ul><li><h3 class=“text fons&quot;> lletres en groc, fons blau </ h3> </li></ul><ul><li><p class=“ text&quot;> </li></ul><ul><li>lletres color groc; fons el que hereti de la pàgina. </li></ul><ul><li></ p> </li></ul>
  10. 10. #ID <ul><li>Mitjançant l'atribut id podem establir una identitat única per a un únic element de la pàgina. La síntaxis html seria per exemple <p id=&quot;menu&quot;>, on especifiquem la identitat &quot;menú&quot; per a aquest únic paràgraf. </li></ul>
  11. 11. #ID <ul><li>A l'element html poden assignar estils a través del selector id: # menu {estils ...} o bé p # menu {estils ...} </li></ul>
  12. 12. Selectors contextuals <ul><li>Per exemple, suposem que volem dos estils diferents, un per l'element <em> (emfatitzat, cursiva) i un altre per l'element h1. Ja hem vist que es faria així: h1 {color: blue;} em {color: red;} </li></ul>
  13. 13. Selectors contextuals <ul><li>Imaginem que només volem veure en vermell el text emfatitzat que aparegui dins d'una capçalera h1, i que la resta de text emfatitzat segueixi un altre estil. Això es pot definir així: h1 em {color: red;} em {color: green;} </li></ul>
  14. 14. Selectors contextuals <ul><li>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;} </li></ul>
  15. 15. Pseudo classes i pseudo elements <ul><li>Els pseudo-elements són elements d'una pàgina a qui el llenguatge html no atorga identitat pròpia (i per tant no poden ser seleccionats) però que si poden ser identificats per les regles d'estil. </li></ul>
  16. 16. Pseudo classes i pseudo elements <ul><li>Per exemple, no hi ha cap etiqueta html per marcar la primera lletra de cada paràgraf, o la primera línia. A través dels pseudo elements podem accedir-hi i dotar-los d'estil. </li></ul>
  17. 17. Pseudo classes i pseudo elements <ul><li>Los pseudo elements disponibles en CSS són :first-letter :first-line :before :after </li></ul><ul><li>Son pseudo classes :first-child :link :visited :hover :active :focus :lang </li></ul><ul><li>Exemple s </li></ul><ul><li>p :first-letter {color: Green;font-size:x-large;} </li></ul><ul><li>p:lang(Hola){background:yellow;} </li></ul>
  18. 18. Pseudoclasse :link <ul><li>Els navegadors normalment visualitzen de forma diferent els enllaços (links) visitats dels no visitats. En CSS, aquesta visualització es pot definir a través de pseudo classes en l'element o selector a (ANCHOR), amb les següents possibilitats: </li></ul><ul><li>     a: link enllaç que no ha estat explorat per l'usuari.      a: visited es refereix als enllaços ja visitats.      a: active enllaç seleccionat amb el ratolí      a: hover enllaç amb el punter del ratolí a sobre. </li></ul><ul><li>     a: focus enllaç amb el focus del sistema </li></ul>
  19. 19. Com enllaçar HTML amb CSS <ul><li>Linking </li></ul><ul><li>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 més d'un arxiu .css, utilitzant un element LINK per cadascun. </li></ul><ul><li>La sintaxi per 'enllaçar' un style sheet és: </li></ul><ul><li><HEAD> </li></ul><ul><li><LINK rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href= “ url ” > </li></ul><ul><li></HEAD> </li></ul>
  20. 20. Com enllaçar HTML amb CSS <ul><li>Embe d ding </li></ul><ul><li>L'altra opció és &quot;incrustar&quot; l' style sheet en el mateix document HTML (també a la secció HEAD), és a dir, escriure-hi el codi directament. </li></ul><ul><li><HEAD> </li></ul><ul><li><STYLE type=&quot;text/css&quot;> </li></ul><ul><li>... aquí van totes les sentències ... </li></ul><ul><li></STYLE> </li></ul><ul><li></HEAD> </li></ul>
  21. 21. Com enllaçar HTML amb CSS <ul><li>Inline style sheets </li></ul><ul><li>Per fer-ho utilitzarem l'atribut style, que es pot aplicar a (gairebé) qualsevol element HTML, i com a valor escriurem el bloc de declaracions sense les claus { i }. </li></ul><ul><li><P style=&quot;color:red;font-size:20px&quot;> </li></ul><ul><li> Un paràgraf de color vermell i mida 20px </li></ul><ul><li></P> </li></ul>

×