02-Introdução CSS - DDW II

______________________________________________________________________
ETEC DR JOSÉ LUIZ VIANA COUTINHO - JALES
Técnico em Informática para Internet
Profª.: Evelyn K. R. Matos | email: evelynkrm@gmail.com
Face: facebook.com/evelynbbl

 Introdução;
 Folhas de Estilos internas;
 Folhas de Estilos externas;
 Folhas de Estilos inline;
 As Regras CSS;
 Propriedades CSS.

 Quando o World Wide Web Consortium
(W3C) lançou a versão 4.0 da HTML,
incorporou a ela as CSS (Cascading
Style Sheets — Folhas de Estilos em
Cascata) que têm a finalidade de dar
uma forma de apresentação ao
conteúdo do documento HTML.

 Passou a ser possível, separar o
conteúdo do documento de sua
formatação. Antes de existirem tais
folhas de estilo, recorria-se a elementos
e atributos da própria HTML para isso.

 É um arquivo de texto separado do
arquivo HTML e deve conter apenas
código CSS; nenhum outro texto pode
ser inserido, nem tags HTML.
 No documento HTML, o arquivo CSS
deverá ser LINKADO ou IMPORTADO de
dentro do elemento <head>.

 Uma folha de estilos interna — também
chamada de folha de estilos
incorporada — é o código CSS inserido
no próprio documento HTML, entre as
tags <style> e </style>, dentro da seção
<head>.

 Estilos inline são aqueles que são aplicados a uma
única instância de um elemento. São definidos
dentro do próprio elemento, só para ele. Na tag
que o introduz insere-se o atributo style e, a este,
atribui-se um valor que é constituído de código
CSS. Pode-se, por exemplo, definir estilos para um
cabeçalho específico, para um parágrafo
específico, para um link específico, etc.

 Uma regra CSS é formada de um seletor
que antecede as chaves e de uma
declaração que fica dentro das chaves.
 A declaração é constituída de
propriedade e valor separados por dois-
pontos. A sintaxe geral é a seguinte:

 Com o seletor de classe pode-se definir
vários estilos diferentes para um mesmo
tipo de elemento.
 O seletor de classe é formado pelo
nome do elemento (tag), um ponto e o
nome da classe. Deve-se atribuir um
nome descritivo à classe. "Inventa-se"
um nome.

 O seletor ID deve ser um nome exclusivo
e só pode ser aplicado a UM e somente
UM elemento dentro do documento.
 É formado pelo nome do elemento
(tag), um sinal # e um nome.
 Deve-se atribuir um nome descritivo ao
ID. "Inventa-se" um nome.

 Para fazer a mesma definição para
vários elementos, agrupam-se os
seletores:

4 - MARGENS
margin
Define as 4 margens do elemento. Aceita de 1 a 4
valores.
margin-top
margin-right
margin-bottom
margin-left
Definem as margens superior, direita, inferior e
esquerda. Valores: auto | unids_css | %
5 - ESPAÇO EM BRANCO (PADDING)
padding
Define o espaço entre o conteúdo e os 4 limites
do elemento. Aceita de 1 a 4 valores.
Valores: padding-top | padding-right | padding-
bottom | padding-left
padding-top
padding-right
padding-bottom
padding-left
Definem o espaço entre o conteúdo e os limites
superior, direito, inferior e esquerdo.
Valores: unids_css | %

7 - POSICIONAMENTO
overflow
Define o que deve ocorrer quando o conteúdo
de um elemento excede sua área.
Valores: visible | hidden | scroll | auto
z-index
Define a ordem de apresentação dos elementos
quando há sobreposição. Valores: auto | número
8 - DIMENSIONAMENTO
width
height
Definem a largura e a altura de um elemento.
Valores: auto | unids_css | %
max-width
max-height
Definem a largura máxima e a altura máxima de
um elemento. Valores: none | unids_css | %
min-width
min-height
Definem a largura mínima e a altura mínima de
um elemento. Valores: unids_css | %
line-height
Define a distância entre linhas de texto.
Valores: normal | número | unids_css | %

10 - TEXTO
letter-spacing
word-spacing
Definem um aumento ou diminuição no
espaço entre os caracteres ou entre as
palavras. Valores: normal | unids_css
white-space
Define o tratamento a ser dado ao espaço
em branco existente dentro de um
elemento. Valores: normal | pre | nowrap
direction
Define a direção em que é escrito o texto.
Da esquerda para a direita ou da direita
para a esquerda. Valores: ltr | rtl

12 - TABELAS
border-collapse
Define se os traços das bordas serão
fundidos ou mantidos separados. Valores:
collapse | separate
border-spacing
Define a distância entre as bordas de
células adjacentes. Só aplicável quando
border-collapse for separate. Valores:
unids_css
empty-cells
Define se as células sem conteúdo visível
devem ter bordas ou não. Só aplicável
quando border-collapse for separate.
Valores: show | hide
caption-side
Define a posição da legenda na tabela.
Valores: top | bottom | left | right
table-layout
Define como será desenhada a tabela
Valores: auto | fixed

02-Introdução CSS - DDW II

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a 02-Introdução CSS - DDW II

Semelhante a 02-Introdução CSS - DDW II (20)

02-Introdução CSS - DDW II