Desenvolvimento WEB1 Aula 03 Profa Wanessa Machado do Amaral

Transcrição

1 Desenvolvimento WEB1 Aula 03 Profa Wanessa Machado do Amaral

2 Surgimento do CSS Na aula passada tivemos uma breve introdução ao CSS Os documentos web, cada vez mais sofisticados e extensos, estavam fugindo do controle de seus criadores. Imagine mudar a cor da fonte de um portal de notícias inteiro! A solução proposta: CSS, sigla em inglês para Cascading Style Sheet

3 Conflitos Com documentos cada vez mais complexos, surgem conflitos. quando há conflito de estilos especificados (por exemplo: uma regra de estilo determina que os parágrafos serão na cor preta e outra que serão na cor azul) Aqui entra o efeito cascata, que nada mais é do que o estabelecimento de uma prioridade para aplicação da regra de estilo a um elemento.

4 Folhas de estilo Um conjunto de regras CSS formam uma folha de estilos. Uma regra CSS, na sua forma mais elementar, compõe-se de três partes: um seletor, uma propriedade um valor Exemplo: seletor { propriedade: valor; }

5 Seletor seletor: é um elemento da marcação HTML identificado: Pelo nome: <p>, <h1>, <form>, Pela classe aplicada ao elemento da marcação: HTML (por exemplo:.topo,.principal,.menu) Pelo nome de um identificador ID aplicado ao elemento da marcação HTML: #tudo, #auxiliar, #rodape Por qualquer outro identificador CSS de elementos ou trechos da marcação HTML, genericamente denominados de seletores CSS.

6 Propriedade é a propriedade do elemento HTML ao qual será aplicada a estilização definida no valor tamanho da fonte, cor do texto, altura do elemento.

7 Valor é a característica específica a ser assumida pela propriedade por exemplo: letra tipo arial, cor azul, fundo verde, altura igual a 300px

