Css básico

CSSCSSIntroducció a cssIntroducció a css

Què és CSSQuè és CSS

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

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

Per a què serveix?Per a què serveix?

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

Com funciona?Com funciona?

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

Com funciona?Com funciona?

h1 {color: blue;}h1 {color: blue;}

h1 es el selectorh1 es el selector

{color: blue;} es la declaración, on color és la {color: blue;} es la declaración, on color és la propietat i blue el valorpropietat i blue el valor

<h1> <h1> Hello worldHello world </h1> al document html</h1> al document html

ClassesClasses

Mitjançant la definició de 'classes' Mitjançant la definició de 'classes' s'estableixen estils que poden aplicar-se s'estableixen estils que poden aplicar-se a qualsevol selector HTMLa qualsevol selector HTML

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

ClassesClasses

h1.clash1.classse { color:blue; }e { color:blue; }

.. clasclasssee22 {color:green;} {color:green;}

En aquest cas, podríem formatar a través de En aquest cas, podríem formatar a través de classes el color de parts de codi HTMLclasses el color de parts de codi HTML

<h1 class=“classe”><h1 class=“classe”>Hola mónHola món</h1></h1>

<h1 class=“classe2”><h1 class=“classe2”>Hola mónHola món</h1></h1>

<h2 class=“classe2”><h2 class=“classe2”>Text a imprimirText a imprimir</h2></h2>

ClassesClasses

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

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

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

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

ClassesClasses Finalment, també podem assignar més d'una Finalment, també podem assignar més d'una

classe a una mateixa etiqueta:classe a una mateixa etiqueta:

.text { color: yellow } .text { color: yellow }

.fons.fons { background-color: blue } { background-color: blue }

<h3 class=“text fons"> <h3 class=“text fons"> lletres en groc, fons blaulletres en groc, fons blau </ h3> </ h3>

<p class=“<p class=“text"> text">

lletres color groc; fons el que hereti de la pàgina.lletres color groc; fons el que hereti de la pàgina.

</ p></ p>

#ID#ID

Mitjançant l'atribut id podem establir una Mitjançant l'atribut id podem establir una identitat única per a un únic element de identitat única per a un únic element de la pàgina. La síntaxis html seria per la pàgina. La síntaxis html seria per exemple <p id="menu">, on exemple <p id="menu">, on especifiquem la identitat "menú" per a especifiquem la identitat "menú" per a aquest únic paràgraf.aquest únic paràgraf.

#ID#ID

A l'element html poden assignar estils a A l'element html poden assignar estils a través del selector id:través del selector id:

# menu {estils ...}# menu {estils ...}

o béo bé

p # menu {estils ...}p # menu {estils ...}

Selectors contextualsSelectors contextuals

Per exemple, suposem que volem dos Per exemple, suposem que volem dos estils diferents, un per l'element <em> estils diferents, un per l'element <em> (emfatitzat, cursiva) i un altre per (emfatitzat, cursiva) i un altre per l'element h1. Ja hem vist que es faria l'element h1. Ja hem vist que es faria així:així:

h1 {color: blue;}h1 {color: blue;}

em {color: red;}em {color: red;}


Imaginem que només volem veure en Imaginem que només volem veure en vermell el text emfatitzat que aparegui vermell el text emfatitzat que aparegui dins d'una capçalera h1, i que la resta de dins d'una capçalera h1, i que la resta de text emfatitzat segueixi un altre estil. Això text emfatitzat segueixi un altre estil. Això es pot definir així:es pot definir així:

h1 em {color: red;}h1 em {color: red;}

em {color: green;}em {color: green;}


Els selectors contextuals es poden agrupar:Els selectors contextuals es poden agrupar:

h1 b, h2 b, h1 em, h2 em {color: red;}h1 b, h2 b, h1 em, h2 em {color: red;}

que equival a:que equival a:

h1 b {color: red;}h1 b {color: red;}h2 b {color: red;}h2 b {color: red;}h1 em {color: red;}h1 em {color: red;}h2 em {color: red;} h2 em {color: red;}

Pseudo classes i Pseudo classes i pseudo elementspseudo elements Els pseudo-elements són Els pseudo-elements són

elements d'una pàgina a qui el elements d'una pàgina a qui el llenguatge html no atorga identitat llenguatge html no atorga identitat pròpia (i per tant no poden ser pròpia (i per tant no poden ser seleccionats) però que si poden seleccionats) però que si poden ser identificats per les regles ser identificats per les regles d'estil.d'estil.

Pseudo classes i Pseudo classes i pseudo elementspseudo elements Per exemple, no hi ha cap Per exemple, no hi ha cap

etiqueta htmletiqueta html per marcar la per marcar la primera lletra de cada paràgraf, o primera lletra de cada paràgraf, o la primera línia. A través dels la primera línia. A través dels pseudo elements podem accedir-pseudo elements podem accedir-hi i dotar-los d'estil.hi i dotar-los d'estil.

Pseudo classes i Pseudo classes i pseudo elementspseudo elements Los pseudo elements disponibles en Los pseudo elements disponibles en

CSS són :first-letter :first-line :before CSS són :first-letter :first-line :before :after :after

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

ExempleExemplesspp:first-letter {color: Green;font-size:x-large;}:first-letter {color: Green;font-size:x-large;} p:lang(Hola){background:yellow;}p:lang(Hola){background:yellow;}

Pseudoclasse :linkPseudoclasse :link

Els navegadors normalment visualitzen de Els navegadors normalment visualitzen de forma diferent els enllaços (links) visitats dels forma diferent els enllaços (links) visitats dels no visitats. En CSS, aquesta visualització es no visitats. En CSS, aquesta visualització es pot definir a través de pseudo classes en pot definir a través de pseudo classes en l'element o selector a (ANCHOR), amb les l'element o selector a (ANCHOR), amb les següents possibilitats:següents possibilitats:

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

Com enllaçar HTML Com enllaçar HTML amb CSSamb CSS

LinkingLinking

Consisteix a utilitzar l'element LINK a la secció Consisteix a utilitzar l'element LINK a la secció HEAD del document HTML per indicar quin HEAD del document HTML per indicar quin arxiu .css s'ha d'utilitzar. És possible associar arxiu .css s'ha d'utilitzar. És possible associar més d'un arxiu .css, utilitzant un element LINK més d'un arxiu .css, utilitzant un element LINK per cadascun.per cadascun.La sintaxi per 'enllaçar' un La sintaxi per 'enllaçar' un style sheetstyle sheet és: és:

<HEAD> <HEAD> <LINK rel="stylesheet" type="text/css" href=<LINK rel="stylesheet" type="text/css" href=““urlurl””> >

</HEAD> </HEAD>

Com enllaçar HTML Com enllaçar HTML amb CSSamb CSS EmbeEmbedddingding

L'altra opció és "incrustar" l'L'altra opció és "incrustar" l'style sheetstyle sheet en el en el mateix document HTML (també a la secció mateix document HTML (també a la secció HEAD), és a dir, escriure-hi el codi HEAD), és a dir, escriure-hi el codi directament. directament. <HEAD> <HEAD>

<STYLE type="text/css"> <STYLE type="text/css"> ... ... aquí van totes les sentènciesaquí van totes les sentències ... ...

</STYLE> </STYLE> </HEAD> </HEAD>

Com enllaçar HTML Com enllaçar HTML amb CSSamb CSS Inline style sheetsInline style sheets

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

<P style="color:red;font-size:20px"><P style="color:red;font-size:20px">

Un paràgraf de color vermell i mida 20pxUn paràgraf de color vermell i mida 20px

</P> </P>

Css básico

Documents

Transcript of Css básico