TWiki-Colivre> Tech Web>OQueÉCSS (28 May 2008, AurelioAHeckert)EditAttach

O que é CSS

Start Presentation

Slide 1: Definindo

Cascading Style Sheets, ou simplesmente CSS é um mecanismo simples para adicionar estilo a documentos. Ele foi criado e definido pela W3C com foco no HTML, mas já é usado para formatar conteúdo definido em markup que servem a outros fins como XUL e SVG.

Através do CSS é possível tornar o conteúdo independente da forma como ele será apresentado. Ou seja, uma página HTML não precisa usar tags como a <font> para definir a aparência de um bloco de texto, o bloco deve ser identificado e assim ele será formato. Da mesma forma um título não deve ser simulado com tags de formatação, ele deve usar a tag semanticamente coerente <H1> e ser formatado via CSS para ter a aparencia desejada. Seguindo esse pensamento se desenvolveu a filosofia de construção de layouts web conhecida como Tableless que trouxe sites com código mais limpo e mais acessiveis ao mundo.

Slide 2: Seletores CSS - Quem eu formato?

Para formatar as ocorrencias de uma tag <tag>: 

  tag {
    propriedade1 : valor1;
    propriedade2 : valor2;
  }

Para formatar as ocorrencias da classe bli em qualquer tag:
  .bli { ...

Para formatar as ocorrencias de uma tag com uma classe <tag class="bli">:
  tag.bli { ...

Para formatar uma tag identificada como <tag id="souUnica">:
  #souUnica { ...

Para formatar as ocorrencias de uma tag <filha> dentro de <mãe>:
  mãe filha { ...

...e a pseudo-classe.

Slide 3: Notação CSS - Como eu formato? 

  seletor {
    prop1 : <string>;
    font-family : serif;
    prop2 : <num absoluto>;
    font-weight : 800;
    prop3 : <num relativo>[<unidade de medida>|%];
    width : 350px;
    width : 70%;
    prop4 : url(<endereço refencia>);
    background-image : url(imgs/fundo.jpg);
    prop5 : #<cor hexadecimal 24bits>;
    color : #FFA800;
    prop6 : rgb(<0..255>, <0..255>, <0..255>);
    color : rgb(255, 168, 0);
    prop7 : rgb(<0..100>%, <0..100>%, <0..100>%);
    color : rgb(100%, 65.88%, 0%);
    propMulti : <valor tipo1> <valor tipo2> ... <valor tipoN>;
    border: 4px dotted #009900;
  }

Slide 4: Inserindo CSS na sua página (1)

Exemplo do Mozilla.org: 

<head>
 ...
 <link rel="stylesheet" type="text/css"
       href="css/print.css" media="print" />

 <link rel="stylesheet" type="text/css"
       href="css/base/content.css" media="all" />

 <link rel="stylesheet" type="text/css"
       href="css/cavendish/content.css" title="Cavendish" media="all" />

 <link rel="stylesheet" type="text/css"
       href="css/base/template.css" media="screen" />

 <link rel="stylesheet" type="text/css"
       href="css/cavendish/template.css" title="Cavendish" media="screen" />

 <link rel="stylesheet" type="text/css"
       href="css/cavendish/home.css" title="Cavendish" media="screen" />
 ...
</head>

Slide 5: Inserindo CSS na sua página (2)

Você também pode isserir diretamente na página: 

<head>
 ...
 <style type="text/css">
   seletorA {
     propriedade1 : valor1;
     propriedade2 : valor2;
   }
   seletorB {
     propriedade3 : valor3;
     propriedade4 : valor4;
   }
 </style>
 ...
</head>

Ou forçar o download antes da apresentação sem precisar extender o documento html: 

<head>
 ...
 <style type="text/css">
   @import url(layout.css);
 </style>
 ...
</head>

Slide 6: CSS Alternativo

http://www.w3.org/Style/Examples/007/alternatives.html 

<link rel="stylesheet" title="Gold (right, fixed) + navbar"
      href="../../threepart-f.css">
<link rel="alternate stylesheet" title="Gold (right)"
      href="../../threepart-nobanner.css">
<link rel="alternate stylesheet" title="Gold (left)"
      href="../../threepart-left-nobanner.css">
<link rel="alternate stylesheet" title="Gold (left, fixed) + navbar"
      href="../../threepart-left-f.css">
<link rel="alternate stylesheet" title="Gold (right, fixed)"
      href="../../threepart-nobanner-f.css">
<link rel="alternate stylesheet" title="Gold (left, fixed)"
      href="../../threepart-left-nobanner-f.css">
<link rel="alternate stylesheet" title="Oldstyle"
      href="http://www.w3.org/StyleSheets/Core/Oldstyle">
<link rel="alternate stylesheet" title="Modernist"
      href="http://www.w3.org/StyleSheets/Core/Modernist">
<link rel="alternate stylesheet" title="Midnight"
      href="http://www.w3.org/StyleSheets/Core/Midnight">
<link rel="alternate stylesheet" title="Ultramarine"
      href="http://www.w3.org/StyleSheets/Core/Ultramarine">
...
<link rel="stylesheet" title="Handheld" href="../../handheld.css" media="handheld">

Slide 7: Modularize e não se repita = Importe

Um site em tons verdes: 

@import url(layoutBase.css);
@import url(layoutVerde.css);

O mesmo site em tons azuis: 

@import url(layoutBase.css);
@import url(layoutAzul.css);

O código comum aos dois modelos fica em um documento separado. layoutBase.css

Slide 8: Trabalhando!

Hora de colocar a mão na massa.

Agora veremos "Visual Formatting Model"

Slide 9: Microformats

Ai... mais coisa pra aprender...
Pare de chorar e aproveite! 

<div class="vcard">
  <a class="url fn" href="http://aurium.cjb.net">Aurélio A. Heckert</a>
  <span class="org">Colibre</span>
</div>

Slide 10: Referências

-- AurelioAHeckert - 20 Jul 2006

Edit | Attach | Print version | History: r4 < r3 < r2 < r1 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r4 - 28 May 2008 - 14:01:48 - AurelioAHeckert
 
Copyright © Colivre 2006-2008.
Todo conteúdo deste site está licenciado sob uma Licença Creative Commons BY-NC-SA 2.5.
Para uso comercial deste conteúdo, por favor, contate-nos.