O que é CSS?

CSS:CascadingStyleSheets

CSS : comentar exibir elementos HTML

Adicionados ao HTML 4.0 para resolver um problema

As folhas de estilo externas permitem economizar muito trabalho

As folhas de estilo externas são armazenadas em arquivos CSS

1/33
 Folhas de estilo para resolver um grande problema
HTML nunca foi destinado a conter tags para a formatação de um documento.

HTML foi destinado a definir o conteúdo de um documento, como:

<h1>Este é um título</h1>

<p>Ceci est un paragraphe.</p>

Quando as tags como <font> e os atributos de cor foram adicionados à especificação

HTML 3.2, -> pesadelo para os desenvolvedores.

Processo longo e caro.

Para resolver esse problema, o World Wide Web Consortium (W3C) criou o CSS.

No HTML 4.0, a formatação pode ser retirada do documento HTML e armazenada em um arquivo
CSS séparé.

Todos os navegadores suportam CSS hoje.

CSS permite economizar muito trabalho!

2/33
 Sintaxe CSS
Uma regra CSS consiste em duas partes principais: um seletor e uma ou mais declarações:
h1{cor:azul;tamano-da-fonte:12px}

O seletor é normalmente o elemento HTML que você deseja estilizar.

A propriedade é o atributo de estilo que você deseja modificar. Cada propriedade tem um valor.

3/33
 Comentários em CSS
Os comentários são usados para explicar seu código e podem ajudar você quando
modifique o código-fonte em uma data posterior. Os comentários são ignorados pelos navegadores.
Um comentário começa com CSS "/*" e termina com "*/", como isto:
/*Este é um comentário*/
p
{
text-align:centro;
/*Outro comentário*/
cor:preto;
familia-font:arial;
}

4/33
 CSSidetclass
Além de definir um estilo para um elemento HTML, o CSS permite que você especifique suas próprias
sélecteurs appelésidetclass.
O seletor de ID é usado para especificar um estilo para um único elemento exclusivo.
O seletor de ID usa o atributo id do elemento HTML e é definido por um "#".
La règle de style ci-dessous sera appliquée à l'élément avec un id = "para1":
#para1
{
text-align:center;
color:red;
}

O seletor de classe é usado para especificar um estilo para um grupo de elementos. Ao contrário
No seletor de ID, o seletor de classe é mais frequentemente usado em vários elementos.
Isto permite definir um estilo particular para os elementos HTML com a mesma classe.
Le sélecteur de classe utilise l'attribut HTML class, et est définie par un "."
No exemplo abaixo, todos os elementos HTML com a classe = "center" serão alinhados ao centro:
.center {text-align:center;}
[Link] {text-align:center;}
[Link] {text-align:center;}
5/33 ...
 Regroupamento de seletores
.texte {
margem-esquerda: 0;
}
p {
margem-esquerda: 0;
}
h1 {
margem-esquerda: 0;
}
h2 {
margem-esquerda: 0;
}

Será equivalente a :
.texto, p, h1, h2 {
margem-esquerda: 0;
}

6/33
 Reagrupamento de propriedades
p {
familia-font: Arial, sans-serif;
estilo da fonte: itálico;
peso-da-fonte: negrito;
tamanho da fonte: 120%;
altura-da-linha: 140%;
}

pode ser substituído por:

p {
font : italic bold 120%/140% Arial, sans-serif;
}

7/33
 Outros seletores hierárquicos
As normas CSS 2 e CSS 3 (atualmente em preparação) preveem outras formas de seleção
hierárquico. Assim, pode-se designar apenas o primeiro filho de um elemento, apontar apenas para alguns
elementos diretamente adjacentes a outro, etc.
É mesmo possível levar em conta os atributos dos elementos para selecioná-los.
Motivo Description
* qualquer elemento.
e les éléments de type e
ef os elementos f descendentes de e
e>f os elementos f que são fios de e
e:primeiro-filho os elementos que são os primeiros filhos de seu pai
e:link, e:visited os elementos e se são as fontes de um âncora ou de um hyperlink (não visitado ou visitado)
e:ativo, e:hover, e:foco os elementos e seguindo uma ação
e:lang(c) os elementos e cuja língua é c.
e+f os elementos f tais que o elemento irmão que precede é um elemento e
e[foo] os elementos e com um atributo "foo"
e[foo="aviso"] os elementos e com um atributo "foo" cujo valor é "warning"
e[foo~="aviso"] os elementos e com um atributo "foo" cuja uma das valores é "warning"
os elementos e com um atributo "foo" cuja uma das valores (separados por um traço) é
e[lang|="pt"]
em
[Link] idêntico a div[class~="warning"]
e#meuid o elemento e com id "myid"

