SlideShare uma empresa Scribd logo
1 de 18
Fulls d'estil (CSS).
Introducció
● Definició.
● Llenguatge.
● Funcionament
● Exemple.
● Fulls d'estil externs.
● Fulls d'estil interns.
● Fulls d'estil en línia.
● Avantatges.
Introducció.2
● Desavantatges.
● Software.
● Webgrafia
● Webgrafia.2
● Opinió personal
Definició
● Els fulls d'estil són un sistema pràctic i eficient.
● És un sistema per controlar l'aparença de les pàgines web.
● Controla tot allò que es refereixi a la representació en pantalla.
● Controla fins i tot en altres suports:
- com a mitjans impresos,
-Lectors de veu, etc...
Llenguatge
● Els fulls d'estil estan escrits en un llenguatge propi:
- independent al HTML.
● Fulls d'Estil externs no han de contenir cap etiqueta HTML com:
- <head> o <style>
● Han de consistir simplement de regles d'estil o sentències.
● Dos llenguatges de fulls d'estil són:
-CSS i XSL.
Funcionament.
● CSS funciona a base de regles:
-declaracions sobre l'estil d'un o més elements.
● compostos per una o més d'aquestes regles aplicades.
● La regla té dues parts:
-un selector i la declaració.
● La declaració està composta per una propietat i el valor que se
li asigna.
-h1 {color: red;}
-h1 és el selector
-{color: red;} és la declaració
Exemple
● <body>
- body {
-font-family: verdana, tahoma, arial, sans-serif;
-margin: 0.5em 5%;
-background-color: #fff;
-color: #000;
-ont-size: small;
-/* IE Centering Cludge */
-text-align: center;
- }
Fulls d'estil externs.
● Els autors poden separar els fulls d'estil dels documents HTML.
Això ofereix diversos avantatges:
- Els autors i els administradors de llocs web poden
compartir fulls d'estil entre diversos documents (i llocs).
- Els autors poden canviar el full d'estil sense necessitat de
fer modificacions en el document.
- Els agents d'usuari poden carregar fulls d'estil
selectivament (en funció dels descriptors de mitjans).
Fulls d'estil interns.
● Està incrustada dins d'un document HTML. (Va a la dreta dins
de l'element <head>).
● D'aquesta manera s'obté el benefici de separar la informació de
l'estil, del codi HTML.
● L'única vegada que s'usa un full d'estil intern, és quan es vol
proporcionar una funcionalitat a una pàgina web en un únic
fitxer
- per exemple, si s'està enviant alguna cosa a la pàgina
web.
Fulls d'estil en línia.
● Mètode per inserir el llenguatge d'estil de pàgina, directament,
dins d'una etiqueta HTML.
● Aquesta manera de treball es podria usar de manera ocasional
si es pretén aplicar un formateig amb pressa, al vol.
● Aquest és el mètode recomanat per a la composició correus
electrònics en HTML.
Avantatges
● Major facilitat per modificar l'estil d'un lloc web.
● Codi més clar i senzill.
● Codi més compacte.
● Personalització de l'estil
Desavantatges
● Existeixen limitacions que CSS 2.x encara no permet.
● De vegades, depenent del navegador, la pàgina que ha estat
maquetada amb CSS no es pot veure bé.
Compatibilitat amb els navegadors
● Malgrat les recomanacions de W3C, no tots els navegadors
mostren els fulls d'estil de la mateixa manera.
● Navegadors que admiteixen els fulls d'estil:
-Microsoft Internet Explorer 3.0 (parcialment)
-Microsoft Internet Explorer (4.x) (5.x) i (6.x)
-Netscape Navigator (4.x) (6.x) i (7.x)
-Mozilla x.x
-Firefox x.x
-Opera (5.x) (6.x) i (7.x)
Software
● El software més utilitzat per crear un full d'estil es el HTML
encara que també està en XML.
Webgrafia
● Definició, llenguatge, funcionament i exemple:
http://www.strambotica.com/web/introcss.html
● Fulls d'estil externs:
http://html.conclase.net/w3c/html401-es/present/styles.html#h-14.5
● Fulls d'estil interns i en línia:
http://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada
● Avantatges:
http://web4dummies.blogspot.com/2007/09/ventajas-de-utilizar-hojas
● Desavetatges:
http://www.cssblog.es/ventajas-e-inconvenientes-al-usar-css/
Webgrafia.2
● Compatibilitat amb els navegadors:
http://es.kioskea.net/contents/css/cssintro.php3
● Opinió personal.
Opinió personal.
● Aquest taller és el que m'ha resultat més facils dels tres que
havia de fer, ja que hi havia molta més inforamació, i aquest
era més amplia.
● Encara que sabia que eren, hi havia coses dins dels fulls d'estil
que he descobert com per exemple que hi ha de interns i
externs.
Fulls d'estil (css)
Fausta Bakutyte
1es Bat. E

Mais conteúdo relacionado

Semelhante a Power3

M08 fulls d'estil
M08 fulls d'estilM08 fulls d'estil
M08 fulls d'estiljsanzvi
 
4. Introducció a Joomla
4. Introducció a Joomla4. Introducció a Joomla
4. Introducció a Joomlamnicolau
 
Pàgines web amb HTML. Presentació Tema_9
Pàgines web amb HTML. Presentació Tema_9Pàgines web amb HTML. Presentació Tema_9
Pàgines web amb HTML. Presentació Tema_9Iolanda Mallorques
 
Presentació Htm, Xml, Php
Presentació Htm, Xml, PhpPresentació Htm, Xml, Php
Presentació Htm, Xml, Phpmarius21 Marius
 
ELISAVA Beta. Cas d'èxit desenvolupat per Ymbra
ELISAVA Beta. Cas d'èxit desenvolupat per YmbraELISAVA Beta. Cas d'èxit desenvolupat per Ymbra
ELISAVA Beta. Cas d'èxit desenvolupat per YmbraYmbra
 
Introducció a Drupal - CINC Girona
Introducció a Drupal - CINC GironaIntroducció a Drupal - CINC Girona
Introducció a Drupal - CINC Gironatalkomraja
 
Presentación prueba M09 - UF2
Presentación prueba M09 - UF2Presentación prueba M09 - UF2
Presentación prueba M09 - UF2Antonio Valero
 
Eines per a la millora i el manteniment de webs
Eines per a la millora i el manteniment de websEines per a la millora i el manteniment de webs
Eines per a la millora i el manteniment de websLa Borrassa rural lab
 
Eines per disposar d'un web o un blog
Eines per disposar d'un web o un blogEines per disposar d'un web o un blog
Eines per disposar d'un web o un blogsantfeliuonline
 
Llenguatges i Estàndards Web - PAC 1 - Multimedia (UOC) - Paquita Ribas
Llenguatges i Estàndards Web - PAC 1 - Multimedia (UOC) - Paquita RibasLlenguatges i Estàndards Web - PAC 1 - Multimedia (UOC) - Paquita Ribas
Llenguatges i Estàndards Web - PAC 1 - Multimedia (UOC) - Paquita RibasPaquita Ribas
 
Práctiques TIC
Práctiques TICPráctiques TIC
Práctiques TICUIB
 
Grup 7
Grup 7Grup 7
Grup 7UIB
 

Semelhante a Power3 (20)

Fulls d'estils
Fulls d'estilsFulls d'estils
Fulls d'estils
 
UD4 Web
UD4 WebUD4 Web
UD4 Web
 
M08 fulls d'estil
M08 fulls d'estilM08 fulls d'estil
M08 fulls d'estil
 
4. Introducció a Joomla
4. Introducció a Joomla4. Introducció a Joomla
4. Introducció a Joomla
 
Pàgines web amb HTML. Presentació Tema_9
Pàgines web amb HTML. Presentació Tema_9Pàgines web amb HTML. Presentació Tema_9
Pàgines web amb HTML. Presentació Tema_9
 
Presentació Htm, Xml, Php
Presentació Htm, Xml, PhpPresentació Htm, Xml, Php
Presentació Htm, Xml, Php
 
ELISAVA Beta. Cas d'èxit desenvolupat per Ymbra
ELISAVA Beta. Cas d'èxit desenvolupat per YmbraELISAVA Beta. Cas d'èxit desenvolupat per Ymbra
ELISAVA Beta. Cas d'èxit desenvolupat per Ymbra
 
Introducció a Drupal - CINC Girona
Introducció a Drupal - CINC GironaIntroducció a Drupal - CINC Girona
Introducció a Drupal - CINC Girona
 
Css en XML
Css en XMLCss en XML
Css en XML
 
Entrar continguts amb Drupal
Entrar continguts amb DrupalEntrar continguts amb Drupal
Entrar continguts amb Drupal
 
Presentación prueba M09 - UF2
Presentación prueba M09 - UF2Presentación prueba M09 - UF2
Presentación prueba M09 - UF2
 
Introduccio a WordPress
Introduccio a WordPressIntroduccio a WordPress
Introduccio a WordPress
 
Eines per a la millora i el manteniment de webs
Eines per a la millora i el manteniment de websEines per a la millora i el manteniment de webs
Eines per a la millora i el manteniment de webs
 
Introducció a xml
Introducció a xmlIntroducció a xml
Introducció a xml
 
Html, Xtml & Php
Html, Xtml & PhpHtml, Xtml & Php
Html, Xtml & Php
 
Eines per disposar d'un web o un blog
Eines per disposar d'un web o un blogEines per disposar d'un web o un blog
Eines per disposar d'un web o un blog
 
Llenguatges i Estàndards Web - PAC 1 - Multimedia (UOC) - Paquita Ribas
Llenguatges i Estàndards Web - PAC 1 - Multimedia (UOC) - Paquita RibasLlenguatges i Estàndards Web - PAC 1 - Multimedia (UOC) - Paquita Ribas
Llenguatges i Estàndards Web - PAC 1 - Multimedia (UOC) - Paquita Ribas
 
Práctiques TIC
Práctiques TICPráctiques TIC
Práctiques TIC
 
