Cascading Style Sheets
|
|
- Joana Castel-Branco Casado
- 8 Há anos
- Visualizações:
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( } 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( } 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
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 maisHTML. (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 maisAula 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 maisIntroduçã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 maisCSS 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 maisFOLHAS 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 mais7. 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 maisMudanç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 maisCompê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 maisInternet 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 maiscss 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 maisHTML 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 maisCSS é 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 maisCSS - 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 maisIntroduçã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 maisTecnologias 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#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 maisEXEMPLO. 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 maisCSS -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 maisAPOSTILA 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 maisUNIVERSIDADE 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 maisQUEM 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 maisWeb 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 maisUNIVERSIDADE 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 maisRoteiro 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 maisCSS 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 maisDesenvolvimento 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 maisCSS 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 maisCSS 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 maisSumá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 maisFerramentas 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 maisWebdesign 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 maisCSS. 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 maisWeb 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 maisLINGUAGEM 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 maisRoteiro 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 maisAula 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 maisIntroduçã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 maisCSS - 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 maisTABLELESS 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 maisneste 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 maisHTML. 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 maisDWEB. 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 maisCurso 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 maisSIMULADOS & 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 maisTECNOLOGIAS 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#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 maisWeb 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 maisAula 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 maisApostila 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 maisConstruindo 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 maisColeção - Análises de email marketing em clientes de email
Coleção - Análises de email marketing em clientes de email Introdução Nesta sexta e penúltima edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos dos clientes
Leia maisDesenvolvimento 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 maisCRIAÇÃ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 maisCSS (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<!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 maisCompê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 maisWeb 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 maisIntroduçã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 maisColeçã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 maisSIMULADOS & 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 maisProfessor: Paulo Macos Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira 4/6/2011 1
Professor: Paulo Macos Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira 4/6/2011 1 Do inglês, Cascading Style Sheet, ou folha de estilo em cascata. É uma linguagem
Leia maisColeçã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 maisINTRODUÇÃ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 mais1. 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 maisCabeç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 maisPosicionamento e Layout com CSS
Posicionamento e Layout com CSS Esquemas de posicionamento: absolute e relative Construção de layouts com divs e regras CSS Existem quatro tipos de posicionamento em CSS: estático, relativo, absoluto
Leia maisDesenvolvedor Web Docente André Luiz Silva de Moraes
Roteiro 3: Layout básico e Div's: técnicas com uso de ID's e Classes Objetivos Compreender a importância do uso de Elementos de Div no desenvolvimento de Layouts de página; Explorar e aplicar o uso de
Leia maisAplicativos 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 maisColeção - Análises de email marketing em clientes de email
Coleção - Análises de email marketing em clientes de email Introdução Nesta quinta edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos o estudo do Windows Mail, um cliente
Leia maisProgramaçã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 maisPROGRAMAÇÃO MANUAL DE INSTRUÇÕES SEJA BEM VINDO VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS
VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS PROGRAMAÇÃO MANUAL DE INSTRUÇÕES Instruções, métodos e recomendações para desenvolvimento de sistemas na UDS. 1 Sumário Apresentação... 3 Estrutura de pastas:...
Leia maisDefinindo 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 maisUtilizando 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 maisTECNOLOGIAS WEB AULA 5 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD
TECNOLOGIAS WEB AULA 5 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Apresentar as principais tags utilizadas na construção de páginas Web. Compreender as principais funcionalidades de cada tag utilizada.
Leia maisCascading: 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
Leia mais1) 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 maisIntrodução. História. Como funciona
Introdução O HTML é uma linguagem de marcação utilizada para desenvolvimento de sites. Esta linguagem surgiu junto com o HTTP, ambos possibilitaram a internet ser popularizada. História O HTML foi criado
Leia maisColeção - Análises de email marketing em clientes de email
Coleção - Análises de email marketing em clientes de email Thunderbird e Terra Nesta terceira edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos do webmail
Leia maisGlossários em Moodle (1.6.5+)
Glossários em Moodle (1.6.5+) Athail Rangel Pulino 2 Ficha Técnica Título Glossários em Moodle Autor Athail Rangel Pulino Filho Copyright Creative Commons Edição Agosto 2007 Glossários em Moodle 3 Índice
Leia maisHTML & 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 mais02 - Usando o SiteMaster - Informações importantes
01 - Apresentação do SiteMaster - News Edition O SiteMaster foi desenvolvido para ser um sistema simples de gerenciamento de notícias, instalado em seu próprio computador e com configuração simplificada,
Leia maisUnidade: 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 maisDESIGN RESPONSIVO TÉCNICAS E PROCESSOS DE PRODUÇÃO. Profº Ritielle Souza
DESIGN RESPONSIVO TÉCNICAS E PROCESSOS DE PRODUÇÃO Profº Ritielle Souza Web design responsivo Mas, o que é Web Design Responsivo? O Wiki diz o seguinte (tradução livre): Web Design Responsivo (RWD), essencialmente
Leia maisIntrodução ao HTML 5 e Implementação de Documentos
Linguagem de Programação para Web Introdução ao HTML 5 e Implementação de Documentos Prof. Mauro Lopes 1-31 20 Objetivo Iremos aqui apresentar a estrutura básica de um documento HTML e iremos também apresentar
Leia maisCSS#:#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 maisMANUAL DE BOAS PRÁTICAS
MANUAL DE BOAS PRÁTICAS Este manual é de uso exclusivo de clientes, parceiros, fornecedores e colaboradores da Dinamize. No caso de dúvidas, entre em contato através do e-mail suporte@dinamize.com. HTML
Leia maisHTML 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
Leia maisCurso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2
Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Objetivo. O objetivo da disciplina é conhecer os princípios da programação de
Leia maisComo Começar? Criação Páginas. Etapas. Apresentação INTERNET
Como Começar? Criação Páginas Apresentação Etapas Como começar Para que um site tenha sucesso é necessário um correcto planeamento do mesmo. Todos os aspectos de desenho de um site devem ser pensados de
Leia maisProf. 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 maisComputaçã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 maisMini-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 maismkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos
Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Criando uma Calculadora Primeiramente deve se criar uma estrutura para armazenar os arquivos necessários para o funcionamento da calculadora.
Leia maisComandos 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
Leia maisCascading 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