`
evento` `
topico` `
nome`CSS`
` `
titulo`CSS (Cascading Style Sheet): Sintaxe e Semântica`
` `
descritor`css`
` `
lead`Cascading Style Sheets (Css) uma linguagem de marcação em que as propriedades das tags herdam de um arquivo chamado .css (folha de estilo) tendo uma propriedade para cada tag, definida dentro ou fora do texto html. Cada propriedade da folha é vinculada a um elemento do html.  Uma definição se reflete por todas páginas do site`
` `
link``
` `
origem`css.xml`
` `
referencia`~DSGerador~`
` `
` `
topico` `
titulo`Estilo inline`
` `
desc
Defição do estllo e aplicação na mesma linha do html.
<body>
<p style="width: 200px; color: red; background: #eee;  font-size:1.8em;">
   paragrafo com estilo inline
</p>
</body>

` `
` `
topico` `
titulo`Estilo incorporado (embebed)`
` `
desc
Defição do estllo dentro html:
<head>
<style type="text/css"media="screen"
p {width: 200px;
     color: red;
     background: #eee; 
     font-size:1.8em;
   }
</head>

Aplicação do estilo dentro html:
<body>
   <p>paragrafo com estilo incorporado</p>
</body>

` `
` `
topico` `
titulo`Estilo externo linkado`
` `
desc
Defição do arquivo estllos.cc:
p {width: 200px;
     color: red;
     background: #eee; 
     font-size:1.8em;
   }

Aplicação do estilo no html:
<head>
<link rel="stylesheet"type="text/css"href="estilos.css"media= "all"/>
</head>

<body>
   <p>paragrafo com estilo externo linkado</p>
</body>

` `
` `

topico` `
titulo`Estilo externo incorporado`
` `
desc
Defição do estllo:
arquivo estilos.css
 p {width: 200px;
     color: red;
     background: #eee; 
     font-size:1.8em;
   }

Aplicação do estilo no html:
<head>
<style type="text/css"media="screen
   @import url("estilos.css") scren, projection;    ou    @import "estilos.css" scren, projection;
</head>

<body>
   <p>paragrafo com estilo encorporado</p>
</body>

` `
` `
topico` `
titulo`CSS`
` `
bnf`seletor ( "," seletor )* "{" ( propriedade ":" valor " ")+ "}" `
` `
desc`


  • seletor: é o alvo da regra Css. Ex: p, h1, ul, li,.......
    tipo de seletor:
    • class - para um grupo de tag's
    • id - para uma tag
    ex: <p>                                                                                                no arquivo estilo: p{width: 200px; color: red; background: #eee;  font-size:1.8em;}
          <p id=p > paragrafo com estilo de seletor individual </p>            no arquivo estilo: .p{width: 200px; color: red; background: #eee;  font-size:1.8em;}
          <p class=p>paragrafo com estilo de seletor  class </p>                 no arquivo estilo: #p{width: 200px; color: red; background: #eee;  font-size:1.8em;}
  • declaração: parâmetros da estiiização. Que compreende:
    • propriedade: caracteristica do elemento. Ex: width,  color,  background,  font-size
    • valor: quantificação ou qualificação da propriedade. Ex: 200px, red, #ee, 1.8m
`
` `
` `
topico` `
titulo`Semantica`
` `
desc`Bloco de texto
  • div- é o de conteudo
  • span- seção de conteudo - não tem valor semantico
  • p -paragrafos
  • Listas - ul, ol, li -
  • listas numeradas ou não dl,dd, dt
  • -listas de definição de Formatos - b-negrito i - italico big- texto grande small - texto pequeno sub- subescrito sup- sobrescrito
  • Significado especial - h1, h2, h3 - Titulos maior importancia
  • h4, h5, h6- Titulos de menor importancia
  • A definição do Seletor podem ser: Class (vale para um a categoria de tags) ou Id (pra uma tag) . Simples, multiplo, contextual e pseudoclasse. A chamada do seletor poder se : # para class ou . para id
  • As propriedades dos seletores são: tipo, background, block, border, list, position, extension `
` `
` `
topico` `
titulo`Modelo CSS`
` `
desc` `
` `
` `
topico` `
titulo`CSS operações`
` `
desc`Posicionamneto: Normal Float Absoluto
Construção de: Lay-out , tabelas, formulários, menu (listas), cabeçalho e link
Estilização de textos Aplicação de cores e de background `
` `
` `
topico` `
titulo`Citação`
` `
desc`Silva, Mauricio Samy. Construindo sites com CSS e XHTML. 2008.Novatec Editora Ltda. Infnet. Webstandards, Tableless, CSS e Acessibilidade`
` `
` `
`