8 p { font-size: 12px; /* ponto-e-vírgula é facultativo, mas recomendável */ } body { color: #000; background-color: #fff; font-weight: bold; /*ponto-e-vírgula é facultativo, mas recomendável */ }

9 Agrupamento de seletores fazer com que uma regra CSS seja aplicada a mais de um seletor. h1, h2, p,.box { color: green; } agrupamos todos o elementos cabeçalho de níveis 1 e 2 os parágrafos e o elemento com a classe.box.

10 Seletor de classe Você pode "inventar" um nome e definí-lo como valor a ser atribuido ao atributo class (classe) do elemento HTML. p.cor-um { color: #000; } p.cor-dois { color: #0ff; } No HTML: <p class="cor-um"> este parágrafo será na cor preta.</p> <p class="cor-dois">este parágrafo será na cor azul.</p>

11 Ao nomear uma classe, para que ela seja aplicável a qualquer elemento HTML, basta que se omita o nome do elemento antes da classe..cor-tres { color: blue; } No html: <h2 class="cor-tres"> Este cabeçalho é na cor azul. </h2> <p class="cor-tres"> Este parágrafo é na cor azul. </p>

12 Seletor ID Você pode "inventar" um nome e com ele criar um ID que será o seletor para definir a regra CSS. #meuid { propriedade: valor; }

13 #cabecalho { color: white; text-align: center; } O seletor acima fará com que o elemento do nosso HTML que tem o atributo id com valor "cabecalho" tenha seu texto renderizado na cor branca e centralizado. não há nenhuma indicação para qual tag a propriedade será aplicada, podendo ser uma <div> quanto um <p>, até mesmo tags sem conteúdo como uma <img>

14 <div id="cabecalho"> Aqui vai o cabeçalho do site </div>

15 Diferença seletor ID x classe Os seletores por identificador estão pensados para que o elemento que se seleciona seja único só se pode colocar um identificador dado a um elemento da página As classes estão pensadas para poder definir o mesmo estilo a vários elementos da página. As classes estão pensadas justamente para serem utilizadas em diversos elementos diferentes na página.

16 Por exemplo, se você tem uma página com um menu de navegação que aparece uma única vez, você pode atribuir um id à camada onde está a barra de navegação. Esse ID será único, porque não há outra barra de navegação igual a essa na página. O id será único. Agora, se dentro da barra de navegação você tiver vários links e quiser atribuir estilos a todos ao mesmo tempo, você terá que criar uma classe (class de CSS) e atribuí-la a cada um desses links. Os x links que você tiver, terão todos a mesma classe e você atribuirá o estilo de uma vez para todos através da class.

17 IDs são únicos Cada elemento pode ter apenas um ID; Cada página pode ter apenas um elemento com aquele ID. seu código não vai passar pelo validador se você usar o mesmo ID em mais de um elemento.

18 Classes não são únicas Você pode usar a mesma classe para vários elementos; Você pode usar várias classes para um mesmo elemento. Qualquer informação de estilo que precise ser aplicada a múltiplos elementos em uma página deve ser feita com uma classe.

19 Classes não tem funcionalidades especiais no browser, mas IDs têm um truque muito especial na manga: um valor de hash para URLs. Se você tiver um URL como: o navegador vai tentar localizar o elemento com o id comments e vai automaticamente rolar a página até chegar nesse elemento.

20 Elementos podem ter ambos, ID e Classes <li id="comment-27299" class="item"> Javascript depende da existência de um elemento de página com ID único A função getelementbyid

21 Seletores hierarquicos #rodape img { margin-right: 35px; vertical-align: middle; width: 94px; } O estilo será aplicado apenas nos elementos img filhos do elemento com id=rodape

22 Comentários no CSS /* este é um comentário*/ p { font-size: 14px; color: #000; font-family: Arial, Serif; } /* este é outro comentário*/

23 Fontes h1 { font-family: serif; } h2 { font-family: sans-serif; } p { font-family: monospace; }

24 body { font-family: "Arial", "Helvetica", "sans-serif"; } o navegador verificará se a fonte "Arial" está disponível e a utilizará para renderizar os textos de todos os elementos do nosso documento que, por cascata, herdarão essa propriedade do elemento body. Caso a fonte "Arial" não esteja disponível, "Helvetica" será usada, e assim por diante

25 Alinhamento do texto p { text-align: right; } Ao invés de right pode ser center, justify, etc...

26 p { line-height: 3px; /* altura de cada linha */ letter-spacing: 3px; /* espaço entre cada letra */ word-spacing: 5px; /* espaço entre cada palavra */ text-indent: 30px; /* margem da primeira linha do texto */ }

27 Cores Existem várias maneiras de se referenciar cor: h1 { color: red; } h3 { color: rgb(255, 200, 0); } h3 { background: #F2EDED; }

28 Tableless Tableless é uma forma de desenvolvimento de sites que não utiliza tabelas para disposição de conteúdo na página Vantagens: Adotar este padrão de desenvolvimento também facilita a separação da camada de apresentação da aplicação para o arquivo de estilo (CSS).

29 Diminuição de banda. Os navegadores modernos armazenam arquivos de CSS e de JavaScript em cache, se a maneira que o site será visualizado é guardado em um CSS (padrão tableless) Então o arquivo será cacheado após o primeiro acesso e todos os acessos seguintes não carregarão este arquivo, carregarão apenas o conteúdo (texto) do site. Quando se usa tabela, a apresentação das tabelas (tags como "tr" e "td", gifs vazios, atributos como "cellspacing" e "border") são carregados todas as vezes que o usuário acessar o site.

30 Manutenção. Estando o estilo separado do arquivo html, facilita quando o desenvolvedor deseja mudar algo relacionado ao conteúdo O conteúdo do site deixa de ficar oculto dentro de tabelas e subtabelas para estarem dentro de divs (caixas de conteúdo) que não trazem nenhuma informação de aparência. Caso ele deseje alterar o estilo, basta ir no arquivo CSS e não precisará procurá-lo entre códigos e conteúdos que não tem relação com a aparência e apresentação do site em geral.

31 DIV é um container genêrico para conteúdo de fluxo. pode ser utilizado para agrupar elementos para fins de estilos (usando class ou id) <div> <p>any kind of content here</p> </div> div é indicado para quando não houver um elemento de valor semântico específico para o conteúdo a ser marcado.

32 Exemplo <div id="rodape"> <img src="img/logo.png"> Copyright Mirror Fashion </div>

33 O elemento div não é semântico. São divisões que não levavam nenhum tipo de informação extra, servem apenas para visualização As novas seções também fazem divisões, mas além disso elas servem significado para o código.

34 Elemento <section> do HTML5 <section id="noticias">... </section> Atualmente o div servirá para agruparmos elementos dentro destes sections ou fazer outros detalhes que não precisam de significado semântico, apenas visual. Para os sistemas de busca, leitores de tela, aplicações e etc, os DIVs não indicam seções de conteúdo, mas o elemento section sim.

35 <section id="noticias"> <div>... </div> <div>... </div> <div>... </div> </section> Section + DIV

36 Suponha que cada uma colunas seja de um assunto diferente, por exemplo: Esporte, Política e Educação. Aí nesse caso não usaríamos div mas sim outras sections: <section id="noticias"> <section id="esporte">... </section> <section id="politica">... </section> <section id="educacao">... </section> </section>

37 Propriedade padding padding-top padding-right padding-bottom padding-left Essas propriedades aplicam uma distância entre o limite do elemento e seu conteúdo acima, à direita, abaixo e à esquerda respectivamente

38 Propriedade margin A propriedade margin é bem parecida com a propriedade padding, exceto que ela adiciona espaço após o limite do elemento, ou seja, é um espaçamento além do elemento em si.

39 Editores (IDEs) possuem realce de sintaxe e outras ferramentas para facilitar o desenvolvimento de páginas. : Gedit ( Sublime ( Notepad++ ( IDEs (Integrated Development Environment), oferecem recursos como autocompletar e pré-visualização: Eclipse Visual Studio.

40 << temas dos trabalhos>> Atividade 1:

41 Atividade 2: Desenvolvimento de um Site para uma empresa com os seguintes requisitos: Utilização de HTML5 CSS Mínimo de 5 páginas; Diagramação com DIV (faz parte do trabalho prático do final do semestre)

42 Links interessantes Google sites: Testar se o site é responsivo: Tutoriais: