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>

http://www.tecmundo.com.br/programacao/2705-o-que-e-css-.htm

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

Documents