Css parte I

1

Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010

CSS Cascading Style SheetsFolhas de Estilo em CascataParte I


CSS é uma linguagem que define a formatação de um documento html.

2


documento.html documento.css

CSS éusado para configurar um estilo.HTML é

usado para estruturar conteúdos.


A grande vantagem do uso de CSS é a de separar a marcação HTML, da apresentação do site.

3


index.html

documento.css

historia.html

produtos.html

contato.html

cadastro.html


Em outras palavras, vale dizer que o HTML destina-se unicamente a estruturar e marcar o conteúdo, ficando por conta das CSS toda a responsabilidade pelo visual do documento.

4


Sintaxe

Seletor {propriedade: valor}

É o elemento que será alvo da regrade estilo.

É o atributo do elemento HTML ao qual será aplicada a regra.

É a característica específica a ser assumida pela Propriedade.


Se por exemplo, você quiser trocar a cor do fundo de um site com 100 páginas, a folha de estilos evita que você edite manualmente uma a uma as páginas para fazer a mudança nos 100 documentos HTML. Usando CSS a mudança se fará em uns poucos segundos.

5




texto exemplo

Esse elemento e seus atributosestão em desuso.

Texto exemplo


O certo é em um documento com extensão .css colocar (exemplo de folha de estilo externa):

p {font-size: large;font-family: georgia, serif;color: red;}

6


Para ligar os dois documentos énecessário acrescentar na seção head do documento html:

documento.html documento.css

<head>

<link rel=“stylesheet” type=“text/css” href=“nome do arquivo.css”>

</head>


Além do exemplo de folha de estilo externa. Existem mais dois tipos de folhas de estilo.

• Incorporada

• In line

7


Folha de estilo incorporada (é colocada no cabeçalho do documento html)

<html>

<head> <title>Exemplo</title>

<style>

body {background-color: #FF0000;} </style>

</head>

<body>

Esta é uma página com fundo vermelho

</body>

</html>


Folha de estilo In line (é colocada na

própria linha do código html)

<html>

<head> <title>Exemplo</title>

</head>

<body style="background-color: #FF0000;">

Esta é uma página com fundo vermelho

</body>

</html>

Css parte I

Technology

Transcript of Css parte I