Embedded Files
Què és CSS?
Què és CSS?
CSS són les sigles de Cascading Style Sheets (Fulles d’estil en cascada). CSS descriu com els elements HTML es mostraran en la pantalla. Pot controlar les capes de múltiples pàgines web a la vegada. El llenguatge CSS es pot afegir a una pàgina web de 3 maneres diferents:
1. En linia: utilitzant l’atribut style en les etiquetes HTML
2. Internament: utilitzant l’etiqueta <style> i </style> dins de l’etiqueta <head>
3. Externament: utilitzant un fitxer CSS a banda
Per utilitzar un fitxer a banda, hem d’ubicar un fitxer anomenat amb l’extensió css, per exemple estils.css i indicar-li al fitxer HTML dins de l’etiqueta <head>:
<link rel="stylesheet" type="text/css" href="estils.css">
El mes comú és utilitzar el fitxer CSS separat de l’HTML però ara treballarem amb la segon opció.
A banda d’aquestos 3 modes d’aplicació d’estils CSS tenim molts modes de com aplicar-los als elements, però només anem a veure’n 3: mode identificador, mode d’etiqueta i mode classe.
mode identificador
mode identificador
El mode identificador s’utilitza per modificar un únic element de la nostra pàgina web, consisteix a afegir un identificador (com un DNI) a aquest element, i que no es pot repetir en els altres elements. Per fer això afegirem l’atribut id i com a valor afegirem l’identificador que nosaltres triem. Per exemple, anem a modificar un element h1 de manera individual:
<h1 id="titol_index">Índex</h1>
Després en l’apartat <style> de la capçalera, hem de dir-li que aquest identificador tinga diferents estils, com el color de lletra i el color de fons. Per això utilitzem el símbol # abans de l’identificador que haviem afegit a l’element HTML:
#titol_index {
color: #f4e1d2;
background-color: #50394c;
}
mode ETIQUETA
mode ETIQUETA
Ara, imagina que vols modificar tots els títols amb el mateix color i color de fons i tens 10 títols. Hauràs de repetir l’anterior 10 vegades i si vols canviar el color en un futur, hauràs de fer 10 canvis. Com comprovaràs, no és eficient.
Per millorar-ho, una manera és aplicant directament els estils a un tipus d’etiqueta en concret, per exemple, per a tots els h1. Per fer això, en els estils, a l’igual que l’anterior exemple afegirem amb el nom de l’etiqueta, en aquest cas, h1 i sense ningún símbol que el precedisca.
h1 {
color: #f4e1d2;
background-color: #50394c;
}
D’aquesta manera, cada vegada que afegim un h1 en la nostra pàgina web, adoptarà els estils CSS que ja haviem definit.
mode classe
mode classe
Ara, imaginem que volem aplicar tres estils diferents, un d’ells és utilitzant el color de lletra i color de fons anterior, un altre estil que siga a l’inversa, i un altre estil per marcar paraules com importants. Aquestos estils els aplicarem a molts elements diferents que trobem en la nostra pàgina web, per exemple, a un <p>, a un <td> i a un <button>. Per fer això s’han de crear les classes i afegir les classes als elements que la van a utilitzar.
En primer lloc creem les classes CSS utilitzant un . i el nom de la classe que nosaltres volgam:
.format_base {
color: #f4e1d2;
background-color: #50394c;
}
.format_invers {
color: #50394c;
background-color: #f4e1d2;
}
.important {
font-weight: bold;
}
Després d’haver definit les classes, hem de dir-li als elements quines classes han de tindre a través de l’atribut class i en el valor posarem el nom de la classe:
<h1 class="format_base">Índex</h1>
<h2 class="format_invers">1. Text d'exemple 1</h2>
<span class="format_base important">
Si et fixes en l’últim element li hem afegit dos tipus de classes, la de format base i la d’important, com veus van dins de l’etiqueta class però separades amb un espai.
Estils
Estils
Color de la lletra
Color de la lletra
color: red
color: blue
color: #ff0000
Color de fons
Color de fons
background-color: red
background-color: #ff0000
Amplada
Amplada
width: 100%
width: 40%
width: 200px
width: max-content
(max-content, si és un text, agafarà tota l’amplada)
Altura
Altura
height: 100%
height: 40%
height: 200px
Alinear text
Alinear text
text-align: center
text-align: left
text-align: right
Tamany de la lletra
Tamany de la lletra
font-size: 20px
font-size: 200%
Font de la lletra
Font de la lletra
font-family: verdana
font-family: "Times New Roman"
font-family: Arial
font-family: Helvetica
Negreta
Negreta
font-weight: bold
Cursiva
Cursiva
font-style: italic
Marge
Marge
margin: 10px 5px 4px 3px (dalt, dreta, baix, esquerra)
margin: 10px 20px (dalt i baix, esquerra i dreta)
margin: 10px (dalt, baix, dreta i esquerra)
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin: 0 auto (dalt i baix 0 i esquerra i dreta automàtic)
Encoixament (relleno)
Encoixament (relleno)
padding: 10px 5px 4px 3px (dalt, dreta, baix, esquerra)
padding: 10px 20px (dalt i baix, esquerra i dreta)
padding: 10px (dalt, baix, dreta i esquerra)
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
Vora
Vora
border: 1px solid black
border: 3px dashed red
Icones
Icones
Llevar subratllat als enllaços
Llevar subratllat als enllaços
text-decoration: none
float: left
float: right
float: none
clear: both
Mostrar (display)
Mostrar (display)
display: none (no mostrar)
display: block (mostrar i que ocupe tota l’amplada → com <p>)
display: inline (mostrar i que ocupe només el que ocupa → com <span>)
position:static
position:relative
position:fixed
position:absolute
position:sticky
Page updated
Google Sites
Report abuse