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?


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?


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


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;

}


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


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


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


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>


<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>

css - cascading style sheets folha de estilos em cascata profa:tânia neuenschwander

Documents