CSS Flashcards
(19 cards)
Què és el CSS?
CSS és un llenguatge de fulls d’estil que permet definir l’aparença i la presentació d’un document HTML. La seva funció principal és separar el contingut (HTML) de la seva presentació, facilitant el manteniment i la flexibilitat en el disseny web. CSS utilitza un esquema de regles prioritzades per determinar quin estil s’aplica en cas de conflictes. Per defecte, la darrera regla definida té preferència sobre les anteriors.
Com s’aplica el CSS?
3 regles
Hi ha tres formes principals d’incorporar CSS en una pàgina web:
Regles inline: Es defineixen directament dins d’una etiqueta HTML mitjançant l’atribut style. Aquest mètode només afecta l’etiqueta específica on s’ha aplicat, però no és recomanable perquè dificulta la separació entre contingut i estil.
Regles internes: Es defineixen dins d’una etiqueta <style> al <head> del document HTML. Afecten tot el document, però continuen mantenint l’estil i el contingut en el mateix fitxer.</style>
Regles externes: Es defineixen en un fitxer CSS separat, que es vincula a l’HTML amb <link></link>. Aquest és el mètode més recomanat perquè permet una millor organització del codi i facilita la reutilització d’estils.
SELECTORS, PROPIETATS I VALORS
que es un selector
que es una propietat
exemple
En CSS es defineix una llista d’instruccions en format “selector:propietats
selector— indica a quina o quines etiquetes afecta la instrucció i la llista de propietats conté les
regles d’estil que s’han d’aplicar a aquelles etiquetes
propietat —segueix el format “clau:valor”, on la clau és el nom de la propietat i valor és l’estil que s’ha d’aplicar
selector:{
clau1:”estil2”;
clau2:”estil2”;
clau 3:”estil3”;
}
TIPUS DE SELECTORS
un selector pot contenir:
Un selector pot contenir:
* El nom d’una etiqueta (afecta a totes les etiquetes d’aquell tipus)
body{
back-ground color:#fdfbd1;
}
* Un identificador (afecta a l’etiqueta HTML que tingui aquell ID)
#page-container{
max-width:1200px;
}
- Una classe (afecta a totes les etiquetes HTML amb aquella classe)
text-vermell{
color:red;
} - Qualsevol combinació dels tres tipus les anteriors
#seccio-contacte form {width:100%;
max-width:600px;
}
TIPUS DE VALORS
que es una clau
Cada propietat s’escriu mitjançant una clau, que son paraules reservades del llenguatge CSS que cal saber, i el valor que conté
Els valors de les propietats poden ser de diferents tipus:
Colors
Mides
URLs
Cadenes de text
COLORS
Algunes propietats CSS serveixen per definir el color d’algun component, com perd definir el color del text (color: red) o per definir un color de fons (background-color: red)
El valor d’un color pot ser principalment:
Un nom de color:
color: red
* RGB en format decimal:
color: rgb(255, 0, 0)
* RGB en format hexadecimal
color: #ff0000
NOM DE COLORS
Tot i que es poden fer servir aquests noms de color, és
preferible utilitzar valors exactes de color en format RGB
per evitar possibles diferències d’interpretació per part
del navegador. El blanc i el negre serien una excepció
EXEMPLE AMB NOMS DE COLORS
h1{
color:yellow;
background-color:blue;
}
RGB EN FORMAT DECIMAL
RGB
R (red), G (green) i B (blue)
* En RGB cada component pot prendre un valor entre 0 i 255, on 0 és el valor més baix (absència de color) i 255 és el valor més alt (màxima saturació)
* En CSS podem definir els colors en aquest format així:color: rgb(255, 0, 0)
RGB EN HEXADECIMAL
Hexadecimal
és un sistema de numeració en base 16, que
vol dir que tenim 16 números per comptar:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
En CSS definim els colors en format RGB hexadecimal
mitjançant el símbol #:
color: #ff0000
255 de vermell, 0 de verd i 0 de blau
EXEMPLE AMB COLORS EN CASCADA
body{
font-size:14px;
color:navy;
}
h1{
color:#ffc;
background-color:#009;
}
MIDES
Aquestes son les més habituals:
* px: Píxels (font-size: 12px)
* %: Percentatge (width: 80%)
* em: Mida de la font. Així per exemple, 2em significa 2
vegades la mida de la font actual (margin: 2em)
* pt: Mida del punt d’impressió (font-size: 12pt)
* Quan un valor és 0 no cal especificar la seva unitat
MARGES
La propietat “margin” defineix la distància externa, és a dir, la distància entre l’etiqueta i el que queda a fora
* La propietat “padding”, en canvi, defineix la distància interna, és a dir, la distància entre l’etiqueta i el seu contingut
EXEMPLE DE MARGES
h1{
font-size:1.5em;
background-color:#ccc;
margin:20px;
padding:40px;
}
MARGES ESPECÍFICS
Per aplicar el marge només en un costat i poder aplicar
marges diferents per a cada costat es poden definir les
propietats:
* margin-left, margin-right, margin-top, margin-bottom
* padding-left, padding-right, padding-top, padding-bottom
TEXT
Les propietats principals per manipular el text en CSS son:
* font-family: Tipus de font
* font-size: Mida de la font
* font-weight: Pes de la font (de fina a negreta)
* font-style: Normal o cursiva
* text-decoration: Línia decorativa (subratllat)
* text-transform: Conversió a majúscules o minúscules
* line-height: Separació entre línies
* text-align: Alineació del text
CONTORNS
A la majoria d’elements HTML se’ls pot definir un contorn
mitjançant les següents propietats:
* boder-width: Amplada del contorn (border-width: 2px)
* border-style: Tipus de contorn (border-style: solid)
* border-color: Color del contorn (border-color: red)
També podem definir-les totes de cop amb la propietat
“border”, que inclou els valors de les 3 propietats
anteriors separats per espais en blanc:
border: 2px solid red;
