Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Aula 08 CSS CONCEITOS BÁSICOS
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
CSS - Cascading Style Sheets -
Introdução
�Como surgiu a tecnologia CSS?
� De início, a linguagem HTML foi criada para a
construção de páginas Web, que exibiam apenas
documentos científicos.
� Com a evolução tecnológica (aplicativos, software,
hardware) :
� Houve a necessidade de uma maior flexibilidade para
manipular visualmente os conteúdos.
� Com a criação da primeira tag font e atributo color,
nasceu o conceito de estilização dos conteúdos HTML
Folhas de Estilo em Cascata
� Como surgiu a tecnologia CSS?
� Com a inclusão de novas tags e atributos de estilização,
a velha linguagem de marcação HTML, passou a ter 2
funções:
� Estruturar o conteúdo através da marcação
� Dar uma aparência final a este conteúdo.
� PROBLEMA: como estilizar projetos de documentos
HTML cada vez maiores e sofisticados?
� SOLUÇÃO: criação da tecnologia CSS.
Folhas de Estilo em Cascata
� Uma regra CSS, compõe-se de três partes:
seletor { propriedade: valor; }
� Seletor:
� É o elemento HTML identificado por sua tag, ou por uma classe, ou
por uma ID, ou etc., e para o qual a regra ser válida (por exemplo:
<p>, <h1>, <form>, .minhaclasse, etc.);
� Propriedade:
� É o atributo do elemento HTML ao qual será aplicada a regra (por
exemplo: font, color, background,etc.);
� Valor:
� É a característica específica a ser assumida pela propriedade (por
exemplo: letra tipo arial, cor azul, fundo verde, etc.)
p { font-size: 12px; /* ponto-e-vírgula é facultativo */ }
body {
color: #000;
background: #fff; /*ponto-e-vírgula ´e facultativo */
font-weight: bold; }
h3 {
font-family: "Comic Sans MS"; /*valor com palavra
composta, deve estar entre aspas duplas ou simples*/}
h1, h2, h3, h4, h5, h6 { /*Agrupamento de Seletores*/
color: #0f0;}
A regra CSS e sua sintaxe
Vinculando folhas de estilos à
documentos
� As folhas de estilo podem ser vinculadas a um
documento HTML de três maneiras distintas:
1. Importadas ou linkadas:
�quando as regras CSS estão declaradas em um
documento a parte do documento HTML. O arquivo de
folha de estilo deve ser gravado com a extensão .css
2. Incorporadas:
�quando as regras CSS estão declaradas no próprio
documento HTML.
3. Inline:
� quando as regras CSS estão declaradas dentro da tag do
elemento HTML com uso do atributo style
Folha de estilo externa - Sintaxe
� O arquivo css da folha de estilo externa deverá ser linkado ou
importado ao documento HTML, dentro da seção head do
documento.
� A sintaxe geral para linkar uma folha de estilo chamada estilo.css:
<head>
...
<link rel="stylesheet" type="text/css" href="estilo.css">
...
</head>
� A sintaxe geral para importar uma folha de estilo chamada estilo.css:
<head>
...
<style type="text/css">
@import url("estilo.css");
</style>
...
</head>
Folha de estilo incorporada ou
interna - Sintaxe
� Ideal para ser aplicada a uma única página. Dever ser declarada na
seção head do documento com a tag de estilo <style>, conforme
sintaxe:
<head>
<style type="text/css">
body {
background: #f00;
url(imagens/minhaimagem.gif);
}
h1 {
color: #00f;
}
p {
margin-left: 15px;
padding: 1.5em;
}
</style>
</head>
Folha de estilo inline - Sintaxe
� Um estilo inline só se aplica a um elemento HTML
� Ele perde muitas das vantagens de folhas de estilo, pois
mistura a apresentação com a marcação .
� Use este método excepcionalmente, por exemplo:
quando quiser aplicar um estilo a uma única
ocorrência de um elemento.
<p style="color:#000; margin: 5px;">
/*Aqui um parágrafo de cor preta e com 5 px nas 4
margens.*/
</p>
Folhas de estilo múltiplas
� Se alguma propriedade for definida para um mesmo elemento em
folhas de estilo diferentes, entrará em ação, o EFEITO CASCATA e
prevalecerão os valores da folha de estilo mais específica.
� Conflito: tamanho da fonte para o elemento h2
� Solução: h2 terá o tamanho igual a 10 pt. Pois a folha interna foi
declarada depois da externa na seção head do documento.
As fontes nos elementos HTML
As propriedades básicas para fontes:
�color: ...................cor da fonte
�font-family: ..........tipo de fonte
�font-size: .............tamanho de fonte
�font-style: ............estilo de fonte
�font-variant: .........fontes maiúsculas de menor altura
�font-weight: .........quanto mais escura a fonte é
(negrito)
�font: .................maneira abreviada para todas as
propriedades
As fontes nos elementos HTML
Valores válidos para as propriedades da fonte:
�color:
� código hexadecimal: #FFFFFF
� código rgb: rgb(255,235,0)
� nome da cor: red, blue, green...etc
�font-family:
� nome da família de fontes : define-se pelo nome da
fonte, p.ex: “verdana”, “helvetica”, “arial”, etc.
� nome da família genérica: define-se pelo nome genérico,
p.Ex:“serif”, “sans-serif”, “cursive”, etc.
As fontes nos elementos HTML
Valores válidos para as propriedades da fonte:
�font-size:
� xx-small
� x-small
� small
� medium
� large
� x-large
� xx-large
� smaller
� larger
� length: uma medida reconhecida pelas CSS (px, pt, em, cm, ..)
� %
As fontes nos elementos HTML
Valores válidos para as propriedades da fonte:
� font-style:
� normal: fonte normal na vertical
� italic: fonte inclinada
� oblique: fonte obliqua
� font-variant:
� normal: fonte normal
� small-caps: transforma em maiúsculas de menor altura
� font-weight:
� normal
� bold
� bolder
� lighter
� 100
� 200
Valores válidos para as propriedades da fonte:
�font-weight:
� 300
� 400
� 500
� 600
� 700
� 800
� 900
As fontes nos elementos HTML
Exemplo: color ... A cor da fonte
<html>
<head> <style type="text/css">
h1 {color: #FF0000;}
h2 {color: #00FF00;}
p {color: rgb(0,0,255);}
</style>
</head>
<body>
<h1>Cabeçalho com letras vermelhas</h1>
<h2>Cabeçalho com letras verdes</h2>
<p>Parágrafo com letras azuis</p>
</body>
</html>
As propriedades para as bordas, e
seus valores na regra CSS
Valores válidos para as
propriedades das bordas
Propriedades Padding x Margin
�padding-top: espaçamento para a parte superior;
�padding-right: espaçamento para o lado direito;
�padding-bottom: espaçamento para a parte inferior;
�padding-left: espaçamento para o lado esquerdo.
� A propriedade margin em CSS define o espaço exterior
entre os elementos.
�margin -top: espaçamento para a parte superior;
�margin -right: espaçamento para o lado direito;
�margin -bottom: espaçamento para a parte inferior;
�margin -left: espaçamento para o lado esquerdo.
Propriedades Padding x Margin
Exemplo
<html>
<head> <style type="text/css">
h3 {
border-width: medium;
border-style: solid;
border-color: #0000FF;
}
p {
border-width: 6px;
border-style: dashed;
border-color: #FF0000;
}
</style>
</head>
<body>
<h3>Borda média, contínua e azul</h3>
<p>Borda 6px, tracejada e vermelha</p>
</body>
</html>
Cabeçalho - Efeito 1 (exemplo)
<html>
<head> <style type="text/css">
h1 {
font-family: Verdana, Arial, Sans-serif;
font-size:150%;
color:#03c;
margin-bottom:0;
padding-left: 2px;
border-top: 3px solid #00f;
border-bottom: 2px solid #00f; }
p {
font-family: Verdana, Arial, Sans-serif;
color: #000; }
</style>
</head>
<body>
<h1>Efeitos CSS em Cabeçalhos</h1>
<p>Este é um parágrafo...</p>
</body>
</html>
Cabeçalho - Efeito 2 (exemplo)
<html>
<head> <style type="text/css">
h1 {
font-family: Verdana, Arial, Sans-serif;
font-size:150%;
color:#f00;
padding-left: 2px;
border-top: 2px solid #c36;
border-bottom: 2px dotted #c36; }
p {
font-family: Verdana, Arial, Sans-serif;
color: #000; }
</style>
</head>
<body>
<h1>Efeitos CSS em Cabeçalhos</h1><p>Este ´e um parágrafo...</p>
</body>
</html>
Cabeçalho - Efeito 3 (exemplo)
<html>
<head> <style type="text/css">
h1 {
font-family: Verdana, Arial, Sans-serif;
font-size:150%;
color:#999;
padding-left: 2px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin:0 10px 0 0; }
p {
font-family: Verdana, Arial, Sans-serif;
color: #000; }
</style>
</head>
<body>
<h1>Efeitos CSS em Cabeçalhos</h1><br>
<p>Este ´e um parágrafo...</p>
</body>
</html>
Cabeçalho - Efeito 4 (exemplo)
<html>
<head> <style type="text/css">
h1 {
color:#fff;
font-size:150%;
background:#999;
padding:5px 0px 5px 10px;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 20px solid #000;
border-right: 2px solid #000;
width:18.0em;}
p {
font-family: Verdana, Arial, Sans-serif;
color: #000;}
</style>
</head>
<body>
<h1>Efeitos CSS em Cabeçalhos</h1><br>
<p>Este é um parágrafo...</p>
</body>
</html>
Cabeçalho - Efeito 5 (exemplo)
<html>
<head> <style type="text/css">
h1 {
font-family: Verdana, Arial, Sans-serif;
font-size:150%;
color:#039;
padding: 8px 0 10px 12px;
border-left: 1px solid #039;
border-top: 1px solid #039;
margin-bottom:0;}
p {
font-family: Verdana, Arial, Sans-serif;
color: #000;
border-left:1px solid #069;
padding: 0 0 12px 12px;
margin-top:0;}
</style>
</head>
<body>
<h1>Efeitos CSS em Cabeçalhos</h1><br>
<p>Este é um parágrafo...</p>
</body>
</html>
Cabeçalho - Efeito 6 (exemplo)
<html>
<head> <style type="text/css">
h1 {
font-family: Verdana, Arial, Sans-serif;
text-align:left;
color:#fff;
font-size:150%;
background:#a3f
padding: 5px 0 5px 80px;
border:0;
margin-bottom:10px;}
p {
font-family: Verdana, Arial, Sans-serif;
color: #000;}
</style>
</head>
<body>
<h1>Efeitos CSS em Cabeçalhos</h1><br>
<p>Este é um parágrafo...</p>
</body>
</html>
Cabeçalho - Efeito 7 (exemplo)
<html>
<head> <style type="text/css">
h1 {
font-family: Verdana, Arial, Sans-serif;
color:#fff;
font-size:150%;
background:#548b54;
padding:5px 0px 5px 10px;
border: 3px outset #ccc;
margin-bottom:10px;
width:22.0em;}
p {
font-family: Verdana, Arial, Sans-serif;
color: #000; }
</style>
</head>
<body>
<h1>Efeitos CSS em Cabeçalhos</h1><br>
<p>Este é um parágrafo...</p>
</body>
</html>
Compartilhar