Introducció a CSS

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to Lesson

Podcast

Play an AI-generated podcast conversation about this lesson
Download our mobile app to listen on the go
Get App

Questions and Answers

Quin és el principal propòsit de CSS en el desenvolupament web?

  • Controlar la presentació i l'estil visual d'un document HTML (correct)
  • Gestionar la lògica del servidor
  • Definir l'estructura del document HTML
  • Executar animacions complexes al navegador

Quina de les següents opcions descriu millor com CSS facilita la separació de contingut i presentació en el desenvolupament web?

  • CSS controla l'aspecte visual, mentre que HTML defineix l'estructura i el contingut. (correct)
  • CSS permet incrustar codi JavaScript directament en elements HTML.
  • CSS compila el codi HTML en llenguatge màquina per a una execució més ràpida.
  • CSS s'encarrega de la lògica del servidor, mentre que HTML gestiona la interacció amb l'usuari.

Com gestiona CSS els conflictes quan múltiples regles d'estil s'apliquen al mateix element?

  • CSS segueix un esquema de prioritat on l'última regla definida generalment preval, sobrescrivint les anteriors. (correct)
  • CSS soluciona els conflictes aleatòriament.
  • CSS aplica totes les regles per igual, combinant els efectes.
  • CSS ignora les regles conflictives i utilitza l'estil per defecte del navegador.

Quina és la funció principal dels selectors en CSS?

<p>Especificar a quins elements HTML s'aplicaran les regles d'estil. (A)</p> Signup and view all the answers

Si un element HTML té tant un estil definit mitjançant una regla inline com un altre definit en una fulla d'estil externa, quin estil s'aplicarà?

<p>S'aplicarà l'estil inline, ja que té prioritat sobre els estils definits externament. (D)</p> Signup and view all the answers

En quin ordre de prioritat s'apliquen els estils CSS, de menor a major prioritat?

<p>Extern, Intern, Inline (A)</p> Signup and view all the answers

Què implica l'ús de regles CSS externes i com millora el manteniment del codi?

<p>Implica definir estils en un fitxer CSS separat, permetent canvis centralitzats i consistents. (A)</p> Signup and view all the answers

Quina és la sintaxi correcta per definir un comentari en CSS?

<p>/* Això és un comentari */ (C)</p> Signup and view all the answers

Com s'estructura una regla CSS bàsica per aplicar un estil a un element HTML?

<p>element {propietat: valor;} (C)</p> Signup and view all the answers

Quina és la diferència principal entre un selector d'ID i un selector de classe a CSS?

<p>Els selectors d'ID són més específics i tenen prioritat sobre els de classe. (B)</p> Signup and view all the answers

Quin dels següents selectors CSS és utilitzat per seleccionar un element amb un ID específic?

<h1>(C)</h1> Signup and view all the answers

Com pots aplicar un mateix estil a múltiples elements HTML utilitzant CSS?

<p>Utilitzant selectors de classe i assignant la mateixa classe a tots els elements. (A)</p> Signup and view all the answers

Quins tipus de valors poden ser utilitzats per definir el color d'un text en CSS?

<p>Nom de color predefinit, valors RGB decimals, valors RGB hexadecimals. (C)</p> Signup and view all the answers

Com es defineix el color de fons d'un element HTML utilitzant CSS?

<p>background-color: nom_color; (A)</p> Signup and view all the answers

Si volem definir un color utilitzant el format RGB, quin rang de valors és permès per a cada component (Vermell, Verd, Blau)?

<p>0 a 255 (A)</p> Signup and view all the answers

Quin format s'utiliza per representar el color vermell en hexadecimal en CSS?

<p>#FF0000 (D)</p> Signup and view all the answers

Quina unitat de mesura en CSS és relativa a la mida de la font actual de l'element?

<p>em (A)</p> Signup and view all the answers

Quina és la funció de la propietat margin en CSS?

<p>Defineix l'espai al voltant de l'element, fora de la seva vora. (D)</p> Signup and view all the answers

Com es pot aplicar un marge diferent a cada costat d'un element utilitzant CSS?

<p>Utilitzar les propietats <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code> i <code>margin-left</code> individualment. (C)</p> Signup and view all the answers

Quina és la diferència entre les propietats margin i padding en CSS?

<p><code>margin</code> defineix l'espai extern a un element, mentre que <code>padding</code> defineix l'espai intern. (C)</p> Signup and view all the answers

Quina propietat CSS s'utilitza per canviar el tipus de lletra d'un text?

<p>font-family (D)</p> Signup and view all the answers

