Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes

Tamanho: px

Começar a partir da página:

Download "Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes"

Ana Sofia Nathalie Rodrigues Maranhão
8 Há anos
Visualizações:

1 Roteiro 3: Introdução a Linguagem CSS Desenvolvimento de Sites com PHP e Mysql Objetivos Vincular folhas de estilo CSS em páginas de Internet; Compreender a sintaxe CSS; Controlar a formatação dos elementos da página Neste roteiro é explorada a linguagem CSS. A sigla CSS vem da palavra Cascade Style Sheets, e é utilizada para realizar a formatação dos elementos detro de uma página HTML. Qualquer elemento HTML pode ser formatado, e suas propriedades variam, podendo envolver desde a cor do texto, tamanho da letra, plano de fundo, cor de fundo, entre outras características. Introdução As folhas de estilo foram introduzidas pela primeira vez com a Microsoft através do lançamento do Microsoft Internet Explorer 3.0, elas constituem uma forma prática de controlar a aparência dos elementos inseridos em uma página web. Permitem a fácil reutilização de código, aplicando configurações para várias páginas ao mesmo tempo. Uma forma interessante de pensar na atuação do CSS em uma página seria: quero que todos os meus títulos h1 tenham cor azul e fiquem alinhados à direita. Dica: É sempre recomendável realizar alguns testes em diferentes navegadores para validar o seu código. Páginas elaboradas com a formatação feita em CSS utilizam uma sintaxe de comandos diferente do HTML. Para poder aplicar qualquer configuração no CSS é necessário obedecer o formato geral de configuração, demonstrado na figura 13: Figura 13: Exemplo de configuração CSS A configuração demonstrada na figura 13 permite que o elemento h2 seja configurado com cor Azul, o detalhento dos elementos da configuração é visto a seguir: Elemento/Seletor: é o alvo da regra de estilo. É o elemento da página HTML que será modificado com a alteração de alguma propriedade como os elementos h1, p ou li,por exemplo. O CSS oferece formas diferentes de manipular os elementos, permitindo que se realizem formatações em vários elementos ao mesmo tempo. Atributo/Propriedade: Define o que será modificado no elemento. Os elementos podem propriedades como fonte, cor, espaçamento, plano de fundo, por exemplo, estas propriedades podem ser alteradas pelo CSS. Valor: Define o quanto será estilizado. Por exemplo, se for modificar uma cor, deverá especificar qual cor. Se for um tamanho, deverá incluir a medida do tamanho. Geralmente cores são especificadas em formato exadecimal (#FFF00) e tamanhos em Pixels (23px). Instituto Federal de Santa Catarina- Campus Garopaba Pág 13

2 Formas de utilizar o CSS O Css pode ser incluído em uma página de 3 formas: declaradas na linha do elemento (inline), no próprio documento (incorporado) ou ainda em um documento externo (externo ou importado). Inline: é chamado desta forma por ser aplicado diretamente na linha da tag que está sendo formatada. Esta forma é detalhada na figura 14: Figura 14: Exemplo de configuração de CSS inline Para aplicar o CSS de forma inline é necessário configurar a sua formatação diretamente na TAG desejada. OBS: Uma desvantagem é que cada TAG deve ser configurada independente de outra. Incorporado: é definido diretamente dentro da seção <head> do documento co uso do elemento style. Esta forma é melhor do que no formato in-line, mas o código ainda limita-se a apenas uma página. A aplicação deste formato é demonstrado na figura 15. Figura 15: Exemplo de Estilo css incorporado Este formato possui a vantagem em relação ao formato inline pois pode formatar vários elementos ao mesmo tempo, limitados à mesma página. Externo/Importado: Consiste em um arquivo de texto contendo as regras de estilo e comentários CSS, gravado com a extensão.css. O arquivo.css segue o padrão de configuração css no formato demonstrado na figura 15. Existem duas formas de declaração para este tipo: Linkado: onde o documento externo da folha de etilo é linkado ao documento na seção head, com uso do elemento link, no formato a seguir: <link rel= stylesheet type= text/css href= estilos.css media = all /> Um exemplo desta configuração é demonstrado na figura 16. Figura 16: Exemplo de página contendo a vinculação a um CSS externo Instituto Federal de Santa Catarina- Campus Garopaba Pág 14

3 Além de fazer o link com um arquivo CSS, deverá ser criado também o arquivo no local estipulado pela propriedade HREF. Este arquivo segue o padrão de configuração demonstrado na Figura 17. Figura 17: Exemplo de Configuração CSS da folha de estilos Importado: onde é declarada a folha de estilo externa utilizando a dentro do elemento style, na seção head do documento, nos seguintes formatos: <style type = text/css media = all > url( estilo-x.css ) screen, projection; A Figura 18 mostra um exemplo desta configuração aplicada. Figura 18: Exemplo de configuração com uso de Import OBS: neste exemplo também é utilizado o arquivo de folha de estilos demonstrado na Figura 17. Para todos os efeitos de configuração, a folha de estilos aplicada terá como efeito na página o resultado demonstrado na Figura 19. Figura 19: Resultado da aplicação das folhas de estilo CSS OBSERVAÇÃO: A deve preceder todas as demais declarações de folhas de estilo para o documento. Quando houver mais de uma, deverão ser declaradas após ela, caso contrário Folhas de estilo externas permitem que se aplique a mesma folha de estilos a todos os documentos de um site, controlando sua apresentação a partir de um documento original. Instituto Federal de Santa Catarina- Campus Garopaba Pág 15

4 Tarefas 1. Utilizando toda a estrutura que foi criada no Roteiro 2 (Página do cheff online), copie todos os arquivos e diretórios para serem utilizados no Roteiro 3. Apenas para a sua organização nomeie o diretório de destino como Roteiro3. 2. Complete na tabela a seguir a finalidade de cada configuração CSS. Para a pesquisa utilize como fonte o endereço Apenas descubra o que faz cada propriedade. Sinta-se a vontade para testar em suas páginas já criadas. Propriedade background-color background-image: url( ) background-repeat background background-position: color font-family font-style font list-style-type list-style-image margin text-decoration width border Significado 3. Na página index.html (página de entrada do site) configure as seguintes propriedades CSS: 1. Utilizando o CSS Inline Faça com que o título da página fique de cor vermelho, fonte Courier New e sublinhado. A figura 20 ilustra o resultado. Figura 20: Página Cheff Online com estilo inline aplicado DICA: utilize as propriedades CSS color, font-family e text-decoration. Instituto Federal de Santa Catarina- Campus Garopaba Pág 16

5 4. Utilizando o CSS Incorporado, configure para que todos os títulos <h2> incluídos na página fiquem de cor Verde (escolha um tipo de verde na tabela de cores Hexadecimal em ); 1. Para testar a configuração, inclua 2 textos <h2> na página. DICA: utilize a propriedade CSS color. 5. Utilizando um CSS Externo, crie um arquivo CSS (folha de estilos) com o nome estilo-seunome.css. Vincule este arquivo à página index.css utilizando a vinculação com <link rel... e em seguida à todas as demais páginas da estrutura do site Cheff Online Na folha de estilos efetue as seguintes configurações: 1. Para a tag body configure um plano de fundo utilizando uma imagem (elemento body{ }, propriedade backgroundimage); 2. Configure uma cor de borda vermelha (com uso do hexadecimal) para todas as imagens (elemento img{ }, propriedade color); 3. Configure uma cor de fundo para os títulos h1 e h2 de cor vermelho-claro (#FFA07A); 4. Configure para o elemento body uma borda de cor vermelha (#800000). DICA: A propriedade border aceita a configuração no seguinte formato: border: 45px solid #FFFFFF, modifique apenas as configurações para adaptar às suas necessidades. Figura 21: Exemplo de configurações do passo 5 aplicadas Instituto Federal de Santa Catarina- Campus Garopaba Pág 17

6 6. Altere o CSS incorporado da página index.html para fazer com que o ícone da lista de links tenha um ícone de quadrado. Para isto consulte em sobre a propriedade list-styletype. A Figura 22 ilustra um exemplo da alteração. Figura 22: Lista de links com ícone alterado para quadrado (square) DICA: Encontre as possíveis configurações para listas em 7. Os ícones de uma lista podem ser modificados por imagens também com uso da propriedade CSS list-style-image: url(caminho/nomeimagem). Ainda utilizando o CSS incorporado, altere agora os ícones da lista para uma imagem qualquer escolhida por você. A Figura 23 ilustra um exemplo da configuração. Figura 23: Lista de links alterado pela propriedade list-style-image. Referências W3schools, disponível em Referência para Propriedades CSS - W3schools, disponível em Tabela de cores CSS em Hexadecimal, disponível em Opções de configuração para listas <UL> e <OL>, disponível em Instituto Federal de Santa Catarina- Campus Garopaba Pág 18

Documentos relacionados

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata

CSS CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS é uma linguagem para estilos (formatação) que define o layout de documentos HTML. CSS controla fontes, cores, margens,