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
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 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
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
sejam verdes".
É declarado somente uma vez e cada título
em seu site será verde.
Se depois decidir que azul é uma cor melhor, não é preciso voltar e alterar cada tag
para a cor azul.
Basta alterar o estilo - a "regra" - para "quero que todos os meus títulos
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:
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 • •
•um parágrafo de exemplo
• • 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 •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 :
•
um parágrafo de exemplo
• Exemplo2incorporado.html • Exemplo CSS inlineAs 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:
um parágrafo de exemplo
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} •
b { color:red; •parágrafo
body { • negritocolor:green; • itálico
font-family: “sans serif”; • Texto do body. } • •
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 •
•exemplo de parágrafo
•exemplo de H1
•exemplo de H2
• exemplo do texto no body. •• 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 • •
•parágrafo dentro da div
parágrafo fora da div
• negrito normal •negrito dentro da tag p
•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 Valor da modificar propriedade Exemplos •
•Primeiro parágrafo sem formatação
classe com o atributo “class”. •Segundo parágrafo com formatação
• Texto em itálico• Texto do body. • • Não aplica o estilo porque a classe “cor_azul” está associada a tag P e não a tag i. 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} Valor da Nome da classe Atributo que queremos propriedade modificar Iniciamos com um ponto Exemplos • •
Cria a classe “cor_azul” •Primeiro parágrafo sem formatação
•Segundo parágrafo com formatação
• Texto em itálico• Texto do body. • • 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} Valor da Nome da classe Atributo que queremos propriedade modificar Iniciamos com # Exemplos • •
Cria a classe “cor_azul” •Primeiro parágrafo sem formatação
•Segundo parágrafo com formatação
• Texto em itálico com formatação• Texto do body. • • Aplica o id “cor_verde” na tag p. Veja que para aplicar o estilo, devemos chamar o identificador com o atributo “id”. 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
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 •
Primeiro parágrafo
•• Texto com a tag span, não faz nada..
• Texto com a tag span e classe de estilo, faz • algo. • 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