Documente Academic
Documente Profesional
Documente Cultură
MANUAL CSS
ndice
1.
2.
3.
Sintaxe Bsica................................................................................................................................ 4
4.
5.
6.
7.
Pg. 2 de 16
MANUAL CSS
8.
9.
Pg. 3 de 16
MANUAL CSS
3. Sintaxe Bsica
Uma folha de estilos composta por uma ou vrias regras CSS, que por sua vez so
compostas na sua forma bsica por 3 partes: um seletor, uma propriedade e um valor.
SELETOR { PROPRIEDADE: VALOR; }
SELETOR: Elemento onde a regra ser aplicada. Podendo ser tag, ID ou classe.
Classe como selector - apenas os elementos que forem desta classe seguiro a regra.
Exemplos:
p{
font-size: 12px;
}
Exemplos:
p.fonteGrande{ font-size: 20px;}
<p class=fonteGrande>
Prof. Teresa Oliveira
Pg. 4 de 16
MANUAL CSS
4. Tipos de CSS
Interno: escrito dentro das tags <style> </style> dentro do <head> do documento html.
Pg. 5 de 16
MANUAL CSS
5. Cores e fundos
5.1. Propriedade: Color
Representa a cor de primeiro plano de um elemento. Pode ser especificado por:
um nome de cor vlida - como "vermelho"
um valor HEX - como "# FF0000"
um valor RGB - como "rgb (255,0,0)"
p{
color: #0000CC;
}
Pg. 6 de 16
MANUAL CSS
Pg. 7 de 16
MANUAL CSS
Pg. 8 de 16
MANUAL CSS
Pg. 9 de 16
MANUAL CSS
Exemplo:
p{
Text-transform: uppercase;
}
Link:
Visited:
Active:
Hover:
Pg. 10 de 16
MANUAL CSS
Pg. 11 de 16
MANUAL CSS
7.3. Identificando: Id
O atributo ID identifica no html um objeto, e dentro do css utilizar o valor deste id para
definir as regras css para este elemento.
Exemplo:
#titVermelho{
Color: red;
}
Dentro das tags utilizar da seguinte forma:
<h1 id=titVermelho>Ttulo Vermelho</h1>
Exemplo:
CSS:
.negrito {
font-weight: bold;
}
.eleDiv{
Color: red;
}
Exemplo:
HTML:
Pg. 12 de 16
MANUAL CSS
9.2. Margin
Margem a distncia da borda at o Box Model de outro elemento ou a margem do
documento HTML.
As margens do elemento HTML podem ser 4: esquerda, direita, superior e inferior
Para definir a margem de um elemento HTML, criar uma regra css para o elemento e
dentro dela preencher as propriedades:
margin-top:
margin-right:
margin-bottom:
margin-left:
Margem superior
Margem Direita
Margem Inferior
Margem Esquerda
Pg. 13 de 16
MANUAL CSS
Exemplo:
<h1>Ttulo</h1>
<p>Frase sobre margin!</p>
Aplicar uma margem esquerda no elemento <p>:
<style>
p{
margin-left: 20px;
}
</style>
9.3. Padding
O padding o espaamento entro o elemento e a sua borda.
As propriedades CSS para o padding so:
padding-top:
Padding superior
padding-right:
Padding Direita
padding-bottom Padding Inferior
padding-left:
Padding Esquerda
Todas as propriedades de preenchimento podem ter os seguintes valores:
comprimento - especifica um espaamento em px, pt, cm, etc.
% - Especifica um espaamento em % da largura do elemento
Exemplo:
p{
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
OU
p{
padding: 50px 30px 50px 80px;
}
9.4. Bordas
Propriedades das bordas:
Border-width - especifica a largura das quatro bordas
Border-color - define a cor das quatro bordas
Border-style - especifica que tipo de borda a ser exibido
Border - especifica todas as propriedades da borda individuais
Pg. 14 de 16
MANUAL CSS
9.4.1. Border-width
Define a largura da borda que pode ser determinada por thin, medium, e thick
9.4.2. Border-color
Define a cor que vai ser apresentada na borda.
Pode ser definida das seguintes formas:
"#000FFF", "rgb(123,123,123)", "blue"
9.4.3. Border-style
Define o estilo de borda que vai ser apresentada. Utilizar os seguintes estilos:
Dotted - Define uma borda pontilhada
Dashed - Define uma borda tracejada
Solid - Define uma borda slida
Double - Define uma margem dupla
Groove - Define uma borda 3D.
Ridge - Define uma borda ridged 3D.
Inset - Define uma borda de insero 3D.
Outset - Define uma borda incio 3D.
None - Define nenhuma borda
9.4.4. Border
Border um compilador de todas as propriedades vistas anteriormente.
Segue a seguinte ordem:
width, style, color
<style>
h1 {
border: thick solid blue;
}
</style>
Prof. Teresa Oliveira
Pg. 15 de 16
MANUAL CSS
10.Altura e Largura
10.1. Largura: Width
Width a propriedade que representa a largura de um objeto.
Width: 200px;
Ou
Width: 20%
Ou
Height: 20%
12.Comentrios em CSS
Os comentrios so usados para explicar o cdigo e so ignorados pelos navegadores.
Exemplo
p{
color: red;
/* comentrio */
text-align: center;
}
Pg. 16 de 16