Baixe o app para aproveitar ainda mais
Prévia do material em texto
* * Programação para WEB I Luiz Artur Botelho da Silva luiz.silva@fafica-pe.edu.br * * Conteúdo Programático Unidade I Utilizando CSS nas páginas ; Utilizando Javascript nas páginas (exemplos diversos contextos de uso); * * CSS - Cascading Style Sheets O que é CSS? CSS é a mesma coisa que Style Sheets e de que Folhas de Estilo. Você já deve ter visto esses nomes em vários lugares. CSS é mais uma forma de aperfeiçoar seus documentos. * * CSS - Cascading Style Sheets No que eles podem nos ajudar? * * Como criar estilos Cada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe: * * Como criar estilos Sintaxe: * * Exemplos CSS Eis uma regra CSS que especifica que todos os títulos de nível 1 (tags <H1>) sejam exibidos em uma fonte de 36 pixels: Eis outra regra que diz que todos os títulos de nível 2 (tags <H2>) devem ter tamanho de 24 pixels e cor azul; * * CSS - Cascading Style Sheets É possível inserir quebras de linha e espaços em branco dentro da regra. Com isso e possível ver mais facilmente todas as declarações e certificar-se de que colocou todos os sinais de ponto-e-vírgula e colchetes nos lugares corretos. * * Exemplo Esta regra diz que os parágrafos aparecerão em fonte Times, 12 pixel, azul e recuados meia polegada a partir da margem esquerda da página: * * Tipos de Folhas de Estilo Pode-se definir regras de CSS de 3 formas distintas: Estilo Externo: Um arquivo separado fora do documento HTML; Estilo Incorporado: No cabeçalho de um documento HTML; Estilo Inline: Dentro de uma tag HTML. * * Estilo Externo Define as regras de CSS em um arquivo separado; As paginas HTML vão acessar esses arquivos por meio da tag LINK; Essa abordagem permite definir regras em um ou mais arquivos que podem ser aplicadas em alguma página do seu web site. * * Exemplo Estilo Externo Criar um arquivo .CSS com a seguinte regra: Acessar de dentro do arquivo HTML o arquivo .CSS usando a tag LINK, conforme mostrado abaixo: * * Exemplo Estilo Externo * * Estilo Incorporado Esse estilo especifica as regras de CSS no cabeçalho do documento; As regras incorporadas afetam somente a página atual; As regras devem ficar dentro da tag <STYLE>. * * Exemplo Estilo Incorporado * * Exemplo Estilo Incorporado * * Estilo Inline Esse estilo define suas regras de CSS dentro de uma tag HTML. Essas regras afetam somente a tag atual. * * Exemplo Estilo Inline * * Tags Personalizadas Com as classes de estilo, é possível definir diversas variações de uma única tag. Você pode definir classes de estilo tanto em folhas de estilo externa como nas incorporadas. A sintaxe é praticamente idêntica à sintaxe normal para os estilos externo e incorporado, com adição de um ponto e o nome da classe depois do elemento na qual será utilizado o atributo. * * Exemplo de Tags Personalizadas * * Tag <DIV> * * Utilizando a tag <DIV> * * Utilizando a tag <DIV> * * Tag <SPAM> * * Utilizando a Tag <SPAM> * * Atalhos de CSS * * Atalhos de CSS * * Atributos CSS O CSS possui uma lista de atributos que podem ser consultados pelo site: http://www.w3c.br/divulgacao/guiasreferencia/css2/ * * CSS Herança CSS suporta o conceito de Herança, para definir que propriedades são aplicadas a que elementos; Algumas propriedades aplicadas a um elemento HTML são automaticamente aplicadas a todos os elementos-filhos; * * CSS Herança * * Classes de Estilos Podem-se definir relações de dependência: * * Classes de Estilos Ao definir um estilo com um “*” no seu elemento de tag. As mudanças serão aplicadas a todos elementos que compõe a herança; Exemplo: * * Classes de Estilos Já o sinal de “>”, quando usado, aplica estilo aos elemento filho diretamente associando ao seu elemento pai; Exemplo: * * Classes de Estilos É possível criar classes de estilos para modificar apenas um elemento especifico; Exemplo: * * Formatando textos de estados Estados de uma Linha * * Formatando textos de estados
Compartilhar