# Apunts CSS #### Font: https://hackmd.io/_t8opWecRk63vnguBpdRYA#Regles ##### María Teresa Castillo El HTML ens serveix per determinar el contingut de la pàgina web: - què apareix: text, imatges, video i enllaços. - components: formularis, taules. I el CSS són unes regles que permeten aplicar un estil als elements HTML. L'estil per: - donar disseny: color, tipus de lletra. - disposició a la pàgina: alineació vertical, alineació horitzontal, posició respecte als altres elements. - forma: contorn de l'element: gruix, color i estil d'aquest contorn. ## Regles Les regles es formen per un selector i un conjunt de propietats. Una regla és: ```css= selector {propietat:valor} ``` ### Selector #### Per id: ```htmlembedded= <p id="text"> lorem ipsum lorem </p> ``` Aquí seria #text per seleccionar aquest paràgraf. I una regla seria: #text{ color:blue; } Posa la lletra de color blau. #### Per nom element Es posa l'etiqueta dels element on volem aplicar l'estil. ```htmlembedded= <p id="text"> lorem ipsum lorem </p> <p id="peu"> lorem ipsum lorem </p> ``` Per exemple una regla: p{ font-size:20px; } Posaria la lletra de mida de 20 píxels als paràgrafs. ### Conjunt de propietats És una llista de parelles on s'indicar una propietat que per exemple poden ser: - color color d - width amplada de l'element en px - height alçada de l'element en px - font-family tipus de lletra exemple Arial - font-size mida del text en px - border si l'element té contorn en px. - border-color color del contorn Teniu un llistat i explicacions aquí [CSS Reference](https://www.w3schools.com/cssref/) Les regles es posen dins del tag head i amb el tag: ```htmlembedded= <style type="text/css"> Aquí totes les regles </style> ``` Exemple: ```htmlembedded= <html> <head> <style type="text/css"> #peu{ color:blue; } #text{ color:orange; } p{ font-size:20px } </style> </head> <body> <p id="text"> lorem ipsum lorem </p> <p id="peu"> lorem ipsum lorem </p> </body> </html> # ``` El primer paràgraf la lletra serà taronja i el segon blava. Ambdós tenen mida de 20 pixels de lletra. ## CSS i disposició dels elements a la pàgina El CSS té vàries propietats que permeten fixar la disposició dels elements a la pàgina. Cada element té una caixa que és el seu contorn i això és el que usarem. ## Visualització És la propietat que permet dir si un element es posarà ocupant una sola línia ell (fent salt de línia com el <br/>) o en la mateixa línia. La propietat és diu **display**. Dos valors: - **block** l'element ocupa ell només la línia - **inline** l'element ocupa la mateixa línia que el del costat - **none** l'element no es mostra. Invisible. ## Marges També podem dir-li a un element distàncies respecte als altres elements. Es defineixen en píxels i els marges a dalt, a sota, dreta i esquerra amb altres elements. - **margin-top** - **margin-right** - **margin-bottom** - **margin-left** ## Padding És el marge del contingut d'un element respecte a la caixa que el conté. També es pot fixar per dalt, sota, dreta i esquerra. També es fixa per costats: - **padding-top** - **padding-right** - **padding-bottom** - **padding-left** Mireu imatge aclaridora sobre tots aquests marges: ![](https://i.imgur.com/sQ6b61e.png) [Enllaç a més explicacions](https://www.w3schools.com/css/css_boxmodel.asp) ## Selector jeràrquic És aquell selector que ens permet seleccionar per element (nom del *tag*) però estiguin ordenats de certa manera. Per exemple el selector **li** selecciona a tots els li de la pàgina web. Però si podem el selector **ol li** només selecciona els li d'una lista ordenada. ```htmlembedded= <html> <head> <style type="text/css"> p{ color:orange; } div p{ font-size:30px; } </style> </head> <body> <p id="peu"> lorem ipsum lorem </p> <div> <p id="text"> lorem ipsum lorem </p> </div> </body> </html> ``` La primera regla farà que tots els paràgrafs tinguin el color de la lletra taronja i en canvila segona regla només afecta al segon paràgraf. ## Selector condicional El selector només s'aplica els elements que tenen un atribut que compleixi una característica. La sintaxis és nomelement[nomatribut="valor"] per exemple només vull posar un estil per a una label concreta seria. **label[for="nom"]**. Vegeu un exemple: Exemple: ```htmlembedded= <html> <head> <style type="text/css"> p[id="text1"]{ color:orange; } p[id="text2"]{ font-size:30px; } </style> </head> <body> <p id="text1"> lorem ipsum lorem </p> <p id="text2"> lorem ipsum lorem </p> </body> </html> # ``` El primer paràgraf tindra lletra color taronja i el segon només la mida de la lletra a 30 pixels.