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 (Cascading Style Sheets), traduït Full d'estil en cascada.
  • Serveix per descriure l'estil d'un document HTML.
  • El CSS va sorgir després del HTML per solucionar problemes que es van trobar amb HTML
  • Capa de contingut, capa de presentació i capa de comportament

Exemple

<div style="display:none">
    Hola mundo!
</div>

Recursos:

Història

  • CSS 1 (1996)
font, color, align, box-model, #id, .class, ...
  • CSS 2 (1998)
position, z-index, media, text-shadow, ...
  • CSS 2.1 (2011)
CSS 2.1 vs CSS 2
  • CSS 3 (Actualment)
flex-box,

Recursos:

Contingut

Com funciona?

Sintaxi

  1. Selector,
  2. Declaració,
  • Propietat, existeixen moltes propietats.
  • Valor,

selector.gif

At-rules

  • @charset
(before anything else — any character)
  • @import
(before any statement except @charset)
  • @media
  • @font-face
@charset "UTF-8";
@import "styles.css" screen and (min-width: 960px);

Selectors

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

Com utilitzar CSS en un fitxer HTML?

1) Inline style: , directament en la etiqueta.

<body>
    <h1 style="font-size: 2em; font-weight: 700;">
        Hello World
    </h1>
    <p style="margin: 2em 0;">
        Paragraph here
    </p>
</body>

2) <link> element:

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

3) <style> element:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <style type="text/css">
        /* ... */
    </style>
</head>
<body>
...

4) @import rules inside <style> element

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

Recursos:

Propietats

Les fulles d'estils podem tenir tres origens:

  • User agent (Navegador): Cada navegador té una fulla d'estil per defecte.
  • Usuaris: Pot arribar a indiciar les seves propis fulles d'estils.
  • Autor: Dissenyador de la propia pàgina web.

Tres opcions en el que l'autor pot utilitzar els CSS

Incrustat (embeded): El col·loquen en el HEAD dins d'una etiqueta <style> </style>

<head>

<style>

p { padding-bottom:12px; }

</style>

</head> 

Incrustat al tag (inline):

 <p style= "padding-bottom:12px; "> Your Text</p> 

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

Tenim dos opcions:

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

O utilitzar un mètode d'importació

<style type= "text/css " media= "all ">

@import "myCSSfile.css ";

</style>

Herència

Les propietats tenen herencia, hi han que hereden dels pares i han que no.


Casdade

Procés que s'aplica per resoldre un conflicte, aquest conflictes pot ser quan s'aplica elements incoherents. Esta relacionat amb la herència però no tot està relacionat amb la herència.

Ordre del codi

  1. user agent declaration
  2. user declaration
  3. author declaration

Flexbox

Flexbox Layouts

Flexbox layaout, el podem definir com a l'esquema de distribució de caixes flexibles.

Box layouts:

  • block: <div> --> posició vertical
  • inline: <a>--> posició horitzontal
  • block-inline: en block o en línia

Flex: Flexibilitat (dinàmiques, resisizing, stretching, shrinking)

Existeixen dos tipus d'elements (etiquetes HTML):

  • Container (obligatori): conté un conjunt d'elements
  • Items: són els elements susceptible de ser organitzats
flex-wrap: wrap;
flex-direction: row;

es lo mateix que

flex-flow: row wrap;

Practica

Boxmodel

$ php artisan make:vc boxmodel

Posició

Editar directament per consola Google Chrome

$0.style.display='block'

Float

Recursos:

Clearfix hack:

Bootstrap


Responsive Layouts

Grid layouts | Grid systems

Grid --> parrilla 2d columnes i files

Existeixen dos tipus:

  • HTML base grid layouts:
  • CSS grid layouts


Recursos:

Bulma

Codi original sass

Exemples:

https://dansup.github.io/bulma-templates/templates/cover.html
https://dansup.github.io/bulma-templates/templates/hero.html
https://dansup.github.io/bulma-templates/templates/landing.html

Recursos:

Bootstrap

Exemples:

http://getbootstrap.com/examples/carousel/
http://getbootstrap.com/examples/cover/
http://getbootstrap.com/examples/justified-nav/

Mobile first Strategy

S'implementa a partir de la versió V3 de Bootstrap

Hem de tenir 3 parts en compte:

  • Content: per determinar que es el més important en el nostre contingut
  • Layouts:
  • Dissenyar layouts petits
  • CSS per a mobils adaptant progressivament: table, smartphone, desktop, large.
  • Progressive enhancement: Millorar progressiva, en el sentit
  • Responsive utilities, ajudes orientes a Responsive

Mides Boostrap:

  • XS extra small (mobile) -- 768px
  • sm small (tablets o phablets) -- < 922px
  • md medium desktop -- <1200px
  • lg large large desktop -- >1200px

Recursos:

Color

Material

Vue-material

Esquemes de colors i paletes

Tipografia

Fonts en navegadors/ HTML/Web

Existeixen dos formats de fonts:

Com s'utilitza?

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Utilitzar la font

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Recursos:

Combinacions de fonts

Recursos:

Textures i patrons

Com s'aplica?

LandingPage/
├── assets/
│   ├── img
│   │   ├── square_bg.png
└── index.html
<style>
    html {
        background: url('assets/img/square_bg.png') repeat 0 0;
        background-size: cover;
    }
</style>

Recursos:

Boostrap

Instal·lació

$ npm install bootstrap@3

Vegeu també

Enllaços externs