Difference between revisions of "CSS"
| Line 29: | Line 29: | ||
*La '''declaració''': estableix quins formats s'apliquen sobre la selecció feta | *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 | **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. | Com es pot veure, una declaració es pot aprofitar per a diversos selectors separant-los per comes. | ||
Revision as of 16:37, 22 February 2024
Contents
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:
<link rel="stylesheet" type="text/css" href="estil.css"/>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
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:
| 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:
<!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>Està estructurat com indicar el següent arbre: 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 Link
Estils de text
| Propietat | Valors típics |
|---|---|
| color: | Color |
| font-family: | Família de fonts |
| font-size: | Mida |
| font-style: | italic |
| font-weight | bold |
| line-height: | Mida |
| text-align: | right | center | justify |
| text-decoration: | underline | overline | line-through |
| text-transform | 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
- Fitxer:ImatgeCSS3.png
Pàgina HTML sense CSS
- Fitxer:ImatgeCSS2.png
Pàgina HMTL aplicant el CSS inferior
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;
}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
- Colors en CSS
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:
| 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
| Propietat | Valors típics |
|---|---|
| list-style-type: | 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: | outside |
| list-style: | Permet establir tipus, posició i/o imatge en una única declaració |
Exemple de CSS aplicat a llistes
- Fitxer:ImatgeCSS6.png
Pàgina HTML sense CSS
- Fitxer:ImatgeCSS5.png
Pàgina HMTL aplicant el CSS inferior
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;
}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.
| 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
<!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>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; }
