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

El Flexbox Layout es una esquema de distribució.

Box Layouts

block:
: vertical

inline: <a>: horitzontal block-line: en block o en linia

Flex Flexibilitat de fer resising, streching,shrinking, ..., es molt flexible per fer aquestes coses.

tipus d'Elements (Etiquetes HTML)

  • Container: és obligatori i conté un conjunt d'items
  • Items: són els elements susceptibles de ser organitzats

Grid layouts / Grid Systems

Grid: Parrilla 2d, columnes i files

  • 2 tipus:
  • HTML Based Grid Layouts: és Bootstrap, Bulma i dervats.
Altres Sistemes: El Vue-Material també té layouts.
  • CSS Grid layouts:

Bulma

A modern CSS framework based on Flexbox

Instal·lació

Per tal de instal·lar ho farem amb npm:

$ npm install bulma

Bootstrap

Mobile First Strategy

  • A partir de Bootstrap V3 ( 3 Parts):
  • Content: Determinar que és més important.
  • Layouts:
  • Primer dissenyar layouts petits.
  • Primer CSS per a mobils --> adaptant progressivament, tablets, desktop, large, ...
  • Progressive enhancement --> Millora Progressiva.
  • Responsive Utilities.

Instal·lació

Per tal de instal·lar ho farem amb npm:

$ npm install bootstrap@3

Mides Bootstrap

  • xs extra small (mobiles). -- 768px
  • sm samall (tablets o phablets) -- 922px
  • md medium desktop fins a -- 1200px
  • lg large large dektops --> 1200px

Components

Per fer una navbar s'ha d'indicar un codi com aquests:

 <nav class="navbar navbar-inverse navbar-static-top">
      <div class="container">
      <!-- Hamburger Icon  -- Menú Mobile -- -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
         .....

Fonts

La at-rule @font-face permet carregar fonts en una pàgina web.

Un cop afegides a una pàgina d'estil el navegador les ha de descaregar i aleshores mostrar-les com s'especifica al CSS.


Vegeu També

Enllaços Externs

Background lliures:

Ionic form:

Bulma Templates:

Bootstrap:

Vue Material:

Exemples Interessants:

Esquemes de colors i Palettes:

Tipografía:

Texttures: