Webmaster & Webdesign
Disciplina:   Criação de Sites I
Prof.             Silveira     -     Nota de aula 09

C S S

Aplicando estilos { http://www.w3schools.com/css/demo_default.htm }

Local de definição ( externa, incorporada (head), in line):

no aquivo css separado (ex1.css): externo

body {background-color: yellow}
h1 {font-size: 36pt}
 
<html> <head> 
<link rel="stylesheet" type="text/css" href="ex1.css" /> 
<style type =”text/css”> 
<!--   h2 {color: blue} 
-->    </style>
</head> <body> 
<h1>This header is 36 pt</h1> 
<h2>This header is blue</h2> 
<p>This paragraph <span style=”color: red” > vermelho </span> </p> 
</body> </html>

Obs:  Utilize as tags <span>  ou <div> para demitar estilos, span para palavra 
frase, e div para blocos grandes, incluindo texto e tags.



Formatos:

básico:

grupos:

específicos:

atributos:
classes: 

classes gerais:

classes gerais:

h1 b {color: red}

h1,h2,h3,h4,h5,h6 {color: green }

h1 b {color: red}

p {text-align: center; color: black; font-family: arial }
p.center {text-align: center}
usa:  <p class="center"> This paragraph will be center-aligned. </p>
.center {text-align: center}
uso  <p class="center"> TEXTO </p> 
#direira {text-align: center}             /* This is a comment */
usa: <h1 id="direira"> TEXTO </h1>



Principais grupos de estilos:

Básicos

Avançados
CSS BackGround
CSS Text
CSS Font
CSS Border
CSS Margin
CSS Padding
CSS List

CSS Dimension
CSS Classification
CSS Positioning
CSS Pseudo-class
CSS Pseudo-element
CSS Media Types

Existem também estilos desenvolvidos para uso com sons e multimídia.

Unidades { http://www.w3schools.com/css/css_units.asp }

Unit

Description

%

percentagem

in

polgadas

cm

centimetros

mm

millimetros

em

Ref. Altura atural da fonte (=1)

ex

1 ex é igual a largura da fonte usual

pt

ponto (1 pt é igus a 1/72 polegadas)

pc

pica (1 pc é igual a 12 pontos)

px

pixels (cfe. Resolução da tela)
Cores

Unit

Description

color_name

A color name (red)

rgb(x,x,x)

A rgb value (rgb(255,0,0))

rgb(y%, y%, y%)

A rgb percentage value (rgb(100%,0%,0%))

#rrggbb

A hex number (#ff0000).


As cores podem assumir 16777216 tons. Com a combinação das 3 cores básicas. È conveniente

Conhecer a forma hexadecimal de como são compostas as nuances, bem como as cores seguras.

Lab Visibone - http://www.visibone.com/colorlab/big.html

Exercicios e exemplos para uso no laboratório.

Determinar cor de fundos: http://www.w3schools.com/css/tryit.asp?filename=trycss_background-color

Identar o texto: http://www.w3schools.com/css/tryit.asp?filename=trycss_text-indent

Propriedades fonte: http://www.w3schools.com/css/tryit.asp?filename=trycss_font

Margens: http://www.w3schools.com/css/tryit.asp?filename=trycss_margin

Listas com estilo: http://www.w3schools.com/css/tryit.asp?filename=trycss_list-style

Setar dimensao imagem: http://www.w3schools.com/css/tryit.asp?filename=trycss_height

Propriedade float: http://www.w3schools.com/css/tryit.asp?filename=trycss_float

Posição de um objeto: http://www.w3schools.com/css/tryit.asp?filename=trycss_topleft

Pseudo-classes (links) http://www.w3schools.com/css/tryit.asp?filename=trycss_link

Pseudo-elementos: http://www.w3schools.com/css/tryit.asp?filename=trycss_firstletter

.



Hosted by www.Geocities.ws

1