Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Material 7 - Tecnologia para Internet I CSS
Compartilhar
Prévia do material em texto
CSS
CASCADING STYLE SHEETS
Para definir a aparência das páginas web, utiliza-se CSS, acrônimo para
Cascading Style Sheet (Folha de Estilo em Cascata). Com CSS podem ser
definidas características personalizadas (estilo, cor, tamanho, etc.),
aplicando-as a um ou mais elementos.
Assim, uma modificação no estilo do elemento, requer apenas uma nova
referência ao estilo presente num arquivo CSS. Outra vantagem, é a
portabilidade de documentos em diferentes tipos de mídia (vários
arquivos CSS podem ser criados, em função do tipo de mídia
apresentado.
Existem três formas de se aplicar estilos em documentos
HTML:
- Local
- Incorporada
- Externa
CASCADING STYLE SHEETS
LOCAL (INLINE)
O estilo é definido diretamente no elemento, ou então utilizando-se um dos
elementos (<span>...</span> para aplicar o estilo a um elemento de uma linha,
ou <div>...</div>, para aplicar o estilo aos elementos de um bloco);
CASCADING STYLE SHEETS
INCORPORADA (EMBEDDED)
Os estilos são definidos entre <head>...</head> utilizando o elemento
<style>...</style>. Caso um navegador ignore a o elemento “style”, mostrará o
conteúdo da tag na janela do navegador. Para evitar que isto aconteça, defina os
estilos na seção de cabeçalho dentro de comentários (<!-- ... --> );
CASCADING STYLE SHEETS
EXTERNA (LINKED)
Os estilos são definidos em um arquivo em formato texto, com extensão
“.CSS”, sendo referenciado ao documento HTML pela tag <link
rel="stylesheet" type= "text/css" href="arq.css"> (a ser inserida entre
<head>...</head>).
CASCADING STYLE SHEETS
Dessa forma, pode haver conflito entre estilos (estilos diferentes podem ser
atribuídos a um mesmo elemento, porém, um dos estilos estando num arquivo
“.css” - externo - e o outro estilo definido no cabeçalho do documento - seção
“head” ). Quando isto ocorre, o navegador aplica uma regra somente, selecionando
a regra de mais alta precedência, seguindo a ordem (da maior para a menor
precedência):
locais incorporadas externas
Devido aos estilos seguirem uma ordenação de precedência, é que se diz que se
trata de “estilos em cascata”.
CASCADING STYLE SHEETS
APLICANDO ESTILO INLINE:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Estilo inline</title>
</head>
<body>
<h1 style="text-decoration:underline;text-align:center">
Título
</h1>
</body>
</html>
CASCADING STYLE SHEETS
APLICANDO ESTILO INCORPORADO:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Estilo Incorporado</title>
<style type="text/css">
<!--
h1 { text-decoration : underline ; text-align : center ; }
-->
</style>
</head>
<body>
<h1>Título</h1>
</body>
</html>
CASCADING STYLE SHEETS
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Trabalhando com imagens</title>
<meta charset="UTF-8">
<style type="text/css">
body{
background-image: url("imagens/flor.jpg");
background-repeat:no-repeat;
background-position: center;
background-attachment:fixed;
background-size:cover;
}
a{
background-color:white;
padding: 5px;
border: 1px solid yellow;
border-radius: 5px;
}
</style>
</head>
<body>
<a href="http://www.google.com.br" target="_blank">Google</a><br/><br/>
<a href="http://www.bing.com" target="_blank">Bing</a><br/><br/>
<a href="http://www.yahoo.com.br" target="_blank">Yahoo!</a><br/>
</body>
</html>
APLICANDO ESTILO EXTERNO:
Antes de criar o documento HTML, deve-se criar o arquivo “.css” que
conterá o(s) estilo(s) a ser(em) aplicado(s). Pegando um dos exemplos
anteriores, o arquivo criado por mim e nomeado “meu_estilo.css” deverá
conter a linha abaixo:
h1 { text-decoration : underline ; text-align : center ; }
CASCADING STYLE SHEETS
APLICANDO ESTILO EXTERNO:
Documento HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Estilo externo</title>
<link rel="stylesheet" type="text/css" href="meu_estilo.css">
</head>
<body>
<h1>Título</h1>
</body>
</html>
CASCADING STYLE SHEETS
Aplicando estilo a múltiplos elementos:
h1, h2, h3 { text-decoration : underline ; text-align : center ; }
Dessa forma, os elementos “h2” e “h3” farão o mesmo com o texto que
está entre <h1>... </h1>, ou seja, seja exibido sublinhado e centralizado
na janela do navegador.
CASCADING STYLE SHEETS
Definindo classes
Você pode definir estilos em uma classe, a qual pode ser atribuída a qualquer
elemento, bastando, para isso, que você associe o nome da classe ao atributo
“class” do elemento.
O nome da classe inicia com o caracter ponto ( . ), mas este caracter não é utilizado
quando da associação do nome da classe ao atributo “class” do elemento.
A grande vantagem da criação de classes acontece quando um estilo não for
aplicável a todo o documento (para o elemento especificado).
CASCADING STYLE SHEETS
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Estilo Incorporado</title>
<style type="text/css">
<!--
h1 { text-decoration : underline ; text-align : center ; }
.texto_negrito { font-weight : bold ; }
-->
</style>
</head>
<body>
<h1>Título</h1>
<p>Parágrafo normal!</p>
<p class="texto_negrito">Parágrafo em negrito!</p>
</body>
</html>
CASCADING STYLE SHEETS
Modelo de Caixas (Box Model)
Uma informação é mostrada em um navegador num formato onde o conteúdo
central está delimitado por um espaçamento (padding), que separa este conteúdo
central de uma borda (border), e por uma margem (margin). Ambos os
elementos “padding” e “margin” são transparentes.
O modelo de caixas (box model) é uma recomendação da W3C para CSS.
CASCADING STYLE SHEETS
margin
Graficamente, poderíamos representar o modelo de caixas como:
width (largura)
height (altura)
border
padding
conteúdo
CASCADING STYLE SHEETS
Continue navegando
Compartilhar