Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as
aulas, os livros devem ser utilizados para o aprimoramento de seu estudo.
Como defino e escrevo uma classe ?
Classe é um seletor CSS aplicável a um ou mais elementos HTML ou a instâncias de
um ou mais elementos HTML os quais serão estilizados segundo as regras CSS
declaradas na classe.
Por exemplo:
<style type="text/css">
.minhaclasse {color: #FF0000;}
</style>
A classe denominada minhaclasse define a cor vermelha (#FF0000) para as
letras do elemento onde ela for aplicada(normalmente utilizado dentro da tag
<style>) Note que um seletor do tipo classe tem em sua sintaxe um . (ponto)
antes do nome da classe.
<body>
<p class="minhaclasse">
Aqui o texto do parágrafo Olá alunos ..bla...bla...
</p>
<h3 class="minhaclasse">
Aqui o texto do cabeçalho...
</h3>
Acima tanto o parágrafo como o cabeçalho serão na cor vermelha.
Como defino e escrevo uma classe ?
Classe é um seletor CSS aplicável a um ou mais elementos HTML ou a instâncias de
um ou mais elementos HTML os quais serão estilizados segundo as regras CSS
declaradas na classe.
Por exemplo:
<style type="text/css">
.minhaclasse {color: #FF0000;}
</style>
A classe denominada minhaclasse define a cor vermelha (#FF0000) para as
letras do elemento onde ela for aplicada(normalmente utilizado dentro da tag
<style>) Note que um seletor do tipo classe tem em sua sintaxe um . (ponto)
antes do nome da classe.
<body>
<p class="minhaclasse">
Aqui o texto do parágrafo Olá alunos ..bla...bla...
</p>
<h3 class="minhaclasse">
Aqui o texto do cabeçalho...
</h3>
Acima tanto o parágrafo como o cabeçalho serão na cor vermelha.
Supondo que temos um site com paragráfos de cores diferentes,poderiamos utilizar o
css externo, mas em uma manutenção seria um tragédia, veja o exemplo:
Exemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Classe do Css- Prof. Vania Gimenez</title>
<style type="text/css">
<!-p {margin-left:10px;color:blue;}
.pv {color:green;}
.pr {color:pink;}
-->
</style>
</head>
<body>
<p>paragráfo</p>
<p class=pv">paragráfo</p>
<p>paragráfo</p>
<p class="pv">paragráfo</p>
<p>paragráfo</p>
<p class="pr">paragráfo</p>
<p>paragráfo</p>
<p class="pv">paragráfo</p>
</body>
</html>
Se existir a necessidade de mudar de cor verde para cor vermelho.Qual a
manutenção devemos fazer?
Prof. Vania Gimenez – Aula links
1.LINKS EXTERNOS:
<a href= “http:://www.site.com.br”> texto para o link </a>
Abrir o link em uma nova janela
<a href= “http:://www.site.com.br” target=”_blank”> ”> texto para o
link </a>
O elemento ‘a’ refere-se a "anchor" - âncora . O atribuito href é abreviação
para "hypertext reference" - referência a hypertexto - e especifica o destino
do link -que normalmente é um endereço na Internet ou um arquivo. No
exemplo acima o atributo href tem o valor http:://www.site.com.br que é o
que é o endereço completo do site HTML.net e é chamado de URL (Uniform
Resource Locator). Notar que "http://" deve sempre ser incluido nas URLs.
A frase "Aqui entra o nome do link" é o texto mostrado no navegador como
link. Lembre-se de fechar atag com um </a>.A mensagem exibida será
utilizada para ativar o link. Sua cor serádeterminada pela Tag BODY:
2. Imagem com link:
Primeiro relembre como inserir uma imagem:
<img src= “caminho\nomedaimgem.ext” >
<img src= “caminho\nomedaimgem.ext” alt = “texto quando passa o
mouse na imagem” >
Agora a imagem com link:
<a href= “http:://www.site.com.br”>
<img src=“caminho\nomedaimgem.ext” >
</a>
<img src= “caminho\nomedaimgem.ext” alt = “texto quando passa o
mouse na imagem” >
3-Link para email:
<a href= “mailto:endereço de e-mail”> mensagem </a>
Obs vai rodar de tiver instalado na máquina o servidor de email
4-LINK PARA ATIVAR ARQUIVO DOC:
<a href= “documento.doc”> mensagem </a>
.doc
.jpg
.pdf
.avi
.mp3
.wma
.flv
Obs vai rodar automática de tiver os plugins instalados na máquina
Exemplo1:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>aula links </title>
</head>
<body>
<p>Inserindo links</p>
<a href="http://www.google.com">google</a>
<br><br>
<a href="http://www.google.com" target="_blank">google outra
janela</a>
<br><br>
<hr>
<p> link para email</p>
<a href="mailto:[email protected]">contato</a>
<br>
<hr>
<p> somente a imagem utilizando o alt- para texto explicativo</p>
<br>
<p>Atenção o caminho e o nome da imagem devem ser alterados</p>
<img src="C:\Users\Vania Gimenez\Desktop\IMAGENS\icon_PEIXE1.png"
alt="">
<br>
<p> imagem com link</p>
<br>
<a href="http://vaniagimenez.com.br"><img src="C:\Users\Vania
Gimenez\Desktop\IMAGENS\icon_PEIXE1.png" alt="site da professora
vania"></a>
</body>
</html>
4-LINK INTERNO:
INSERINDO A ÂNCORA – ponto de referência que será acessado por um link
< a name= “nome da âncora”> texto </a>
O símbolo # avisa o browser para procurar o link no documento atual.
LINK PARA A ÂNCORA –
<a href= “#nome da âncora”> texto </a>
Mais tags
1-Texto com letras menores
Para fazermos textos usando letras menores podemos usar a tag
<small></small>
2-Texto pré definido
<pre>texto texto texto</pré>
3-Agrupando elementos (span e div)
Os elementos <span> e <div> são usados para agrupar e
estruturar um documento e são freqüentemente usados em conjunto
com os atributos class(.) e id(#)
<span> utilizado para efeitos visuais a partes específicas do texto no
seu documento.
A cada span atribuímos uma class, e estilizamos na folha de estilos:
A folha de estilos:
É claro que você pode usar id para estilizar o elemento <span>.
Mas, como você deve estar lembrado, deverá usar uma única id para
cada um os três elementos <span>,
Exemplo:
Código no Css:
span.beneficio {color:red;}
ou
.beneficio - se quiser utilizar em mais tags
Dentro do corpo da pagina <body>
<p>Dormir cedo e acordar cedo faz o homem saudável, rico e
sábio.</p>
<p>Dormir cedo e acordar cedo faz o homem
<span class="beneficio">saudável</span>,
<span class="beneficio">rico</span>
e <span class="beneficio">sábio</span>.</p>
Agrupando com <div>
Enquanto <span> é usado dentro de um elemento nível de bloco
como vimos no exemplo anterior, <div> é usado para agrupar um ou
mais elementos nível de bloco. Diferenças à parte, o agrupamento
com <div> funciona mais ou menos da mesma maneira. Vamos ver
um exemplo tomando duas listas de presidentes dos Estados
Unidos agrupados segundo suas filiações políticas:
E na folha de estilos, podemos agrupar a estilização da mesma
maneira como fizemos
no exemplo acima:
no css
#democrats {background:blue;}
#republicans {background:red;}
No body
<div id="democrats">
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>
<div id="republicans">
<ul>
<li>Dwight D. Eisenhower</li>
<li>Richard Nixon</li>
<li>Gerald Ford</li>
<li>Ronald Reagan</li>
<li>George Bush</li>
<li>George W. Bush</li>
</ul>
</div>
Margin:
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
ou
body {
margin: 100px 40px 10px 70px;
}
body {
margin: 100px 40px 10px 70px;
}
p{
margin: 5px 50px 5px 50px;
}
h1 {
background: yellow;
}
h2 {
background: orange;
}
Definindo padding para os cabeçalhos, alteramos a quantidade de
Enchimento existente ao redor de cada um deles:
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
h2 {
background: orange;
padding-left:120px;
Flutuando elementos (floats)
----------------------------------Um elemento pode ser 'flutuado' à esquerda ou à direita com uso da
Propriedade float. Isto significa que o box e seu conteúdo são
deslocados para a direita ou para a esquerda do documento (ou do
bloco container model). A figura a seguir ilustra o princípio de float:
Se desejamos que um texto seja posicionado em volta de uma
figura como mostrado
abaixo, basta flutuarmos a imagem:
Uma imagem flutuada
textoxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxtexto
<div id="picture">
<img src="bandeiradobrasil.jpg" alt="Bandeira do Brasil">
</div>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx,
xxxxxxxxxxxxxxxxxxxxxxxxx...</p>
Para conseguir o efeito mostrado, basta definir uma largura para o
box que o contém
e declarar para ele float: left;
Outro exemplo : colunas
Floats podem ser usados para construir colunas em um documento.
Para criar as
colunas estruturamos as colunas no código HTML usando <div>
como mostrado a
seguir:
A seguir definimos a largura de cada coluna, por exemplo 33%, e
declaramos float:
left; para cada uma das colunas:
#picture {
float:left;
width: 100px;
}
<div id="column1">
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...</p>
</div>
<div id="column2">
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx,
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...</p>
</div>
<div id="column3">
<p>xxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...</p>
</div>
#column1 {
float:left;
width: 33%;
}
#column2 {
float:left;
width: 33%;
}
#column3 {
float:left;
width: 33%;
}
float pode ser declarado left, right ou none.
Exemplo simples
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Aula 5</title>
<style type="text/css">
<!-.azul { background-color: blue; }
.verde { background-color: green; }
.rosa { background-color: #ffcccc; }
-->
</style>
</head>
<body>
<!-- Titulo da pagina -->
<div id="cabecalho" class="titulo">
<h1>Curriculum Vitae</h1>
</div>
<!-- -->
<div id="linha" class="linha">
<span>Analista Desenvolvedor</span>
</div>
<!-- corpo -->
<div class="content">
<p class="azul">Este parágrafo é em AZUL I</p>
<p class="verde">Este parágrafo é em VERDE I</p>
<p class="verde">Este parágrafo é em VERDE II</p>
<p class="rosa">Este parágrafo é em ROSA</p>
<p class="azul">Este parágrafo é em AZUL II</p>
<ul type="square">
<li>Texto I - Square</li>
<li>Texto II - Square</li>
<li>Texto III - Square</li>
</ul>
<ul type="circle">
<li>Texto I - Circle</li>
<li>Texto II - Circle</li>
<li>Texto III - Circle</li>
</ul>
<ol type="1">
<li>Texto I</li>
<ol type="a">
<li>teste</li>
</ol>
<li>Texto II</li>
<li>Texto III</li>
</ol>
</div>
<!-- footer -->
<div id="linha" class="linha">
<span>Disciplina - Programação para Internet</span>
</div>
</body>
</html>
Download
