CSS
Visualització d'XML i HTML
Visualització d'XML
-
XML sovint es veu només com un format per emmagatzemar dades.
-
Hi ha vocabularis XML pensats per ser "visualitzats":
-
SVG: Mostrar imatges vectorials2D
-
XHTML: Representació de dades en format web
-
MathXML: Fórmules matemàtiques
-
etc...
-
VISUALITZACIÓ
- Sovint fa falta alguna forma de mostrar la informació XML als humans
- XML no està pensat per ser llegit
- Normalment es pot interpretar però no sol ser còmode
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE jdt SYSTEM "jdt.dtd">
<jdt>
<houses>
<house id="stark">
<name>House Stark</name>
<sigil src="https://vignette.wikia.nocookie.net/gameofthrones/images/8/8a/House-Stark-Main-Shield.PNG/revision/latest/scale-to-width-down/350?cb=20170101103142"/>
<word>Winter Is Coming</word>
<regions>
<region>The North</region>
</regions>
<allegiances>
<![CDATA[<ul>
<li>Targaryen </li>
<li>Baratheon (formerly)</li>
<li>Sovereign (formerly)</li>
</ul>]]>
</allegiances>
<quote>
<![CDATA[<p>
<em>"You were born in the long summer, you've never known anything else. But now winter is truly coming. In the winter, we must protect ourselves, look after one another."</em>
</p>
<p>
— Lord Eddard Stark.
</p>]]>
</quote>
</house>
<house id="lannister">
<name>House Lannister</name>
<sigil src="https://vignette.wikia.nocookie.net/gameofthrones/images/8/8a/House-Lannister-Main-Shield.PNG/revision/latest/scale-to-width-down/350?cb=20170101095357"/>
<word type="common">A Lannister Always Pays His Debts</word>
<regions>
<region>The Crownlands</region>
<region>The Westerlands</region>
</regions>
<allegiances>
<![CDATA[<ul>
<li>Targaryen (formerly)</li>
<li>Baratheon (formerly)</li>
<li>Sovereign</li>
</ul>]]>
</allegiances>
<quote>
<![CDATA[<p>
<em>"You have to give it to the Lannisters – they may be the most pompous, ponderous cunts the gods ever suffered to walk the world, but they do have outrageous amounts of money."</em>
</p>
<p>
―Renly Baratheon
</p>]]>
</quote>
</house>
<house id="targaryen">
<name>House Targaryen</name>
<sigil src="https://vignette.wikia.nocookie.net/gameofthrones/images/4/43/House-Targaryen-Main-Shield.PNG/revision/latest/scale-to-width-down/350?cb=20170510235320"/>
<word>Fire and Blood</word>
<regions>
<region>Dragonstone</region>
<region>Casterly Rock</region>
<region when="formerly">Bay of Dragons</region>
<region when="claimant">The Crownlands</region>
</regions>
<allegiances>
<![CDATA[<ul>
<li>Sovereign</li>
</ul>]]>
</allegiances>
<quote>
<![CDATA[<p>
<em>"Half the Targaryens went mad didn't they? What's the saying? 'Every time a Targaryen is born the gods flip a coin.'"</em>
</p>
<p>
―Cersei Lannister
</p>]]>
</quote>
</house>
<house id="tyrell">
<name>House Tyrell</name>
<sigil src="https://vignette.wikia.nocookie.net/gameofthrones/images/c/cf/House-Tyrell-Main-Shield.PNG/revision/latest/scale-to-width-down/350?cb=20170108163035"/>
<word type="common">What Is Dead May Never Die</word>
<regions>
<region>Iron Islands</region>
</regions>
<allegiances>
<![CDATA[<ul>
<li>Targaryen</li>
<li>Baratheon (formerly)</li>
</ul>]]>
</allegiances>
<quote>
<![CDATA[<p>
<em>"Luckily for us Tyrells, our blood runs quite warm."</em>
</p>
<p>
―Margaery Tyrell
</p>]]>
</quote>
</house>
<house id="greyjoy">
<name>House Greyjoy</name>
<sigil src="https://vignette.wikia.nocookie.net/gameofthrones/images/8/86/House-Greyjoy-Main-Shield.PNG/revision/latest/scale-to-width-down/350?cb=20170523015836"/>
<word>Growing Strong</word>
<regions>
<region>The Reach</region>
</regions>
<allegiances>
<![CDATA[
<ul>
<li>Sovereign</li>
<li>Targaryen (formerly)</li>
<li>Baratheon (formerly)</li>
</ul>]]>
</allegiances>
<quote>
<![CDATA[<p>
<em>"We are ironborn. We're not subjects, we're not slaves. We do not plow the field or toil in the mine. We take what is ours."</em>
</p>
<p>
―Balon Greyjoy
</p>]]>
</quote>
</house>
<house id="baratheon">
<name>House Baratheon of King's Landing</name>
<sigil src="https://vignette.wikia.nocookie.net/gameofthrones/images/4/43/House-Baratheon-of-King%27s_Landing-Main-Shield.PNG/revision/latest/scale-to-width-down/350?cb=20170519011708"/>
<word>Ours Is the Fury</word>
<regions>
<region>The Crownlands</region>
</regions>
<allegiances>
<![CDATA[<ul>
<li>Sovereign</li>
<li>Targaryen (formerly)</li>
</ul>]]>
</allegiances>
<quote>
<![CDATA[<p>
<em>"The King Joffrey Baratheon is neither a true king, nor a true Baratheon. He's your bastard son."</em>
</p>
<p>
―Robb Stark to Jaime Lannister
</p>]]>
</quote>
</house>
</houses>
<characters>
<character>
<name>Eddard Stark</name>
<image src="https://vignette.wikia.nocookie.net/gameofthrones/images/3/37/Eddard_Stark_infobox_new.jpg/revision/latest/scale-to-width-down/323?cb=20160730050722"/>
<status alive="no"/>
<culture>Northmen</culture>
<religions>
<religion>Old Gods of the Forest</religion>
</religions>
<allegiance house="stark"/>
</character>
<character>
<name>Arya Stark</name>
<image src="https://vignette.wikia.nocookie.net/gameofthrones/images/5/54/Arya_the_dragon_and_the_wolf_s7.jpg/revision/latest/scale-to-width-down/319?cb=20170828062911"/>
<status alive="yes"/>
<culture>Northmen</culture>
<religions>
<religion>Old Gods of the Forest</religion>
<religion>Faith of the Seven</religion>
<religion when="formerly">Many-Faced God</religion>
</religions>
<allegiance house="stark"/>
</character>
<character>
<name>Cersei Lannister</name>
<image src="https://vignette.wikia.nocookie.net/gameofthrones/images/c/c3/Profile-CerseiLannister.png/revision/latest/scale-to-width-down/323?cb=20170828071355"/>
<status alive="yes"/>
<culture>Andal</culture>
<allegiance house="lannister"/>
</character>
<character>
<name>Daenerys I Targaryen</name>
<image src="https://vignette.wikia.nocookie.net/gameofthrones/images/5/5f/Daenerys_Dragonpit.jpg/revision/latest?cb=20171015095128"/>
<status alive="yes"/>
<culture>Valyrian</culture>
<allegiance house="targaryen"/>
</character>
<character>
<name>Loras Tyrell</name>
<image src="https://vignette.wikia.nocookie.net/gameofthrones/images/5/5f/Daenerys_Dragonpit.jpg/revision/latest?cb=20171015095128"/>
<status alive="no"/>
<culture>Andal</culture>
<religions>
<religion>Faith of the Seven</religion>
</religions>
<allegiance house="tyrell"/>
</character>
<character>
<name>Euron Greyjoy</name>
<image src="https://vignette.wikia.nocookie.net/gameofthrones/images/f/fc/Euron-Profile.PNG/revision/latest/scale-to-width-down/318?cb=20170916200257"/>
<status alive="yes"/>
<culture>Ironborn</culture>
<allegiance house="greyjoy"/>
</character>
<character>
<name>Robert I Baratheon</name>
<image src="https://vignette.wikia.nocookie.net/gameofthrones/images/d/d4/RobertBaratheon.jpg/revision/latest/scale-to-width-down/307?cb=20141119000127"/>
<status alive="no"/>
<culture>Andal</culture>
<religions>
<religion>Faith of the Seven</religion>
</religions>
<allegiance house="baratheon"/>
</character>
</characters>
</jdt>
Navegadors web
- Amb HTML representen les etiquetes de forma predeterminada...
- A cada etiqueta HTML li assignen una forma per defecte de representar-la
-
<h1>: Arial, 26px, negreta, ...
-
<h1>: Arial, 26px, negreta, ...
Navegadors web
- Els navegadors web són una de les eines habituals de representar llenguatges de marques
- Amb HTML les etiquetes tenen un estil per defecte, però XML té un número infinit d'etiquetes...
- Es mostra com en l'exemple anterior
Mostrar les dades
- Per convertir un XML perquè el llegeixi un humà caldrà:
- Transformar el document a un format més pensat per ser llegit (HTML, PDF, ... )
- XSLT
- Especificar la forma en que s'han de mostrar les dades
-
CSS
-
CSS
- Transformar el document a un format més pensat per ser llegit (HTML, PDF, ... )
CSS
- Els Cascading Style Sheets (CSS) són una forma popular de donar format a les dades d'un document
- Es fa servir massivament per formatar les pàgines HTML d'Internet
- Els documents XML i HTML són semblants i per tant es podran tractar de la mateixa forma
- Hi ha diferències perquè tenen objectius diferents
CSS
- CSS permet definir les regles de presentació d'un document a partir de les etiquetes que conté
- Fa que no calgui barrejar les dades amb el contingut
- No tots els navegadors tracten correctament ni de la mateixa forma CSS
- S'han de provar els documents en diferents navegadors per comprovar que tot es visualitza bé
- S'han de provar els documents en diferents navegadors per comprovar que tot es visualitza bé
Versions de CSS
- CSS 1: La versió inicial oferia unes poques capacitats de visualització però ja no està suportada pel W3C
- CSS 2: Expandeix les característiques de CSS1 afegint noves funcionalitats
-
CSS 3:
- Està definit en mòduls i dóna un control més potent de la visualització dels documents
- És la més corrent actualment
- Està definit en mòduls i dóna un control més potent de la visualització dels documents
Associar CSS amb documents
CSS i XML
- Per aplicar fulles d'estil CSS a XML es fa servir l'etiqueta especial xml-stylesheet
- S'ha de definir sempre darrere de l'etiqueta de definició d'XML
<?xml-stylesheet type="text/css" href="full.css" ?>
CSS i XML
- També es poden afegir més atributs
- Title: El nom o el títol del full
-
Media: Indica sota quin medi es farà servir el CSS: screen, print, tty, aural, braille, handheld, tv, all
- Se'n poden posar diversos alhora
- Charset: Indica el codi de caràcters que es fa servir
-
Alternate: Indica si el CSS que es fa servir és el preferit. Pot ser 'yes' o 'no'.
- Per defecte és 'no'
CSS i HTML: Inclusió
-
Fitxer extern:
- L'etiqueta LINK
- Serveix per definir un document CSS extern
- Accepta més o menys els mateixos atributs que l'etiqueta xml-stylesheet
- L'etiqueta LINK
CSS i HTML: Inclusió
-
CSS Incrustat:
-
No és la forma més recomanada de fer-ho ja que complica la compartició
-
L'etiqueta STYLE
-
Permet especificar regles CSS dins del document HTML
-
-
Atribut style:
-
Permet definir regles específiques per aun element en particular.
-
-
CSS i HTML: Inclusió
-
El format de LINK és:
<link type="text/css" rel="stylesheet" href="fitxer.css" ?>
El document té definit un estil de presentació
Fitxer d'estil
Relació del “link” amb el document
CSS Incrustat
Etiqueta STYLE
<style type="text/css">
... regles ...
</style>
Atribut STYLE
<p style="color:green">
REGLES CSS
CSS
Definim de quina forma es representaran les diferents etiquetes:
h1 { font-family: arial; }
Selector
Propietat
Valor
CSS
Si volem especificar més d'una propietat simplement es posen una darrere l'altra dins dels corxets separades amb un punt i coma ( ; )
h1 {
font-family:arial;
font-weight:bold;
color:#FF0000;
background-color:#00FF00;
}
Herència
La "C" de CSS vol dir “Cascading” i vol dir que les propietats es poden heretar pels elements fill
h1, h2 {
font-family:arial;
font-weight:bold;
color:#FF0000;
background-color:#00FF00;
}
h2 { font-style: italic; }
“h2” a més de les característiques anteriors estarà en cursiva
Herència
Si repetim una etiqueta en el mateix nivell i s'hi repeteix alguna propietat, el darrer valor és el vàlid
nom {
font-family:arial;
color: blue;
}
nom { color:red; }
El contingut de 'nom' es pintarà de color vermell perquè és la darrera definició que s'ha trobat
Representació
Coneixent les propietats es té un sistema de representació de dades molt potent
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE jdt SYSTEM "jdt.dtd">
<jdt>
<houses>
<house id="stark">
<name>House Stark</name>
<sigil src="https://vignette.wikia.nocookie.net/gameofthrones/images/8/8a/House-Stark-Main-Shield.PNG/revision/latest/scale-to-width-down/350?cb=20170101103142"/>
<word>Winter Is Coming</word>
<regions>
<region>The North</region>
</regions>
<allegiances>
<![CDATA[<ul>
<li>Targaryen </li>
<li>Baratheon (formerly)</li>
<li>Sovereign (formerly)</li>
</ul>]]>
</allegiances>
<quote>
<![CDATA[<p>
<em>"You were born in the long summer, you've never known anything else. But now winter is truly coming. In the winter, we must protect ourselves, look after one another."</em>
</p>
<p>
— Lord Eddard Stark.
</p>]]>
</quote>
</house>
<house id="lannister">
<name>House Lannister</name>
<sigil src="https://vignette.wikia.nocookie.net/gameofthrones/images/8/8a/House-Lannister-Main-Shield.PNG/revision/latest/scale-to-width-down/350?cb=20170101095357"/>
<word type="common">A Lannister Always Pays His Debts</word>
<regions>
<region>The Crownlands</region>
<region>The Westerlands</region>
</regions>
<allegiances>
<![CDATA[<ul>
<li>Targaryen (formerly)</li>
<li>Baratheon (formerly)</li>
<li>Sovereign</li>
</ul>]]>
</allegiances>
<quote>
<![CDATA[<p>
<em>"You have to give it to the Lannisters – they may be the most pompous, ponderous cunts the gods ever suffered to walk the world, but they do have outrageous amounts of money."</em>
</p>
<p>
―Renly Baratheon
</p>]]>
</quote>
</house>
<house id="targaryen">
<name>House Targaryen</name>
<sigil src="https://vignette.wikia.nocookie.net/gameofthrones/images/4/43/House-Targaryen-Main-Shield.PNG/revision/latest/scale-to-width-down/350?cb=20170510235320"/>
<word>Fire and Blood</word>
<regions>
<region>Dragonstone</region>
<region>Casterly Rock</region>
<region when="formerly">Bay of Dragons</region>
<region when="claimant">The Crownlands</region>
</regions>
<allegiances>
<![CDATA[<ul>
<li>Sovereign</li>
</ul>]]>
</allegiances>
<quote>
<![CDATA[<p>
<em>"Half the Targaryens went mad didn't they? What's the saying? 'Every time a Targaryen is born the gods flip a coin.'"</em>
</p>
<p>
―Cersei Lannister
</p>]]>
</quote>
</house>
<house id="tyrell">
<name>House Tyrell</name>
<sigil src="https://vignette.wikia.nocookie.net/gameofthrones/images/c/cf/House-Tyrell-Main-Shield.PNG/revision/latest/scale-to-width-down/350?cb=20170108163035"/>
<word type="common">What Is Dead May Never Die</word>
<regions>
<region>Iron Islands</region>
</regions>
<allegiances>
<![CDATA[<ul>
<li>Targaryen</li>
<li>Baratheon (formerly)</li>
</ul>]]>
</allegiances>
<quote>
<![CDATA[<p>
<em>"Luckily for us Tyrells, our blood runs quite warm."</em>
</p>
<p>
―Margaery Tyrell
</p>]]>
</quote>
</house>
<house id="greyjoy">
<name>House Greyjoy</name>
<sigil src="https://vignette.wikia.nocookie.net/gameofthrones/images/8/86/House-Greyjoy-Main-Shield.PNG/revision/latest/scale-to-width-down/350?cb=20170523015836"/>
<word>Growing Strong</word>
<regions>
<region>The Reach</region>
</regions>
<allegiances>
<![CDATA[
<ul>
<li>Sovereign</li>
<li>Targaryen (formerly)</li>
<li>Baratheon (formerly)</li>
</ul>]]>
</allegiances>
<quote>
<![CDATA[<p>
<em>"We are ironborn. We're not subjects, we're not slaves. We do not plow the field or toil in the mine. We take what is ours."</em>
</p>
<p>
―Balon Greyjoy
</p>]]>
</quote>
</house>
<house id="baratheon">
<name>House Baratheon of King's Landing</name>
<sigil src="https://vignette.wikia.nocookie.net/gameofthrones/images/4/43/House-Baratheon-of-King%27s_Landing-Main-Shield.PNG/revision/latest/scale-to-width-down/350?cb=20170519011708"/>
<word>Ours Is the Fury</word>
<regions>
<region>The Crownlands</region>
</regions>
<allegiances>
<![CDATA[<ul>
<li>Sovereign</li>
<li>Targaryen (formerly)</li>
</ul>]]>
</allegiances>
<quote>
<![CDATA[<p>
<em>"The King Joffrey Baratheon is neither a true king, nor a true Baratheon. He's your bastard son."</em>
</p>
<p>
―Robb Stark to Jaime Lannister
</p>]]>
</quote>
</house>
</houses>
<characters>
<character>
<name>Eddard Stark</name>
<image src="https://vignette.wikia.nocookie.net/gameofthrones/images/3/37/Eddard_Stark_infobox_new.jpg/revision/latest/scale-to-width-down/323?cb=20160730050722"/>
<status alive="no"/>
<culture>Northmen</culture>
<religions>
<religion>Old Gods of the Forest</religion>
</religions>
<allegiance house="stark"/>
</character>
<character>
<name>Arya Stark</name>
<image src="https://vignette.wikia.nocookie.net/gameofthrones/images/5/54/Arya_the_dragon_and_the_wolf_s7.jpg/revision/latest/scale-to-width-down/319?cb=20170828062911"/>
<status alive="yes"/>
<culture>Northmen</culture>
<religions>
<religion>Old Gods of the Forest</religion>
<religion>Faith of the Seven</religion>
<religion when="formerly">Many-Faced God</religion>
</religions>
<allegiance house="stark"/>
</character>
<character>
<name>Cersei Lannister</name>
<image src="https://vignette.wikia.nocookie.net/gameofthrones/images/c/c3/Profile-CerseiLannister.png/revision/latest/scale-to-width-down/323?cb=20170828071355"/>
<status alive="yes"/>
<culture>Andal</culture>
<allegiance house="lannister"/>
</character>
<character>
<name>Daenerys I Targaryen</name>
<image src="https://vignette.wikia.nocookie.net/gameofthrones/images/5/5f/Daenerys_Dragonpit.jpg/revision/latest?cb=20171015095128"/>
<status alive="yes"/>
<culture>Valyrian</culture>
<allegiance house="targaryen"/>
</character>
<character>
<name>Loras Tyrell</name>
<image src="https://vignette.wikia.nocookie.net/gameofthrones/images/5/5f/Daenerys_Dragonpit.jpg/revision/latest?cb=20171015095128"/>
<status alive="no"/>
<culture>Andal</culture>
<religions>
<religion>Faith of the Seven</religion>
</religions>
<allegiance house="tyrell"/>
</character>
<character>
<name>Euron Greyjoy</name>
<image src="https://vignette.wikia.nocookie.net/gameofthrones/images/f/fc/Euron-Profile.PNG/revision/latest/scale-to-width-down/318?cb=20170916200257"/>
<status alive="yes"/>
<culture>Ironborn</culture>
<allegiance house="greyjoy"/>
</character>
<character>
<name>Robert I Baratheon</name>
<image src="https://vignette.wikia.nocookie.net/gameofthrones/images/d/d4/RobertBaratheon.jpg/revision/latest/scale-to-width-down/307?cb=20141119000127"/>
<status alive="no"/>
<culture>Andal</culture>
<religions>
<religion>Faith of the Seven</religion>
</religions>
<allegiance house="baratheon"/>
</character>
</characters>
</jdt>
@import url('https://fonts.googleapis.com/css?family=Merriweather|Merriweather+Sans');
* {
color: #555555;
font-family: 'Merriweather Sans', sans-serif;
display: block;
margin: 5px;
}
house name {
font-family: 'Merriweather', serif;
font-weight: bold;
background-color: #222222;
color: whitesmoke;
text-align: center;
padding: 10px;
}
house word {
font-weight: bolder;
font-size: larger;
}
house region {
text-align: center;
color: lightgray;
background-color: #555555;
padding: 10px;
margin-left: 300px;
border-radius: 10px;
}
house quote {
display: none;
}
house allegiances {
display: none;
}
+
=
REPRESENTACIÓ
Coneixent les propietats es té un sistema de representació de dades molt potent
REGLES CSS
SELECTORS
Selectors
A part d'especificar etiquetes disposem d'uns selectors predefinits
Selector universal
- Sintaxi: *
- Selecciona totes les etiquetes del document
<?xml version=”1.0” encoding=”UTF-8” ?>
<classe>
<alumne>
<nom>Juanito<nom>
</alumne>
</classe>
* { color: #FF0000; }
Juanito
Selector DE tipus
- Sintaxi: etiqueta,etiqueta
- Selecciona les etiquetes del document a partir del seu nom
<?xml version=”1.0” encoding=”UTF-8” ?>
<classe>
<alumne>
<nom>Juanito<nom>
</alumne>
<professor>Andrés</professor>
</classe>
nom { color: #FF0000; }
professor { color: #0000FF; }
Juanito
Andrés
Selector DE tipus
- Amb aquest selector també podem especificar més d'un selector separant-los amb comes
nom, cognom { color: red; }
Selector DE FILLS
- Sintaxi: pare > fill
- Selecciona el 'fill' que son fills directes de la etiqueta 'pare'
<?xml version=”1.0” encoding=”UTF-8” ?>
<classe>
<professor>
<nom>Andrés</nom>
</professor>
<alumne>
<nom>Juanito</nom>
</alumne>
</classe>
alumne > nom { color: #FF0000; }
Juanito
Andrés
SELECTOR DE DESCENDENTS
- Sintaxi: etiqueta descen
- Selecciona les etiquetes 'descen' que siguin descendents d'etiqueta
<?xml version=”1.0” encoding=”UTF-8” ?>
<classe>
<professor>
<nom>Andrés</nom>
</professor>
<alumne>
<nom>Juanito</nom>
</alumne>
</classe>
classe nom { color: #FF0000; }
Juanito
Andrés
SELECTOR DE GERMANS ADJACENTS
- Sintaxi: +
- Selecciona la etiqueta germana que estigui just darrere de l'etiqueta especificada
<?xml version=”1.0” encoding=”UTF-8” ?>
<classe>
<professor>
<nom>Andrés</nom>
</professor>
<alumne>
<nom>Juanito</nom>
</alumne>
</classe>
delegat+nom { color: #FF0000; }
Pedrito
Juanito
<?xml version=”1.0” encoding=”UTF-8” ?>
<classe>
<alumne>
<delegat />
<nom>Juanito</nom>
</alumne>
<alumne>
<nom>Pedrito</nom>
</alumne>
</classe>
PSEUDO SELECTORS
També hi ha una sèrie de selectors especials anomenats pseudoselectors.
Alguns:
Pseudo-selector | Funció |
---|---|
:first-line | Selecciona la primera línia |
:first-letter | Selecciona la primera lletra |
:before | Selecció abans de l'etiqueta |
:after | Selecció després de l'etiqueta |
Selecció Del primer fill
- Sintaxi: etiqueta:first-child
- Selecciona sols el primer fill de l'etiqueta especificada
<?xml version="1.0" encoding="UTF-8" ?>
<classe>
<alumne>
<nom>Juanito</nom>
<nom>Jorgito</nom>
<nom>Jaimito</nom>
</alumne>
</classe>
alumne:first-child { color: #FF0000; }
Jorgito
Juanito
Jaimito
Selector per atribut “id”
- Sintaxi: etiqueta#id (etiqueta opcional)
- Selecciona l'etiqueta amb l'identificador especificat
<?xml version="1.0" encoding="UTF-8" ?>
<classe>
<alumne>
<nom id="gerent">Juanito</nom>
<nom>Jorgito</nom>
<nom>Jaimito</nom>
</alumne>
</classe>
#gerent { color: #FF0000; }
Jorgito
Juanito
Jaimito
Selector per classe
- Sintaxi: etiqueta.classe (etiqueta opcional)
- Selecciona totes les etiquetes que tinguin el mateix atribut "class"
<?xml version="1.0" encoding="UTF-8" ?>
<classe>
<alumne>
<nom class="delegat">Juanito</nom>
<nom>Jorgito</nom>
<nom class="delegat">Jaimito</nom>
</alumne>
</classe>
.vermell { color: #FF0000; }
Jorgito
Juanito
Jaimito
Selectors D'Atributs
- També podem seleccionar segons el contingut
dels atributs- Si existeix:
- Si té un valor específic:
-
Si conté el valor especificat
-
- Si existeix:
alumne[delegat] { color:#FF0000; }
alumne[delegat="true"] { color:#FF0000; }
alumne[assignatures]~=”XML” { color:#FF0000; }
Selectors D'Atributs
- Podem combinar el selector d'atributs perquè ens compari segons més d'un valor
- D'aquesta forma podem controlar més detalladament la presentació de les etiquetes que tenen atributs
- No hi ha cap problema per combinar diferents condicions
alumne[delegat][sexe=”home”] { color:#FF0000; }
alumne[delegat][sexe=”dona”] { color:#FFFF00; }
REGLES CSS
DISSENY
Model de Caixa
- Quan es visualitza qualsevol cosa amb CSS és tractada com si estes dins d'una caixa rectangular
- Cada caixa té quatre components
margin
padding
Contingut
border
Amplada / Altura
- Els atributs “width” i “height” permeten forçar la mida de la caixa
nom { width: 300px; height:100px; }
nom
300px
100px
Disseny
- Per defecte els valors de margin, padding i border estan a zero
- Podem canviar-ne els valors amb les propietats:
-
Margin
- margin, margin-left, margin-right, margin-top, margin-bottom
-
Padding
- padding, padding-left, padding-right, padding-top, padding-bottom
-
Margin
nom { margin: 3px; padding-left:4px; }
Border
- Amb el 'border' hi ha moltes més possibilitats:
- border-style: pot ser none, solid, dashet, dotted, double, groove, ridge, inset, outset
- border-width: especifiquem l'amplada. El més corrent és fer-ho amb pixels (10px)
- border-color: el color que tindrà. Pot ser amb el nom en anglès, amb la funció rgb() o en hexadecimal
- border: tot de cop especificant un rere l'altre amplada, estil i color
word { border-color:#000000; border-style:solid; }
word { border: solid #000000;}
REGLES CSS
PROPIETATS
PROPIETATS
- CSS defineix moltes propietats i a cada versió n'afegeixen més
- Podem veure un resum en les següents webs:
- Propietats estables:
- Propietats beta:
Unitats
En CSS podem fer servir molts tipus d'unitats. Sempre en funció del que necessitem
Longitud | Color |
---|---|
Pixels (px), ems (em), percentatge (%), punts (pt), polzades (in), centímetres (cm) | rgb(r,g,b), #rrggbb, #rgb |
width: 744px; margin-left: 1.25em; left:34%; margin-top:1.25in; margin-bottom:1.5cm; |
background-color:rgb(255,0,0); color:#FF2200; color:#f20; |
Propietats
- Les propietats poden ser agrupades en quatre grans grups:
- Propietats de tipus de lletres
- Propietats de color i fons de pantalla
- Propietats de text
- Propietats de caixes
tipus de lletres
font | Permet canviar tots els paràmetres de cop |
font-family | Permet especificar la font a fer servir i la seva família (serif, sans-serif, cursive, fantasy, monospace) P { font-family: "New Century Schoolbook", Times, serif } |
font-size | Podem marcar la mida del tipus de lletra que volem A { font-size: 12pt; } |
font-weight | Definim el pes del tipus de lletra B {font-weight:bold; } |
font-variant | Podem definir què es fa servir: normal o small-caps |
font-style | normal, italic, oblique |
Estan basades en la propietat 'font'
COLOR i FONS
color | Determina el color del contingut |
background-color | Defineix quin és el color de fons de la caixa |
background-image | Defineix una imatge de fons |
background-repeat | Defineix si la imatge de fons s'ha de repetir i com |
background-position | Defineix en quina posició s'ha de posar el fons |
background-attachment | Defineix si el fons segueix amb l'scroll del navegador o no |
D'entre les propietats de color i de fons en destaquen:
Propietats de text
word-spacing | Espaiat entre paraules |
letter-spacing | Espaiat entre lletres |
text-decoration | Decoració del text: subratllat, etc.. |
vertical-align | Alineació vertical |
text-transform | Modifica la forma com es mostra el text: majúscules, etc... |
text-align | Alineació del text: centrat, justificat, esquerra, ... |
line-height | Altura de la línia de text |
Permeten definir com es mostra el text: alineació, orientació, etc..
Propietats de caixa
margin | Espaiat entre caixes |
padding | Espaiat dins de la caixa |
border-width border-color border-style |
Defineixen les característiques de la línia que envolta la caixa |
width / height | Amplada i altura de la caixa |
float | Defineix la caixa com a flotant |
clear | Defineix si els elements permeten caixes flotants al seu costat |
visibility | Normalment es fa servir perquè una caixa no es vegi amb 'hidden'. Conserva l'espai |
Defineixen com es posicionarà la caixa
CSS
Posicionament
Flexbox
Grid Boostrap
- Documentació
- Exemple
CSS
By Carles Gonzalez
CSS
- 308