Cascading Style Sheets

Tamanho: px
Começar a partir da página:

Download "Cascading Style Sheets"

Transcrição

1 Cascading Style Sheets António Gonçalves ESTSetúbal ÍNDICE Introdução Sintaxe Básica Regras Selectores Selectores Contextuais Propriedades Valores Agrupamento Herança Comentários Pseudo-classes e Pseudo-elementos Pseudo-classes de âncoras O pseudo-elemento First Line O pseudo-elemento First Letter Ordem de Cascading! Important Origem das Regras Regras de Selectores: Cálculo de Especificação Ordem de Especificação Propriedades das Fontes Font Family Font Style Font Variant Font Weight Font Size Font Cores e Pano de Fundo Color Background Color Background Image Background Repeat Background Attachment Background Position Background Referenciar Style Sheets Incorporar um Style Sheet Importar um Style Sheet Inlining Style O Elemento SPAN O Elemento DIV 1

2 Introdução Uma folha de estilo é composta por regras de formatação que informam o navegador como exibir o documento. Existem várias maneiras de referenciar estas regras nos documentos HTML, mas o método mais simples é utilizar o elemento STYLE do HTML. Este elemento é inserido na marca HEAD do documento e contém o conjunto de regras de formatação da página. Note-se que o elemento STYLE é um bom método para criação de estilos, mas existem desvantagens que devem ser consideradas antes de implementar este método. Cada regra é composta de um selector -- geralmente um elemento HTML como a marca BODY, P ou EM --e o estilo, ou layout, a ser aplicado neste selector. Existem várias propriedades que podem ser definidas num elemento. Cada propriedade recebe um valor que, juntamente com a propriedade, descreve como o selector deve ser apresentado. As regras de Style são definidas de seguinte forma: selector { propriedade: valor } Declarações múltiplas para um único selector podem ser separadas por ponto e vírgula: selector { propriedade1: valor1; propriedade2: valor2 } Por exemplo, o segmento de código define as propriedades de cor e tamanho da fonte para os elementos H1 e H2: <HEAD> <TITLE>Exemplo de CSS</TITLE> <STYLE TYPE="text/css"> H1 { font-size: x-large; color: red } H2 { font-size: large; color: blue } </STYLE> </HEAD> A folha de estilo acima informa o navegador que as marcas H1 devem ser exibidas em tamanho de fonte extra-large e cor vermelha, e as marcas H2 devem ser exibidas em tamanho de fonte large e cor azul. A especificação CSS1 formalmente define todas as propriedades e valores existentes. 2

