CSS - Revision history

Jaume: /* Exemple de CSS aplicat a llistes */

2024-02-27T19:44:09Z

‎Exemple de CSS aplicat a llistes

Jaume: /* Exemple estils de text */

2024-02-27T19:17:36Z

‎Exemple estils de text

Jaume at 15:37, 22 February 2024

2024-02-22T15:37:36Z

Jaume at 15:37, 22 February 2024

2024-02-22T15:37:20Z

Jaume at 15:36, 22 February 2024

2024-02-22T15:36:20Z

Jaume at 08:09, 22 February 2024

2024-02-22T08:09:57Z

Jaume: Protected "CSS" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite))

2024-02-22T07:58:57Z

Protected "CSS" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite))

83.43.21.66: Created page with "=El llenguatge CSS= CSS és un llenguatge que permet descriure la '''presentació gràfica''' de les pàgines web CSS aporta una sèrie de beneficis als llocs web: *'''Menys..."

2024-02-22T07:48:11Z

Created page with "=El llenguatge CSS= CSS és un llenguatge que permet descriure la '''presentació gràfica''' de les pàgines web CSS aporta una sèrie de beneficis als llocs web: *'''Menys..."

New page

=El llenguatge CSS=
CSS és un llenguatge que permet descriure la '''presentació gràfica''' de les pàgines web

CSS aporta una sèrie de beneficis als llocs web:
*'''Menys càrrega:''' s'acostuma a disposar d'un (o varis) fulls associats a totes les pàgines d'un lloc web. Un cop s'han descarregar no es tornes a descarregar.
*'''Menys esforç de modificació''', ja que els estils centralitzars permeten no haver d'anar pàgina a pàgina a realitzar canvis.
*'''Menys esforç per als cercadors''', que poden indexar el contingut ràpidament, sense haver de perdre el temps en estils
*'''Més rapidesa de desenvolupament''', ja que no s'han de repetir els mateixos fragments de codi diverses vegades.
*'''Més accessibilitat''' per als lectors de pantalla, que poden formatar de manera personalitzada les pàgines HTML

==HTML + CSS==
Per a associar un full d'estils a una pàgina web cal incloure el següent fragment de codi:
<source language="html">
<link rel="stylesheet" type="text/css" href="estil.css"/>
</source>
dins de la secció '''<head>''' d'una pàgina.

Es poden associar tants fulls d'estil com es vulgui.

Existeixen dues maneres més d'assignar estils a les pàgines HTML.
* Elements '''<style>'''
* Atribut '''style=""'''

==Arquitectura d'un full d'estils ==
Els fulls d'estils CSS estan constituïts per diverses regles que defineixen com es mostren els elements que especifiquen.

Cada regla té dues parts:
*El '''selector''': determina sobre '''quins''' elements de la pàgina s'aplica l'estil
*La '''declaració''': estableix quins formats s'apliquen sobre la selecció feta
**Cada declaració indica un '''valor''' per a cadascuna de les '''propietats''' de l'element
[[Fitxer:ImatgeCSS1.png|center]]
Com es pot veure, una declaració es pot aprofitar per a diversos selectors separant-los per comes.

==Selectors bàsics de CSS ==
Els selectors CSS més utilitzats són:
{| class="wikitable"
!|Notació
!|Ús
!|Exemple
|-
|*
|Selecciona tots els elements de l'àmbit
|*{...}
|-
|
|Selecciona per tipus d'element
|p, h3{...}
|-
|.
|Selecciona els elements d'una classe concreta
|.titular{...}
|-
|#
|Selecciona l'element que té l'id indicat
|#capsalera{...}
|-
|(espai)
|Selecciona els elements dins de l'arbre HTML
|div span{...}
|-
|>
|Selecciona els elements justament per sota d'un altre element
|div > span{...}
|}
Podem combinar selectors de diversos tipus: '''cal imaginar l'HTML com un arbre i navegar-lo.

Per exemple, el següent codi:
<source language="html>
<!doctype html>
<html>
<head>
<title>My home page</title>
</head>
<body>
<h1>My home page</h1>
<p>Hello, I am Marijn and this is my home page.</p>
<p>I also wrote a book! Read it
<a href="http://eloquentjavascript.net">here</a>.</p>
</body>
</html>
</source>
Està estructurat com indicar el següent arbre:
[[Fitxer:Html-tree.jpg|thumb|center]]
== Declaració d'estils ==
Els selectors que hem vist fins ara no tindrien cap sentit sense una sèrie de propietats que podem modificar.
Aquestes propietats són molt extenses i no és a l'abast d'aquest mòdul estudiar-los tots. En el següent link, podem trobar el llistat de propietats de CSS [http://www.w3.org/TR/CSS Link]
===Estils de text===
{| class="wikitable"
|-
!| Propietat
!| Valors típics
|-
|'''color:'''
|''Color''
|-
|'''font-family:'''
|Família de fonts
|-
|'''font-size:'''
|''Mida''
|-
|'''font-style:'''
|''normal'' | italic
|-
|'''font-weight'''
|''normal'' | bold
|-
|'''line-height:'''
|''Mida''
|-
|'''text-align:'''
|''left'' | right | center | justify
|-
|'''text-decoration:'''
|''none'' | underline | overline | line-through
|-
|'''text-transform'''
|''none'' | uppercase | lowercase
|-
|'''font'''
|Permet establir ''font-style'' - ''font-variant'' - ''font-weight'' - ''font-size/line-height'' - ''font-family'', en una única declaració
|}
===Exemple estils de text ===

<gallery mode=traditional widths=400px heights=300px>
Fitxer:ImatgeCSS3.png|Pàgina HTML sense CSS
Fitxer:ImatgeCSS2.png|Pàgina HMTL aplicant el CSS inferior
</gallery>

<source language="css">
body {
background-color: #f8f8f8;
font-family: "Lucida Grande", Tahoma, Arial, sans-serif;
font-size:12px;
}

h1, h2 {
border-bottom:1px solid #ccc;
}

div#capsalera h1 {
font: italic bold 50px Georgia, "Times New Roman", serif;
text-align: center;
text-transform: uppercase;
}

span.dolly, a {
color:#7fa3fc;
font-weight: bold;
}

a {
text-decoration:none;
}

div#peu {
text-align:right;
margin-top:40px;
border-top:1px dotted #ccc;
}
</source>
==Colors en CSS==
Les tres maneres més típiques d'indicar colors en CSS són:
*'''En format hexadecimal:#RRGGBB'''.Cada posició representa una xifra de 0 a la F(15) que indica la quantitat d'aquell color.
*'''En format RGB:rgb(r,g,b)'''En cada espai del parèntesi s'indica la quantitat de color del 0 al 255
**Com a derivat d'aquest existeix el format '''format RGBA''', amb un valor de transparència del 0 a l'1 en l'última posició: '''rgb(r,g,b,a)'''
*'''Nom de color''':es proporciona una llista de 147 colors predeterminats que es poden utilitzar directament.
**black, blue, white, red, green, yellow, magenta
**[http://en.wikipedia.org/wiki/Web_colors Colors en CSS]
[[Fitxer:ImatgeCSS4.png|center]]
Els llocs més típics on acostumem a aplicar colors són:
*'''Tipografies''': mitjançant la propietat ''color''
*'''Fons''': mitjançant la propietat ''background-color'' assignen colors de fons a qualsevol tipus d'element
*'''Vores''':''border-color'',''border-left-color'',...

==Unitats de mida==
Les mides es poden indicar en les següents unitats:
{| class="wikitable"
|-
!| Propietat
!| Notació
!| Exemple
|-
|Píxels
|Notació
|Exemple
|-
|Píxels
|'''px'''
|font-size:12px
|-
|Emes(l'equivalent a l'amplada de la lletra m)
|'''em'''
|font-size:1.2em
|-
|Percentatge
|'''%'''
|font-size:120%
|}
Les mides en emes o percentatges són relatives a l'element pare de l'element al qual se li hagi donat estil
*El que s'acostuma a fer és definir la mida del '''body''' i la resta en forma relativa
*El cas que no s'indiqui res al '''body''', s'agafa la mida per defecte del navegador, que acostuma a ser de '''16px''' si no ha estat canviada per l'usuari
==Estils sobre llistats==
{| class="wikitable"
|-
!| Propietat
!| Valors típics
|-
|'''list-style-type:'''
|''none | circle | disc | square | armenian | decimal | decimal-leading-zero | georgian | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman | inherit''
|-
|'''list-style-position:'''
|''inside | outside''
|-
|'''list-style:'''
|Permet establir tipus, posició i/o imatge en una única declaració
|}

===Exemple de CSS aplicat a llistes===
<gallery mode=traditional widths=400px heights=300px>
Fitxer:ImatgeCSS6.png|Pàgina HTML sense CSS
Fitxer:ImatgeCSS5.png|Pàgina HMTL aplicant el CSS inferior
</gallery>

<source language="css">
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 14px;
color: rgb(50,50,50);
}

h1 {
font: 2em Georgia, "Times New Roman", serif;
letter-spacing: -.5px;
color:#576673;
text-align: center;
}

h2 {
font: 1.4em Georgia, "Times New Roman", serif;
text-transform: uppercase;
color:#687c8e;
border-bottom: 1px dotted #ccc;
}

ul {
list-style-type: circle;
}

ol {
list-style-type: decimal-leading-zero;
}

ol ol {
list-style-type: lower-roman;
}

li em {
color: #ccc;
}

li strong {
color: #6a8ea4;
text-decoration: underline;
}
</source>
==Precedència de regles==
Quan dues declaracions es contradiuen sobre un mateix element, s'apliquen dues normes:
*Primer s'aplica la regla més local
*Si són igual de locals, s'aplica la regla amb la puntuació més alta.
{| class="wikitable"
|-
!| per cada selector...
!| sumem ... punts
|-
|Etiqueta
|1
|-
|Classe(.)
|10
|-
|Id(#)
|100
|-
|Resta
|0
|}
'''Sempre s'aplica aquella regla més específica'''.Si hi ha empat s'aplicarà aquella que aparegui més tard.
===Exemple de precedència de regles===
<source language="html">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Herencia</title>
<style type="text/css">
#caja header h1 { color: blue; }
#caja .cabecera h1 { color: red; }
header h1 { color: lime; }
h1 { color:purple; }
</style>
</head><
<body>
<div id="caja">
<header class="cabecera">
<h1>Cabecera: header</h1>
</header>
</div>
</body>
</html>
</source>
Com podeu observar en el codi anterior, existeixen quatre regles CSS que fan referència al mateix element, concretament a l'encapçalament h1 del codi HMTL.
Per saber quina de les regles s'aplicarà, caldrà calcular el pes de cada una d'elles:
*'''#caja header h1 { color: blue; }'''
La puntuació d'aquesta regla és de 102: 100 per la referència a la classe ''caja'', 1 per la referència a ''header'' i 1 per la referència a ''h1''
*'''#caja .cabecera h1 { color: red; }'''
La puntuació d'aquesta regla és de 111 per la referència a la classe ''caja'', 10 per la referència a la classe ''cabecera'' i 1 per la referència a ''h1''
*'''header h1 { color: lime; }'''
La puntuació d'aquesta regla és de 2, 1 per la referència a ''header'' i 1 per la referència a ''h1''
*'''h1 { color:purple; }'''
La puntuació d'aquesta regla és de 1 per la referència a ''h1''
Per tant, la regla que s'aplicarà en aquest cas és '''#caja .cabecera h1 { color: red; }'''

==Bibliografia==
José Luís Antúnez, Apunts SMX2-M8

← Older revision		Revision as of 08:09, 22 February 2024
Line 321:		Line 321:
	La puntuació d'aquesta regla és de 1 per la referència a ''h1''		La puntuació d'aquesta regla és de 1 per la referència a ''h1''
	Per tant, la regla que s'aplicarà en aquest cas és '''#caja .cabecera h1 { color: red; }'''		Per tant, la regla que s'aplicarà en aquest cas és '''#caja .cabecera h1 { color: red; }'''
−
−	~~==Bibliografia==~~
−	~~José Luís Antúnez, Apunts SMX2-M8~~

@@ Line 220: / Line 220: @@
 ===Exemple de CSS aplicat a llistes===
 <gallery mode=traditional widths=400px heights=300px>
-Fitxer:ImatgeCSS6.png|Pàgina HTML sense CSS
+File:ImatgeCSS6.png|Pàgina HTML sense CSS
-Fitxer:ImatgeCSS5.png|Pàgina HMTL aplicant el CSS inferior
+File:ImatgeCSS5.png|Pàgina HMTL aplicant el CSS inferior
 </gallery>
@@ Line 266: / Line 266: @@
+}
 </source>
 ==Precedència de regles==
 Quan dues declaracions es contradiuen sobre un mateix element, s'apliquen dues normes:

@@ Line 124: / Line 124: @@
 <gallery mode=traditional widths=400px heights=300px>
-Fitxer:ImatgeCSS3.png|Pàgina HTML sense CSS
+File:ImatgeCSS3.png|Pàgina HTML sense CSS
-Fitxer:ImatgeCSS2.png|Pàgina HMTL aplicant el CSS inferior
+File:ImatgeCSS2.png|Pàgina HMTL aplicant el CSS inferior
 </gallery>
@@ Line 160: / Line 160: @@
+}
 </source>
 ==Colors en CSS==
 Les tres maneres més típiques d'indicar colors en CSS són:

@@ Line 29: / Line 29: @@
 *La '''declaració''': estableix quins formats s'apliquen sobre la selecció feta
 **Cada declaració indica un '''valor''' per a cadascuna de les '''propietats''' de l'element
-[[File:ImatgeCSS1.png]]
+[[File:ImatgeCSS1.png|center]]
 Com es pot veure, una declaració es pot aprofitar per a diversos selectors separant-los per comes.

← Older revision	Revision as of 07:58, 22 February 2024
(No difference)