Your SlideShare is downloading. ×
  • Like
Css básico
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply
Published

Presentación para la asignatura Llenguatges de Marques.

Presentación para la asignatura Llenguatges de Marques.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
146
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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 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.
  • 5. Com funciona?
    • h1 {color: blue;}
    • h1 es el selector
    • {color: blue;} es la declaración, on color és la propietat i blue el valor
    • <h1> Hello world </h1> al document html
  • 6. Classes
    • Mitjançant 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, podríem formatar a través de classes el color de parts de codi HTML
    • <h1 class=“classe”> Hola m&oacute;n </h1>
    • <h1 class=“classe2”> Hola m&oacute;n </h1>
    • <h2 class=“classe2”> Text a imprimir </h2>
  • 8. Classes
    • Una mateixa etiqueta HTML pot tenir diferents &quot;classes&quot;, 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 més d'una classe a una mateixa etiqueta:
    • .text { color: yellow }
    • .fons { background-color: blue }
    • <h3 class=“text fons&quot;> lletres en groc, fons blau </ h3>
    • <p class=“ text&quot;>
    • lletres color groc; fons el que hereti de la pàgina.
    • </ p>
  • 10. #ID
    • 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.
  • 11. #ID
    • A l'element html poden assignar estils a través 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 <em> (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 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;}
  • 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 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.
  • 16. Pseudo classes i pseudo elements
    • 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.
  • 17. Pseudo classes i pseudo elements
    • Los pseudo elements disponibles en CSS són :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 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:
    •      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.
    •      a: focus enllaç amb el focus del sistema
  • 19. Com enllaçar 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 més d'un arxiu .css, utilitzant un element LINK per cadascun.
    • La sintaxi per 'enllaçar' un style sheet és:
    • <HEAD>
    • <LINK rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href= “ url ” >
    • </HEAD>
  • 20. Com enllaçar HTML amb CSS
    • Embe d ding
    • 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.
    • <HEAD>
    • <STYLE type=&quot;text/css&quot;>
    • ... aquí van totes les sentències ...
    • </STYLE>
    • </HEAD>
  • 21. Com enllaçar 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 declaracions sense les claus { i }.
    • <P style=&quot;color:red;font-size:20px&quot;>
    • Un paràgraf de color vermell i mida 20px
    • </P>