8/33
 Três maneiras de inserir uma folha de estilo
Folha de estilo externa
Uma folha de estilo externa é ideal quando o estilo é aplicado a várias páginas.
Com uma folha de estilo externa, você pode modificar a aparência de um site da web enquanto
mudando um único arquivo.
Cada página deve estar vinculada à folha de estilo usando a tag <link> dentro da seção
d'entêre
<head>
<link rel="stylesheet" type="text/css" href="[Link]" />
</head>

9/33
 Três maneiras de inserir uma folha de estilo
Folha de estilo interna
Uma folha de estilo interna deve ser usada quando um único documento tiver um estilo único.
defina os estilos internos na seção head de uma página HTML, usando a tag <style>,
como isto:
<cabeça>
<style type="text/css">
hr {cor:sienna;}
p {margem-esquerda:20px;}
corpo {imagem-de-fundo:url("imagens/[Link]");}
</style>
</head>

10/33
 Três maneiras de inserir uma folha de estilo
Estilos em Linha
Use este método com parcimônia!
Para usar estilos inline, você usa o atributo de estilo na tag considerada.
O atributo style pode conter qualquer propriedade CSS.
O exemplo a seguir mostra como mudar a cor e a margem esquerda de um parágrafo:
<p style="color:sienna;margin-left:20px">Este é um parágrafo.</p>

11/33
 Várias folhas de estilo
Folha de estilo externa
h3
{
color:red;
text-align:left;
tamanho-da-fonte:8pt;
}

Folha de estilo interna

h3
{
texto-alinhado: direita;
tamanho da fonte:20pt;
}

Então uma folha contendo as duas definições terá as seguintes propriedades:

color:red;
text-align:right;
font-size:20pt;

12/33
 Várias folhas de estilo em cascata
Os estilos podem ser especificados em vários lugares

Dentro de um elemento HTML

Na seção de cabeçalho do documento HTML
Em um arquivo externo

Nota: Vários estilos de folha externos podem ser utilizados

Priorité:

Navegador padrão
2. Folha de estilo externa
3. Folha de estilo interna (seção cabeça)
4. Estilo online

Nota: Se o link para a folha de estilo externa for colocado após a folha de estilo interna em HTML,
a folha de estilo externa substitui a folha interna.
Hack CSS: !important permite definir uma propriedade de estilo que será obrigatoriamente usada.

13/33
 Todas as propriedades de fundo em CSS
