INTERNET BÁSICA: VALIDAÇÃO & CSS PARTE 4
|
|
|
- Natan Pacheco Faria
- 6 Há anos
- Visualizações:
Transcrição
1 1 INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DA PARAÍBA CAMPUS CAMPINA GRANDE INTERNET BÁSICA: VALIDAÇÃO & CSS PARTE 4 Rhavy Maia Guedes rhavy.maia@gmail.com
2 Sabe aquele site da Ferrari?! Pois é, ale não validou no W3C! Muito fraquinho mesmo! 2
3 3 Validador W3C Doctype Definição Exemplos
4 Validação W3C 4 Garante que seu documento é bem formado e que todos os elementos e atributos escolhidos aderem a um padrão definido; Serviço gratuito e online que permite checar se um determinado documento segue as regras definidas em um DOCTYPE; A url do validador:
5 Doutor, eu preciso especificar para o validador qual padrão eu adoto no meu HTML? Sim. Você precisa fazer isso! 5
6 Legado do HTML 6 Não existia preocupação com apresentação. A web parecia uma brincadeira. No entanto, a linguagem de marcação já ganhava forma Época marcada pela guerra dos navegadores, de um lado Netscape de outro o IE, para padronizar a web. Surge também a figura do Web Developer Fim da guerra entre os navegadores marcada pelo surgimento do Wide Web Consortium(W3C). Separação da infre-estrutura do HTML 1998
7 Legado do HTML 7 Agora sim, boa vida! Depois de pequenas correções da versão anterior não há nada com o que se preocupar. Essa versão é a mais utilizada. O HTML adota padrões do XML para suportar novas tecnologias
8 DOCTYPE 8 (X)HTML permitem que desenvolvedores criem diversos tipos de documentos, cada um definido por um conjunto de regras distintas Estas regras de cada tipo são detalhadas e mantidas pela W3C na forma de uma Definição do Tipo de Documento (Document Type Definition - DTD) A declaração DOCTYPE informa aos serviços validação e aos navegadores modernos qual DTD foi utilizada para elaborar a marcação de sua página
9 DOCTYPE 9 Declarações DOCTYPE indicam compatibilidade: Portanto, a marcação de sua página não será validada a menos que seu código comece com uma declaração DOCTYPE apropriada. Estas devem ser sempre as primeiras em um documento Web.
10 10 DOCTYPE
11 DOCTYPE é garantia total? 11 O DOCTYPE não fornece garantias de que o documento foi realmente escrito com base no padrão especificado. Será que o web designer não cometeu erros de marcação?
12 Validação W3C 12 W3C Validador:
13 Validação com erro! 13 Notificação do(s) erro(s). Verifique o(s) erro(s) listado(s).
14 Validação sem erro! 14 DOCTYPE; Tipo de codificação; Corretude das tags e atributos.
15 Meta 15 Localizada dentro do <head> do documento html; Serve para descrever o conteúdo do seu site: Navegador; Buscadores. <head> <meta name= xxx http-equiv= xxx content= xxx > </head> Possíveis combinações do META:
16 Meta 16 A definição de uma codificação, no documento, informará ao browser que conjunto válido de caracteres está sendo utilizado <head> <meta http-equiv="content-type" content="text/html;charset=iso > </head> A lista de codificações pode ser encontrada em:
17 17 CSS Definição Construção Exemplos
18 Roteiro 18 Em poucos slides, explorar os fundamentos do padrão Web CSS; Sintaxe, seletor, propriedades, regras, CSS no xhtml, vantagens, herança e override de propriedades no código CSS, otimizando partes do CSS, declaração de classes, pseudo-classes, Validador CSS...
19 Roteiro 19 Mostrar vários exemplos de códigos CSS que você deve testar para solidificar seus conhecimentos nesta nova linguagem Este novo assunto é, como no caso do XHTML, de suma importância para as próximas disciplinas do curso (Desenvolvimento Web, etc.)
20 O início da Web 20 Boa parte dos documentos publicados na Web eram concebidos utilizando regras oriundas do HTML (1.0,, 3.2, 4.01, ) HTML tinha dupla função: estruturar o conteúdo e aparência (estilizá-lo); Há, ainda, uma grande variedade de tag s e atributos para estilização: Hoje, estas tag s e atributos constituem código legado código legado (deprecado) pelo XHTML.
21 O início da Web 21 Neste tipo de HTML, mudanças na página eram muito difíceis! Não havia reuso de estilização para outras páginas; Não havia um consenso no tocante a que os navegadores deviam de obedecer; Veja com seus próprios olhos...
22 22 Vejam
23 O início da Web(cont.) 23 <html> <head> </head> <title>lojas Maia (ano 1998)</title> <body bgcolor=tan text=black> Alinhamento Outra forma de alinhar! </body> </html> <p align=center>venha conhecer nossa <font face=arial>queima</font> de estoque da semana! Temos promoções imperdíveis para você! </p> <ul> <p> Veja alguns exemplos: <li> Liquidificador Arno R$ <li> Aspirador de pó CCE R$ </ul> <p align=right> Traga logo sua família! Não perca tempo. <center><font size= small > Ofertas válidas enquanto durar o estoque!</font></center> Aqui estão alguns atributos que controlam a aparência. bgcolor define a cor de fundo e o text define a cor do texto existente <p align=center><font size= small >Copyright 1998 todos os direitos são estritamente reservados.</font> Tipo da fonte! Você podia escrever algumas tag s sem fechá-las (e torcia para que todos os browsers entendessem isso ) Agora o tamanho da fonte! Obs.: também não havia nenhum DOCTYPE associado ao documento
24 Um padrão de apresentação 24 O padrão Web CSS 2.1 (Cascading Style Sheets) Na verdade, uma nova linguagem que possibilita a criação de regras de apresentação para apenas uma página ou até um site completo; O CSS precisa da definição da estrutura do xhtml para funcionar; Uma regra CSS é uma declaração que segue uma sintaxe própria e que define como será aplicado um estilo a um (ou mais) elemento(s) xhtml.
25 Um padrão de apresentação 25 Comportamento [Javascript] Apresentação [CSS] Conteúdo [HTML]
26 Um padrão de apresentação 26 Um conjunto de regras CSS forma uma folha de estilos Estas regras são colocadas em um arquivo texto com extensão.css Portanto, o CSS também não depende de uma ferramenta específica. Obs.: já existe uma proposta da W3C do CSS 3 (ainda não completamente suportado por todos os navegadores atuais). Veja maiores detalhes em:
27 Vantagens 27 Centralização de toda forma de apresentação do site. O maior impacto vem na manutenção; Economia no tráfego do servidor; Reutilização de código; Facilidade para ferramentas como, por exemplo, RSS e Text-to-speech; Flexibilidade para utilização de outras mídias.
28 Sintaxe de uma regra 28 Uma regra CSS, na sua forma mais elementar, é composta de três partes: um seletor, uma propriedade e um valor. seletor { propriedade: valor;
29 Sintaxe de uma regra 29 Onde: Seletor: genericamente, é o elemento xhtml (ou pseudo-seletores, de classe e ID) para o qual a regra será aplicada; Propriedade: é o atributo do elemento ao qual será aplicada a regra; Valor: é a característica específica a ser assumida pela propriedade.
30 Exemplo: 30 A primeira coisa que se deve fazer é selecionar o elemento XHTML que se quer estilizar. Note, porém, que não há <> no seletor! A partir daí, deve-se escolher a(s) propriedade(s). Neste caso, a cor do parágrafo será modificada a cor do parágrafo será vermelha (mais sobre cores adiante ) p { color : red; border: 1px solid gray; Todo este código é chamado de regra CSS. Ela deve existir, preferencialmente, dentro de um arquivo.css Esta propriedade é multivalorada. Ela aplica uma borda nos parágrafos da página A espessura da borda, o seu tipo e sua cor. Obs.: observe as posições das chaves, dos sinais de dois pontos e ponto e vírgulas!
31 Comentários 31 A regra mostrada há pouco seria aplicada a todos os parágrafos Ora, mas se fosse preciso aplicar duas cores diferentes a dois parágrafos? Será visto que CSS é capaz de selecionar apenas um elemento (e até sub-elementos!) E se houvesse um <em> dentro do parágrafo? Sua cor seria alterada?
32 Comentários 32 Para utilizar CSS, faz-se necessária uma boa referência Ora, como é possível saber quais são todas as propriedades, valores e sintaxe possíveis aplicáveis a um elemento xhtml? Ex.: é possível mudar a cor do texto de uma tag <img>? CSS Pocket Reference (Eric Meyer) Cascading Style 2.1 (
33 Ligando o CSS ao xhtml 33 Basicamente, há duas formas de se conectar um CSS a um xhtml Fazendo uso da tag <style> </style> na própria página <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN " <html xmlns=" xml:lang="en" lang="en > <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>o título do documento</title> <style type= text/css > p { color : red; border: 1px solid gray; </style> </head>... Para adicionar CSS diretamente em apenas um arquivo XHTML, adicione a tag <style> e o atributo type indicando que é um css Adicione suas regras CSS dentro de <style> Obs.: esta não é, necessariamente, a melhor abordagem. Apenas um arquivo é estilizado e não há reuso de regras ou folhas de estilos completas para outras páginas que venham a surgir, futuramente.
34 Ligando o CSS ao HTML(cont.) 34 Fazendo uma referência a um arquivo css externo à página <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN " <html xmlns=" xml:lang="en" lang="en > <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>o título do documento</title> <link type="text/css" rel="stylesheet" href= index.css" /> <style type= text/css > </style> </head>... Delete isso Aqui está o código xhtml que indica ao browser onde encontrar o arquivo externo Obs.: este arquivo css pode residir na sua estrutura de diretórios ou até mesmo vir de uma URL absoluta. Servidor Web
35 Anatomia de um LINK 35 O elemento <link> informa ao browser que uma informação externa será linkada à página O tipo da informação é text/css. Em outras palavras, o browser deve considerar o texto como sintaxe css. A localização do arquivo é dita no atributo href (note que está sendo usada uma URL relativa, mas isso não é obrigatório!) <link type="text/css" rel="stylesheet" href= index.css" /> * Aqui vale a mesma regra para doctype: o <link> pode ser escrito em apenas uma linha. Contudo, se for necessário quebrar uma linha, esta deve ser feita entre atributos O atributo rel identifica o relacionamento entre o arquivo XHTML e a informação que está sendo linkada. Neste caso, estamos linkando uma folha de estilos <link> é um elemento vazio. Neste caso, foi usada a regra do XHTML strict />
36 Anatomia de um LINK 36 Também indica à página xhtml onde está o CSS <style url(/index.css); </style>
37 Um exemplo breve 37 Laboratório 06: definindo uma folha de estilos CSS
38 Otimizando o código CSS 38 É possível definir quantas regras você quiser em um arquivo CSS Inclusive, é possível utilizar uma mesma propriedade, várias vezes. Exemplo: h1 { Aqui está uma regra para configurar a cor de todos os cabeçalhos de nível 1 <h1> na página, além de configurar o tipo da fonte para sans-serif E aqui está uma regra para fazer a mesma coisa com todos os cabeçalhos de nível 2 <h2> encontrados Mudar a cor de todos os parágrafos encontrados para vermelha h2 { p { color : gray; font-family: sans-serif; color : gray; font-family: sans-serif; color : red; arquivo.css
39 Otimizando o código CSS 39 Porém, há um problema com a abordagem anterior Há duplicação de propriedades e valores! O que fazer? Para escrever uma mesma regra para vários seletores, escreva-os separados por vírgula Nesta regra, todos os cabeçalhos de níveis 1 e 2 terão suas aparências alteradas automaticamente Delete isso Pergunta intrigante mas, o que faríamos se quiséssemos, amanhã, colocar uma linha de borda apenas nos cabeçalhos de nível 1 <h1>, mas não em cabeçalhos <h2>? h1, h2 { color : gray; font-family: sans-serif; h2 { p { color : gray; font-family: sans-serif; color : red; arquivo.css
40 Regras aplicadas a um mesmo seletor 40 Até aqui, cada regra mostrada mencionava sempre tag s distintas Saiba que é permitido escrever várias regras para uma mesma tag XHTML Assim, no geral, se houver regras que mencionam um mesmo descritor XHTML, cada regra irá adicionar aparência em relação à anterior * Pode-se acumular aparência escrevendo regras mais específicas h1, h2 { color : gray; font-family: sans-serif; h1 { border-bottom : 1px solid black; *Iremos ver, mais adiante, que, em alguns casos, o browser irá decidir de acordo com o peso da regra (não considerando se ela é a última dentro do arquivo css).
41 Overriding (sobreposição) 41 Em situações que envolvam regras aplicadas a um mesmo descritor XHTML, é comum sobrepor a aparência definida em regras anteriores A isso, dá-se o nome de override aparência override (ou sobreposição) de Se as propriedades são conflitantes, será escolhida a regra mais específica que o browser encontrar dentro do arquivo CSS: h1, h2, h3 { color : gray; font-family: sans-serif; h1 { color : red; border-bottom : 1px solid black; Obs: note que a cor cinza do cabeçalho h1 será sopreposta pela última regra mais específica
42 Um meta-padrão 42 Procure concentrar código comum a todos os descritores XHTML Ora, se a aparência tiver de mudar, apenas um único local será alterado Só então, a partir daí, defina regras de estilo mais específicas Uma boa dica é fazer override de propriedades, caso estas já tenham sido definidas em regras de estilo anteriores no código CSS Mesmo assim, muito cuidado na escrita de regras conflitantes!
43 Um meta-padrão 43 E lembre-se: ao resolver um conflito de regras em um arquivo CSS, o browser irá sempre em busca da regra mais específica. h1, h2, h3 { color : gray; font-family: sans-serif; h1 { color : red; border-bottom : 1px solid black;
44 Herança 44 Mesmo fatorando código comum e se valendo de override para ajustes específicos, em CSS, é facil começar a duplicar propriedades Veja um exemplo: Conforme visto em slides anteriores, é interessante fatorar(concentrar) código comum aos elementos (neste caso, os cabeçalhos <h1> e <h2 >, suas cores e tipo de fonte) Ajustes específicos em <h2> foram feitos com override, mas h1, h2 { color : gray; font-family: sans-serif; h2 { color : red; border-bottom : 1px solid black; problema! Ora, por que definir fontfamily para cada elemento? E se, amanhã, for adicionado à página um elemento <blockquote>? Teríamos de adicionar uma nova regra no arquivo css para ele também? p { color : blue; font-family: sans-serif; arquivo.css
45 Herança(cont.) 45 Elementos-filhos podem herdar aparência de seus pais Mas isso apenas para algumas propriedades! Iremos mover a propriedade para o pai de todos os elementos envolvidos no arquivo. A grande maioria dos filhos de <body> (inclusive seus netos ) serão afetados diretamente; como se houvesse uma regra explícita para cada um. Pergunta intrigante: mas, e se houvesse uma tag <img> definida dentro de algum parágrafo? <img> é um elemento inline (como <a>, <em>, ); sua fonte seria alterada? body { font-family: sans-serif; Delete isso h1, h2 { color : gray; font-family: sans-serif; h2 { color : red; border-bottom : 1px solid black; Delete isso p { color : blue; font-family: sans-serif; arquivo.css
46 Herança(cont.) 46 body { font-family: sans-serif; p { color : blue; font-family: sans-serif;
47 Sobrepondo a Herança 47 Movendo a propriedade para <body>, quase todos os elementos tiveram suas fontes afetadas Mas, e se houver uma herança indesejada? Ora, você pode anular a herança fazendo override específico para um determinado elemento afetado por ela Como faço isso? É facil: apenas adicione uma nova regra selecionando apenas um determinado elemento desejado e atribuindo uma nova aparência ao mesmo body { font-family: sans-serif; h1, h2 { color : gray; h2 { color : red; border-bottom : 1px solid black; p { color : blue; em { font-family: serif; arquivo.css
48 Herança, override, confusão! 48 Como saber quais propriedades admitem herança e quais não? É aí que uma boa referência entra em cena (CSS Pocket Reference) Entretanto, no geral, estilos que afetam texto (color, font-family, font-size, font-weight, font-style) admitem herança Teste font-weight e font-style e veja isso na prática!
49 Herança, override, confusão! 49 Outras propriedades (border) não serão herdadas! Pense um pouco: ora, não é porque se quer colocar uma borda ao redor do corpo <body> do documento XHTML que todos os elementos filhos (<p>, <h1>, <a>, <em>, etc. ) devem ter uma também, certo? Obs: acima, note que, em alguns casos, vale também o bom senso na hora de se construir a regra
50 Um exemplo breve 50 Laboratório 07: overriding, herança... Continua...
51 Classes 51 Com CSS também é possível utilizar classe que permite a definição de regras css. As classes podem ser aplicadas a qualquer elemento XHTML. Ademais, pode-se aplicar estilos distintos para o mesmo tipo de elemento do XHTML, usando classes distintas para cada um deles Permite flexibilidade, não restringe a aplicação de estilo somente ao seletores definidos no HTML. Use o atributo class para adicionar uma classe aos elementos do xhtml. Um elemento pode, ainda, se relacionar com várias classes Desde que os múltiplos nomes de classes no atributo class sejam separados com espaços em branco (mais sobre isto adiante )
52 Declaração de uma classe 52 A definição de classes ocorre dentro do arquivo CSS (junto com as demais regras, quando for o caso ) Uma forma simples é escrever o seletor primeiro e, depois, o nome da classe. p.vermelho { color : red; Esta regra irá selecionar todos os parágrafos que pertençam à classe de nome vermelho Evite utilizar espaços em branco e/ou caracteres especiais para nomear uma classe Use um. entre o nome do elemento XHTML desejado e o nome da classe para selecionar um elemento específico da mesma
53 Relacionando-se com classes 53 Para associar um elemento XHTML a uma classe, basta utilizar o atributo class (isto fará com que ele seja adicionado ao grupo ) Exemplo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN " <html xmlns=" xml:lang="en" lang="en > <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>o título do documento</title> </head> <body> <p class= vermelho > Este parágrafo terá cor vermelha </p> <p class= azul > Este parágrafo terá cor azul </p>... Observe o uso do atributo e o nome da classe Pergunta 01: e se quiséssemos criar uma classe para elementos distintos (não apenas parágrafos)? Pergunta 02: e se fosse preciso fatorar código comum às classes?
54 Classes: conceitos avançados 54 É possível associar elementos distintos a uma ou várias classe(s) Vários elementos, uma classe: se não houver nada antes do sinal de. e o nome da classe, todos os elementos daquela classe serão afetados <h1 class= centro > Um texto </h1> <p class= centro > Um texto </p>.centro { text-align:center;
55 Classes: conceitos avançados 55 Associar elementos Um elemento, várias classes: o processo inverso também é possível - um elemento pode pertencer a vários grupos simultaneamente* <p class= verde borda centro >....borda { border-bottom: 1px solid black;.verde { color: green;.centro{ text-align:center; * E se houver regras conflitantes entre as várias classes acima? Como o browser irá decidir?
56 Um exemplo breve 56 Laboratório 07: overriding, herança, classes,
57 Validador CSS 57 Escrever um CSS otimizado, muitas vezes, não é sinônimo de que ele foi realmente escrito sem erros de sintaxe Há alguma forma de verificar se o webdesigner não cometeu erros no CSS? O Validador CSS da W3C Da mesma forma que no validador XHTML, é um serviço gratuito, online e que permite checar se um determinado CSS foi escrito corretamente; Por conseguinte, ele irá garantir que o CSS é bem estruturado e que todas as regras, propriedades e valores aderem a um padrão definido.
58 Uso do validador CSS 58
59 Uso do validador CSS(cont.) 59 E a W3C ainda lhe dá a oportunidade de inserir uma imagem no documento XHTML indicando que a folha de estilos usada para estilizar a página é livre de erros e adere a padrões!
60 Fontes 60 É possível selecionar um trecho de texto e configurar seu tipo de fonte, tamanho, cor e até algumas decorações para o mesmo; No CSS, fontes se apresentam e são classificadas em famílias: A partir daí, é só especificar as fontes que serão aplicadas em cada elemento
61 Fontes 61 Espeficique o tipo da fonte utilizando a propriedade font-family body { font-family : Verdana, Geneva, Arial, sans-serif; Apenas algumas fontes são comumente instaladas na maioria dos computadores; logo, tome cuidado na hora de escolher suas fontes!
62 Fontes(cont.) 62 Conforme foi dito anteriormente, cada fonte pertence a uma família Cada família possui um conjunto de características a serem compartilhadas No CSS 2.1, há cinco famílias básicas de fontes: sans-serif: Verdana, Trebuchet MS, Arial, Geneva, Arial Black, serif: Times, Times New Roman, Georgia, monospace: Courier, Courier New, Andale Mono, cursive: Comic Sans, Apple Chancery, fantasy: Impact, etc Importante: Geneva, Courier, Helveltica e Times são fontes comumente presentes em Mac s. As demais, em plataformas Windows e Mac s (provavelmente).
63 Fontes(cont.) 63 Note o uso da propriedade font-family (e tão font-type) A fonte Verdana está disponível no computador? Se estiver, aplique a fonte neste elemento (no caso, body) Se Verdana não estiver disponível, então procure pela fonte Geneva. Se esta não estiver disponível, procure, então, por Arial. E assim, por diante body { font-family : Verdana, Geneva, Arial, sans-serif; Não há uma regra de quantas fontes devem aparecer aqui. Porém, é sempre bom colocar o nome de uma família como uma última opção de contingência para aqueles que não possuem uma fonte específica Finalmente, se nenhuma das fontes for encontrada, o browser irá aplicar o que ele considerar default para a fonte sans-serif Esta lista de prioridades deve ser separada por vírgulas, a partir da fonte mais específica até a mais genérica. Se houver a necessidade de especificar uma fonte de nome composto, use aspas duplas (e.g. Times New Roman ) Importante: os nomes das fontes são case-sensitive.
64 Fontes(cont.) 64 Altere a intesidade (peso) da fonte com a propriedade font-weight h1 { font-weight : bold; lighter * normal bold Espeficique a decoração com a propriedade p { text-decoration text-decoration : underline; É possível tornar um texto decorado usando-se também outros valores de propriedades: O peso pode variar ligeiramente de um navegador para outro. none underline overline line-through blink * bolder
65 Fontes(cont.) 65 Espeficique o tamanho da fonte com a propriedade fontsize e sua cor usando a propriedade color body { font-size : 16px; color : red; Também é possível especificar o tamanho da fonte utilizando outras unidades além do pixel. E a cor utilizando a notação Hexadecimal. Mais sobre estes dois pontos adiante Veja algumas cores pré-definidas: aqua green navy silver blue gray olive teal black lime purple white fuchsia maroon red yellow
66 Fontes(cont.) 66 É possível ajustar o tamanho do texto usando pixels, conforme visto; Porém, também é possível ajustar o tamanho da fonte de forma relativa a uma outra fonte (pai ou a folha de estilos do browser): Isto é feito com duas unidades relativas: % e em. É facil: defina um tamanho para o <body>. Isto irá agir como um default para a página Uma boa prática: agora, defina os tamanhos de fontes dos outros elementos de forma relativa ao tamanho do corpo (com % ou em). Assim, se o tamanho das fontes tiver de mudar, ajustes serão realizados em apenas um único local (além disso, ajustes por parte dos usuários também serão permitidos). Pense nisso body { h1 { h2 { font-size : 14px; font-size : 150%; font-size : 1.2em; Importante: não confunda em com <em>!
67 Fontes(cont.) 67 Infelizmente, algumas versões de navegadores (e.g. Internet Explorer) não permitem, aos visitantes da página, ajustar o tamanho do texto quando o seu valorbase é expresso em pixels: Para evitar isso, use keywords ao invés de pixels no valor-base. body { h1 { h2 { font-size : small; font-size : 150%; font-size : 1.2em; xx-small x-small small medium large x-large xx-large Os valores reais das keywords não são constantes entre todos os navegadores!
68 Fontes(cont.) 68 Adicione itálico a um elemento com a propriedade fontstyle p { font-style : italic; Um texto normal Um texto em itálico Entretanto, nem todas as fontes fornecem suporte nativo a itálico Se isso acontecer, use o valor oblique p { font-style : oblique; oblique, na verdade, também indica ao navegador que um texto em itálico é desejado. Porém, ao invés de procurar e usar uma fonte projetada especialmente para este fim, o browser irá aplicar uma inclinação no texto na marra. Na prática, entretanto, dependendo da escolha da fonte e do seu browser, os dois estilos poderão ser idênticos.
69 Cores 69 Já foi visto como especificar cores usando nomes de cores A paleta CSS de nomes contém pouco mais de 10 cores (fator limitante) Porém, não seria mais conveniente especificar cores usando uma paleta de aproximadamente 16 milhões de cores? Como? Porcentagens de Red Green Blue, (usando valores de 0-255, ou %) Notação Hexadecimal (seis dígitos, de 0..9, A, B, C, D, E e F) Uma maneira interessante de mixar cores é utilizando ferramentas de edição de fotos ou até mesmo usando alguns catálogos da Web
70 Cores(cont.) 70 Crie uma cor em termos de valores RGB (mixagem de cores) h1 { background-color : rgb(80%, 40%, 0%); 80% de vermelho, 40% de verde e 0% de azul Ou até mesmo espeficique em termos de valores finais, diretamente h1 { background-color : rgb(204, 102, 0); 80% de 255 = % de 255 = % de 255 = 0
71 Cores(cont.) 71 Você também pode mixar cores usando a notação Hexadecimal E, nesta notação, os dígitos para as cores podem conter letras! Na verdade, o primeiro conjunto de dois dígitos representa o vermelho, outro conjunto o verde e os restante para o azul Sempre inicie uma notação hexa com o sinal # p { color : #cc6600; # CC Red Green Blue Onde: CC 12(C) * = = * = = * = = 0
72 72 Catálogo (uma parte ) de cores na Web Disponível por HTTP em:
73 Um exemplo breve 73 Laboratório 08: fontes, cores, validador,
74 Box Model 74 CSS permite utilizar um modelo de caixa para controlar como elementos (tag s) xhtml serão exibidos no navegador As caixas têm um conteúdo, um padding *, uma borda * e uma margem * Cada um destas partes são comentadas abaixo: Conteúdo: a área alocada para o conteúdo consiste do espaço mínimo necessário para receber o conteúdo (até tocar a borda do browser, se for o caso) Padding: propriedade utilizada para criar um espaço ao redor do conteúdo (espaço interno entre o conteúdo e a borda, quando houver alguma) Borda: fica ao redor do padding(se houver algum) e, por sua vez, do conteúdo Margem: fica ao redor da borda, padding e conteúdo; é usada para fornecer espaçamento entre elementos adjacentes* * padding, borda e margem são, conceitualmente, opcionais! Não esqueça disso
75 Box Model(cont.) 75 Uma borda pode ser colocada ao redor do padding e do conteúdo. Esta parte é chamada de conteúdo (e.g. um texto ou uma imagem). Ao redor do conteúdo, pode (não é obrigatório) haver um padding (transparente). um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo Finalmente, uma margem (transparente) pode ser colocada ao redor de todo o resto Todos os elementos são tratados como caixas: parágrafos, cabeçalhos, listas, itens de lista, imagens, texto enfatizado, links, quotas, citações em bloco, etc
76 Pode-se gerar várias combinações 76 um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo só conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo só bordas um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo só margens um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo padding iguais padding sup. e esq. diferentes um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo só margem dir. + padding sup.inf. um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo margem sup. e inf. + borda um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo margens inf. e dir. distintas + borda esq. misturado um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo
77 Bordas 77 Altere a espessura da borda com a propriedade border-width p { border-width : thin; img { border-width : 5px; thin medium thick Você pode especificar usando thin, medium, thick ou usando px 1px 2px 3px 4px 5px 6px Altere a cor da borda com a propriedade bordercolor p { border-color : red; border-color : rgb(100%, 0%, 0%); border-color : #FF0000; Você pode usar cores pré-definidas, valores em rgb ou usando a notação hexadecimal Vide catálogo
78 Bordas(cont.) 78 Altere o estilo da borda com a propriedade h1 { border-style border-style : dotted; solid double groove * Especificando os lados da borda: border-top-color border-top-style border-top-width border-bottom-color border-bottom-style border-bottom-width Explore cada um dos valores (de preferência, no Firefox )! border-right-color border-right-style border-right-width border-left-color border-left-style border-left-width outset Exemplo: dotted * dashed inset ridge * h1 { border-top-style : solid; border-top-color : red; border-top-width : 2px; * Ainda não suportada por todos os navegadores.
79 Um exemplo breve 79 Laboratório 09: bordas, box model,
80 O atributo id 80 Até aqui, temos usado classes quando desejávamos aplicar um mesmo estilo a um grupo específico de elementos XHTML da página Mas, e quando este conjunto contém apenas um único elemento (e.g., o rodapé da página, ou um parágrafo contendo uma mensagem do dia,...)? Se há apenas um único elemento a ser estilizado de maneira diferente dos demais, classes não são (semanticamente) a melhor solução! Use o atributo id para prover a um elemento um nome único Deve haver apenas um único elemento na página com um dado id A partir daí, pode-se usar este id para prover um único estilo ao elemento
81 Anatomia de um id 81 A definição de um id ocorre dentro do arquivo CSS (junto com as demais regras, quando for o caso ) Uma forma simples é escrever # primeiro e, depois, o nome do id. #vermelho { color : red; Esta regra irá selecionar o elemento que possuir o atributo id de nome vermelho Evite utilizar espaços em branco e/ou caracteres especiais para nomear um id Use um # seguido do nome do id para selecionar um único elemento da página
82 id (conceitos avançados) 82 E se houver dois elementos de mesmo id na página e uma regra id? Ambos serão estilizados, mas, seu documento XHTML não será validado! Um elemento pode ter um id único e ainda fazer parte de uma classe Mas e se houver regras conflitantes escritas nas regras da classe e do id? Uma regra escrita com id deterá maior prioridade em relação a uma regra escrita com elementos XHTML ou até mesmo classes! Pense nisso Vale também saber que um id pode ser utilizado como um alvo na criação de links internos (vide módulo XHTML) * Isso já é uma indicação da W3C (tornará as coisas mais simples ) * Ainda não suportada por todos os navegadores (sobretudo os mais antigos).
83 Quiz 83 Qual a escolha mais adequada para cada item abaixo? Id ou Classe? Um parágrafo contendo o rodapé da página xhtml; Uma imagem na página representando a foto do dia ; Parágrafos que contém comentários de visitantes sobre um dado filme; A lista de produtos em um carrinho de compras (a imagem do produto, sua descrição, preço, quantidade em estoque, etc.);
84 Elemento <div> 84 Elementos <div> são usados, basicamente, para agrupar elementos relacionados na página de modo a criar seções lógicas Na verdade, ele age como um container para vários elementos XHTML que devam ser relacionados dentro da página Elementos <div> ainda ajudam o webdesigner a identificar e delimitar as principais grandes áreas de um documento: cabeçalho, rodapé, conteúdo, etc.
85 Elemento <div> 85 <div> pode agrupar elementos de modo que recebam um estilo CSS Uma vez que elementos foram agrupados, pode-se estilizar div s como elementos XHTML quaisquer. Ex.: criar uma borda ao redor de um grupo de elementos, adicionar uma mesma cor de background, etc.
86 Propriedade width 86 É possível usar a propriedade width para configurar a largura de elementos Se não houver uma regra alterando a largura de um elemento, o browser, então, irá admitir a largura como sendo auto E irá expandir o elemento usando o espaço disponível (na área visível do browser) Cuidado: a propriedade width especifica somente a largura do conteúdo! Assim, se for preciso descobrir a largura total de um elemento, deve-se somar possíveis padding s, bordas, e margens (quando for o caso)
87 Propriedade width 87 Ex.: Esse parágrafo contém algumas indicações CSS. Qual será a largura total do elemento na tela, em px? conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo p { border-width : 2px; padding: 5px 8px 10px 7px; margin: 10px; width: 300px;
88 Propriedade height 88 É possível usar a propriedade height para configurar a altura de elementos Se não houver uma regra alterando a largura de um elemento, o browser, então, irá admitir a largura como sendo auto E irá expandir o elemento usando o espaço disponível (na área visível do browser) p { border-width : 2px solid black; height: 500px; width: 300px; padding: 10px; conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo
89 Layout 89 Os browsers posicionam elemento seguindo um fluxo padrão A partir do topo, até a parte inferior da área visível da página, com uma quebra de linha antes e depois de cada elemento de bloco (não flutuante) encontrado: Por default, cada elemento de bloco irá ocupar toda a largura da área visível do navegador Elementos inline (ou em linha), por sua vez, fluem a partir da parte superior esquerda do elemento de bloco até encontrar sua parte inferior direita (default).
90 Layout(cont.) 90 Elementos são capazes de flutuar (com float) sobre o fluxo padrão A idéia é descolar um elemento da página podendo movê-lo para esquerda ou à direita Lembre-se: se, por um lado, eles não são mais enxergados pelos elementos de bloco, por outro, elementos inline irão considerar e respeitar os seus limites: Lembre-se: para flutuar, um elemento deve ter um id e um width
91 Layout(cont.) 91 Há diversas maneiras de conceber um layout para uma página Pode-se usar um layout flexível : o conteúdo principal da página poderá crescer ou diminuir, conforme a janela do navegador é redimensionada Este layout possui algumas limitações (vide práticas anteriores) Pode-se usar um layout fixo layout fixo : o tamanho do conteúdo principal da página não será alterado ainda que a janela do navegador seja redimensionada Usa não apenas a propriedade width, mas height também Este layout também possui limitações, mas, atualmente, é bastante utilizado Não há um layout perfeito: a escolha recai no que o site deve permitir seu usuário fazer e o webdesigner saber ou não implementá-lo
92 Um exemplo breve 92 Laboratório 10: uso de <div>
93 Elementos descendentes 93 Com CSS, também é possível selecionar apenas determinados elementos descendentes (elementos filhos, netos, bisnetos, etc.) Selecione apenas os parágrafos que são descendentes (em qualquer nível) da div rodapé div#rodape p { color : #FF4567; Pode-se fazer construções mais complexas Selecione apenas os parágrafos que são filhos diretos da div. Se houvesse, por ex., um blockquote na div que possuísse um parágrafo como filho, este não iria ser afetado, pois já seria, no caso, um neto Selecione apenas aqueles parágrafos que aparecem imediatamente após os elementos h1 div#cabecalho > p { color : #FF4567; #h1+p { color : #FF4567;
94 Propriedade text-align 94 A propriedade text-align permite alinhar todos os elementos inline (ou apenas texto) que estão dentro de elementos de bloco Lembre-se de que, apesar de text-align funcionar para qualquer elemento inline, ela sempre deve ser setada em elementos de bloco! Ex.: logo, tentar usar diretamente text-align em <img> não irá funcionar Note que é bastante comum setar text-align em um elemento pai e o alinhamento ser passado para os filhos (inline s ou blocos) Ex: text-align em uma <div> que contém <p> e <h1> Estes dois últimos elementos herdarão o alinhamento do pai.
95 Elemento <span> 95 O elemento <span> é bastante similar ao <div> visto há pouco: é utilizado para agrupar elementos inline (em linha) ou texto puro Exemplo: Da mesma forma que com as div s, é possível adicionar span s à classes (ou até prover um id único para eles) visando estilizálos em um arquivo CSS! arquivo.html arquivo.css <p> Camisas <span class= vermelho > vermelhas </span> terão 30% de desconto hoje mesmo! </p> <h3> Afinal, o <span class= vermelho > vermelho </span> é uma cor que está sempre na moda </h3>.vermelho { color: red; font-weight: bold; Pergunta intrigante: mas, por que não usar <em> no html e no css em vez de todo este cuidado? <span> é um elemento inline. Logo, ele não causará nenhuma quebra de linha indesejada em um texto que, supostamente, deva ser contínuo...
96 <a> e pseudo-classes 96 O elemento <a> é um exemplo de elemento que admite diferentes estados (não-clicado, clicado, mouse sobre o link, etc. ) A folha de estilos default do browser provê uma aparência para cada estado É bastante comum aplicar estilos a cada um destes estados de <a> Use pseudo-classes para contemplar cada estado possível É possível estilizar pseudo-classes, mas elas não irão aparecer na estrutura XHTML O browser é que irá fazer todo o trabalho de associar o link à classe correta com base na interação do visitante enquanto ele usa os links (isso tudo onthe-fly ) Teste isso a:link { color: green; /* link não visitado */ a:visited { color: red; /* link já visitado */ a:hover { color: yellow; /* mouse sobre o link */ a:active{ color: blue /* link selecionado */
97 Um exemplo breve 97 Lista de revisão para a prova
98 Para um melhor aproveitamento 98 Ao codificar exemplos mostrados em sala, procure verificar pontos de dúvidas com o professor. Não estude apenas por slides (são apenas tópicos)! Mantenha em dia todas as questões das listas de exercícios e práticas de laboratório. Não se acanhe! Procure-me (ou monitor da disciplina, quando houver algum) e questione conceitos, listas, etc. Não deixe para começar a estudar em cima da hora.
99 Dúvidas 99 Perguntas?
100 Bibliografia 100 DAMASCENCO, Aniele. Webdesign Teoria e Prática. Editora Visual Books, MEMÓRIA, Filipe. Design para Internet. Editora Campus, NIEDERST, Jennifer. Aprenda Web Design. Editora Ciência Moderna, SCHMIDT, Paulo. Fundamentos de Auditoria de Sistemas. Editora Atlas, Artigos e materiais na Web.
HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo
HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo RESUMO Linguagem de Marcação e Estilo - CSS DESCRIÇÃO Regra CSS Vinculação Inline Vinculação Incorporada Vinculação Externa TAGS seletor
Desenvolvimento Web. Professor: Bruno E. G. Gomes
Instituto Federal de Educação Ciência e Tecnologia Curso Técnico Integrado em Informática Campus Currais Novos Desenvolvimento Web CSS Conceitos básicos parte I Professor: Bruno E. G. Gomes 2013 Introdução
CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet) André Tavares da Silva andre.silva@udesc.br CSS Folha de Estilo em Cascata Mecanismo simples para adicionar estilos (fontes, cores, espaçamentos, por exemplo) aos documentos
Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]
![Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]](/thumbs/75/71501484.jpg "Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]")
Recurso Didáctico Formador[a] Sónia Rodrigues UFCD / UC 0793 Scripts CGI e Folhas de Estilo Data 05/05/2009 Contextualização / Objectivos Documentação de apoio Orientação Pedagógica Apontamentos de Folhas
Cascading: Style Sheet
André Kawamoto 2010 O que é CSS Cascading: Múltiplos estilos podem se sobrepor para especificar uma variedade de estilos desde um website inteiro até um único elemento. Qual estilo é aplicado diz respeito
Cascading Style Sheets
Cascading Style Sheets PROF. ME. HÉLIO ESPERIDIÃO CSS Cascading Style Sheets (CSS) é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação,
Sintaxe Básica da Linguagem CSS
Sintaxe Básica da Linguagem CSS Regras - Regra CSS é uma declaração com sintaxe própria, que indica como será aplicado um estilo a um ou mais elementos HTML. Ela é composta por três partes: um seletor,
Permite que o conteúdo e o layout de uma página seja separado do design visual e os elementos de apresentação.
Porque usar css? Cascading Style Sheets (css) sobrepõe as características padrões dos browsers São usadas para melhorar e controlar a aparência de uma página web. Porque usar css? Permite que o conteúdo
Desenvolvimento Web. CSS Conceitos básicos parte I. Professor: Bruno Gomes
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA CURSO TÉCNICO INTEGRADO EM INFORMÁTICA CAMPUS CURRAIS NOVOS Desenvolvimento Web CSS Conceitos básicos parte I Professor: Bruno Gomes 2011 INTRODUÇÃO O
08/08/2011 TECNOLOGIAS WEB AULA 10 PROF. RAFAEL DIAS Objetivos: Revisar os princípios de CSS Blocos e Elementos Alinhados com CSS
TECNOLOGIAS WEB AULA 10 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Revisar os princípios de CSS Blocos e Elementos Alinhados com CSS 1 SINTAXE: seletor{ propriedade: valor; Seletor: É o elemento HTML
PROGRAMADOR WEB. PROF. Esp. Andrew H. G. Rodrigues
PROGRAMADOR WEB PROF. Esp. Andrew H. G. Rodrigues CSS - CASCADING STYLE SHEETS Folhas de estilo em cascata Para cada estilo deve ser definido uma regra CSS Cada regra CSS deve utilizar a seguinte sintaxe:
TECNOLOGIAS WEB. Unidade 3 Linguagem de Marcação e Estilo. Luiz Leão
Luiz Leão luizleao@gmail.com http://luizleao.com Conteúdo da Unidade Cascading Style Sheet (CSS) Linguagem CSS Introdução É uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos
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
INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO CSS - Cascading Style Sheets Folhas de estilo em cascata Para cada estilo deve ser definido uma regra CSS Cada regra CSS deve utilizar
IFSC/Florianópolis - Prof. Herval Daminelli. De fontes De textos De margens De bordas De preenchimentos (padding) De fundos (background) De links
De fontes De textos De margens De bordas De preenchimentos (padding) De fundos (background) De links Propriedades básicas para fontes: color: cor da fonte font-family: tipo de fonte font-size: tamanho
CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira
![CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira](/thumbs/68/59560005.jpg "CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira")
Desenvolvimento e Design de Websites Prof.: Ari Oliveira Folhas de Estilo em Cascata CSS Localização dos estilos Seletores 2 Faça uma página de trabalhe conosco. Esta página deverá conter um formulário
Estilo em Aplicações Hipermídia na Web
SCC0265 Sistemas Interativos Web Estilo em Aplicações Hipermídia na Web Renata Pontin M. Fortes (renata@icmc.usp.br) PAE: Willian Watanabe (watinha@gmail.com) Instituto de Ciências Matemáticas e de Computação
Exercícios Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho
Exercícios Práticos HTML5 + CSS3 Profa. Flávia Pereira de Carvalho Maio de 2018 1 Exemplos e Exercícios Práticos HTML5 e CSS3 1) Primeiro exemplo: 2) Seletor ID: 3) Seletor de Classe: 2 4) Também é possível
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I
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
INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO A partir do HTML 4.01, o único modo de alterar a letra (cor, tamanho, tipo, etc.) ou o fundo (cor ou imagem) é utilizando o atributo
CSS CASCADING STYLE SHEET
CSS CASCADING STYLE SHEET CURSO TÉCNICO DE INFORMÁTICA MODALIDADE SUBSEQÜENTE DESENVOLVIMENTO WEB 1 PROF. ALEXANDRO DOS SANTOS SILVA 1 SUMÁRIO Conceito Sintaxe básica Tipos de folhas de estilos 2 1 CSS
Web Design Aula 15: Propriedades CSS
Web Design Aula 15: Propriedades CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Roteiro Propriedades de texto Propriedades de Cores Propriedades de Bordas Propriedades de Listas Cor de
Introdução à Informática Escola Superior de Tecnologia - Ano Lectivo 2005/06 Prof. Bruno Silva
Introdução à Informática Escola Superior de Tecnologia - Ano Lectivo 2005/06 Prof. Bruno Silva Cascading Style Sheets - (CSS] Introdução Uma Style Sheet é um ficheiro que contém regras que dizem ao browser
Exemplos Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho
Exemplos Práticos HTML5 + CSS3 Profa. Flávia Pereira de Carvalho Agosto de 2018 2 1 Exemplos Práticos HTML5 e CSS3 1) Primeiro exemplo: 2) Seletor ID: 3) Seletor de Classe: Profa. Flávia Pereira de Carvalho
Qual a razão do termo cascata na terminologia CSS? A forma como as regras de estilo são aplicadas obedece a 3 princípios básicos: herança,
Qual a razão do termo cascata na terminologia CSS? A forma como as regras de estilo são aplicadas obedece a 3 princípios básicos: herança, especificidade do seletor e proximidade do elemento estilizado.
PROGRAMAÇÃO EM AMBIENTE WEB I
PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com CSS As folhas de estilo em cascata são mecanismos usados para adicionar estilos em
F E B A C. Exercício de Fixação 3. FACULDADE DE EDUCAÇÃO DE BACABAL FEBAC Credenciamento MEC/Portaria: 472/07 Resolução: 80/07
F E B A C FACULDADE DE EDUCAÇÃO DE BACABAL FACULDADE DE EDUCAÇÃO DE BACABAL FEBAC Credenciamento MEC/Portaria: 472/07 Resolução: 80/07 Curso: Sistemas para Internet Período: 2 o Disciplina: Fundamentos
Respostas - RESUMO: Questionário CSS. 1) O padrão CSS nasceu para tentar minimizar quais problemas ligados à gestão de conteúdos na web?
Faculdade de Informática de Taquara Disciplina: Autoria e Design na Internet I Profa. Flavia Pereira de Carvalho Respostas - RESUMO: Questionário CSS 1) O padrão CSS nasceu para tentar minimizar quais
HTML, CSS e JavaScript
HTML, CSS e JavaScript Contato: Site: http://professores.chapeco.ifsc.edu.br/lara/ 1 Arquivo externo Dentro da tag head: 2 Qual a dirença
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II Prof. Dr. Daniel Caetano 2012-1 Objetivos Apresentar o CSS como ferramenta de layout de página Capacitar para o posicionamento de elementos com
#Trabalhando com Texto
INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RIO GRANDE DO NORTE CAMPUS SÃO GONÇALO DO AMARANTE PROGRAMAÇÃO WEB #Trabalhando com Texto Eliezio Soares elieziosoares@gmail.com Aula de Hoje Web
08/11/2012. Tecnologias WEB - CSS. Professor Elisson Lobão
Tecnologias WEB - CSS Professor Elisson Lobão 1 CSS CSS(Cascade Style Sheets) são folhas de estilo que permitem controlar a aparência dos elementos HTML Vantagens: Grande liberdade de formatação Maior
06/02/2016 PROGRAMAÇÃO EM AMBIENTE WEB I CSS UM POUCO DE HISTÓRIA
PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com CSS As folhas de estilo em cascata são mecanismos usados para adicionar estilos em
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I Prof. Dr. Daniel Caetano 2012-2 Objetivos Apresentar o CSS como substituto dos parâmetros visuais do HTML Apresentar a tag DIV Capacitar para a
1) Em um documento separado fora de todos os documentos HTML;
Você pode definir regras de CSS em três lugares. E, por definição, pode utilizar uma combinação dos três métodos nos seus web sites. A maneira como as regras interagem entre si está relacionada à parte
INTRODUÇÃO À PROGRAMAÇÃO EXERCÍCIO DE REVISÃO
INTRODUÇÃO À PROGRAMAÇÃO EXERCÍCIO DE REVISÃO Questões de concurso 1. Na interface Web, ele é um arquivo independente do arquivo HTML no qual são declaradas propriedades e valores de estilização para os
INTRODUÇÃO AO CSS. HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados.
INTRODUÇÃO AO CSS O que é CSS? Talvez você já tenha ouvido falar em CSS, mas não saiba o que significa exatamente. Nesta lição você saberá o que é e para que serve CSS. CSS é a abreviatura para Cascading
Unidade 4: Introdução à Tecnologia CSS Prof. Daniel Caetano
Programação para Internet Rica 1 Unidade 4: Introdução à Tecnologia CSS Prof. Daniel Caetano Objetivo: Apresentar conceitos de introduzir o uso de Folhas de Estilo em Cascata. Bibliografia: W3, 2009; CASCADE,
Desenvolvimento Web. XHTML tag head e tags de texto. Professor: Bruno Gomes
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA CURSO TÉCNICO INTEGRADO EM INFORMÁTICA CAMPUS CURRAIS NOVOS Desenvolvimento Web XHTML tag head e tags de texto Professor: Bruno Gomes 2012 INTRODUÇÃO
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
MÓDULO 1: Tags: estrutura; tipos; atributos. Estrutura de um documento. Tags de blocos: <?xml?>, <!DOCTYPE>, <html>, <head>, <body>, <body bgcolor>.
MÓDULO 1: Tags: estrutura; tipos; atributos. Estrutura de um documento. Tags de blocos: , , , , , . Conceitos básicos do funcionamento da Internet Internet
CSS Cascading Style Sheets
CSS Cascading Style Sheets Linguagem de Folhas de Estilo Introdução Faz parte da versão 4 do html Utilizado para padronizar os componentes html Pode ser utilizado de três formas: Inline quando é utilizada
Cascading Style Sheets CSS
Cascading Style Sheets CSS Sistemas de Informação André Monteiro de Oliveira Restivo E-mail: andre.restivo@fe.up.pt URL: www.fe.up.pt/~arestivo/aulas/sinf André Restivo SINF 2003/2004 CSS: 1 CSS: O que
Web Design - CSS. Conteúdo. - O que é CSS? - Sintaxe CSS - Como inserir CSS em HTML - Propriedades CSS
CSS Web Design - CSS Conteúdo - O que é CSS? - Sintaxe CSS - Como inserir CSS em HTML - Propriedades CSS 01 Assunto: CSS O que é CSS? CSS é a sigla para Cascading Style Sheets, que pode ser traduzida para
CSS Cascading Style Sheets (Folhas de Estilo em Cascata)
CSS Cascading Style Sheets (Folhas de Estilo em Cascata) Instituto Federal de Educação, Ciência e Tecnologia do Triângulo Mineiro Prof. Edwar Saliba Júnior 1 Parte I CSS Basic 2 CSS Determina como elementos
Tarlis Portela Web Design CSS
Tarlis Portela Web Design CSS Web Design CONCEITOS 01 01 Histórico Quando o HTML foi criado, a intenção não era de forma alguma, formatar informação; A medida que o HTML foi se popularizando e evoluindo,
HTML: Recursos Básicos e Especiais
Linguagem de Programação para Web HTML: Recursos Básicos e Especiais Prof. Mauro Lopes 1-31 34 Objetivo Iremos aqui apresentar os recursos básicos e especiais do HTML. Serão apresentados, o uso de fontes,
HTML? HTML? HTML? HTML e HTTP. HTML e HTTP 26/02/2011
INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DA PARAÍBA CAMPUS CAMPINA GRANDE 1 2 HTML? INTERNET BÁSICA: EXTENSIBLE HYPERTEXT MARKUP LANGUAGE XHTML PARTE 1 Hypertext Markup Language (Linguagem de
CASCADING STYLE SHEETS (CSS)
UI MARIA LENIR ARAÚJO MENESES Prof Esp. Leonardo Delgado Aula 02: CASCADING STYLE SHEETS (CSS) Unidade IV Aluno: Data: / / CASCADING STYLE SHEETS (CSS) O CSS é uma linguagem de estilo que foi desenvolvida
CSS: Cascading Style Sheets (folhas de estilo) Pimentel, Morganna BSI - UNIRIO DPW
CSS: Cascading Style Sheets (folhas de estilo) Pimentel, Morganna BSI - UNIRIO DPW 2017.2 1 CSS: ementa Texto Fontes Links Ícones Listas Tabelas DPW 2017.2 2 / 18 CSS: text Definição Formatar o texto quanto
Guia de Referência CSS Volume 1: Parâmetros Básicos Prof. Daniel Caetano
Programação Web 1 Guia de Referência CSS Volume 1: Parâmetros Básicos Prof. Daniel Caetano Objetivo: Apresentar os parâmetros básicos que podem ser modificados com a tecnologia CSS. Bibliografia: W3, 2009;
CSS EXTERNO. <head> <link href="estilo.css" type="text/css" rel="stylesheet" /> </head>
CSS DDW CSS EXTERNO O CSS é um arquivo que visa personalizar o modo como seu HTML aparece para o usuário. Ele deve ser chamado dentro da tag no topo do site.
Revisando os conteúdos. Introdução ao CSS
Aula 04 Revisando os conteúdos Tag : fornece informações sobre o documento, palavras-chaves, autor da página, última atualização, etc. Essas informações não são mostradas na página, apenas processadas
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I Prof. Dr. Daniel Caetano 2013-1 Objetivos Apresentar o CSS como substituto dos parâmetros visuais do HTML Capacitar para a construção de documentos
Criando estilos. Css. Cada estilo que você cria é definido como uma regra CSS. Cada regra deve-se utilizar a seguinte sintaxe:
Css CSS (Style Sheets Cascating - Folhas de Estilo em Cascata) é um estilo criado para melhorar a formatação de textos, imagens, links, tabelas, formulários e etc das suas páginas HTML. o CSS também facilita
CSS. Karen Frigo Busolin
CSS Karen Frigo Busolin O que é CSS? Significa Cascading Style Sheets Estilos define como mostrar elementos HTML Estilos foram adicionandos no HTML 4.0 Estilos na solução de problemas HTML nunca deve a
COM222 DESENVOLVIMENTO DE SISTEMAS WEB. Aula 01: HTML e CSS
COM222 DESENVOLVIMENTO DE SISTEMAS WEB Aula 01: HTML e CSS 2 Conteúdo Noções introdutórias HTML CSS HTML: HyperText Markup Language 3 Linguagem usada para construir páginas Web Função principal Estruturar
Informática Parte 21 Prof. Márcio Hunecke
Escriturário Informática Parte 21 Prof. Márcio Hunecke Informática CSS 3 É no CSS (Cascading Style Sheets) que se define estilos para páginas web com efeitos de transição, imagem, e outros, que dão um
Ao projeto inciado na aula anterior, faça as seguintes alterações:
Atividade 4 Ao projeto inciado na aula anterior, faça as seguintes alterações: 1. Insira uma cor de fundo na página. 2. Google fonts Se nos basearmos apenas nas fontes que o usuário terá instaladas em
HTML BÁSICO E TEMPLATE VIEW. Gabrielle Amorim Porto
HTML BÁSICO E TEMPLATE VIEW Gabrielle Amorim Porto HTML BÁSICO E TEMPLATE VIEW Hypertext Markup Language Linguagem de marcação de hipertexto; Descreve a estrutura das páginas Web utilizando tags. HTML
Treinamento em CSS. Índice
Nível: Básico Horas: 2 Treinamento em CSS Índice Índice...1 Introdução...2 Formantando documentos...2 O que é CSS?...2 Por que utilizar CSS?...2 Separando o sistema em camadas...3 Vinculando um arquivo
SIMULADOS & TUTORIAIS
SIMULADOS & TUTORIAIS TUTORIAIS CSS Como inserir códigos CSS em páginas HTML Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte
Disciplina: Desenvolvimento Web Professor: Paulo César Fernandes de Oliveira, BSc, PhD
1. O que é CSS? a) É a linguagem que se usa para se definir quais serão os elementos de uma página HTML. b) É uma linguagem que se usa para se modificar o estilo de apresentação dos elementos de uma página
Guia de Bolso HTML e XHTML
Guia de Bolso HTML e XHTML Este guia de bolso oferece uma listagem concisa, porém abrangente, dos elementos e atributos especificados nas Recomendações HTML 4.01 e XHTML 1.0. O texto utiliza a abreviação
#Fundamentos de uma página web
INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RIO GRANDE DO NORTE CAMPUS SÃO GONÇALO DO AMARANTE PROGRAMAÇÃO WEB #Fundamentos de uma página web Eliezio Soares elieziosoares@ifrn.edu.br Aula de
INTRODUÇÃO AO DESENVOLVIMENTO FRONT-END COM HTML, CSS E JAVASCRIPT
v1.2 06/04/2017 INTRODUÇÃO AO DESENVOLVIMENTO FRONT-END COM HTML, CSS E JAVASCRIPT AULA 4 CSS E CONSTRUÇÃO DE LAYOUTS (PARTE 1) Eder Franco @ FPF Tech The road so far... HTML Linguagem de marcação. Estrutura
Desenvolvimento WEB1 Aula 03 Profa Wanessa Machado do Amaral
Desenvolvimento WEB1 Aula 03 Profa Wanessa Machado do Amaral Surgimento do CSS Na aula passada tivemos uma breve introdução ao CSS Os documentos web, cada vez mais sofisticados e extensos, estavam fugindo
Introdução ao CSS. Programação para a Internet. Prof. Vilson Heck Junior
Introdução ao CSS Programação para a Internet Prof. Vilson Heck Junior Estilos de Páginas CSS Cascading Style Sheets: Estilos de Página em Cascata (trad. livre); É uma linguagem de estilos Define a apresentação
13 de dezembro de 2012
ao ao Universidade Federal Fluminense 13 de dezembro de 2012 ao 1 2 3 4 5 6 7 Informações principais ao Quando o HTML surgiu, seu objetivo era especialmente a estruturação de informações na página. Com
Módulo 17E. Revisões de HTML. A) Noções básicas de HTML
Módulo 17E Revisões de HTML A) Noções básicas de HTML Estrutura básica de um documento Um documento HTML começa com a tag de abertura e termina com a tag de fecho . De seguida, temos a considerar
CSS. Cascading Style Sheets Style Sheets
CSS Cascading Style Sheets Style Sheets Agenda Histórico Definição Limitações do CSS-1 CSS2 - Características Por que usar CSS? Vantagens Sintaxe Básica Como inserir uma folha de Estilo Indentificando
A diferença entre um site que implementa CSS e outro que não o usa é gigantesca e notável.
Aula 02 - Introdução ao css ( folhas de estilo ) CSS é a sigla para o termo em inglês Cascading Style Sheets que, traduzido para o português, significa Folha de Estilo em Cascatas. O CSS é fácil de aprender
Criação de estilos CSS
Em primeiro lugar vamos inserir um parágrafo Marco Soares 1 Criação de estilos CSS Para começar, crie um site novo e uma página inicial para testes chamada index.html Vamos começar por criar alguns estilos
Fábio Borges de Oliveira. HTML HyperText Markup Language
Fábio Borges de Oliveira HTML HyperText Markup Language Iniciando Código É a primeira tag de um documento HTML, nas primeiras versões dos browsers essa tag era obrigatória. Propriedade que
Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013
Efeito cascata Aula 4 Modelo CSS Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Fontes das folhas de estilo Autor Usuário Agente do usuário
Aula 3 - Parte Final HTML e CSS
Universidade Federal do Paraná - UFPR 16 de Agosto de 2010 Div 1 Div 2 Div Div Podemos dizer que a função da tag < div > é fazer a divisao dos itens de uma pagina, isto é posicionar os layouts. Para um
CSS Folha de Estilo em Cascatas
O que é CSS? CSS é a abreviatura para Cascading Style Sheets. Folha de Estilos em Cascata. CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores,
Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto
Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Folhas de estilos em cascata Objetivo Formatar páginas escritas em HTML baseada nos padrões "Cascading Style Sheets",
AULA 02 Introdução (HTML, CSS e Javascript) PROGRAMAÇÃO PARA WEB Marcelo Henrique dos Santos
AULA 02 Introdução (HTML, CSS e Javascript) Mestrado em Educação (em andamento) MBA em Negócios em Mídias Digitais MBA em Marketing e Vendas Especialista em games : Produção e Programação Bacharel em Sistema
Programação para Internet
Universidade Federal de Uberlândia Faculdade de Computação Programação para Internet Curso de Sistemas de Informação Prof. Dr. Daniel A. Furtado Módulo 3 HTML com CSS 2 CSS Cascading Style Sheets É uma
INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES CSS INTRODUÇÃO E MANIPULANDO FONTES
INTRODUCAO DESENVOLVIMENTO E DESIGN DE CSS INTRODUÇÃO E MANIPULANDO FONTES Introdução CSS significa Cascading Style Sheetes (Folhas de Estilo em Cascata). Não seria ótimo fazer layouts na sua página sem
Desenvolvimento de Aplicações para Internet
Desenvolvimento de Aplicações para Internet CSS Celso Olivete Júnior olivete@fct.unesp.br HTML Formatando o documento... Formulário Responsável por fazer a interação entre os dados fornecidos pelo usuário
TECNOLOGIA WEB INTRODUÇÃO CONSTRUÇÃO DE PÁGINAS ESTÁTICAS HTML / XHTML
INTRODUÇÃO CONSTRUÇÃO DE PÁGINAS ESTÁTICAS HTML / XHTML 1 INTRODUÇÃO TECNOLOGIA WEB Começaremos desvendando o poder do desenvolvimento de aplicações baseadas na Web com a XHTML (Extensible HyperText Markup
CSS Exercício JCC. Comunicações Digitais e Internet, 2006/07 Jornalismo e Ciências da Comunicação, U.Porto. Sumário
CSS Exercício JCC Comunicações Digitais e Internet, 2006/07 Jornalismo e Ciências da Comunicação, U.Porto Sumário Com este exercício pretende-se apresentar e experimentar o processo de implementação de
SIMULADOS & TUTORIAIS
SIMULADOS & TUTORIAIS TUTORIAIS HTML Como utilizar cabeçalhos e elementos de cabeçalhos de página em HTML Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste
SEPARAÇÃO EM: Apresentação Estrutura Comportamento
SEPARAÇÃO EM: Apresentação Estrutura Comportamento Arquitectura de Sistemas DEI-ISEP Estrutura/Apresentação/Comportamento Uma boa prática na construção de páginas web: Separação em 3 camadas: Estrutura
Programação Web Aula 2 XHTML/CSS/XML
Programação Web Aula 2 XHTML/CSS/XML Departamento de Informática UFPR 17 de Fevereiro de 2014 1 Histórico 2 Funcionamento 3 Atributos 4 HTML5 Estrutura de uma arquivo HTML5 Validação Tags básicas Seleção
Web Design Aula 16: Modelo de Caixa e propriedades de Imagem
Web Design Aula 16: Modelo de Caixa e propriedades de Imagem Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Roteiro Introdução Área de Conteúdo Enchimento Bordas Margens Caixas Propriedades
Desenvolvimento Web. HTML 5 Parte I. Prof. Vicente Paulo de Camargo
Parte I Prof. Vicente Paulo de Camargo Páginas com podem ser desenvolvidas com editor de texto simples Existem, no entanto, alguns editores interessantes, que facilitam a edição de páginas É o caso de
Aula 3. Imagens. <img src="foto.jpg" />
Aula 3 Imagens Para inserir uma imagem na página utilizamos a tag
Mini-Curso Expotec 2010 Professores: Paulo Vítor, Jackson, Raimundo, Lucas e Cleverton
Mini-Curso Expotec 2010 Professores: Paulo Vítor, Jackson, Raimundo, Lucas e Cleverton Sumário da Aula Introdução Introdução à XHTML Introdução à Folhas de Estilo (CSS) A Ferramenta Dreamweaver CS4 2 O
Compêndio códigos. {css}
Compêndio códigos {css} ADVERTÊNCIA: A que se segue é apenas uma lista com as propriedades de CSS, não pretende de modo algum ser um manual. Pressupõe, portanto, que já se saiba de antemão o signi cado
Informática I. Aula 3. Aula 3-03/09/2007 1
Informática I Aula 3 http://www.ic.uff.br/~bianca/informatica1/ Aula 3-03/09/2007 1 Ementa Noções Básicas de Computação (Hardware, Software e Internet) HTML e Páginas Web Internet e a Web Javascript e
Este exercício será parecido com a montagem de um projeto real, onde trabalhamos com vários arquivos XHTML e um único arquivo CSS.
Este exercício será parecido com a montagem de um projeto real, onde trabalhamos com vários arquivos XHTML e um único arquivo CSS. 1) Crie uma pasta chamada com_estilo e salve dentro dela os arquivos obrigado.html
Comandos Extras Formatações no CSS
Comandos Extras Formatações no CSS Propriedade 'background-color': A propriedade background-color define a cor do fundo de um elemento. Propriedade 'color': A propriedade color define a cor do primeiro