Aula 08 Css Conceitos Básicos

CSS - Cascading Style Sheets Introduo
Como surgiu a tecnologia CSS?

De incio, a linguagem HTML foi criada para a
construo de pginas Web, que exibiam apenas

documentos cientficos.
Com a evoluo tecnolgica (aplicativos, software,
hardware) :
Houve a necessidade de uma maior flexibilidade para
manipular visualmente os contedos.

Com a criao da primeira tag font e atributo color,
nasceu o conceito de estilizao dos contedos HTML
Folhas de Estilo em Cascata

Como surgiu a tecnologia CSS?
Com a incluso de novas tags e atributos de estilizao,
a velha linguagem de marcao HTML, passou a ter 2

funes:
Estruturar o contedo atravs da marcao
Dar uma aparncia final a este contedo.
PROBLEMA: como estilizar projetos de documentos
HTML cada vez maiores e sofisticados?

SOLUO: criao da tecnologia CSS.
Folhas de Estilo em Cascata

Uma regra CSS, compe-se de trs 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 vlida (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 caracterstica especfica a ser assumida pela propriedade (por
exemplo: letra tipo arial, cor azul, fundo verde, etc.)
A regra CSS e sua sintaxe

p { font-size: 12px; /* ponto-e-vrgula facultativo */ }
body {
color: #000;
background: #fff; /*ponto-e-vrgula 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;}
Vinculando folhas de estilos

documentos
As folhas de estilo podem ser vinculadas a um
documento HTML de trs maneiras distintas:

1. Importadas ou linkadas:
quando as regras CSS esto declaradas em um
documento a parte do documento HTML. O arquivo de

folha de estilo deve ser gravado com a extenso .css
2. Incorporadas:
quando as regras CSS esto declaradas no prprio
documento HTML.
3. Inline:
quando as regras CSS esto 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 seo 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 pgina. Dever ser declarada na
seo 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 apresentao com a marcao .

Use este mtodo excepcionalmente, por exemplo:
quando quiser aplicar um estilo a uma nica
ocorrncia de um elemento.
<p style="color:#000; margin: 5px;">
/*Aqui um pargrafo de cor preta e com 5 px nas 4
margens.*/
</p>
Folhas de estilo mltiplas

Se alguma propriedade for definida para um mesmo elemento em
folhas de estilo diferentes, entrar em ao, o EFEITO CASCATA e

prevalecero os valores da folha de estilo mais especfica.
Conflito: tamanho da fonte para o elemento h2

Soluo: h2 ter o tamanho igual a 10 pt. Pois a folha interna foi
declarada depois da externa na seo head do documento.
As fontes nos elementos HTML

As propriedades bsicas para fontes:
color: ...................cor da fonte
font-family: ..........tipo de fonte
font-size: .............tamanho de fonte
font-style: ............estilo de fonte
font-variant: .........fontes maisculas de menor altura
font-weight: .........quanto mais escura a fonte
(negrito)
font: .................maneira abreviada para todas as
propriedades

Valores vlidos para as propriedades da fonte:
color:
cdigo hexadecimal: #FFFFFF
cdigo rgb: rgb(255,235,0)
nome da cor: red, blue, green...etc
font-family:
nome da famlia de fontes : define-se pelo nome da
fonte, p.ex: verdana, helvetica, arial, etc.
nome da famlia genrica: define-se pelo nome genrico,
p.Ex:serif, sans-serif, cursive, etc.

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, ..)
%

font-style:
normal: fonte normal na vertical
italic: fonte inclinada
oblique: fonte obliqua
font-variant:
normal: fonte normal
small-caps: transforma em maisculas de menor altura
font-weight:
normal
bold
bolder
lighter
100
200

font-weight:
300
400
500
600
700
800
900
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>Cabealho com letras vermelhas</h1>
<h2>Cabealho com letras verdes</h2>
<p>Pargrafo com letras azuis</p>
</body>
</html>
As propriedades para as bordas, e

seus valores na regra CSS
Valores vlidos para as

propriedades das bordas
Propriedades Padding x Margin
padding-top: espaamento para a parte superior;

padding-right: espaamento para o lado direito;
padding-bottom: espaamento para a parte inferior;
padding-left: espaamento para o lado esquerdo.
Propriedades Padding x Margin
A propriedade margin em CSS define o espao exterior
entre os elementos.
margin -top: espaamento para a parte superior;
margin -right: espaamento para o lado direito;
margin -bottom: espaamento para a parte inferior;
margin -left: espaamento para o lado esquerdo.
Exemplo
<html>
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 mdia, contnua e azul</h3>
<p>Borda 6px, tracejada e vermelha</p>
</body>
</html>
Cabealho - Efeito 1 (exemplo)

<html>
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{
color: #000; }
</style>
</head>
<body>
<h1>Efeitos CSS em Cabealhos</h1>
<p>Este um pargrafo...</p>
</body>
</html>

<html>
h1 {
font-size:150%;
color:#f00;
padding-left: 2px;
border-top: 2px solid #c36;
border-bottom: 2px dotted #c36; }
p{
color: #000; }
</style>
</head>
<body>
<h1>Efeitos CSS em Cabealhos</h1>
<p>Este e um pargrafo...</p>
</body>
</html>

<html>
h1 {
font-size:150%;
color:#999;
padding-left: 2px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin:0 10px 0 0; }
p{
color: #000; }
</style>
</head>
<body>
<h1>Efeitos CSS em Cabealhos</h1><br>
<p>Este e um pargrafo...</p>
</body>
</html>

<html>
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{
color: #000;}
</style>
</head>
<body>
</body>
</html>

<html>
h1 {
font-size:150%;
color:#039;
padding: 8px 0 10px 12px;
border-left: 1px solid #039;
border-top: 1px solid #039;
margin-bottom:0;}
p{
color: #000;
border-left:1px solid #069;
padding: 0 0 12px 12px;
margin-top:0;}
</style>
</head>
<body>
</body>
</html>

<html>
h1 {
text-align:left;
color:#fff;
font-size:150%;
background:#a3f
padding: 5px 0 5px 80px;
border:0;
margin-bottom:10px;}
p{
color: #000;}
</style>
</head>
<body>
</body>
</html>

<html>
h1 {
color:#fff;
font-size:150%;
background:#548b54;
padding:5px 0px 5px 10px;
border: 3px outset #ccc;
margin-bottom:10px;
width:22.0em;}
p{
color: #000; }
</style>
</head>
<body>
</body>
</html>

Aula 08 Css Conceitos Básicos

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Aula 08 Css Conceitos Básicos

Încărcat de

Drepturi de autor:

Formate disponibile

CSS - Cascading Style Sheets Introduo

Como surgiu a tecnologia CSS?

construo de pginas Web, que exibiam apenas

manipular visualmente os contedos.

Folhas de Estilo em Cascata

a velha linguagem de marcao HTML, passou a ter 2

PROBLEMA: como estilizar projetos de documentos

HTML cada vez maiores e sofisticados?

Folhas de Estilo em Cascata

seletor { propriedade: valor; }

A regra CSS e sua sintaxe

Vinculando folhas de estilos

documento HTML de trs maneiras distintas:

documento a parte do documento HTML. O arquivo de

Folha de estilo externa - Sintaxe

importado ao documento HTML, dentro da seo head do

Folha de estilo incorporada ou

seo head do documento com a tag de estilo <style>, conforme

Folha de estilo inline - Sintaxe

mistura a apresentao com a marcao .

Folhas de estilo mltiplas

folhas de estilo diferentes, entrar em ao, o EFEITO CASCATA e

Conflito: tamanho da fonte para o elemento h2

declarada depois da externa na seo head do documento.

As fontes nos elementos HTML

As fontes nos elementos HTML

As fontes nos elementos HTML

As fontes nos elementos HTML

As fontes nos elementos HTML

Exemplo: color ... A cor da fonte

As propriedades para as bordas, e

Valores vlidos para as

Propriedades Padding x Margin

padding-top: espaamento para a parte superior;

Propriedades Padding x Margin

A propriedade margin em CSS define o espao exterior

Cabealho - Efeito 1 (exemplo)

Cabealho - Efeito 2 (exemplo)

Cabealho - Efeito 3 (exemplo)

Cabealho - Efeito 4 (exemplo)

Cabealho - Efeito 5 (exemplo)

Cabealho - Efeito 6 (exemplo)

Cabealho - Efeito 7 (exemplo)

S-ar putea să vă placă și