Propriedade Description Valores CSS (1 ou 2)
cor de fundo
imagem de fundo
fundo arrume todas as propriedades em uma só 1
background-repeat background-
posição de fundo do anexo
a imagem é fixa ou se move com o resto da
anexo-de-fundo scroll,fixed 1
página
cor-rgb (por exemplo, rgb(255,255,255))
cor-hex(ex. #00ff00)
background-color cor da fundo de um elemento 1
color-name(eg. red,blue)
transparente
url(url)
imagem de fundo définit l'image de fond d'un élément 1
nenhum
left top, left center, left bottom, right
cima, centro direito, fundo direito
defini a posição de partida de uma imagem de centro topo, centro centro, centro
background-position 1
afetuoso fundo
x% y%
xpos ypos
repetir
repetir-x
background-repeat define a repetição da imagem 1
repetir-y
sem repetição

14/33
 Toutes les propriétés de texte en CSS
Propriedade Description Valores CSS (1 ou 2)
color definir a cor de um texto cor 1
direção definir a orientação do texto ltr, rtl 2
normal
{"number":"número"}
altura da linha defina a distância entre as linhas 1
length
%
aumentar ou diminuir o espaço entre os normal
espaçamento das letras 1
caracteres length
alinhamento de texto alinhe o texto em um elemento left, right, center, justify 1
{"none":"nenhum","underline":"sublinhado","overline":"sobrelinha"}
decoração do texto ajoute une décoration au texte 1
line-through, blink
remoção da primeira linha de texto em um length
recuo de texto 1
elemento %
nenhum
sombra de texto ombre d'un texte cor
length
nenhum, capitalizar, maiúsculas
text-transform controles das letras em um elemento 1
minúsculas
baseline, sub, super, top, text-top,
middle, bottom, text-bottom
alinhamento vertical define o alinhamento vertical de um elemento 1
length
%
definem como os espaços são tratados
espaço em branco normal, pré, nowrap 1
o interior de um elemento
normal
espaçamento entre palavras aumentar ou diminuir o espaço entre as palavras 1
comprimento

15/33
 Todas as propriedades de fonte em CSS
Propriedade Description Valores CSS (1 ou 2)
font-style, font-variant, font-weight,
defina todas as propriedades de fonte em uma font-size/line-height, font-family,
fonte 1
declaração caption, icon, menu, message-box,
small-caption, status-bar,
family-name
família de fontes especifique a família de fontes para o texto 1
família genérica
xx-small, x-small, small, medium,
large, x-large, xx-large, smaller,
tamanho da fonte especifique o tamanho da fonte do texto 1
larger, length
%
estilo de fonte indique le style de police pour le texte normal, italic, oblique 1
indique se um texto deve ser exibido em uma
font-variant normal, letras pequenas 1
POLÍCIA
normal,bold, bolder, lighter
peso-da-fonte indique a espessura de uma fonte 100, 200, 300, 400, 500, 600, 700, 1
800, 900

16/33
 Todas as propriedades de lista em CSS
Propriedade Description Valores CSS (1 ou 2)
list-style-type
defina todas as propriedades de uma lista em uma
estilo de lista list-style-position 1
déclaration
imagem-estilo-lista
especifique uma imagem como marcador de elemento url
imagem-estilo-lista 1
da lista nenhum
indique se o ponto de marcadores da lista deve
posição-estilo-lista aparecer dentro ou fora do fluxo inside, outside 1
de conteúdo
none, disc, circle, square, decimal,
decimal-leading-zero, armenian,
tipo-de-estilo-da-lista indique o tipo de marcador georgian, lower-alpha, upper-alpha, 1
lower-greek, lower-latin, upper-
latin, lower-roman, upper-roman

17/33
 Caixas em CSS
margem
fronteira
empilhamento
conteúdo

Margem externa (margin): apaga uma área ao redor da borda. A margem é completamente
transparente
Bordure (border) : Une frontière qui délimite la marge extérieure de la marge inté[Link]
a borda é afetada pela cor de fundo da caixa
Margem interna (padding): Remove uma área ao redor do conteúdo. A margem interna é afetada
pela cor de fundo da caixa
Contenu : zone où le texte et les images apparaissent
A largura de um elemento é calculada da seguinte forma: largura total = largura + padding esquerdo +
preenchimento à direita + borda esquerda + borda direita + margem esquerda + margem direita

A altura de um elemento é calculada da seguinte forma: altura total = altura + padding superior + padding
bas
18/33 + bordure haute + bordure basse + marge haute + marge basse
 Caixas em CSS
margem
fronteira
preenchimento
contenu

Compatibilidade com IE: o IE inclui o preenchimento e a borda na largura, quando a propriedade

a largura é fixa, a menos que um DOCTYPE seja declarado.

19/33
 Todas as propriedades da borda em CSS
Propriedade Description Valores CSS (1 ou 2)
border-width, border-style,
fronteira todas as declarações em uma 1
border-color
todas as declarações para border-bottom em largura-da-borda-inferior, borda-
border-bottom 1
uma bottom-style, border-bottom-color
border-bottom-color defina a cor para a borda inferior border-color 2
estilo-da-borda-inferior define o estilo da borda inferior estilo-de-borda 2
largura-da-borda-inferior define a espessura da borda inferior border-width 1
color_name, hex_number,
border-color defina a cor das quatro bordas 1
rgb_number, transparent
border-left-width, border-left-style,
borda-esquerda todas as declarações para border-left em uma 1
border-left-color
border-left-color defina a cor da borda esquerda border-color 2
estilo-da-borda-esquerda define o estilo da borda esquerda border-style 2
largura-da-borda-esquerda defina a espessura da borda esquerda border-width 1
border-right-width, border-right-
borda-direita todas as declarações para border-right em uma 1
style, border-right-color
border-right-color defina a cor da borda direita border-color 2
border-right-style defina o estilo da borda direita border-style 2
border-right-width defina a espessura da borda direita largura da borda 1
none, hidden, dotted, dashed, solid,
estilo da borda defina o estilo para as quatro bordas 1
double, groove, ridge, inset, outset
border-top-width, border-top-style,
borda superior todas as declarações para border-top em uma 1
cor-da-borda-superior
border-top-color defina a cor para a borda superior border-color 2
border-top-style definir o estilo para a borda superior border-style 2
border-top-width defina a espessura da borda superior largura da borda 1
thin, medium, thick
20/33 largura da borda define a espessura para as quatro bordas 1
length
 Todas as propriedades do contorno em CSS
Um contorno é uma linha desenhada em torno dos elementos, fora da borda, para
démarcar este elemento.

um exemplo com a propriedade {outline-style:dotted;border:1px solid red;}

Propriedade Description Valores CSS (1 ou 2)
defina todas as propriedades do contorno em uma outline-color, outline-style,
esboço 2
declaração largura do contorno
color_name, hex_number,
outline-color defina a cor do contorno 2
rgb_number, invert
nenhum, pontilhado, tracejado, sólido, duplo
estilo de contorno definir o estilo do contorno 2
groove, ridge, inset, outset
thin, medium, thick
largura do contorno defina a espessura do contorno 2
length

21/33
 Todas as propriedades da margem externa em
CSS
Propriedade Description Valores CSS (1 ou 2)
defina todas as propriedades da margem margin-top, margin-right, margin-
margem 1
exterior em uma declaração bottom, margin-left
carro
margem inferior defina a margem externa baixa length 1
%
auto
margem-esquerda définit la marge extérieure gauche comprimento 1
%
carro
margem-direita defina a margem externa direita length 1
%
carro
margem-topo defina a margem externa superior length 1
%

22/33
 Todas as propriedades da margem interna em
CSS
Propriedade Description Valores CSS (1 ou 2)
defina todas as propriedades da margem padding-top, padding-right,
almofada 1
interior em uma declaração padding-bottom, padding-left
auto
preenchimento inferior définit la marge intérieure basse comprimento 1
%
automóvel
preenchimento à esquerda definir a margem interna esquerda length 1
%
auto
preenchimento à direita defina a margem interna direita length 1
%
auto
preenchimento-superior definir a margem interna superior length 1
%

23/33
 Exibição e visibilidade em CSS
display:none
um texto
<div> style="display:none;width:100px;height:100px;color:red">
</div>
um texto abaixo do div
du texte du texte en dessous du div

visibility:hidden
um texto
<div style="visibility:hidden;width:100px;height:100px;color:red"> </div>
</div>
um texto abaixo do div
um texto

um texto embaixo do div

A propriedade display permite modificar a propriedade de exibição padrão dos elementos (block ou
inline)
24/33
 Posicionamento de elementos em CSS
O posicionamento estático: os elementos HTML estão, por padrão, em posição estática (em relação a
no fluxo normal de exibição). Os elementos em posição estática não são afetados pelo
propriétés top,left,right et bottom.

A posição fixa: os elementos HTML em posição fixa são posicionados relativamente por
relativo à janela do navegador. Esses elementos não moverão mesmo se nos deslocarmos na
página.

O posicionamento relativo: posicionamento em relação à sua posição normal (posicionamento

estático)

O posicionamento absoluto: um elemento em posição absoluta é posicionado relativamente em relação a

um elemento pai cuja posição não é estática. Se tal elemento pai não existir, o
o bloco de contêiner é <html>
Os elementos em posição absoluta são removidos do fluxo normal (como a propriedade display:none).
Esses elementos podem se sobrepor. Ajustamos a prioridade de sobreposição (por padrão o fluxo
normal) usando a propriedade z-index em CSS. O elemento com o maior valor em
z-index será exibido acima dos outros elementos.

25/33
 Posicionamento de elementos em CSS
Propriedade Description Valores CSS (1 ou 2)
fundo define o posicionamento inferior de um elemento auto, length, % 2
clipe recortar um elemento com posição absoluta. forma, automático 2
url, auto, crosshair, default, pointer,
mover, redimensionar verticalmente, redimensionar nordeste, redimensionar noroeste
cursor especifique o tipo de cursor a ser exibido n-redimensionar, se-redimensionar, sw-redimensionar 2
texto
esquerda define a posição à esquerda de um elemento auto, comprimento, % 2
defina o que devemos fazer se um elemento sair
transbordar auto, hidden, scroll, visible 2
da caixa pai
posição definindo o posicionamento de um elemento absoluto, fixo, relativo, estático 2
certo definir o posicionamento direito de um elemento auto, length, % 2
topo define a posição superior de um elemento auto, length, % 2
z-index define a pilha dos elementos number, auto 2

Uma lista no fluxo normal:

1. elemento 1
2. elemento 2
3. elemento 3

A mesma lista em posição relativa com um deslocamento à esquerda de 1 cm e de 0,5 cm para cima:
1. elemento 1
2. elemento 2
3. elemento 3
26/33
 A propriedade flutuante em CSS
Por padrão, os elementos do tipo bloco ocupam toda a largura da página, mesmo que se especifique
uma largura.
Para posicionar dois elementos do tipo bloco um ao lado do outro, usamos a propriedade
flutuar(esquerda,direita,não)
Exemplo: dois elementos do tipo bloco de largura 3cm no fluxo normal

Os mesmos com a propriedade {float:left;margin-left:2mm}:

Para reposicionar os elementos HTML no fluxo normal, usamos a propriedade

clear(left,right,none,both)
Mesmo com um <br/>, o texto continua ao lado do div flutuante.
Agora voltamos ao fluxo normal de exibição.

27/33
 Pseudo-classes en CSS
Nom Description CSS (1 ou 2)
:ativo ajoute un style à un élément qui est activé 1
:primeiro-filho adiciona um estilo a um elemento que é o primeiro filho de outro elemento 2
:foco adicione um estilo a um elemento que tem o foco do teclado 2
:passar o mouse adicione um estilo a um elemento quando o mouse passa sobre ele 1
:lang adicione um estilo a um elemento com um atributo lang específico 2
:link adicione um estilo a um link não visitado 1
:visitado adicione um estilo a um link visitado 1

28/33
 Pseudo-elementos em CSS
Nome Description CSS (1 ou 2)
:after adicione um conteúdo após um elemento 2
:antes adicione um conteúdo antes de um elemento 2
primeira-letra ajoute un style sur le premier caractère d'un texte (lettrine) 1
primeira-linha adicione um estilo à primeira linha de um texto 1

29/33
 Doenças exóticas dos CSS?
A dor crônica
Sintomas: crise da percepção do mundo sensato, o doente só jurando por um único
balise : o elemento <div>, pelo qual ele substitui todas as estruturas usadas anteriormente (tabelas
imbriçados, parágrafos, títulos, citações, etc.). O paciente transforma, portanto, tudo o que conheceu em
<div>. Ele se expressa frequentemente assim: « Fora os quadros! Eu os substituo por <div>) ».