Grup 7
Grup 7Grup 7
Grup 7
 
Creació de documents xml
Creació de documents xmlCreació de documents xml
Creació de documents xml
 

Power3

  • 2. Introducció ● Definició. ● Llenguatge. ● Funcionament ● Exemple. ● Fulls d'estil externs. ● Fulls d'estil interns. ● Fulls d'estil en línia. ● Avantatges.
  • 3. Introducció.2 ● Desavantatges. ● Software. ● Webgrafia ● Webgrafia.2 ● Opinió personal
  • 4. Definició ● Els fulls d'estil són un sistema pràctic i eficient. ● És un sistema per controlar l'aparença de les pàgines web. ● Controla tot allò que es refereixi a la representació en pantalla. ● Controla fins i tot en altres suports: - com a mitjans impresos, -Lectors de veu, etc...
  • 5. Llenguatge ● Els fulls d'estil estan escrits en un llenguatge propi: - independent al HTML. ● Fulls d'Estil externs no han de contenir cap etiqueta HTML com: - <head> o <style> ● Han de consistir simplement de regles d'estil o sentències. ● Dos llenguatges de fulls d'estil són: -CSS i XSL.
  • 6. Funcionament. ● CSS funciona a base de regles: -declaracions sobre l'estil d'un o més elements. ● compostos per una o més d'aquestes regles aplicades. ● La regla té dues parts: -un selector i la declaració. ● La declaració està composta per una propietat i el valor que se li asigna. -h1 {color: red;} -h1 és el selector -{color: red;} és la declaració
  • 7. Exemple ● <body> - body { -font-family: verdana, tahoma, arial, sans-serif; -margin: 0.5em 5%; -background-color: #fff; -color: #000; -ont-size: small; -/* IE Centering Cludge */ -text-align: center; - }
  • 8. Fulls d'estil externs. ● Els autors poden separar els fulls d'estil dels documents HTML. Això ofereix diversos avantatges: - Els autors i els administradors de llocs web poden compartir fulls d'estil entre diversos documents (i llocs). - Els autors poden canviar el full d'estil sense necessitat de fer modificacions en el document. - Els agents d'usuari poden carregar fulls d'estil selectivament (en funció dels descriptors de mitjans).
  • 9. Fulls d'estil interns. ● Està incrustada dins d'un document HTML. (Va a la dreta dins de l'element <head>). ● D'aquesta manera s'obté el benefici de separar la informació de l'estil, del codi HTML. ● L'única vegada que s'usa un full d'estil intern, és quan es vol proporcionar una funcionalitat a una pàgina web en un únic fitxer - per exemple, si s'està enviant alguna cosa a la pàgina web.
  • 10. Fulls d'estil en línia. ● Mètode per inserir el llenguatge d'estil de pàgina, directament, dins d'una etiqueta HTML. ● Aquesta manera de treball es podria usar de manera ocasional si es pretén aplicar un formateig amb pressa, al vol. ● Aquest és el mètode recomanat per a la composició correus electrònics en HTML.
  • 11. Avantatges ● Major facilitat per modificar l'estil d'un lloc web. ● Codi més clar i senzill. ● Codi més compacte. ● Personalització de l'estil
  • 12. Desavantatges ● Existeixen limitacions que CSS 2.x encara no permet. ● De vegades, depenent del navegador, la pàgina que ha estat maquetada amb CSS no es pot veure bé.
  • 13. Compatibilitat amb els navegadors ● Malgrat les recomanacions de W3C, no tots els navegadors mostren els fulls d'estil de la mateixa manera. ● Navegadors que admiteixen els fulls d'estil: -Microsoft Internet Explorer 3.0 (parcialment) -Microsoft Internet Explorer (4.x) (5.x) i (6.x) -Netscape Navigator (4.x) (6.x) i (7.x) -Mozilla x.x -Firefox x.x -Opera (5.x) (6.x) i (7.x)
  • 14. Software ● El software més utilitzat per crear un full d'estil es el HTML encara que també està en XML.
  • 15. Webgrafia ● Definició, llenguatge, funcionament i exemple: http://www.strambotica.com/web/introcss.html ● Fulls d'estil externs: http://html.conclase.net/w3c/html401-es/present/styles.html#h-14.5 ● Fulls d'estil interns i en línia: http://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada ● Avantatges: http://web4dummies.blogspot.com/2007/09/ventajas-de-utilizar-hojas ● Desavetatges: http://www.cssblog.es/ventajas-e-inconvenientes-al-usar-css/
  • 16. Webgrafia.2 ● Compatibilitat amb els navegadors: http://es.kioskea.net/contents/css/cssintro.php3 ● Opinió personal.
  • 17. Opinió personal. ● Aquest taller és el que m'ha resultat més facils dels tres que havia de fer, ja que hi havia molta més inforamació, i aquest era més amplia. ● Encara que sabia que eren, hi havia coses dins dels fulls d'estil que he descobert com per exemple que hi ha de interns i externs.
  • 18. Fulls d'estil (css) Fausta Bakutyte 1es Bat. E