TECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS - PDF
TECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS
Download "TECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD"
Gabriel Henrique Medina Campelo
1 TECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS Objetivos: Compreender a sintaxe utilizada em Folhas de Estilos em Cascata, seu uso e limitações. Apresentar as principais características das Folhas de Estilos em Cascata. Aplicar Folhas de Estilos em Cascata na construção de sites. 1
2 Web Standards é um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico, produzidos pelo W3C e destinados a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos, independentemente dos dispositivos usados ou de suas necessidades especiais. Folha de Estilo em Cascata (CSS - Cascading Style Sheet) É um mecanismo simples para adicionar estilos (p.ex., fontes, cores, espaçamentos) aos documentos Web. 2
3 SINTAXE: seletor{ propriedade: valor; Seletor: É o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, e para o qual a regra será válida (por exemplo: <p>, <h1>, <form>,.minhaclasse, etc) Propriedade: É o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background, etc) Valor: É a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc) SINTAXE: p { font-size: 12px; /* ponto-e-vírgula é facultativo */ body { color: #000000; background: #FFFFFF; font-weight: bold; /*ponto-e-vírgula é facultativo */ 3
4 SINTAXE: p {text-align: right;color: #FF0000; MAIOR LEGIBILIDADE p { text-align: right; color: #FF0000; SINTAXE: h3 { font-family: "Comic Sans MS" AGRUPAMENTO DE SELETORES h1, h2, h3, h4, h5, h6 { color: #00FF00; 4
5 A folha de estilo externaé um arquivo separado do arquivo html e que tem a extensão.css Objetivo: Aplicar a folha de estilo externa em várias páginas. O arquivo css da folha de estilo externa deverá ser lincado ou importado ao documento HTML, dentro da tag <head> do documento. A sintaxe geral para lincar uma folha de estilo chamada estilo.css <head>... <link rel="stylesheet" type="text/css" href="estilo.css">... </head> body {background-color: bege h1 {color:blue; font-size:20pt hr {color:navy p {font-size:11pt; margin-left: 15px a:link {color:green a:visited {color:black a:hover {color:red a:active {color:yellow 5
6 Uma folha de estilo é dita incorporada ou interna, quando as regras CSS estão declaradas no próprio documento HTML. É ideal para ser aplicada a uma única página. Com uma folha de estilo incorporada ou interna, você pode mudar a aparência de somente um documento, aquele onde a folha de estilo esta incorporada. As regras de estilo, válidas para o documento, são declaradas na seção <head> do documento com a tag de estilo <style>. <html> <head> <title>titulo da Página</title> <style type="text/css"> p{ color:#ff0000; </style> </head> <body> <p>primeiro Parágrafo</p> <p>segundo Parágrafo</p> </body> </html> 6
7 <head>... <style type="text/css"> <!-- body { background: #000000; h3 { color: #FF0000; --> </style>... </head> Uma folha de estilo é dita inline, quando as regras CSS estão declaradas dentro da tag do elemento HTML. Um estilo inline só se aplica a um elemento HTML. Ele perde muitas das vantagens de folhas de estilo pois mistura o conteúdo com a apresentação. Use este método excepcionalmente, como quando quiser aplicar um estilo a uma única ocorrência de um elemento. 7
8 <p style="color:#000000; margin: 5px;"> Aqui um parágrafo de cor preta e com 5px nas 4 margens. </p> A prioridade para o efeito cascata folha de estilo padrão do navegador do usuário folha de estilo do usuário folha de estilo do desenvolvedor estilo externo (importado ou linkado) estilo incorporado (definido na seção head do documento) estilo inline (dentro de um elemento HTML) 8
9 h2 { color: #FFCC00; text-align: center; font: italic 9pt Verdana, Sans-serif; Folha de Estilo Externa h2 { color: #FFCC00; text-align: center; font: italic 10pt Verdana, Sans-serif; Folha de Estilo Interna Se você comete um erro na sua escrita, as pessoas provavelmente julgarão tratar-se de um erro de datilografia, mas entenderão o que você quis dizer e não haverá prejuízo para o entendimento. Um pequeno deslize no HTML ou nas CSS, por outro lado, é uma história diferente. Algo aparentemente insignificante como uma vírgula ou uma aspas fora do lugar, pode fazer toda a diferença entre uma página funcionando ou não -isto dependerá do erro e de como o navegador tratará o erro. 9
10 Editores de HTML geralmente vem com um checador de sintaxe embutido (ex: HomeSite, BBEdit, Dreamweaver ou GoLive) Se você não possui um editor assim, poderá usar um validador online: W3C - Validador HTML ( W3C - Validador CSS ( Você faz o upload de seu arquivo e obtém de imediato um relatório de erros ou de não existência de erros. 10
12 Stricté um conjunto de regras muito rígidas que definem o que pode e o que não pode ser escrito em HTML. Transitionalé um conjunto um pouco mais flexível e permite escrever algum HTML mais antigo e para algumas peculiaridades próprias de navegadores. Frame Set não é muito usado nos dias atuais. Não temos nos utilizado do uso de 'frames' pois eles estão em desuso desde o aparecimento das CSS. XHTML 1.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " 12
13 Sugestões de onde obter mais informações sobre o tema da aula
desenvolva aplicações web profissionais com uso dos poderosos recursos de estilização das css3 Maurício Samy Silva
CSS3 desenvolva aplicações web profissionais com uso dos poderosos recursos de estilização das css3 Maurício Samy Silva Novatec Copyright 2012 da Novatec Editora Ltda. Todos os direitos reservados e protegidos
Não seja lesado, use LESS
Não seja lesado, use LESS Parque Tecnológico Itaipu (PTI) Missão ITAIPU: Gerar energia elétrica de qualidade, com responsabilidade social e ambiental, impulsionando o desenvolvimento econômico, turístico
Desenvolvimento Web CSS Conceitos básicos parte II
Desenvolvimento Web CSS Conceitos básicos parte II Prof.: Bruno E. G. Gomes 2014 Folhas de Estilo Externa Estilos são definidos em um arquivo separado e incorporados à página através da tag link Podem
Roteiro de Auxílio para as Atividades Práticas de Sistemas de Informação
Roteiro de Auxílio para as Atividades Práticas de Sistemas de Informação A linguagem XML no contexto do curso de Sistemas de Informação é utilizada principalmente para o armazenamento e a manipulação de
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I Prof. Dr. Daniel Caetano 2012-1 Objetivos Apresentar o CSS como substituto dos parâmetros visuais do HTML Capacitar para a construção de documentos
Áudio analógico: Conversão para formato digital e integração com texto Conteúdo
Áudio analógico: Conversão para formato digital e integração com texto Conteúdo Introdução... 2 1. Produção de áudio digital... 2 1.1 Fontes analógicas... 2 1.2 Preparação da fonte... 3 1.3 Iniciando a
Uma regra CSS quando válida para vários seletores, estes podem ser agrupados. Exemplo: h1, h2, h3, h4, h5, h6 { color: #00FF00; }
CENTRO PASTORAL, EDUCACIONAL E ASSISTENCIAL DOM CARLOS CPEA Reconhecido de Utilidade Pública pelo Decreto No. 5.692 de 08.11.1967 FACULDADE VIZINHANÇA VALE DO IGUAÇU VIZIVALI DOIS VIZINHOS PARANÁ Criada