Consequências: transformar cem células de tabelas aninhadas em tantas <div> aninhadas não
não resolve nada. A estrutura, mais complexa, tornou-se incompreensível e inutilizável.

Pire : substituir todas as etiquetas lógicas (<p>, <h1>, <cite>, <blockquote>, …) pela etiqueta
único e genérico <div> faz perder aos documentos todo o seu sentido e toda a sua semântica, os
rendant inintelligibles aos navegadores não gráficos e aos motores de busca.

Tratamento: um tratamento pesado é necessário. É preciso (re)ensinar ao paciente que um documento

O HTML deve fazer sentido e é necessário usar cada tag adequadamente: <p> estrutura dos
parágrafos, <div> delimita as grandes áreas do documento, <h1>… <h6> denotam os níveis
de títulos, <ul> introduz listas e menus, etc. O risco de recaída é então baixo.

30/33
 Doenças exóticas dos CSS?
A classe aguda
É uma admiração exacerbada pelas classes CSS, próxima da devoção. Algumas teses vêem nisso
um reaproximação religiosa.

Sintomas: a classite se manifesta por um uso excessivo das propriedades class em cada
balise encontrada. Essa necessidade de identificar cada elemento por uma classe (frequentemente repetida) testemunha
de uma súbita falta de confiança em si mesmo provocada por um conhecimento evasivo dos seletores
CSS e seu legado de pai para filho.
<div id="menuglobal">
<ul class="menu">
<li class="menuitem"><a class="bouton" href="#">Lien 1</a></li>
<li class="menuitem"><a class="bouton" href="#">Lien 2</a></li>
<li class="menuitem"><a class="bouton" href="#">Link 3</a></li>
<li class="menuitem"><a class="bouton" href="#">Lien 4</a></li>
</ul>
Consequências: ganho de peso súbito e excessivo (expresso em bytes). O código é desnecessariamente
alourdi e a repetição dessas propriedades às vezes o torna difícil de interpretar.

