IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

Introducció

CSS son les sigles de Cascading Style Sheets (Fulles d'estil en Cascada), serveix per descriure l'estil d'un document HTML.

1409729756css_three-layers.png

  • La web és basa en 3 capes:
  • Contingut (Content): El contingut ha de existir i és el que no pot faltar en una Web, la capa de contingut la fa el HTML.
  • Presentació (Presentation): La capa de presentació la fa el CSS.
  • Comportament (Behavior): El comportament el fa el JavaScript.

Cap d'aquestes cap a de incloure contingut de altres capes intercalat, incrustat, ...

  • El CSS es com un pegat(parche) que es va incloure després per definir la presentació i no amb HTML es mostra després:
Negreta

o Fins i tot

om de la font

Història

Es va crear al 1991, en el 1996 es va incorporar el CSS 1 on es va incorporar la font, color, box-model, ... en el 1998 es va crear el CSS 2 que incorporar position, z-index, media, text-shadow, en el 2011 es va crear el CSS 2.1 que corregeix alguns problemes trobats end CSS 2

Com Utilitza CSS

  • Inline: es colocar dintre del HTML no s'ha de fer, molt performance

Exemple:

<body>
   
       Hello World
   

Paragraph here

</body> 
  • <link> element: serveix per color varis arxius CSS no es molt performance

Exemple:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>Hello World</title>
   <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
  • <style> element:

Exemple:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Hello World</title>
   <style type="text/css">
       /* ... */
   </style>
</head>
<body>
  • @import rules inside <style> element:

Exemple:

<style>
@import url(normalize.css);
@import url(layout.css);
@import url(typography.css);
</style>

Sintaxis

Està formada per un congunt de statemanets (declaracións), però per davant es poden tenir importacións.

Exemple de Statement: selector.gif

  • Parts de Statements:
  • Selectors: És un sistema de patrons que ens permet escullir 1 o més el·lements del DOM (Document object model).
  • Declaration: És tot el que va al principi de les Statements.
  • Propierty: Es un serparador de ":" que indica la propietat(avanç dels ":") i el valor (després dels ":").
  • At Rules:

@charset @import @media @font-face

Selectors Exemples:

Basic simple selectors
Basic simple selectors
Example
Type selectors
p, span
Universal selectors
*
Attribute selectors
[title], [rel~="copyright"]
Class selectors
.comment, .post
ID selectors
#nav, #main
Pseudo classes
:hover, :lang(zh), :checked

Definició

  • En CSS també hi ha herència, poden tenir herència, es a dir hi ha propietats que hereten del para o no.
  • El procés de cascading s'utilitza quant s'està en conflicte i tenir preferència per tal de veure qui te preferència en quant hi ha dos estils cap a la mateixa propietat, per container solucionar-ho, caldrà calcular qui té més especificitat, primer va el incrustat, després per identificador, les seudoclasses.
  • Propietats:
  • display
  • position
  • height
  • font-family
  • transition
  • ...
  • Declaracions: [property]:[value]
  • display: block
  • position: fixed
  • height: 2em
  • ...
  • At-rules: Són regles que començen en la @:
  • @charset - (before anything else — any character)
  • @import - (before any statement except @charset)
  • @media
  • @font-face
  • ...

Cascade

  • Important

Ordenació de menys a més prioritaris:

  • User Agent (Navegador) Cada navegador te una fulla d'estils per defecte. Inclús es poden definir fulles d'estil segons l'usuari.
  • User.
  • Author. L'autor ho pot indicar mitjançant 3 mètodes:
  • Author !important declarations.
  • User !important declarations.

Utilització:

  • Incrustat(embedded) al head:
<head>
<style>
p { padding-bottom:12px; } 
</style>
</head> 
  • Incrustat al tag (inline):

Your Text

  • Fent una importació d'un fitxer extern (external):

Teniu dos opcions:

<link href="myCSSfile.css" rel="stylesheet" type="text/css" />

o utilitzant el mètode import:

<style type= "text/css " media= "all ">
@import "myCSSfile.css ";
</style>

Flexbox

Exercicis Jbin

Vegeu També

Enllaços Externs

Background lliures:

Ionic form: