Prof. Vania Gimenez- Notas de aula
Caro aluno- Este material é só um apoio as aulas, os livros devem ser
utilizados para o aprimoramento de seu estudo.
______________________________________________________________________
Tema 1- Estrutura básica e formação no css interno, externo e in-line.
dicas de sites em downloads
http://www.w3c.br
http://www.w3schools.com------> muito bom para vocês aplicarem os
conhecimentos
http://www.maujor.com
iniciar programas htmlkit - opção create a new-fle
obs.:
<html> ------> tag
html ---------> seletor
</html> fechamento tag
ATENÇÃO NÃO UTILIZE CTRL C , POIS poderão ocorrer errosd .
o que está escrito em vermelho aparece para o cliente
<html>
-------> inicio da pagina
<head>
-------> inicio do cabeçalho
<title>Aula2 </title>
--------> inicio e fim do titulo
</head>
--------> fim do cabeçalho
<body>
--------->incio do corpo da pagina
Bom noite =======> o que vai aparecer para o cliente
</body>
---------> fim corpo corpo da pagina
</html>
--------> fim da pagina html
Estrutra do html utilizando css interno utilizando a tag <style> ----->
codigo na cor verde
Exemplo: siga as instruções dadas em aula.
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>aula2</title>
<style type="text/css">
<!-body{ background-color:red;}
h1 {font-size:50px;
font-family:mistral;
color:orange;;
text-align:center;
background-color:black;}
h3 {color:blue;
text-align:right;
margin-left:15px;}
h5 {text-align:center;}
p {color:blue;margin-left:20px}
hr {color:red;
width:25%;
height:10;}
-->
</style>
</head>
<body>
<h1>Texto h1</h1>
<h2>texto h2</h2>
<h3>texto h3</h3>
<h4>texto h4</h4>
<h5>texto h5</h6>
<h6>texto h2</h6>
<h1 style=‖color:pink;font-family:verdana;‖>texto h1 novamente</h1>
-----> css inline
-
<h3>outro h3 observe a cor</h3>
<p> paragrafo 1</p>
<hr style=‖width:50%‖>
<p>paragrafo 2</p>
<p> a tag <br> pula de linha é como o enter do word ok </br>
<hr>
< h1> vamos para o javascript </h1>
<script language="JavaScript" type="text/javascript">
<!-alert(―boa noite‖);
nome=prompt(―Qual o seu nome?‖);
alert(―com vai? ‖+nome);
//-->
</script>
<h1>estamos no html de volta</h1>
<p> paragrafo 1</p>
<hr>
</body>
</html>
obs.:
As cores seguem o padrão hexadecimal - descrito no arquivo deste site item
cores no link download
Mais tags
<hr> linha horizontal
ou <hr />
você pode alterar a cor da linha como fez com o h1
<br> pula linha ou <br />
O que é CSS?
CSS é a abreviatura para Cascading Style Sheets. — Folha de Estilos em
Cascata
Qual é a diferença entre CSS e HTML?
HTML é usado para estruturar conteúdos. CSS é usado para formatar
conteúdos estruturados.
Quais são os benefícios do uso de CSS?
CSS é uma revolução no mundo do web design. Os benefícios concretos do
uso de CSS incluem:
controle do layout de vários documentos a partir de uma simples
folha de estilos;
maior precisão no controle do layout;
aplicação de diferentes layouts para servir diferentes mídias (tela,
impressora, etc.);
emprego de variadas, sofisticadas e avançadas técnicas de
desenvolvimento.
Como funciona o CSS?
Suponha que desejamos uma cor de fundo vermelha para a página web:
Usando HTML podemos fazer assim:
<body bgcolor="#FF0000">
Com CSS o mesmo resultado será obtido assim:
body {background-color: #FF0000;}
Os códigos HTML e CSS são mais ou menos parecidos. O exemplo acima
serve também para demonstrar o fundamento do modelo CSS:
Onde colocar o código CSS?
O CSS pode ser aplicado a um documento de três maneiras distintas, sendo
elas:
Modo 1: Interno (a tag style)
<html>
<head>
<title>Exemplo</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Esta é uma página com fundo vermelho</p>
</body>
</html>
Modo 2: In-line (o atributo style) – aplicado diretamente na tag.
Exemplo
<html>
<head>
<title>Exemplo</title>
</head>
<body style="background-color: #FF0000;">
<p>Esta é uma página com fundo vermelho</p>
</body>
</html>
Modo 3: Externo (link para uma folha de estilos externa)
Crie um arquivo com o seguinte código e salve na sua máquina com o nome
de estilo.css
body
{
background-color: #FFff00;
}
h1
{
color: #ff0000;
background-color: #FFffff;
}
Para criar um link para um arquivo externo utilizamos a seguinte linha de
comando, que deve ser colocada entre as tags <head> e </head>
<link rel="stylesheet" type="text/css" href="estilo.css" >
Observação: O atributo rel (‖rel vem da palavra ―relationship‖ ou ―relação‖,
―relacionamento‖ em português) pode ser aplicado aos elementos e para
informar a relação que a URL que você está linkando tem em relação com a
página onde o link está. Este atributo descreve a relação entre o actual
documento e a âncora especificada pelo atributo href.
Agora salve o seguinte arquivo, já com a linha de comando inserida:
<html>
<head>
<title>Exemplo</title>
<link rel="stylesheet" type="text/css" href="estilo.css" >
</head>
<body>
<p>Esta é uma página com fundo vermelho</p>
</body>
</html>
Fontes
www.w3.org/Style/CSS/. Acesso em 10/01/2007.
http://www.apostilando.com. Acesso em 25/03/2007.
http:// www.imasters.com.br/secao/css. Acesso em 05/04/2007.
http://www.w3schools.com/css. Acesso em 05/04/2007.
Para inserir uma imagem de fundo: atenção altere no css externo no
seletor body.
Imagens de fundo: [background-image]
A propriedade CSS background-image é usada para definir uma imagem de
fundo. Para inserir uma imagem de fundo na página basta aplicar a
propriedade background-image ao elemento <body> e especificar o
caminho para onde está gravada a imagem.
Exemplo:
Body
{
background-color: #FFCC66;
background-image: url("fundo.gif");
}
h1
{
color: #990000;
background-color: #FC9804;
}
Observação: Lembrando que uma URL (de Uniform Resource Locator), em
português Localizador Uniforme de Recursos, é o endereço de um recurso
(um arquivo, uma impressora etc.), disponível em uma rede; seja a
Internet
Outros exemplos do w3schools:
http://w3schools.com/css/default.asp
Download