3 Sintaxe Básica Regras Selectores Qualquer elemento HTML pode ser um selector CSS1. Um selector é simplesmente o elemento que está ligado a um layout em particular. Por exemplo, a etiqueta P é o selector em: P { text-indent: 3em } Selectores de Classes Um selector simples pode possuir diferentes classes, permitindo que o mesmo elemento possua diferentes estilos. Por exemplo, podemos desejar exibir cores diferentes para cada tipo de documento: code.html { color: # } code.css { color: #4b0082 } No exemplo acima criamos duas classes, css e html para serem usadas no elemento CODE do HTML. O atributo CLASS é usado em HTML para indicar a classe de um elemento, por exemplo: <P CLASS=aviso>Somente é permitido definir uma classe para cada selector. Por exemplo, code.html.proprietary é inválido.</p> As classes também podem ser declaradas snum elemento associado:.note { font-size: small } Neste caso, a classe note pode ser usada em qualquer elemento. Um bom hábito é definir as classes de acordo com as suas funções ao invés de seu layout. A classe note do exemplo acima poderia ter sido designada de small, mas este nome não faria sentido caso o Webmaster desejasse alterar o layout da classe para que não mais utilizasse uma fonte tamanho pequeno. Selectores ID Os selectores ID são individualmente definidos com o propósito de nomear os elementos. Este tipo de selector deve somente ser usado em extrema necessidade em virtude de suas 3

4 limitações. Um selector ID é nomeado através do indicador "#" precedente ao nome. Por exemplo, um selector ID pode ser nomeado assim: #svp94o { text-indent: 3em } Este deve ser referenciado em HTMl através do atributo ID: <P ID=svp94O>Text indented 3em</P> Selectores Contextuais Os selectores contextuais são meramente strings de dois ou mais selectores simples, separados por espaços em branco. Estes selectores podem ter as suas propriedades definidas e, devido às regras na ordem de cascading, terão preferência em relação aos selectores simples. Por exemplo, o selector contextual em: P EM { background: yellow } É P EM. Esta regra diz que o o texto enfatizado no parágrafo deve possuir um pano de fundo amarelo. O texto enfatizado no cabeçalho não será afectado. Declarações Propriedades Uma propriedade é definida no selector para que os estilos possam ser manipulados. Exemplos de propriedades incluem cor, margem, e fonte. Valores Os valores declarados são recebidos pelas propriedades. Por exemplo, a propriedade cor pode receber o valor vermelho. Agrupamento Para minimizar as repetições de códigos nas folhas de estilo, é possível definir um agrupamento de declarações e selectores. Por exemplo, todos os cabeçalhos num documeto podem estar definidos através de declarações idênticas num agrupamento: H1, H2, H3, H4, H5, H6 { color: red; font-family: sans-serif } Herança Virtualmente todos os selectores agrupados receberão por herança os valores atribuídos às propriedades de outros selectores, caso não tenha sido definido o contrário. Por exemplo, a cor definida no BODY será também aplicada no texto de um parágrafo. 4

5 Existem alguns casos onde os selectores não recebem por herança os valores dos demais. Por exemplo, a propriedade margin-top não é herdada, e com isto o parágrafo não terá o mesma formatação que o restante do documento. Comentários Comentários são introduzidos em style sheets usando as mesmas convenções da linguagem de programação C. Um exemplo de comentário em CSS1 terá o seguinte formato: /* Aqui digitamos os comentários necessários */ 5

6 Pseudo-classes e Pseudo-elementos As pseudo-classes e os pseudo-elementos são classes e elementos "especiais" que são automaticamente reconhecidos pelos browsers que suportam CSS. As pseudo-classes apresentam diferentes tipos de elementos (Exemplo: links visitados e links activos representam dois tipos de âncoras diferentes). Os pseudo-elementos fazem referência à sub-partes de elementos, como a primeira letra de um parágrafo. A regra de declaração de pseudo-classes ou pseudo-elementos tem a seguinte formatação: selector:pseudo-classe {propriedade: valor} ou selector:pseudo-elemento {propriedade: valor} As pseudo-classes e os pseudo-elementos não devem ser especificados no atributo CLASS do documento HTML. As classes normais podem ser usadas juntamente com as pseudo-classes e pseudo-elementos, como vemos a seguir: selector.classe:pseudo-classe {propriedade: valor} ou selector.classe:pseudo-elemento { propriedade: valor} Pseudo-classes de âncoras As pseudo-classes podem ser aplicadas em elementos âncora A para exibição de links, links visitados e links activos de forma diferente. Os links visitados podem ser definidos de forma que sejam exibidos com diferentes tipos de fonte e estilos. Um efeito interessante seria fazer com que o link selecionado (ou activo) possa exibir uma fonte de outra cor e com o tamanho maior que a original. Então, quando a página for novamente exibida para o utilizador, o link visitado será exibido com uma fonte de outra cor e menor que a original. Esta exemplo seria implementado desta forma: A:link { color: red } A:active { color: blue; font-size: 125% } A:visited { color: green; font-size: 85% } 6

7 O pseudo-elemento First Line Podemos observar em muitos jornais que a primeira linha do texto de uma reportagem possui todas as letras maiúsculas e em negrito. O CSS1 inclui esta capacidade através de um pseudo-elemento. O pseudo-elemento first line pode ser utilizado em qualquer elemento do tipo block-level (como por exemplo, P, H1, etc.). O pseudo-elemento first line pode ser codificado da seguinte forma: P:first-line { font-variant: small-caps; font-weight: bold } O pseudo-elemento First Letter O pseudo-elemento first letter é usado para criar efeitos drop caps entre outros. A primeira letra do texto num selector será exibida conforme o valor definido. O pseudoelemento first letter pode ser utilizado em qualquer elemento do tipo block-level. Por exemplo: P:first-letter { font-size: 300%; float: left } Isto criará um efeito drop cap com três vezes o tamanho original da fonte. 7

8 Ordem de Cascading Quando múltiplas folhas de estilo são usadas, estes podem criar conflitos sobre o controle de um selector em particular. Nestas situações são necessárias regras que permitam especificar qual folha de estilo tem prioridade sobre os demais. As características a seguir solucionarão o problema de folha de estilo em conflito.! Important As regras podem ser definidas como importantes ao especificar o argumento!important. Um style designado como importante terá prioridade sobre os demais, caso não possuam a mesma importância. Aqui está um exemplo do uso do argumento! important: BODY { background: url(bar.gif) white; background-repeat: repeat-x! important } Origem das Regras Os autores devem ter cuidado na utilização do argumento! important para as regras, pois os mesmos terão prioridade sobre as regras de importância do utilizador. O utilizador pode, por exemplo, ter definido fontes com cores especiais devido a alguma deficiência visual. Este utilizador provavelmente definiu determinadas regras de style através do argumento! important, pois são vitais para que as páginas sejam visualizadas de forma adequada. Qualquer argumento! important presente na definição terá prioridade sobre as regras normais, portanto, os autores são recomendados a utilizar regras normais para ter certeza de que os utilizadores que utilizam styles especiais possam visualizar a página corretamente. Regras de Selectores: Cálculo de Especificação Os style sheets podem também criar conflitos através de seu nível de especificação, onde um style mais específico sempre terá prioridade sobre um menos específico. Isto é simplesmente uma questão de calcular a especificação de um selector. a. Contar o número de atributos ID num selector. b. Contar o número de atributos CLASS num selector. c. Contar o número de tags HTML no selector. 8

9 Finalmente, escrever os três números na ordem exacta, sem espaços ou vírgulas para obter o número de três dígitos. (Note que pode precisar converter estes números para uma base maior, de forma que sejam expressos somente três dígitos). A lista final dos números correspondentes aos selectores facilmente determinarão a especificação através da ordem numérica. A seguir, mostramos uma lista de selectores ordenados por especificação: #id1 {xxx} /* a=1 b=0 c=0 --> specificity = 100 */ UL UL LI.red {xxx} /* a=0 b=1 c=3 --> specificity = 013 */ LI.red {xxx} /* a=0 b=1 c=1 --> specificity = 011 */ LI {xxx} /* a=0 b=0 c=1 --> specificity = 001 */ Ordem de Especificação Para tornar o procedimento mais fácil, quando duas regras possuem o mesmo equivalente numérico, a última sempre prioridade. 9

10 Propriedades das Fontes Font Family Sintaxe: font-family: [[<family-name> <generic-family>],]* [<family-name> <generic-family>] Valores Possíveis: <family-name> Qualquer nome pode ser usado. <generic-family> serif (exemplo, Times) sans-serif (exemplo, Arial ou He cursive (exemplo, Zapf-Chancery) fantasy (exemplo, Western) monospace (exemplo, Courier Valor Inicial: Determinado pelo browser Sim As font families podem ser definidas por uma fonte específica ou genérica. Definições múltiplas de font families podem ser feitas, e caso uma fonte específica seja definida, a mesma deve ser acompanhada por um nome de family genérico, caso a primeira escolha não esteja disponível. Um exemplo de declaração de font family pode ser visto em seguida: P { font-family: "New Century Schoolbook", Times, serif } Note que as duas primeiras definições são de tipos específicos: New Century Schoolbook e Times. No entanto, como ambas são fontes do tipo serif, a font family genérica é declarada caso o sistema não possua estas fontes instaladas e seja necessário fazer uso de outra fonte do tipo serif que se enquadre nas qualificações. 10

11 Font Style Sintaxe: font-style: <value> Valores Possíveis: normal italic oblique Valor Inicial: normal Sim A propriedade font-style define que a fonte pode ser exibida de três maneiras: normal, italic ou oblique. Um exemplo de style sheet com declarações de font-style ficaria assim: H1 { font-style: oblique } P { font-style: normal } Font Variant Sintaxe: font-variant: <value> Valores Possíveis: normal SMALL-CAPS Valor Inicial: normal Sim A propriedade font-variant determina se a fonte deve ser exibida em normal ou SMALL- CAPS. Aqui está um exemplo de seu uso: SPAN { font-variant: small-caps } Font Weight Sintaxe: Valores Possíveis: Valor Inicial: font-weight: <value> normal bold bolder lighter normal Sim 11

12 A propriedade font-weight é usada para especificar o volume da fonte. Os valores bolder e lighter são relativos ao volume da fonte herdado, enquanto os demais valores são absolutos. Nota: Como nem todas as fontes possuem novos tipos de volume disponíveis, alguns dos volumes podem ser definidos em agrupamentos. Caso o volume especificado não seja válido, um volume alternativo será escolhido através do seguinte método: 500 pode ser substituído por 400, e vice versa podem ser reduzidos ao volume anterior, caso haja, ou para um volume mais denso podem ser substituídos pelo próximo volume mais denso, caso haja, ou para o volume menos denso anterior. Aqui está um exemplo das definições de font-weight: H1 { font-weight: 800 } P { font-weight: normal } Font Size Sintaxe: font-size: <absolute-size> <relative-size> <length> <percentage> Valores Possíveis: <absolute-size> o xx-small x-small small medium large x- large xx-large <relative-size> o <length> <percentage> larger smaller Valor Inicial: medium Sim 12

13 A propriedade font-size é usada para modificar o tamanho da fonte exibida. Valores absolutos (usando unidades como pt e in) podem ser utilizados com cautela, devido a falta de compatibilidade com diferentes browsers. Fontes com valores absolutos podem facilmente tornarem-se pequenas ou grandes demais para o utilizador. Exemplo para definições de tamanho: H1 { font-size: large } P { font-size: 12pt } LI { font-size: 90% } STRONG { font-size: larger } Os utilizadores devem saber que o Microsoft Internet Explorer 3.x trata incorrectamente as unidades em e ex como pixels, causando distorções no texto apresentado. O browser também incorrectamente aplica os valores percentuais relativos ao tamanho default do selector, ao invés de relativo ao tamanho do elemento parent da fonte. Isto cria regras perigosas como: H1 { font-size: 200% } Perigosas porque o tamanho será o dobro do tamanho default para as fontes relativas aos cabeçalhos nível 1 do IE. Font Sintaxe: Valores Possíveis: Valor Inicial: font: <value> [ <font-style> <font-variant> <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> Não definido Sim A propriedade font pode ser utilizada com um atalho para as demais propriedades de fontes. Por exemplo: P { font: italic bold 12pt/14pt Times, serif } Isto especifica que os parágrafos devem ser exibidos através de fontes Times ou serif, bold e italic, utilizando tamanho de 12 pontos mínimo e 14 pontos máximo. 13

14 Cores e Pano de Fundo Color Sintaxe: color: <color> Valor Inicial: Determinado pelo browser Sim A propriedade color permite que os programadores especifiquem a cor de um elemento. Veja a secção Unidades para a descrição dos valores possíveis. Alguns exemplos de regras incluem: H1 { color: blue } H2 { color: # } H3 { color: #0c0 } Para evitar conflitos entre style sheets de utilizadores, as propriedades background e color devem ser especificadas juntamente. Background Color Sintaxe: background-color: <value> Valores Possíveis: <color> transparent Valor Inicial: transparent Não A propriedade background-color define a cor para o pano de fundo de um elemento. Por exemplo: BODY { background-color: white } H1 { background-color: # } Para evitar conflitos entre style sheets de utilizadores, background-image deve ser especificada sempre que background-color for usada. Na maioria dos casos podemos usar background-image: none. 14

15 Background Image Sintaxe: background-image: <value> Valores Possíveis: <url> none Valor Inicial: none Não A propriedade background-image define a imagem para pano de fundo do elemento. Por exemplo: BODY { background-image: url(/images/foo.gif) } P { background-image: url(http://www.htmlhelp.com/bg.png) } Quando uma imagem de pano de fundo é seleccionada, um background color deve também ser definido para browsers que não suportam tal peso de imagens. Os programadores podem utilizar o atalho da propriedade background, que hoje é mais suportado que a propriedade background-image. Background Repeat Sintaxe: background-repeat: <value> Valores Possíveis: repeat repeat-x repeat-y no-repeat Valor Inicial: repeat Não A propriedade background-repeat determina a repetição de um background image. O valor repeat-x é atribuído à repetição horizontal, enquanto o valor repeat-y é atribuído à repetição vertical. Por exemplo: BODY { background: white url(candybar.gif); background-repeat: repeat-x } No exemplo acima, a imagem será repetida horizontalmente apenas. Os programadores podem utilizar o atalho da propriedade background, pois é mais suportado que a propriedade background-repeat. 15

16 Background Attachment Sintaxe: background-attachment: <value> Valores Possíveis: scroll fixed Valor Inicial: scroll Não A propriedade background-attachment determina se um background image específico poderá ter o seu conteúdo fixo ou não em relação ao ecrã. Por exemplo, a linha de código seguinte especifica o pano de fundo como fixo: BODY { background: white url(candybar.gif); background-attachment: fixed } Os programadores podem utilizar o atalho da propriedade background, pois é mais suportado que a propriedade background-attachment. Background Position Sintaxe: Valores Possíveis: background-position: <value> [<percentage> <length>]{1,2} [top center bottom] [left center right] Valor Inicial: 0% 0% Block-level and replaced elements Não A propriedade background-position indica a posição inicial de um background image especificado. Esta propriedade pode ser aplicada somente em elementos do tipo blocklevel ou substituídos. Um elemento substituído é qualquer elemento que possui dimensões conhecidas. Alguns elementos substituídos em HTML são IMG, INPUT, TEXTAREA, SELECT, e OBJECT.) A maneira mais fácil de definir um background position é através de palavras-chave: Palavras-chave horizontais (left, center, right) Palavras-chave verticais (top, center, bottom) 16

17 Percentagens e lengths podem ser utilizados para definir a posição do background image. Percentagens são relativas ao tamanho do elemento. Embora lengths sejam permitidos, não são recomendados por causa de possíveis problemas devido à resolução do ecrã utilizado. Quando usamos percentagens ou lengths, a posição horizontal é especificada primeiro, seguida da posição vertical. Um valor como 20% 65% especifica que a imagem deve ser posicionada no ponto 20% horizontal e 65% vertical em relação ao elemento. Um valor como 5px 10px especifica que a parte superior esquerda da imagem deve ser posicionada 5 pixels à direita e 10 pixels para baixo em relação ao elemento. Se apenas o valor horizontal for definido, a posição vertical será 50%. Combinações de lengths e Percentagens são permitidas. Também são permitidas posições negativas. Por exemplo, 10% -2cm é permitido. No entanto, Percentagens e lengths não podem ser combinadas através de palavras-chave. As palavras-chave são interpretadas a seguir: top left = left top = 0% 0% top = top center = center top = 50% 0% right top = top right = 100% 0% left = left center = center left = 0% 50% center = center center = 50% 50% right = right center = center right = 100% 50% bottom left = left bottom = 0% 100% bottom = bottom center = center bottom = 50% 100% bottom right = right bottom = 100% 100% Se o background image é definido como fixed, a imagem será posicionada em relação, e não em relação ao elemento. Os programadores podem utilizar o atalho da propriedade background, pois é mais suportado que a propriedade background-position. Background Sintaxe: Valores Possíveis: Valor Inicial: background: <value> <background-color> <background-image> <backgroundrepeat> <background-attachment> <background-position> Não definido 17

18 Não A propriedade background é um atalho para as propriedades mais específicas. Aqui estão alguns exemplos de declarações da propriedade background: BODY { background: white url(http://www.htmlhelp.com/foo.gif) } BLOCKQUOTE { background: #7fffd4 } P { background: url(../backgrounds/pawn.png) #f0f8ff fixed } TABLE { background: #0c0 url(leaves.jpg) no-repeat bottom right } Um valor não especificado receberá o valor inicial. Por exemplo, nos três primeiros exemplos anteriores, a propriedade background-position é definida por 0% 0%. Para evitar conflitos com style sheets de utilizadores, as propriedades background e color devem ser especificadas juntamente. 18

19 Referenciar folhas de estilo Existem diversas maneiras de referenciar style sheets no HTML, cada uma delas possui vantagens e desvantagens. Novos elementos e atributos HTML foram introduzidos para permitir fácil incorporação de style sheets em documentos HTML. Incorporar um Style Sheet Um style sheet pode ser incorporado ao documento através do elemento STYLE: <STYLE TYPE="text/css" MEDIA=screen> <!-- BODY { background: url(foo.gif) red; color: black } P EM { background: yellow; color: black }.note { margin-left: 5em; margin-right: 5em } --> </STYLE> O elemento STYLE é inserido no documento HTML e delimitado pelo elemento HEAD. O atributo TYPE é necessário e especifica o tipo de media e sua função atrabés do elemento LINK. Os atributos TITLE e MEDIA podem ser especificados também em STYLE. Os browsers mais antigos desconhecem o elemento STYLE e exibem normalmente o conteúdo deste elemento como uma simples parte do elemento BODY, fazendo com que o style sheet seja exibido para o utilizador. Para que isto não aconteça, o conteúdo do elemento STYLE devem estar comentados (<!-- commentário -->) para tornarem-se invisíveis aos utilizadores de browsers antigos. Importar um Style Sheet Um style sheet pode ser importado através da do CSS. Esta declaração pode ser usada no arquivo contendo o CSS ou através do elemento STYLE: <STYLE TYPE="text/css" MEDIA="screen, projection"> url(/stylesheets/punk.css); DT { background: yellow; color: black } --> </STYLE> 19

20 Note que outras regras do CSS podem estar incluídas no elemento STYLE, mas todas as devem ocorrer no início do style sheet. Quaisquer regras especificadas no próprio style sheet terão prioridade sobre regras conflituantes de styles sheets importados. Por exemplo, mesmo que um dos style sheets importados defina DT { background: aqua }, os termos continuariam a ser exibidos com pano de fundo amarelo. A ordem de importação dos style sheets é importante para determinar o chamado "efeito cascata". No exemplo acima, se o style sheet importado style.css especifica que os elementos b devem ser exibidos em vermelho e o style sheet punk.css especifica que os elementos b devem ser exibidos em amarelo, então a última regra tem prioridade. Portanto, os elementos b serão exibidos em amarelo. A importação de style sheets é útil para a modularização. Por exemplo, um site pode separar diferentes style sheets para os selectores usados. Pode haver um style sheet simples.css que define as regras para os elementos comuns como BODY, P, H1 e h3. Além disto, pode haver um style sheet extra.css que define as regras para os elementos de menos importância como CODE, BLOCKQUOTE e DFN. Um style sheet tables.css pode ser definido para especificar as regras para os elementos de tabelas. Estes três styles sheets podem ser incluídos em documentos HTML através da statement. Os três style sheets também podem ser combinados através do elemento LINK. Inlining Style Podemos definir um inlining style usando o atributo STYLE. O atributo STYLE pode ser aplicado para qualquer elemento em BODY (incluindo o próprio BODY), excepto BASEFONT, PARAM e SCRIPT. O atributo recebe como valor uma variedade de declarações CSS, onde cada declaração deve ser separada por ponto e vírgula. Aqui está um exemplo: <P STYLE="color: red; font-family: 'New Century Schoolbook', serif"> Este parágrafo será exibido em vermelho, com fonte New Century Schoolbook, se disponível.</p> Note que New Century Schoolbook está entre apóstrofes no atributo STYLE, uma vez que aspas são utilizadas para delimitar declarações de estilo. Inlining style é muito mais flexível que os outros métodos. Para utilizar o inlining style, é necessário declarar um único style sheet para todo o documento usando a extensão 20

21 HTTP do cabeçalho Content-Style-Type. Com a utilização de inlining style em CSS, o programador deve definir text/css como o cabeçalho HTTP Content-Style-Type ou incluir o seguinte tag no HEAD: <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> O estilo embebido perde muitas vantagens das folhas de estilo por misturar o conteúdo com a apresentação. Não existe mecanismo para especificar o meio de saída para um inlining style,. Este método deve ser utilizado somente quando necessário. Se o estilo necessita ser aplicado somente a um único elemento definido, utilize o atributo ID ao invés do atributo STYLE. O Atributo CLASS O atributo CLASS é usado para especificar o estilo da classe na qual o elemento pertence. Por exemplo, o style sheet pode ter sido criado as classes punk e warning:.punk { color: lime; background: #ff80c0 } P.warning {font-weight:bolder;color:red; background:white} Estas classes podem ser referenciadas no HTML através do atributo CLASS: <H1 CLASS=punk>Extensões Próprias</H1> <P CLASS=warning>Muitas extensões próprias podem resultar em efeitos negactivos tanto em browsers que suportam quanto naqueles que não suportam... Neste exemplo, a classe punk pode ser aplicada a qualquer elemento do BODY, pois não existe nenhum elemento HTML associado no style sheet. Usando o style sheet do exemplo, a classe warning deve ser aplicada somente no elemento P. É um bom hábito nomear classes de acordo com suas funções ao invés da sua aparência. A classe warning do exemplo anterior foi nomeada red, mas este nome pode não fazer sentido se o programador alterar o estilo da classe para uma cor diferente ou se definir o style como aural, para apresentações com sintetizadores de voz. As classes podem ser um método extremamente eficaz de aplicar diferentes estilos para estruturas de secções idênticas num documento HTML. Por exemplo, esta página utiliza classes com estilos para diferenciar códigos CSS e HTML. 21

22 O Atributo ID O atributo ID é usado para definir um estilo único para um elemento. Uma regra CSS como #wdg97 { font-size: larger } pode ser aplicada através do atributo ID: <P ID=wdg97>Bem-vindo a WebTriad International!</P> Cada atributo ID deve possuir um único valor para o documento. O valor deve ser uma letra inicial seguido por letras, dígitos ou hífens. As letras são restritas de A-Z e a-z. Note que o HTML 4.0 permite o uso de pontos para valores do atributo ID, mas o CSS1 não permite o uso de ponto em selectores do tipo ID selectores. Note também que o CSS1 permite o uso de caracteres Unicode , bem como caracteres de códigos numéricos. O HTML 4.0 não suporta o uso deste caracteres para valores do atributo ID. O uso do atributo ID é apropriado quando um estilo precisa ser aplicado apenas uma vez em qualquer documento. O Elemento SPAN O elemento SPAN foi introduzido no HTML para permitir que se criem estilos que não possam ser incorporados a um elemento estrutural do HTML. O SPAN pode ser utilizado como um selector num style sheet, mas também aceita os atributos STYLE, CLASS e ID. O SPAN é um elemento inline, portanto pode ser usado em HTML da mesma forma que os elementos EM e b. A diferença importante: enquanto EM e b contém dados estruturais, o SPAN não possui nenhum. Ele existe puramente para aplicar o estilo, portanto não tem efeito algum se o style sheet for inibido. Aqui estão alguns exemplos do uso de SPAN: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Draft//EN"> <HTML> <HEAD> <TITLE>Exemplo de SPAN</TITLE> <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> <STYLE TYPE="text/css" MEDIA="screen, print, projection"> <!--.firstwords { font-variant: small-caps } --> </STYLE> 22

23 </HEAD> <BODY> <P><SPAN CLASS=firstwords>As primeiras palavras</span> de um parágrafo podem ser minúsculas. Pode-se usar inlined style para alterar o estilo da palavra como <SPAN STYLE="font-family: Arial"> Arial</SPAN>.</P> O Elemento DIV O elemento DIV é similar às funções do elemento SPAN. A diferença é que o elemento DIV (abreviação para "divisão") é um elemento do tipo block-level. O DIV pode conter parágrafos, cabeçalhos, tabelas e até mesmo outras divisões. Isto torna o DIV ideal para marcação de diferentes classes, como capítulos ou notas. Por exemplo: <DIV CLASS=nota> <H1>Divisões</H1> <P>O elemento DIV é definido em HTML 3.2, mas somente o uso do atributo ALIGN é permitido no HTML 3.2. O HTML 4.0 adiciona os atributos CLASS, STYLE e ID, além de outros.</p> <P>Como o DIV pode conter outros elementos do tipo block-level, é útil na marcação de grandes seções de um documento, como esta nota.</p> <P>O tag de fechamento da delimitação é necessário.</p> </DIV> 23

FOLHAS DE ESTILO EM CASCATA

FOLHAS DE ESTILO EM CASCATA FOLHAS DE ESTILO EM CASCATA CSS (Cascading Style Sheets) ou Folhas de Estilo em Cascata são um conjunto de regras de estilo que definem como os elementos e os tags em uma página HTML devem ser exibidos

Leia mais

CSS - Background, Color e Fontes. Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br

CSS - Background, Color e Fontes. Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br Web Introdução Design CSS - Background, Color e Fontes Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br O que veremos... CSS Cores e fundos Fontes Cores e fundos Algumas propriedades

Leia mais

CSS Cascading Style Sheets Folhas de Estilo em Cascata

CSS Cascading Style Sheets Folhas de Estilo em Cascata CSS Cascading Style Sheets Folhas de Estilo em Cascata Conjunto de instruções que controla a aparência de uma página Web 1. Regra CSS seletor { propriedade1: valor; propriedade2: valor; 2. Aplicação 2.1

Leia mais

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Tag para inserir imagens e HTML O modelo CSS Noções fundamentais e funcionamento do CSS Incluindo estilos em uma página Sintaxe

Leia mais

HTML. (Hypertext Markup Language Linguagem de Marcação de Hipertexto)

HTML. (Hypertext Markup Language Linguagem de Marcação de Hipertexto) HTML (Hypertext Markup Language Linguagem de Marcação de Hipertexto) CSS - Cascading Style Sheets CSS serve para definir propriedades de apresentação/formatação a aplicar em tags HTML. A sua utilização

Leia mais

Compêndio códigos. {css}

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

Leia mais

Introdução às Folhas de Estilo

Introdução às Folhas de Estilo Introdução às Folhas de Estilo Folhas de Estilo Cascading Style Sheets (CSS). Separa aparência e estrutura do documento. Permite maior controle sobre a apresentação das páginas Margens Tamanho / tipo de

Leia mais

Introdução à Cascading Style Sheets

Introdução à Cascading Style Sheets Estilo e Produtividade para Websites OVERVIEW História e Significado Por que usar? Como usar? Orientações ao Desenvolvedor O que é CSS? O que é CSS? Cascading Style sheets" ou "Folhas de Estilo Encadeadas

Leia mais

APOSTILA DE PROGRAMAÇÃO WEB

APOSTILA DE PROGRAMAÇÃO WEB Programação Web - CSS 1 PROFESSOR LUIS NÍCOLAS DE AMORIM TRIGO APOSTILA DE PROGRAMAÇÃO WEB CSS CASCADING STYLE SHEETS (FOLHAS DE ESTILO EM CASCATA) Programação Web - CSS 2 INTRODUÇÃO CSS, também conhecido

Leia mais

CSS Cascading Style Sheets

CSS Cascading Style Sheets CSS Cascading Style Sheets Datamec S.A. Sumário Capítulo 1:... 3 Aplicando Style Sheets... 3 Objetivo...4 Entendendo Style Sheets...5 Anexando Style Sheets em documentos HTML...6 Através de links... 6

Leia mais

Mudança de formatos no HTML. CSS - Cascading Style Sheets. A prioridade para o efeito cascata. A prioridade para o efeito cascata

Mudança de formatos no HTML. CSS - Cascading Style Sheets. A prioridade para o efeito cascata. A prioridade para o efeito cascata Mudança de formatos no HTML título CSS - Cascading Style Sheets e os problemas do HTML Para mudar a cor de uma única linha de uma página seria relativamente fácil.

Leia mais

7. Cascading Style Sheets (CSS)

7. Cascading Style Sheets (CSS) 7. Cascading Style Sheets (CSS) O CSS (Folha de Estilo em Cascata) é um padrão de formatação para páginas web que vai além das limitações impostas pelo HTML. O Cascading Style Sheets não é exatamente uma

Leia mais

Internet e Programação Web

Internet e Programação Web COLÉGIO ESTADUAL PEDRO MACEDO Ensino Profissionalizante Internet e Programação Web 2 Técnico Prof. Cesar 2014 1 1. CSS CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo,

Leia mais

CSS Luciano Otávio de Assis CSS

CSS Luciano Otávio de Assis CSS CSS O HTML tem suas limitações quando se tratar de se construir layout. É certo, você tem seis diferentes tipos s títulos e de 6 diferentes tamanhos de fontes. Quando você trabalha com tabelas, você tem

Leia mais

CSS - Parte 02. Prof. Marciano dos Santos Dionizio

CSS - Parte 02. Prof. Marciano dos Santos Dionizio CSS - Parte 02 Prof. Marciano dos Santos Dionizio Imagens de fundo [backgroundimage] A propriedade CSS background-image é usada para definir uma imagem de fundo. Usaremos a imagem de uma borboleta para

Leia mais

neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css?

neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css? neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css? O html inclui uma tag para praticamente todos os elementos de design comumente

Leia mais

#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.

#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com. #Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Apresentar os conceitos de utilização do CSS, Sintaxe, Seletores

Leia mais

CSS -Cascading Style Sheets - Introdução

CSS -Cascading Style Sheets - Introdução CSS -Cascading Style Sheets - Introdução Como surgiu a tecnologia CSS? De início, a linguagem HTML foi criada para a construção de páginas Web, que exibiam apenas documentos científicos. Com a evolução

Leia mais

css Cascading Style Sheets CSS CASCADING STYLE SHEETS

css Cascading Style Sheets CSS CASCADING STYLE SHEETS css Cascading Style Sheets CSS CASCADING STYLE SHEETS Oque é o CSS Cascading Style Sheets - Folhas de Estilo em Cascata Não é uma linguagem de programação, é uma linguagem de estilo. Define a apresentação

Leia mais

CSS. Sérgio Nunes. Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13

CSS. Sérgio Nunes. Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13 CSS Sérgio Nunes Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13 1 Objetivos Conhecer as origens e os objetivos da linguagem CSS. Conhecer a estrutura base de uma regra CSS. Compreender

Leia mais

CSS - Cascading Style Sheets

CSS - Cascading Style Sheets Introdução CSS - Cascading Style Sheets Padrão de Apresentação de Documentos CSS Cascate Style Sheets Objetivos: Conhecer o Histórico; Conhecer a Usabilidade; Por que usar? Quando usar? Como usar? Conhecer

Leia mais

CSS (Style Sheets - Folhas de Estilo)

CSS (Style Sheets - Folhas de Estilo) Anuncie nesse espaço da Aprendendo HomePage, clique aqui e veja como e porque. CSS (Style Sheets - Folhas de Estilo) CSS é a mesma coisa que Style Sheets e que Folhas de Estilo. Vc já deve ter visto esses

Leia mais

Tecnologias para Web Design

Tecnologias para Web Design Tecnologias para Web Design CSS Folhas de estilo em cascata ÿ CSS Cascading Style Sheets ÿ Linguagem para definir atributos de estilo dos elementos da linguagem HTML ÿ CSS é uma linguagem independente

Leia mais

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO. I. Ementa HTML e XHTML, de estrutura e marcação utilizados na sua composição; CSS.

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO. I. Ementa HTML e XHTML, de estrutura e marcação utilizados na sua composição; CSS. UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Programação de Computadores

Leia mais

Compêndio códigos.

Compêndio códigos. <html> Compêndio códigos ADVERTÊNCIA: A que se segue é apenas uma lista com as tags de HTML e os seus possíveis atributos, não pretende de modo algum ser um manual. Pressupõe, portanto, que já se saiba

Leia mais

Introdução; Sintaxe; Utilizando estilos; Estilo In-line; Estilo Incorporado; Estilo Vinculado; Prioridade; Cores; Valores Relativos x Absolutos.

Introdução; Sintaxe; Utilizando estilos; Estilo In-line; Estilo Incorporado; Estilo Vinculado; Prioridade; Cores; Valores Relativos x Absolutos. Ana Paula Ambrósio Zanelato anapaula@unitoledo.br Disciplina: Aplicações para Web Conteúdo Introdução; ; Utilizando estilos; Estilo In-line; Estilo Incorporado; Estilo Vinculado; Prioridade; Cores; Valores

Leia mais

Apostila CSS - Introdução à folha de estilos

Apostila CSS - Introdução à folha de estilos Apostila CSS - Introdução à folha de estilos Este documento é propriedade intelectual do Núcleo de Educação a distância da NRsystem e distribuído sob os seguintes termos: 1. As apostilas publicadas pelo

Leia mais

Exemplo de uso correto da semântica HTML

<!DOCTYPE html> <html lang = pt-br> <head> <meta charset = UTF-8> <title> Exemplo de uso correto da semântica HTML </title> </ head > Para um navegador exibir corretamente uma página web, devemos informar explicitamente o tipo do documento. O tipo do documento é informado com a declaração . TAG

Leia mais

CSS ETEC FRANCISCO MORATO. Professores: Kelly e Rafael

CSS ETEC FRANCISCO MORATO. Professores: Kelly e Rafael CSS ETEC FRANCISCO MORATO Professores: Kelly e Rafael 2015 Agenda Introdução; Website Layouts; CSS; Referências. 2 Website Layouts A maioria dos sites têm colocado o seu conteúdo em várias colunas; Ex.:

Leia mais

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Laboratório de Práticas

Leia mais

EXEMPLO. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}

EXEMPLO. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: Times New Roman, serif;} Fontes A propriedade font-family é usada para definir uma lista de fontes e sua prioridade para apresentação de um elemento em uma página. Se a primeira fonte da lista não estiver instalada na máquina

Leia mais

Criação de Web Sites I

Criação de Web Sites I de Criação de Web Sites I Conteúdo 12. Introdução... 67 12.1. O que são folhas de estilo?...67 12.2. Para que servem as folhas de estilo...68 Separar apresentação da estrutura...68 Controle absoluto da

Leia mais

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Sumário HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Linguagem HTML HTML é a abreviação de HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação de Hipertexto. Não é uma linguagem

Leia mais

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

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,

Leia mais

Aula 5 Cabeçalhos, Imagens e Links

Aula 5 Cabeçalhos, Imagens e Links Roteiro Aula 5 Cabeçalhos, Imagens e Links Efeitos em cabeçalhos Imagens e CSS Links Curso: Técnico em Informática / 2º Módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Efeitos

Leia mais

HTML & CSS. Informática / LECA. Marco Costa. Departamento de Ciência de Computadores Faculdade de Ciências, Universidade do Porto 2005 / 06

HTML & CSS. Informática / LECA. Marco Costa. Departamento de Ciência de Computadores Faculdade de Ciências, Universidade do Porto 2005 / 06 HTML & CSS Informática / LECA Marco Costa Departamento de Ciência de Computadores Faculdade de Ciências, Universidade do Porto 2005 / 06 Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 1 / 157 Conteúdo Conteúdo

Leia mais

Roteiro de Estudos e Atividades Avaliativas HTML

Roteiro de Estudos e Atividades Avaliativas HTML Roteiro de Estudos e Atividades Avaliativas HTML Faça essa atividade de forma individual ou em dupla, faça o máximo de questões que conseguir. Pesquise na Web o significado das tags e utilize-as para alcançar

Leia mais

CRIAÇÃO DE SITES (AULA 9)

CRIAÇÃO DE SITES (AULA 9) Prof. Breno Leonardo Gomes de Menezes Araújo brenod123@gmail.com http://blog.brenoleonardo.com.br CRIAÇÃO DE SITES (AULA 9) Cor do primeiro plano: a propriedade 'color' A propriedade color define a cor

Leia mais

HTML 5 + CSS APRESENTANDO O CSS ESTILOS LOCAIS

HTML 5 + CSS APRESENTANDO O CSS ESTILOS LOCAIS APRESENTANDO O CSS CSS Cascading Style Sheets, ou, em português, Folha de Estilo em Cascata - é uma linguagem de estilo que pode ser utilizada na formatação de documentos HTML. Com CSS, podemos criar regras

Leia mais

Ferramentas Programáveis. Profº Ritielle Souza

Ferramentas Programáveis. Profº Ritielle Souza Ferramentas Programáveis Profº Ritielle Souza Folhas de Estilo Existem três formas de trabalharmos com folhas de estilos Forma mais usual CSS Externo Estilo na página Forma menos usual estilo inline

Leia mais

Computação na Internet HTML&CSS - Exercícios. Dicas para criação de conteúdos em HTML

Computação na Internet HTML&CSS - Exercícios. Dicas para criação de conteúdos em HTML Dicas para criação de conteúdos em HTML Apresentam-se de seguida algumas dicas para autores de conteúdos em HTML. Ao utilizar estas dicas, a manutenção das páginas ficará facilitada, ficarão mais apresentáveis

Leia mais

Apostila de Introdução ao CSS

Apostila de Introdução ao CSS Universidade Federal Fluminense Centro Tecnológico Escola de Engenharia Curso de Engenharia de Telecomunicações Programa de Educação Tutorial Grupo PET-Tele Apostila de Introdução ao CSS Autor atual: Isabelle

Leia mais

Cada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe:

Cada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe: 48 10. CSS 10.1 O que é CSS? CSS é a mesma coisa que Style Sheets e que Folhas de Estilo. Você já deve ter visto esses nomes em vários lugares. CSS é mais uma forma de aperfeiçoar seus documentos, o CSS

Leia mais

Web Design Aula 13: Introdução a CSS

Web Design Aula 13: Introdução a CSS Web Design Aula 13: Introdução a CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Você lembra que HTML e XHTML são linguagens de marcação? Para organizar melhor o visual das páginas

Leia mais

Web design & HTML. avançado

Web design & HTML. avançado Web design & HTML avançado Helder da Rocha Rev.: WDHT-03-2000/04 A4 (ASIT) Copyright 1998, 1999, 2000 por Helder Lima Santos da Rocha. Todos os direitos reservados. Os direitos do autor sobre esta obra

Leia mais

TABLELESS E PROJETO ESTRUTURAL

TABLELESS E PROJETO ESTRUTURAL Barra Lateral 1 Barra Lateral 2 Barra Lateral 2 Barra Lateral Barra Lateral DISCIPLINA: FUNDAMENTOS E TECNOLOGIA EM WEB Professora: Adriana Silva TABLELESS E PROJETO ESTRUTURAL O termo TABLELESS refere-se

Leia mais

Construindo Sites com. CSS e (X)HTML. sites controlados por folhas de estilo em cascata. Maurício Samy Silva. Novatec

Construindo Sites com. CSS e (X)HTML. sites controlados por folhas de estilo em cascata. Maurício Samy Silva. Novatec Construindo Sites com CSS e (X)HTML sites controlados por folhas de estilo em cascata Maurício Samy Silva Novatec Sumário Agradecimentos...13 Sobre o autor...14 Introdução...16 Para quem foi escrito este

Leia mais

QUEM FEZ O TRABALHO?

QUEM FEZ O TRABALHO? Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Prof. André Yoshimi Kusumoto andrekusumoto.unip@gmail.com http://www.kusumoto.com.br Apresentação Carga horária mensal:

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução O Gmail possui duas versões distintas para seu webmail: uma mais recente, que é a versão atual utilizada pelos usuários de Gmail, e

Leia mais

Curso de Capacitação em Gerenciador de Conteúdo PLONE

Curso de Capacitação em Gerenciador de Conteúdo PLONE Curso de Capacitação em Gerenciador de Conteúdo PLONE 1 Índice Customização Acionar modo debug 3 Propriedades Básicas 10 Arquivos de Customização 15 2 Customização Intermediário Com a definição do posicionamento

Leia mais

TECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD

TECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD TECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Compreender a sintaxe utilizada em Folhas de Estilos em Cascata, seu uso e limitações. Apresentar as principais características das

Leia mais

CSS#:#Cascading#Style#Sheets#

CSS#:#Cascading#Style#Sheets# CSS#:#Cascading#Style#Sheets# Composição#Web# # Engenharia#Informá=ca#/#Informá=ca#Web#2014/15# Artur%M.%Arsénio% Style#Sheets# #Folhas#de#Es=los# CSS#(Cascading#Style%Sheet% %ou%folhas%de%es6los% encadeados)%é#um#conjunto#de#regras#de#formatação#que#

Leia mais

Unidade: O que é CSS? HTML e CSS? Boa aula!!!

Unidade: O que é CSS? HTML e CSS? Boa aula!!! Unidade: O que é CSS? HTML e CSS? Boa aula!!! Objetivo Construir: Padrões Web, Tableless e outros Como inserir o CSS nas páginas Sintaxe de utilização do CSS Tag DIV e tag SPAN Orientações Durante a explanação

Leia mais

SIMULADOS & TUTORIAIS

SIMULADOS & TUTORIAIS SIMULADOS & TUTORIAIS TUTORIAIS CSS Como utilizar o estilo Background Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte por quaisquer

Leia mais

TUTORIAL CSS PRIMEIROS PASSOS COM HTML + CSS

TUTORIAL CSS PRIMEIROS PASSOS COM HTML + CSS Página 1 Imagem Esta é a tradução do tutorial "Starting with HTML + CSS " de autoria de Bert Bos publicado no site do W3C. 1. A versão oficial e original, em inglês, deste tutorial, encontra-se em: http://www.w3.org/style/examples/011/firstcss

Leia mais

Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013

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

Leia mais

#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.

#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com. #Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Revisar os conceitos mais importantes da XHTML e do CSS. Desenvolver

Leia mais

Utilizando as CSS Styles no Flash MX 2004

Utilizando as CSS Styles no Flash MX 2004 Utilizando as CSS Styles no Flash MX 2004 Uma nova funcionalidade do Flash MX 2004, é a habilidade de se poder importar informação CSS (Cascading Style Sheets) a partir de um ficheiro de texto. Em vez

Leia mais

Unidade 5: Posicionamento com CSS E outras Técnicas Avançadas Prof. Daniel Caetano

Unidade 5: Posicionamento com CSS E outras Técnicas Avançadas Prof. Daniel Caetano Programação para Internet Rica 1 Unidade 5: Posicionamento com CSS E outras Técnicas Avançadas Prof. Daniel Caetano Objetivo: Apresentar recursos adicionais do CSS e como usá-lo para a construção de layout

Leia mais

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON COMPONENTES: ROBSON EDMILSON O HTML (Hiper Text Mark-up Language) é uma linguagem de programação hipertexto. O HTML tem códigos para criar páginas na web. Estes códigos que definem o tipo de letra, qual

Leia mais

HTML. Conceitos básicos de formatação de páginas WEB

HTML. Conceitos básicos de formatação de páginas WEB HTML Conceitos básicos de formatação de páginas WEB HTML HyperText Markup Language Linguagem utilizada para criar hipertexto na web Ou seja, criar documentos estruturados utilizando para tal um conjunto

Leia mais

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

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes 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

Leia mais

José Frazão. Página 2 de 19

José Frazão. Página 2 de 19 Página 2 de 19 Índice Página 1. Introdução 4 2. História e características 5 3. Sintaxe 5 3.1. Texto 7 3.2. Comandos básicos mais utilizados 8 3.3. Fundo (Backgrounds) e cores 10 3.4. Tabela de acentos

Leia mais

Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo.

Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo. Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo. Como defino e escrevo uma classe? Classe é um seletor

Leia mais

SIMULADOS & TUTORIAIS

SIMULADOS & TUTORIAIS SIMULADOS & TUTORIAIS TUTORIAIS HTML Como utilizar estilos em HTML com CSS Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte

Leia mais

Introdução ao HTML Hypertext Markup Language

Introdução ao HTML Hypertext Markup Language Introdução ao HTML Hypertext Markup Language Prof. Marcus Ramos Tags São comandos que são inseridos juntamente com o texto a ser apresentado, e que definem a forma como o mesmo será exibido na tela do

Leia mais

Web Design. Prof. Felippe

Web Design. Prof. Felippe Web Design Prof. Felippe 2015 Sobre a disciplina Fornecer ao aluno subsídios para o projeto e desenvolvimento de interfaces de sistemas Web eficientes, amigáveis e intuitivas. Conceitos fundamentais sobre

Leia mais

BIBLIOGRAFIA:... 36. CSS pode ser adicionado com uso do atributo style. Por exemplo, você pode definir o tipo e o tamanho da fonte em um parágrafo:

BIBLIOGRAFIA:... 36. CSS pode ser adicionado com uso do atributo style. Por exemplo, você pode definir o tipo e o tamanho da fonte em um parágrafo: Css Página 1 CSS Sumário Introdução ao CSS... 4 O que mais posso fazer com CSS?... 6 Como funciona as CSS... 7 Método 1: In-line (o atributo style)... 8 Método 2: Interno (a tag style)... 8 Método 3: Externo

Leia mais

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza Webdesign HTML Introdução a HTML e as principais tags da linguagem Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Apresentar a HTML

Leia mais

XHTML.

XHTML. <head> </head> <head> <meta http-equiv=content- Type content=text/html; charset=utf-8 /> </head> XHTML Estrutura HTML; head; title; meta; body; comentários Tags Atributos Descrição Exemplo - xmlns O elemento html identifica o documento como sendo um documento HTML ou XHTML. Para especificar

Leia mais

4 - HTML Básico: 4.2 - Criando documentos HTML:

4 - HTML Básico: 4.2 - Criando documentos HTML: 4 - HTML Básico: 4.1 - O que é HTML? Os documentos na Web são organizados com o uso de comandos que são interpretados pelos browsers. Estes comandos compõem a linguagem HTML (HyperText Markup Language).

Leia mais

Cascading Style Sheets 2

Cascading Style Sheets 2 Cascading Style Sheets 2 Telemédia Grupo de Comunicações por Computador Sumário Propriedades relacionadas com Listas Modificar os aspecto de elementos incluídos por outros Classes e Identificadores Etiquetas

Leia mais

1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão

1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão 1. HTML - Introdução Hyper Text Markup Language É uma linguagem de formatação de conteúdos Não é uma linguagem de programação Portável Não depende da plataforma em que é vizualizado Ficheiros de pequena

Leia mais

Maurício Samy Silva. Novatec

Maurício Samy Silva. Novatec Maurício Samy Silva Novatec Sumário Agradecimentos...13 Sobre o autor...13 Introdução...15 Para quem foi escrito este livro... 15 Convenções tipográficas... 16 Site do livro... 18 Capítulo 1 O que é (X)HTML?...20

Leia mais

Web Design Aula 15: Conhecendo CSS

Web Design Aula 15: Conhecendo CSS Web Design Aula 15: Conhecendo CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Roteiro Agrupando Seletores Herança Comentários Exercício Adicionando Classes Validação Propriedades Agrupando

Leia mais

1) Criar o código HTML para construir a página representada pela imagem abaixo.

1) Criar o código HTML para construir a página representada pela imagem abaixo. 1) Criar o código HTML para construir a página representada pela imagem abaixo. 2) Código HTML puro (criar arquivo index.html): brasil Motores Motores diesel para uso automotivo, veicular, marítimo,

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Conceitos de HTML Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Definição de HTML Linguagem de marcadores (tags).

Leia mais

Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar

Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar tabelas (tableless), e utilizando muito . Para continuar lendo esse post,

Leia mais

Erwin Alexander Uhlmann www.institutosiegen.com.br - 15/02/08-1. Desenvolvimento de WEB I HTML Volume 2 Erwin Alexander Uhlmann

Erwin Alexander Uhlmann www.institutosiegen.com.br - 15/02/08-1. Desenvolvimento de WEB I HTML Volume 2 Erwin Alexander Uhlmann Erwin Alexander Uhlmann www.institutosiegen.com.br - 15/02/08-1 Desenvolvimento de WEB I HTML Volume 2 Erwin Alexander Uhlmann Erwin Alexander Uhlmann www.institutosiegen.com.br - 15/02/08-2 Sumário Behaviors

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução Nesta útima edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos dos clientes Yahoo! Mail

Leia mais

3. Formulários e Folhas de Estilo em XHTML

3. Formulários e Folhas de Estilo em XHTML 3. Formulários e Folhas de Estilo em XHTML! Formulários introduzem em páginas XHTML a possibilidade de interação com o usuário. A informação introduzida em um formulário pode ser submetida para tratamento

Leia mais

Java Corporativo (RIAs) HTML, CSS e Javascript. Edson Koiti Kudo Yasojima

Java Corporativo (RIAs) HTML, CSS e Javascript. Edson Koiti Kudo Yasojima Java Corporativo (RIAs) HTML, CSS e Javascript Edson Koiti Kudo Yasojima Rich Internet Application (RIA) Oferece interfaces ricas e novas experiências ao usuário, tanto web como desktop. Web 2.0 Animações,

Leia mais

Programação para Internet

Programação para Internet Programação para Internet Aula 07 Os direitos desta obra foram cedidos à Universidade Nove de Julho Este material é parte integrante da disciplina oferecida pela UNINOVE. O acesso às atividades, conteúdos

Leia mais

Lista de propiedades CSS

Lista de propiedades CSS Lista de propiedades CSS Abaixo uma lista completa de propriedades CSS e a sua respectiva descrição: 1 - FUNDO background Valores: background-color background-image background-repeat background-attachment

Leia mais

Roteiro 2: Conceitos de Tags HTML

Roteiro 2: Conceitos de Tags HTML Roteiro 2: Conceitos de Tags HTML Objetivos Detalhar conceitos sobre TAGS HTML: elementos, atributos, elemento vazio, links. Implementar páginas de internet com uso da linguagem HTML; Ferramentas Necessárias

Leia mais

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Mini-curso de PHP Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Aula 1 Breve introdução de HTML, Conceitos básicos de PHP, Sintaxe, Separador de instruções e Comentários (Cap 1

Leia mais

apostila DE html, xhtml e css

apostila DE html, xhtml e css apostila DE html, xhtml e css Índice HTML 1.Introdução ao HTML página 04 2.O que é o HTML página 05 3.O que são tags HTML página 05 4.Iniciando com HTML página 10 5.Mais tags HTML página 12 6.Atributos

Leia mais

Apostila de CSS Nível Básico Curso de Informática OSA II

Apostila de CSS Nível Básico Curso de Informática OSA II CURSO DE CSS NÍÍVEL BÁSIICO Apostila de CSS Nível Básico ÍNDICE TÍTULO / CAPÍTULO Introdução Diferenças entre CSS e HTML Sintaxe básica Inserção de códigos CSS forma In-line Inserção de códigos CSS forma

Leia mais

body { background-color: #FF0000; } /* cor de fundo da pagina(body) #FF0000 */

body { background-color: #FF0000; } /* cor de fundo da pagina(body) #FF0000 */ EXERCÍCIO 1 Indicar arquivo CSS externo. Abra o Notepad (bloco de notas) ou NotePad++ e crie dois arquivos (um arquivo.html e um arquivo.css) com os conteúdos abaixo (salve-os na mesma pasta para não precisar

Leia mais

> Herbet Ferreira Rodrigues > contato@herbetferreira.com

> Herbet Ferreira Rodrigues > contato@herbetferreira.com Curso HTML & CSS > Herbet Ferreira Rodrigues > contato@herbetferreira.com Sumário > Apresentação > Introdução ao HTML História Começando a Programar > Tags em HTML Headings (Cabeçalhos) Parágrafos Formatação

Leia mais

Introdução 1ª Parte Web Web Web Web Browsers Editores Editores Etiquetas (tags) base indica que se trata de uma página escrita em linguagem HTML. Esta deve abranger todo o código;

Leia mais

RODRIGO C. REQUIÃO. WEBSITE VITRINE PARA A EMPRESA BUFFET GULLA.

RODRIGO C. REQUIÃO. WEBSITE VITRINE PARA A EMPRESA BUFFET GULLA. RODRIGO C. REQUIÃO. WEBSITE VITRINE PARA A EMPRESA BUFFET GULLA. Dom Pedrito 2014 RODRIGO C. REQUIÃO. WEBSITE VITRINE PARA A EMPRESA BUFFET GULLA. Trabalho de conclusão de curso apresentado à QWERTY Escola

Leia mais

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Estrutura básica do HTML Um documento HTML deve estar delimitado pela tag e . Dentro deste documento, podemos ainda distinguir

Leia mais

HyperText Markup Language HTML

HyperText Markup Language HTML HyperText Markup Language HTML Prof. Luis Nícolas de Amorim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ Introdução Linguagem de Marcação de Hipertexto. Uma

Leia mais

Cabeçalho do documento

Cabeçalho do documento Cabeçalho do documento O cabeçalho de uma página HTML fica dentro das Tags e , e dentro dessas Tags podemos usar Tags , , , , e etc. A Tag TITLE Por exemplo

Leia mais

Aplicativos para Internet Aula 01

Aplicativos para Internet Aula 01 Aplicativos para Internet Aula 01 Arquitetura cliente/servidor Introdução ao HTML, CSS e JavaScript Prof. Erika Miranda Universidade de Mogi das Cruzes Uso da Internet http://www.ibope.com.br/pt-br/noticias/paginas/world-wide-web-ou-www-completa-22-anos-nesta-terca-feira.aspx

Leia mais

Curso de Construção de Sites - HTML/CSS. Felipe Mariani Lopes Gustavo Toshi Komura Bolsistas Instrutores Bolsa Instrutor DINF/PRAE

Curso de Construção de Sites - HTML/CSS. Felipe Mariani Lopes Gustavo Toshi Komura Bolsistas Instrutores Bolsa Instrutor DINF/PRAE Curso de Construção de Sites - HTML/CSS Felipe Mariani Lopes Gustavo Toshi Komura Bolsistas Instrutores Bolsa Instrutor DINF/PRAE 23 de Maio de 2011 2 Conteúdo I HTML 5 1 História 6 2 Comentários 7 3 Separação

Leia mais

DWEB. Design para Web. CSS3 - Fundamentos. Curso Superior de Tecnologia em Design Gráfico

DWEB. Design para Web. CSS3 - Fundamentos. Curso Superior de Tecnologia em Design Gráfico DWEB Design para Web Curso Superior de Tecnologia em Design Gráfico CSS3 - Fundamentos E não vos conformeis com este século, mas transformai-vos pela renovação da vossa mente, para que experimenteis qual

Leia mais