Quina propietat s'utilitza per definir l'alineació horitzontal del text dins d'un element?

<p>text-align (C)</p> Signup and view all the answers

Quina propietat CSS permet canviar el text a majúscules o minúscules?

<p>text-transform (A)</p> Signup and view all the answers

Quines propietats CSS són utilitzades per definir el contorn d'un element?

<p>border-style, border-width, border-color (C)</p> Signup and view all the answers

Si voleu definir un contorn d'1 píxel, sòlid i de color negre, quina seria la sintaxi correcta?

<p>border: 1px solid black; (C)</p> Signup and view all the answers

Quina propietat CSS controla la separació vertical entre línies de text?

<p>line-height (A)</p> Signup and view all the answers

Flashcards

Què és CSS?

CSS (Cascading Style Sheets) és un llenguatge de fulls d'estil que descriu la presentació d'un document HTML.

Què són regles inline?

Les regles inline defineixen estils directament en elements HTML usant l'atribut 'style'.

Què són regles internes?

Les regles internes defineixen estils dins d'una secció <style> en el mateix document HTML, normalment dins de .

Què són regles externes?

Les regles externes defineixen estils en fitxers CSS separats, que s'enllacen al document HTML.

Signup and view all the flashcards

Selectors i propietats en CSS

Un selector indica a quins elements HTML s'aplicarà l'estil. Les propietats defineixen les regles d'estil.

Signup and view all the flashcards

Selectors per nom d'etiqueta

Els selectors per nom d'etiqueta afecten totes les etiquetes d'aquell tipus (ex: body { ... }).

Signup and view all the flashcards

Selectors per ID

Els selectors per identificador afecten l'element HTML que té un ID específic (ex: #page-container { ... }).

Signup and view all the flashcards

Selectors per classe

Els selectors per classe afecten tots els elements HTML amb la classe especificada (ex: .text-vermell { ... }).

Signup and view all the flashcards

Propietats de color en CSS

Les propietats de color defineixen el color del text i el color de fons d'un element.

Signup and view all the flashcards

Formats de color en CSS

Un color es pot definir per nom (ex: red), en format RGB decimal (ex: rgb(255, 0, 0)), o en format hexadecimal (ex: #ff0000).

Signup and view all the flashcards

Què és RGB?

RGB és un format de color que utilitza tres components: vermell, verd i blau.

Signup and view all the flashcards

Què és hexadecimal?

El format hexadecimal és un sistema de numeració en base 16 que utilitza els números del 0 al 9 i les lletres de la A a la F.

Signup and view all the flashcards

Unitats de mida en CSS

Les propietats CSS defineixen les mides mitjançant unitats com píxels (px), percentatges (%), em, i punts (pt).

Signup and view all the flashcards

Margin vs. Padding

La propietat margin defineix la distància entre l'etiqueta i els elements que l'envolten. La propietat padding defineix la distància entre el contingut i la vora de l'etiqueta.

Signup and view all the flashcards

Marges específics

Podeu definir marges i 'paddings' específics per a cada costat d'un element: margin-top, margin-right, margin-bottom, margin-left padding-top, padding-right, padding-bottom, padding-left

Signup and view all the flashcards

Propietats text

Propietats per manipular el text: font-family: Tipus de font font-size: Mida de la font font-weight: Pes de la font 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

Signup and view all the flashcards

Propietats de contorn en CSS

Les propietats border-width, border-style, i border-color defineixen l'amplada, l'estil i el color del contorn d'un element.

Signup and view all the flashcards

Contorn abreujat

Podeu definir totes les propietats de marc amb una sola línia: border: 2px solid red;

Signup and view all the flashcards

Study Notes

Què és el CSS?

  • CSS (Cascading Style Sheets) és un llenguatge de fulls d'estil utilitzat per descriure la presentació d'un document HTML.
  • CSS facilita separar el contingut (HTML) i la presentació.
  • CSS defineix regles amb prioritat per determinar quins estils s'apliquen quan hi ha vàries regles per a un element.
  • L'última regla definida té preferència i sobreescriu les anteriors, llevat que s'indiqui el contrari.

Com s'aplica el CSS?

  • Hi ha tres maneres d'aplicar CSS a un document HTML: regles inline, internes i externes.
  • Les regles inline defineixen els estils directament sobre l'etiqueta HTML.
  • Les regles internes es defineixen en una secció a part dins del mateix document HTML.
  • Les regles externes es defineixen en un document a part.

Regles Inline

  • Les regles inline es defineixen mitjançant l'atribut "style" en les etiquetes HTML.
  • Aquestes regles només afecten l'etiqueta on es defineixen.
  • Aquest mètode no és recomanable perquè no separa el contingut de la presentació.

Regles Internes

  • Les regles internes es defineixen mitjançant l'etiqueta <style>, que s'inclou dins de l'etiqueta <head> d'un document HTML.
  • Aquestes regles afecten tot el document HTML on s'han definit.
  • Aquest mètode millora la separació entre HTML i CSS, però encara estan definits en un mateix fitxer.

Regles Externes

  • Les regles externes es defineixen en un document CSS separat del codi HTML (per exemple, style.css).
  • El fitxer CSS definit s'ha d'incloure al document HTML.
  • Aquest mètode garanteix la separació entre continguts i presentació, sent el mètode recomanat per incloure CSS.

Selectors, Propietats i Valors

  • En CSS, es defineix una llista d'instruccions en el format "selector:propietats".
  • El selector indica a quines etiquetes afecta la instrucció.
  • La llista de propietats conté les regles d'estil que s'han d'aplicar a aquestes etiquetes.
  • Cada propietat segueix el format "clau:valor", on la clau és el nom de la propietat i el valor és l'estil que s'ha d'aplicar.
  • Les propietats sempre van escrites entre claus ({...}) i després de cada propietat s'ha d'escriure un punt i coma (;).

Tipus de Selectors

  • Un selector pot contenir el nom d'una etiqueta, un identificador o una classe.
  • El nom d'una etiqueta afecta totes les etiquetes d'aquell tipus.
  • Un identificador afecta l'etiqueta HTML que tingui aquell ID.
  • Una classe afecta a totes les etiquetes HTML amb aquella classe.
  • Es pot fer qualsevol combinació dels tres tipus de selectors.

Tipus de Valors

  • Cada propietat s'escriu mitjançant una clau (paraula reservada del llenguatge CSS) i el valor que conté.
  • Els valors de les propietats poden ser de diferents tipus: colors, mides, URLs i cadenes de text.

Colors

  • Algunes propietats CSS serveixen per definir el color d'un component.
  • Exemples inclouen definir el color del text (color: red) o el color de fons (background-color: red).
  • Els valors de color poden ser principalment: noms de color, RGB en format decimal i RGB en format hexadecimal.

Nom de Colors

  • En CSS hi ha una llista de noms de colors predefinits: per exemple, aqua, black, blue, gray, green, maroon, purple, red, white, yellow.
  • També es pot definir el color transparent amb color: transparent.
  • És preferible utilitzar valors exactes de color en format RGB per evitar possibles diferències d'interpretació per part del navegador.

RGB en Format Decimal

  • RGB és un format de color que defineix el color usant tres components: R (red), G (green) i B (blue).
  • Cada component RGB pot tenir un valor entre 0 i 255.
  • El valor 0 representa l'absència de color i 255 la màxima saturació.
  • Ex: color: rgb(255, 0, 0)

RGB en Hexadecimal

  • En CSS, el color RGB es pot expressar també en format hexadecimal.
  • Hexadecimal és un sistema de numeració en base 16, amb 16 números per comptar: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.
  • En CSS el format seria color: #ff0000 (255 de vermell, 0 de verd i 0 de blau).

Mides

  • Moltes propietats CSS defineixen els seus valors mitjançant mides.
  • Les mides es poden expressar en diferents unitats: px (píxels), % (percentatge), em (mida de la font), pt (punt d'impressió).
  • No cal especificar la unitat quan un valor és 0.

Marges

  • Els marges d'una etiqueta es defineixen principalment amb les propietats "margin" i "padding".
  • La propietat "margin" defineix la distància externa, entre l'etiqueta i el que queda a fora.
  • La propietat "padding" defineix la distància interna entre l'etiqueta i el seu contingut.

Marges Específics

  • Les propietats "margin" i "padding" apliquen el marge especificat a tots els costats de l'etiqueta on s'han definit.
  • Per aplicar el marge només a un costat i poder posar marges diferents, 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 són:
    • 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

  • Es pot definir un contorn a la majoria d'elements HTML mitjançant les següents propietats:
    • border-width: Amplada del contorn.
    • border-style: Tipus de contorn.
    • border-color: Color del contorn.
  • També es poden definir totes juntes, on la propietat border inclou els valors de las tres propietats anteriors separats per espais en blanc. Ex: border: 2px solid red;

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Quiz Team

Related Documents

More Like This

Use Quizgecko on...
Open
Browser
Browser