CSS - Cascading Style Sheets Folha de Estilos em Cascata Profa:Tânia Neuenschwander.
Transcript of CSS - Cascading Style Sheets Folha de Estilos em Cascata Profa:Tânia Neuenschwander.
CSS - Cascading Style Sheets
Folha de Estilos em CascataProfa:Tânia Neuenschwander
Qual é a diferença entre HTML e CSS?
CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais.
O HTML é uma linguagem interpretada.
Introdução
A sintaxe básica das CSS
Seção { propriedade: valor;}
Onde:
Seção: é TAG que receberá a propriedade
Propriedade: é uma característica da TAG
Valor: é a color, tamanho, fonte...
; : encerra o comando
Exemplo:
body {background-color: #FF0000;}
Estrutura Básica do HTML
1ª maneira(in-line):
É utilizando o atributo style do HTML, dentro da própria TAG que receberá o estilo.
Exemplo:
<body style="background-color: #FF0000;“>
Onde aplicar CSS?
Estrutura Básica do HTML
2ª maneira (Interno):
Utilizando a TAG style do HTML, na seção head.
Exemplo:<head>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
Onde aplicar CSS?
Estrutura Básica do HTML
3ª maneira (externa):
É lincar para uma folha de estilos, que é um arquivo de texto com a extensão .css.
No documento HTML (.htm) cria-se um link para a folha de estilos (.css).
Exemplo do link:
<head>
<link rel=“estilo" type="text/css" href=“style.css" />
</head>
Onde aplicar CSS?
Exemplo Estrutura Básica
A coisa realmente inteligente disto é que vários documentos HTML podem lincar para uma mesma folha de estilos. Em outras palavras isto significa que um simples arquivo será capaz de controlar a apresentação de muitos documentos HTML.
Vantagem do CSS
Criando uma Pagina HTML
'color‘: define a cor da letra de uma seção: Ex. h1 {color: #00FF00;} o texto do cabeçalho de
nível 1 será verde.
'background-color‘: define a cor do fundo de uma seção: Ex. h2 {background-color: #0000FF;} a cor do
fundo do cabeçalho de nível 2 será azul. body { background-color: #FFCC66; } a cor do
fundo da página será “mostarda”.
Propriedades do CSS
‘background-image’: define uma imagem de fundo
body {background-color: #FFCC66; background-image: url(“imagem.jpg");} a imagem
será exibida como fundo de página.
‘background-repeat’: define como a exibição da imagem será repetida. background-repeat: repeat-x – repete na horizontal background-repeat: repeat-y – repete na vertical background-repeat: no-repeat – não repete
Propriedades do CSS
background-attachment: define se a imagem de fundo ficará fixa ou não.
Background-attachment: scroll - imagem rola com a pág Background-attachment: fixed - imagem fica fixa.
background-position: define a posição da imagem (do topo e da margem esquerda).
background-position: 2cm 2cm – 2cm do topo e da margem esquerda
background-position: 50% 25% background-position: top right – canto superior direito
(válido: top, bottom, center, left e right)
Propriedades do CSS
Background extendido: body{ background-color: #FFCC66;
background-image: url(“imagem.gif");
background-repeat: no-repeat; background-attachment: fixed;
background-position: bottom right ;}
Background abreviado: body{background: #FFCC66 url(“imagem.gif")
no-repeat fixed bottom right;} ou seja:
background: [color] [image] [repeat] [attachment] [position]
Propriedades do CSS
font-family: define uma lista de fontes para uma seção da página. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: serif;} h3 {font-family: monospace;}
font-variant: texto normal ou small-caps font-weight :define quão negrito será a
fonte (um nº no intervalo de 100 a 900). font-size: define o tamanho da fonte (20px,
1cm, 12pt, 2em) Abreviado font: italic bold 30px arial, sans-serif
Propriedades do CSS
Formatação do texto: text-indent: 30px; (recuo 1ª linha) text-align: center; (Alinhamento) text-decoration: underline; (sublinhado)
(overline – linha acima ou line-through tachado) letter-spacing: 6px; (espaço entre letras) text-transform: uppercase; (maiúsculo)
(ou capitalize ou lowercase - minúsculo )
Propriedades do CSS
Comandos BásicosSeparadores – Linha Horizontal
Formatação de linkspseudo-classe: a:link {color: green;} (link não visitado) a:visited {color: yellow;} (link visitado) a:active {background-color: blue;} (link ativo) a:hover {color:red; font-style: italic;} (sobre o link)
Você pode retirar o sulinhado do link a { text-decoration:none; }
Propriedades do CSS
Comandos BásicosSeparadores - Parágrafo
Usando class e id para estilizar seções
Formata a seção especial: (.nome_da_class) .inicio {fonte-size: 2cm; color= blue; letter-spacing: 6px; }
Faz uso da classe: (seção class=“nome_da_class”) <h1 class="inicio">Cabeçalho com formatado diferente</h1>
Cria e formata o identificador: #c1 { color: red; }
Faz uso da identificação na seção: <h1 id="c1">Cabeçalho 1 a ser diferenciado</h1>
Propriedades do CSS
Comandos BásicosSeparadores - Parágrafo
Um elemento tem quatro lados: right, left, top e bottom (direito, esquerdo, superior e inferior). A margin é a distância entre os lados de elementos vizinhos .
Exemplo 1:body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; }
Propriedades do CSS
Exemplo 2:
body {
margin: 100px 40px 10px 70px; }
p {
margin: 5px 50px 5px 50px;
}
Comandos BásicosSeparadores - Parágrafo
Padding pode ser entendido como "enchimento“, ele define simplesmente a distância entre a borda e o conteúdo do elemento.
Exemplo:
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
Width define a largura de um elemento. Height define a altura de um elemento.
Propriedades do CSS
Comandos BásicosSeparadores - Parágrafo
Bordas: border-width: define a espessura das bordas.
Valores válidos thin, medium, e thick (fina, média e grossa), ou um valor numérico em pixels.
border-color: define as cores para as bordas. border-style: define o tipo da borda. Valores
válidos:dotted, dashed, solid, double, groove, ridge, inset, outset.
Podemos indexar as bodas utilizando: border-top-style border-bottom-color border-right-style border-left-width
Propriedades do CSS
Comandos BásicosSeparadores - Parágrafo
Exemplos:H1 {
border-top-style: solid;
border-top-color: red;
border-bottom-style: solid;
border-bottom-color: blue;
border-right-style: solid;
border-right-color: green;
border-left-style: solid;
border-left-color: orange;
}
p { border-width: 1px; border-style: solid; border-color: blue; }
p { border: 1px solid blue; } <!* idem ao anterior */>
Propriedades do CSS
Comandos BásicosSeparadores - Parágrafo
Agrupando elementos (span e div)No estilo:span.benefit { color:red; }#bom { background:blue; }#ruim { background:red; }
No html:<p>Para ter uma vida<span class="benefit">feliz</span> e <span class="benefit">saudável</span>:
Propriedades do CSS
<div id="bom"><ul>É bom:<li>Comer frutas e verduras</li><li>Praticar esportes</li><li>Viajar</li><li>Dormir bem </li></ul></div><div id="ruim"><ul>Não é bom:<li>Comer gordura animal</li><li>Trabalho em excesso</li><li>Vida ociosa</li></ul></div>
Comandos BásicosSeparadores - Parágrafo
<html>
<head>
<title>Barra de Navegação</title>
<style type="text/css">
.barNav a {
font: 12px Arial, Verdana,Helvetica,sans-serif;
color: #000;
text-decoration: none;
background: #FFC50C;
text-align: center;
padding: 1px 5px;
margin-right:1px;
border: 1px solid #000;
}
.barNav a:hover {
color: #666;
background: #FCFCFC;
border: 1px solid #666;
}
Propriedades do CSS
<body>
<p class="barNav">
<a href="caminho/arquivo.html" >Home </a>
<a href="caminho/arquivo.html">Quem somos</a>
<a href="caminho/arquivo.html">Portfólio </a>
<a href="caminho/arquivo.html">Contato </a>
</p>
</body>
</html>