CSS – CASCADE STYLE SHEETS
Folha de Estilo – Definição   É uma forma prática e estruturada de formatar    páginas Web.   Permite aplicar conjuntos ...
Folha de Estilo   Pode ser apresentada das seguintes maneiras     Composta por alguns comandos colocados no      mesmo f...
Folha de Estilo Externa   Os estilos definidos num documento à parte podem    ser usados em qualquer página HTML.   Nest...
Folha de Estilo Externa
Folhas de Estilo – Vantagens   Separação do formato e do conteúdo da página    web.   Maior controlo da aparência de uma...
CSS – Cascade Style Sheet   É uma liguagem usada para definir estilos   Na sintaxe CSS os nomes e valores das regras são...
REGRA   Uma folha de estilos consiste em uma ou mais linhas    de REGRAS da forma.    SELETOR { DECLARAÇÕES }   As regra...
Comentários em CSS   Os comentários em CSS são fechados com uma    barra e um asterisco, e são inseridos no documento    ...
Unidades de comprimento                 http://www.vas-y.com/dicas/curso/css/3a.html
Especificação de cores                  http://www.vas-y.com/dicas/curso/css/3a.html
Tipos de elementos   Corpo     body     a:link   Parágrafo     P;   H1; H2; …; H6   Carater     font
Tipos de Elementos   Corpo do documento (body);   Tipo de letra (font);   Texto (text);   Cores (color);   Fundos (ba...
font   font-family       arial; times new roman; verdana;…   font-style       normal; oblique; italic;   font-size   ...
font-size   Relativo     pequeno  { font-size: 8pt; }     medio { font-size: 14pt; }     grande { font-size: 18pt; } ...
text   text-align       center; justify; right; left;   text-indent       nível de indentação em percentagem (5%; …) ...
hiperligações   a:link     text-decoration;   color;…   a:visited     text-decoration;   color;…   a:active     text...
body   background (cor de fundo)       background: yellow   background-image (imagem de fundo)       background-image:...
Bloco de texto (Box)                                                               Margin – Margem                        ...
Blocos de Texto (boxes)   Margens       margin-left; margin-right; margin-top; margin-bottom; margin (especifica as     ...
Tipos de Contorno (Border)
Posicionamento de uma Box   absoluto     position:absolute.     top; bottom; left; right.       Exemplos:
Posicionamento de uma Box   relativo     position:   relative.     floatExemplos:
Posicionamento de uma Box   Ao posicionar de maneira relativa, deve-se evitar    misturar pixeis com percentagem,    Os r...
tag <div> </div>   Esta tag vai permitir definir vários blocos de texto    numa página html.   Cada bloco de texto defin...
Criação de um layout   A maior vantagem da utilização da tag <DIV> é a    criação de layouts.                           ....
tag <span> </span>     span: fragmento de texto dentro de outro texto,      que pode ser formatado de maneira diferente. ...
Próximos SlideShares
Carregando em…5
×

RCOM 11ºAno - CSS

757 visualizações

Publicada em

Publicada em: Educação
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
757
No SlideShare
0
A partir de incorporações
0
Número de incorporações
227
Ações
Compartilhamentos
0
Downloads
33
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

RCOM 11ºAno - CSS

  1. 1. CSS – CASCADE STYLE SHEETS
  2. 2. Folha de Estilo – Definição É uma forma prática e estruturada de formatar páginas Web. Permite aplicar conjuntos de formatações a um determinado documento.
  3. 3. Folha de Estilo Pode ser apresentada das seguintes maneiras  Composta por alguns comandos colocados no mesmo ficheiro da página Web. INTERNA <head> <style type= "text/css " > body {font-family: verdana, “times new roman” h3 {font-size:150%} </style> </head>  Localizada num ficheiro à parte. EXTERNA <head> <link rel=“stylesheet” type=“text/css” href=“folha.css”> </head>
  4. 4. Folha de Estilo Externa Os estilos definidos num documento à parte podem ser usados em qualquer página HTML. Neste caso pode ser definido um estilo padrão para ser aplicado nas páginas de um site  UNIFORMIZAÇÃO de um site – a consistência da apresentação é um aspecto importante do desenho de um web site e o CSS pode garantir que todos os documentos terão o mesmo design.
  5. 5. Folha de Estilo Externa
  6. 6. Folhas de Estilo – Vantagens Separação do formato e do conteúdo da página web. Maior controlo da aparência de uma página Web.  Hágarantia de que todos os elementos terão a mesma apresentação Páginas mais leves e simples. Fácil manutenção do documento É muito mais fácil modificar uma simples página de estilo que todo o documento HTML.
  7. 7. CSS – Cascade Style Sheet É uma liguagem usada para definir estilos Na sintaxe CSS os nomes e valores das regras são listados dentro de chavetas { } antecedidas pelo elemento (SELETOR) ao qual as declarações serão aplicadas. Exemplo: P{ font-family: garamond; font-style: italic; text-align: justify; color:red; }
  8. 8. REGRA Uma folha de estilos consiste em uma ou mais linhas de REGRAS da forma. SELETOR { DECLARAÇÕES } As regras podem estar dentro de um documento de texto com extensão .css ou embutidas num documento .html.
  9. 9. Comentários em CSS Os comentários em CSS são fechados com uma barra e um asterisco, e são inseridos no documento apenas para organizar, lembrar, anotar, etc. Exemplo:  /* Os links visitados e não visitados deste documento serão mostrados a cor castanha e não sublinhados */
  10. 10. Unidades de comprimento http://www.vas-y.com/dicas/curso/css/3a.html
  11. 11. Especificação de cores http://www.vas-y.com/dicas/curso/css/3a.html
  12. 12. Tipos de elementos Corpo  body  a:link Parágrafo  P; H1; H2; …; H6 Carater  font
  13. 13. Tipos de Elementos Corpo do documento (body); Tipo de letra (font); Texto (text); Cores (color); Fundos (background);
  14. 14. font font-family  arial; times new roman; verdana;… font-style  normal; oblique; italic; font-size  medium; 8 pt; 15 pt; x-small; small; large;… font-weight  normal; bold; bolder; lighter font-transform  none; uppercase; lowercase; capitalize color
  15. 15. font-size Relativo  pequeno { font-size: 8pt; }  medio { font-size: 14pt; }  grande { font-size: 18pt; } Absoluto  xxsmall; xsmall; small;  medium;  large; x-large; xx-large
  16. 16. text text-align  center; justify; right; left; text-indent  nível de indentação em percentagem (5%; …) Line-height (altura da linha do texto  em percentagem (150%) ou em pontos (10 pt) text-decoration  none; underline (sublinhado); line-through (rasurado); blink (piscar); text-transform  none; uppercase; lowercase; capitalize color
  17. 17. hiperligações a:link  text-decoration; color;… a:visited  text-decoration; color;… a:active  text-decoration; color;… a:hover  text-decoration; color;…
  18. 18. body background (cor de fundo)  background: yellow background-image (imagem de fundo)  background-image: url(“../imagens/back.gif”) background-repeat (repetição da imagem)  background-repeat: no-repeat  repeat (default); repeat-x (horizontal) ; repeat-y (vertical) ;  no-repeat background-position (posição da imagem)  background-position: 200px 70px;
  19. 19. Bloco de texto (Box) Margin – Margem Border – Contorno Padding – Espaçamento http://www.vas-y.com/dicas/curso/css/4c.html#4b
  20. 20. Blocos de Texto (boxes) Margens  margin-left; margin-right; margin-top; margin-bottom; margin (especifica as 4 margens ao mesmo tempo) Contornos (border-top; border-bottom; border-left; border-right; border (especifica os 4 contornos ao mesmo tempo).  border-style (border-top-style; …)  none; solid; double; dashed; dotted; inset; outset;groove; ridge  border-width (border-left-width; …)  thin; medium; thick;…1pt; 2pt; …  border-color (border-bottom-color; …) Padding (espaço entre os contornos e o conteúdo)  padding-top; padding-bottom; padding-right; padding-left; paddings
  21. 21. Tipos de Contorno (Border)
  22. 22. Posicionamento de uma Box absoluto  position:absolute.  top; bottom; left; right.  Exemplos:
  23. 23. Posicionamento de uma Box relativo  position: relative.  floatExemplos:
  24. 24. Posicionamento de uma Box Ao posicionar de maneira relativa, deve-se evitar misturar pixeis com percentagem, Os resultados podem ser imprevisíveis!
  25. 25. tag <div> </div> Esta tag vai permitir definir vários blocos de texto numa página html. Cada bloco de texto definido num <div> deve ser identificado por um nome (id=…) ou (class=…).html .css #cabecalho<div id=“cabecalho”>…</div> { …. }<div id=“rodape”>… </div> #rodape { …. }<div class=“pop”>…. </div> .pop { …. }
  26. 26. Criação de um layout A maior vantagem da utilização da tag <DIV> é a criação de layouts. .html <div id=“header”>…</div> <div id=“navbar”>… </div> <div id=“left”>…. </div> <div id=“mid”>…. </div> <div id=“right”>…. </div> Não se devem deixar as tag div sem conteúdo. Na ausência de conteúdo, colocar &nbsp, dentro da div
  27. 27. tag <span> </span>  span: fragmento de texto dentro de outro texto, que pode ser formatado de maneira diferente. .html .css<div class=“pop”>Redes de .pop {…. }<span class=“verde”>Comunicação</span> .verde</div> { …. }Possível Resultado: Redes de Comunicação

×