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 Aqui, estamos chamando o arquivo que contêm o estilo. Exemplo1.html 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> Exemplo1estilo.css Temos ao lado o arquivo Exemplo1estilo.css que será • p { chamado no arquivo acima Exemplo1.html • 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"; Aqui, estamos chamando o estilo dentro do • color: 0000ff; código html • } • </style> • </head> • <body> • <p> um parágrafo de exemplo </p> • </body> Exemplo2incorporado.html • </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} Atributo que Tag HTML queremos Valor da modificar 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} • <html> <head> b { color:red; • <title>Exemplo</title> font-family: verdana; • <style type="text/css"> } • p { color:blue} • b { color:green; font-family: verdana; } i { color:red; • i { color:red; font-family: "sans serif"; } font-family: “sans serif”; • body { } • color:brown; Um padrão que é utilizado para a • font-family: "sans serif"; criação dos estilos é inserir uma • } propriedade em cada linha, isso • </style> facilita a leitura posterior. • </head> • <body> • <p> parágrafo </p> body { • <b> negrito</b><br /> color:green; • <i> itálico </i><br /> font-family: “sans serif”; • 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 Exemplos • <html><head> • <title>Exemplo</title> • <style type="text/css"> • p, h1, h2 { • color:ffff00; • font-family:verdana; Não podemos • text-align:center; } esquecer de fechar as • body { chaves{ } para • color:00aaff; delimitar o bloco do • font-family: "sans serif"; } • </style> estilo CSS • </head> • <body> • <p> exemplo de parágrafo </p> • <h1> exemplo de H1 </h1> • <h2> exemplo de H2 </h2> • exemplo do texto no body. • </body> • </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> Não podemos • <style type="text/css"> esquecer de fechar as • div p { color:blue; font-size:40;} chaves{ } para • p b { color:red; font-size:40;} • </style> delimitar o bloco do • </head> estilo CSS • <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> 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.