Post 4

O que é CSS
O Cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir
a apresentação (aparência) em páginas da internet que adotam para o seu desenvolvimento linguagens
de marcação (como XML, HTML e XHTML). O CSS define como serão exibidos os elementos contidos
no código de uma página da internet e sua maior vantagem é efetuar a separação entre o formato e o
conteúdo de um documento.
Fonte: TECMUNDO
LINK: http://www.tecmundo.com.br/programacao/2705-o-que-e-css-.htm
Formas de utilização (Externo, embutido, inline)
Externo - Existem 3 maneiras de colocarmos configurações de cores, fontes, tamanhos e outros em CSS
para usarmos uma delas e a referencia do CSS como arquivo externo.
<link rel="stylesheet" type="text/css" href="arquivo.css" />
Embutido – Comando CSS fica dentro da página HTML. Permite que a página fique dentro de outra
página.
<style type="text/css">
a
{
background: #ff9;
color: #00f;
text-decoration: underline;
}
</style>
Inline – Possibilita que só aquele elemento seja estabilizado.
<p style="border-style: groove; color: red;">
Copyright 2007
</p>

Tipos de Seletores (elemento HTML,Id ou Classe)
Elemento HTML - Seletor universal ou seja qualquer elemento.
*{
color: #000000;
}
Aplicável a todos os elementos
ID - Seleciona o elemento <e> identificado com id.
h1#chapter1 {
text-align: center;
}
<e id="Id"... />
Classe – Seletor de classe: seleciona os alementos <e> em que se aplicou a “classe”.
h1.pastoral {
color: green;
}
<e class="classe"... />
Sintaxe
@import "folha.css" tipo-midia;
/* Comentários */
@media tipo-midia {
seletor {
Propriedade: valor(es);
}
};

Unidades
Relativas
Px – Tamanho de pixels (relativo ao dispositivo)
Em – Tamanho relativo à fonte utilizada no elemento ao qual está inserido
Ex – Corresponde à altura da fonte ‘x’
Absolutas
In – Polegadas (1 polegada=2,54 cm)
Cm – Centímetros
Mm – Milímetros
Pt – pontos (1pt=1/72 polegadas)
Pc – Picas (1 pica=12 pontos)
Porcentagem
% - Porcentagem
0 – Valor ‘0’ não requer atribuição de unidade
Exemplos de códigos usando CSS

Código –
<!DOCTYPE>
<html.lang="pt-br">
<head>
<title>Folhas de Estilo</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div>
<p>fatec fatec</p>
<p>texto 2</p>
</div>
</body>
</html>
1º Salvar o documento em formato CSS.
2º Inserir a imagem no mesmo diretório.
LINK DA PÁGINA: file:///E:/FATEC%20CARAPICU%C3%8DBA/S%C3%ADtios/LAB/Aula%20-
%202/CSS/ex20.html

Post 4

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Similar a Post 4

Similar a Post 4 (20)

Más de diogolevel3

Más de diogolevel3 (20)

Post 4