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.

Transcrição

1 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. <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. <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">

2  </style> </head> <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= > texto para o link </a> Abrir o link em uma nova janela <a href= 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 que é o que é o endereço completo do site HTML.net e é chamado de URL (Uniform Resource Locator). Notar que " 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:

3 <a href= > <img src= caminho\nomedaimgem.ext > </a> <img src= caminho\nomedaimgem.ext alt = texto quando passa o mouse na imagem > 3-Link para <a href= mailto:endereço de > mensagem </a> Obs vai rodar de tiver instalado na máquina o servidor de 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> <p>inserindo links</p> <a href=" <br><br> <a href=" target="_blank">google outra janela</a> <br><br> <hr> <p> link para </p> <a href="mailto:falecomvania@gmail.com">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>

4 <a href=" 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

5 <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 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>

6 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

7 xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxtexto <div id="picture"> <img src="bandeiradobrasil.jpg" alt="bandeira do Brasil"> <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 id="column2"> <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx, xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...</p> <div id="column3"> <p>xxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...</p> #column1 { float:left; width: 33%; #column2 { float:left; width: 33%;

8 #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">  </style> </head>  <div id="cabecalho" class="titulo"> <h1>curriculum Vitae</h1>  <div id="linha" class="linha"> <span>analista Desenvolvedor</span>  <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>

9 <ol type="1"> <li>texto I</li> <ol type="a"> <li>teste</li> </ol> <li>texto II</li> <li>texto III</li> </ol>  <div id="linha" class="linha"> <span>disciplina - Programação para Internet</span> </body> </html>