Unidade: O que é CSS? HTML e CSS? Boa aula!!!
Objetivo Construir: Padrões Web, Tableless e outros Como inserir o CSS nas páginas Sintaxe de utilização do CSS Tag DIV e tag SPAN
Orientações Durante a explanação anote as possíveis dúvidas; Após a explanação teremos um tempo para tirar as dúvidas; Caso, ainda, surjam dúvidas após o término da aula, será possível resolvê-las pelo fórum do blackboard.
Retorno das Atividades e Avaliação Leia, com atenção, o que foi determinado como atividade desta primeira aula; No documento, esta descrito a pontuação para cada atividade.
Vamos começar!!! Interface Humano Computador II
Ferramentas para desenvolvimento Muito embora estejamos criando nossas aplicações em bloco de notas lembro que podem criar suas atividades com qualquer outro edito HTML. Editores mais conhecidos: Adobe Dreamweaver Adobe GoLive Bluefish Edit Plus Microsoft Expression Web Microsoft Frontpage Mozilla Composer FirstPage
QUE É CSS? Cascading Style Sheet ou Folha de Estilo em Cascata O CSS é uma linguagem que nos permite adicionar estilos as nossas páginas, em outras palavras, seria a formatação visual (aparência, layout) das páginas como tipo de fonte, cores, espaçamentos, entre outros. A W3C (World Wide Web Consortium) já está desenvolvendo a versão 3 do CSS, nós estaremos utilizando a versão CSS 2 Em linhas gerais, a versão CSS 2 contém toda a especificação do CSS 1 e obviamente alguns acréscimos, isso também irá se aplicar a versão CSS 3 que irá conter as especificações do CSS 2. Com o uso do CSS diminuímos o trabalho devido a possibilidade de reutilização dos estilos em diferentes tags e principalmente em diferentes páginas.
Vantagens do CSS? No passado, a tag <H1> em quase todos os web sites parecia a mesma - texto preto era consideravelmente maior que o corpo do texto normal. Se você quisesse fazer seus próprios títulos diferenciados, tinha de formatar cada tag de título individualmente, utilizando tags <FONT> ou similares. Se mais tarde mudasse aparência desses títulos, tinha de voltar e mudar cada título individualmente. Ou seja: um processo lento e trabalhoso. Com uma folha de estilo, você pode fazer uma "declaração global", como "quero que todos os meus títulos <H1> sejam verdes".
Vantagens do CSS? Com uma folha de estilo, você pode fazer uma "declaração global", como "quero que todos os meus títulos <H1> sejam verdes". É declarado somente uma vez e cada título <H1> em seu site será verde. Se depois decidir que azul é uma cor melhor, não é preciso voltar e alterar cada tag <H1> para a cor azul. Basta alterar o estilo - a "regra" - para "quero que todos os meus títulos <H1> sejam azuis" e pronto! Obviamente você não está limitado a títulos e nem a cor azul. Outra vantagem das folhas de estilo é que é possível definir um estilo personalizado para cada elemento de design em seu web site, incluindo títulos, lista, tabelas e imagens, etc. Além de definir uma cor, você pode definir a fonte, o tamanho, o alinhamento, a espessura da borda, e assim por diante.
Alguns termos atuais Tableless? Web Standards? Atualmente o desenvolvimento web se preocupa em utilizar estruturas padronizadas mundialmente, no início esse movimento foi chamado por alguns de Tableless (somente um nome para algo já existente, assim como o AJAX), o termo Tableless significou em não usar tabelas para a construção de layout, mas isso vai mais além. Hoje esse termo é pouco comentado, pois deu lugar a algo maior e mais profissional, que seria os chamados Web Standards, ou Padrões Web. Padrões Web podem ser definidos como normas que determinam o uso correto das diversas tecnologias disponíveis para o desenvolvimento Web.
Alguns termos atuais cont... Tableless? Web Standards? Devemos utilizar as linguagens com seus propósitos iniciais, como por exemplo, o HTML para estruturar o conteúdo e o CSS para formatar esse conteúdo. Sites que seguem esses padrões, ficam mais baratos, possibilitam uma maior facilidade em sua manutenção e podem ser acessados em diferentes tipos de dispositivos. Não se usa tabelas para criação do layout das páginas hoje, pois tabelas são para montar dados tabulares, em seu lugar, usamos as folhas de estilo CSS.
Como inserir o CSS? Antes de aprendermos os diversos tipos de formatação CSS de um documento HTML, devemos aprender quais as três formas possíveis de inserir um estilo CSS em nossas páginas. As três formas de inserir um estilo CSS em uma página são: CSS externo CSS incorporado CSS inline
Como inserir o CSS? Toda a configuração de formatação fica dentro de um arquivo.css que é chamado no cabeçalho do documento html com a tag link Ex: <link rel="stylesheet" href="estilo.css" type="text/css" /> As configurações definidas no arquivo estilo.css valem para todas as páginas que fazem referência ao arquivo.
Como inserir o CSS externo Exemplo1.html Aqui, estamos chamando o arquivo que contêm o estilo. Obs: neste caso o arquivo Exemplo1estilo.css está no mesmo diretório que o arquivo Exemplo.html <html> <head> <title> Teste CSS externo </title> <link rel="stylesheet" href="exemplo1estilo.css" type="text/css" /> </head> <body> <p> um parágrafo de exemplo </p> </body> </html> Temos ao lado o arquivo Exemplo1estilo.css que será chamado no arquivo acima Exemplo1.html Exemplo1estilo.css p { font-family: "verdana"; color: 00ff00; }
Exemplo
Como inserir o CSS incorporado Todas as configurações ficam dentro do cabeçalho (HEAD) da página e são delimitadas pelas tags <style>...</style> As configurações valem para a página inteira. Este tipo de CSS não permite a reutilização como o CSS externo. Exemplo incorporado : <html><head> <title> Teste CSS incorporado </title> <style type="text/css"> p { font-family: "verdana"; color: 0000ff; } </style> </head> <body> <p> um parágrafo de exemplo </p> </body> </html> Aqui, estamos chamando o estilo dentro do código html Exemplo2incorporado.html
Exemplo
CSS inline As configurações são feitas diretamente na tag, logo, a formatação é específica ao marcador. Para acrescentar esse tipo de CSS utilizamos o atributo style na tag. Use este tipo de estilo com moderação pois ele mistura conteúdo com apresentação e não permite nenhum tipo de reuso. Exemplo inline: <html> <head> <title> Teste CSS inline </title> </head> <body> <p style="font-family:verdana;color:00ff00"> um parágrafo de exemplo </p> </body> </html> Exemplo3inline.html
Exemplo
CSS Se por acaso você tentar utilizar os três tipos de inserção CSS em um documento HTML, o mesmo obdece uma prioridade entre eles, conforme demonstrado abaixo: 1- CSS inline 2- CSS incorporado 3- CSS externo 4- HTML Na figura acima, o CSS inline sobrepõe aos demais estilos, caso este não exista, o CSS interno sobrepõe o externo e assim ocorre com as demais variações.
Sintaxe do CSS Podemos definir as folhas de estilo de diversas maneiras: Para um elemento específico Para um grupo de elementos Para um elemento específico dentro de uma sequência de elementos Para uma ou mais classes pertencentes a um elemento Para classes genéricas Para estilos individuais Referência: Material de apoio de TIA professores Alcides Ana e Luíz Reis
Sintaxe do CSS (para um elemento) Podemos definir nossos estilos para qualquer elemento do HTML. Sintaxe: elemento { propriedade: valor} Tag HTML Atributo que queremos modificar Valor da propriedade A propriedade e o seu respectivo valor são separados por : (dois pontos) Se o valor da propriedade tiver mais de uma palavra, devemos utilizar (aspas) Quando inserimos mais de uma propriedade, temos que utilizar ; (ponto e vírgula) para separá-las.
Exemplos p { color:blue} b { color:red; font-family: verdana; } i { color:red; font-family: sans serif ; } Um padrão que é utilizado para a criação dos estilos é inserir uma propriedade em cada linha, isso facilita a leitura posterior. body { } color:green; font-family: sans serif ; <html> <head> <title>exemplo</title> <style type="text/css"> p { color:blue} b { color:green; font-family: verdana; } i { color:red; font-family: "sans serif"; } body { color:brown; font-family: "sans serif"; } </style> </head> <body> <p> parágrafo </p> <b> negrito</b><br /> <i> itálico </i><br /> Texto do body. </body> </html> Exemplo4inline.html
Exemplo
Sintaxe do CSS (para um grupo de elementos) Podemos definir configurações para um grupo de tags, para isso, devemos separá-las com, (vírgula) Ex: h1, h2, p { color:#ff0000; font-family: verdana; text-align:center; } Separamos cada elemento com a vírgula
<html><head> <title>exemplo</title> <style type="text/css"> p, h1, h2 { color:ffff00; font-family:verdana; text-align:center; } Exemplos body { color:00aaff; font-family: "sans serif"; } </style> </head> <body> <p> exemplo de parágrafo </p> <h1> exemplo de H1 </h1> <h2> exemplo de H2 </h2> exemplo do texto no body. </body> Não podemos esquecer de fechar as chaves{ } para delimitar o bloco do estilo CSS </html> Exemplo5.html
Exemplo
Sintaxe do CSS (Para um elemento específico dentro de uma sequência de elementos) Caso necessário, é possível definir a configuração para um elemento (tag) que está dentro de uma certa sequência de outros elementos (hierarquia). Ex: div p { color:blue:} Neste exemplo somente a tag P que estiver dentro da tag DIV receberá essa configuração p b {color: red} Neste outro, somente a tag b que estiver dentro da tag P receberá essa configuração. Separamos a sequência de tags com espaço.
Exemplos <html> <head> <title>exemplo</title> <style type="text/css"> div p { color:blue; font-size:40;} p b { color:red; font-size:40;} </style> </head> <body> <div><p> parágrafo dentro da div </p></div> <p> parágrafo fora da div </p> <b> negrito normal </b> <p><b> negrito dentro da tag p </b></p></body> </html> Não podemos esquecer de fechar as chaves{ } para delimitar o bloco do estilo CSS Exemplo6.html
Exemplo
Sintaxe CSS (Para uma ou mais classes pertencentes a um elemento) Uma classe pode ser associada a um elemento (tag), com isso, podemos aplicar diferentes formatos no mesmo elemento, bastando chamar as respectivas classes. Neste modelo, a classe só pode ser chamada no elemento que está associada, logo não funcionará em outro elemento. Para utilizar uma classe em um marcador, acrescentamos o atributo class. Sintaxe: elemento.nome_da_classe { propriedade: valor} Tag HTML Nome da classe Atributo que queremos modificar Valor da propriedade
Exemplos <html> <head> <title>exemplo</title> <style type="text/css"> p.cor_verde { color:#00ff00; font-family:verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:20px; } </style> </head> <body> <p> Primeiro parágrafo sem formatação </p> <p class="cor_verde"> Segundo parágrafo com formatação</p> <i class="cor_verde"> Texto em itálico </i><br /> Texto do body. </body> </html> Não aplica o estilo porque a classe cor_azul está associada a tag P e não a tag i. Cria a classe cor_verde para o elemento P. Podemos criar mais de uma classe para o mesmo elemento, basta criar nomes diferentes para cada classe. Aplica a classe cor_verde na tag. Veja que para aplicar o estilo, devemos chamar a classe com o atributo class. Exemplo7.html
Exemplo
Sintaxe CSS (Para classes genéricas) Podemos também criar classes genéricas (não estão associadas a nenhum elemento) que podem ser aplicadas a qualquer elemento do HTML, sempre que for necessário, assim, uma classe pode ser usada várias vezes em um mesmo documento. Para utilizar uma classe em um marcador, acrescentamos o atributo class. Sintaxe:.nome_da_classe { propriedade: valor} Nome da classe Iniciamos com um ponto Atributo que queremos modificar Valor da propriedade
Exemplos <html> <head> Cria a classe cor_azul <title>exemplo</title> genérica, logo, pode ser usada <style type="text/css"> em qualquer tag do HTML..cor_verde {color:#00ff00; font-family:verdana, Arial, Helvetica, sans-serif; font-weight:bold; } </style> </head> <body> <p> Primeiro parágrafo sem formatação </p> <p class="cor_verde"> Segundo parágrafo com formatação</p> <i class="cor_verde"> Texto em itálico </i><br /> Texto do body. </body> </html> Aplica a classe cor_azul na tag p e na tag i. Veja que para aplicar o estilo, devemos chamar a classe Exemplo8.html
Exemplo
Sintaxe CSS (Para estilos individuais) Assim como as classes genéricas, os estilos individuais podem ser aplicados a qualquer elemento do HTML, a diferença é que esses estilos são únicos, logo, só podem ser utilizados uma única vez dentro do mesmo documento. São utilizados também para identificar um elemento HTML para posteriormente ser manipulado através da linguagem JavaScript. Este estilo é a identificação da tag Para utilizar um estilo individual em um marcador, acrescentamos o atributo id. Sintaxe: #nome_do_id { propriedade: valor} Nome da classe Iniciamos com # Atributo que queremos modificar Valor da propriedade
Exemplos <html> <head> <title>exemplo</title> <style type="text/css"> #cor_verde { color:#00ff00; font-family:verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:20px; } </style> </head> <body> <p> Primeiro parágrafo sem formatação </p> <p id="cor_verde"> Segundo parágrafo com formatação</p> <i id="cor_verde"> Texto em itálico com formatação</i><br /> Texto do body. </body> </html> Aplica o id cor_verde na tag p. Veja que para aplicar o estilo, devemos chamar o identificador com o atributo id. Cria a classe cor_azul genérica, logo, pode ser usada em qualquer tag do HTML. Exemplo9.html
Exemplo
Observações importantes do CSS Podemos criar estilos para uma tag, grupo de tags ou tags em um sequência específica. Podemos criar classes de estilos para definir diferentes estilos para a mesma tag. Podemos criar classes genéricas que podem ser aplicadas a qualquer tag do HTML, essas classes podem ser usadas mais de uma vez dentro do documento. Para acioná-la, usamos o atributo class na tag. Podemos criar um estilo individual que aplica um estilo e identifica uma tag do HTML, está forma de estilo só pode ser usada uma vez dentro do documento. Para acioná-lo, usamos o atributo id na tag. Podemos ter em uma mesma tag, os atributos class e id. Ao chamar a classe em uma tag com o atributo class, colocamos somente o nome da classe, ou seja, na chamada da classe, não utilizamos o ponto. O mesmo ocorre quando chamamos o estilo individual com o atributo id, também não inserimos o #, somente o nome do estilo.
Comentários no código CSS Como geralmente os arquivos com CSS possuem muitas configurações, é interessante você inserir comentários descrevendo o que cada bloco de estilo faz. Para isso usamos /*...*/ Exemplo <style type= text/css > /*Cria um id chamado cor_azul*/ #cor_azul { color:blue} </style> A utilização de comentários em CSS é muito importante, pois ajuda a identificar os vários estilos que possam existir.
Tag DIV e tag SPAN Os estilos CSS feitos até o momento, foram aplicados a tags do HTML que já possuem um formato padrão inicial, como por exemplo a tag B que deixa o texto em negrito. Porém, existem situações em que precisamos de tags limpas, sem formatação padrão, para estes casos, temos a disposição a tag DIV e a tag SPAN. A diferença entre elas é que a tag DIV aplicada uma quebra de linha antes e depois do texto e a tag SPAN não. A tag DIV é muito utilizada na criação de layouts das páginas e áreas para conteúdos, já a tag SPAN é utilizada para aplicar configurações dentro do conteúdo, isso devido ao fato de não possuir nenhum formato pré-definido. Ambas as tags aceitam o uso de classes (class) e estilos individuais (id), também aceitam o uso de ambos os atributos.
Exemplos <html><head> <title>exemplo</title> <style type="text/css">.caixa { border: 3px solid #0000ff;/*cor da borda*/ background-color: #ff00ff; color:#00ff00; font-family:verdana, Arial, Helvetica, sans-serif; font-weight:bold; } #aviso { width: 100px; height:100px; } </style> </head> <body> <p> Primeiro parágrafo </p> <div> Utilizando a tags div, sem formatação</div> <div class="caixa" id="aviso"> Utilização da tag div, com formatação</div> <br /> <span>texto com a tag span, não faz nada.</span>. <br /> <span class="caixa">texto com a tag span e classe de estilo, faz algo.</span> </body> </html> Utilizando os atributos class e id Faz uso da classe caixa. Exemplo10.html
Exemplo
Bibliografia Materiais das aulas de TIA1 da Universidade Cruzeiro do Sul dos professores: Alcides Teixeira Barboza Jr Ana Paula Galvão Damasceno Carrare Cristiane Pires Camilo Douglas Almendro Ivan Carlos Alcantara De Oliveira Leonardo Carlos Comotti Kasperavicius Luiz Carlos Reis
Responsável pelo Conteúdo: Prof.Ms. Douglas Almendro Revisão Textual: Profª Esp. Márcia Ota www.cruzeirodosul.edu.br Campus Liberdade R. Galvão Bueno, 868 01506 000 São Paulo SP Brasil T F 55 11 3385 3000