Tratamento: uma cura de aprendizado dos seletores CSS e de suas propriedades de herança é
necessário para superar essa afecção.
<ul id="menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
31/33
 Doenças exóticas das CSS?
A celulite devastadora
Essa forma de doença é uma reminiscência dos nossos antigos hábitos de concepção de sites
web com o uso de tabelas e células. Essa técnica envolvia múltiplos cortes dos
elementos em pequenas células, cada uma contendo um pedaço de imagem do fundo ou uma parte
um conteúdo.

Sintomas: reconhece-se o paciente com celulite devastadora pela sua obsessão em querer tudo
découper, imbriquer et « celluliser ».
Por exemplo, o site de Alsacréations será imediatamente percebido como um emaranhado
elementar de múltiplas células às quais serão aplicados equivalentes das propriedades
rowspan e colspan. Outro sintoma frequente: o paciente continua a dividir todas as suas imagens
de fundo em vários arquivos, complicando a tarefa para a integração de seu código.

Consequências: assim como a classite, a celulite destrutiva implica em ganho de peso.

consequente no doente. Ela produz principalmente uma estrutura inextricável e ilógica, opaca
mesmo aos olhos de um usuário experiente. Com o tempo e a evolução da doença, o paciente não
comprenderá mais seu próprio código. Quanto aos navegadores, a complexidade do site os incentivará a errar
interpretar os documentos.

Tratamento: essa patologia grave requer uma completa reavaliação de si mesmo.

concepções e de sua experiência como webmaster.
32/33
 Doenças exóticas dos CSS?
A negatividade virulenta
É a obstinação em negar em bloco a existência das doenças anteriores. O doente permanece recluso.
em seu mundo e recusa-se a se abrir para a realidade. Ele finge acreditar nas promessas dos padrões
CSS, enquanto refuta cada argumento proposto em seu favor.

A rigidez cega
Esta nova forma de contaminação faz os iniciantes acreditarem que todos os sites da web devem ser
validados em XHTML Strict.
Cuidado com esses charlatães da medicina que o sobrecarregam com remédios (regras, tipos de documentos,
O iniciante é então inundado de doutrinas a serem seguidas, enquanto muitas vezes é preferível
de ir no seu próprio ritmo, de começar em transição, ou até mesmo de manter um esqueleto mínimo em
tabelas e inserir as formatações CSS em intervalos.

33/33