Download
1 / 87
870 likes | 989 Views
FTIN - Módulo de WebDesign. Prof. Iran Pontes. FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA. IMPLEMENTAÇÃO HTML/CSS. Introdução ao CSS. Cascading Style Sheet Folhas de Estilo
E N D
FTIN - Módulo de WebDesign Prof. Iran Pontes
FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA IMPLEMENTAÇÃO HTML/CSS
Introdução ao CSS • Cascading Style Sheet • Folhas de Estilo • Descrição de regras de estiloqueindicamao browser comoapresentarosdiversoselementos de um documento HTML • Vêmsubstituirosatributos de formatação dos elementos HTML. • Ex: <hr width="75%" size="5" align="center"> • Forma de separar a apresentação do documentodasuaestrutura. • A maioria das propriedades das style sheets (folhas de estilo)podem ser utilizadasemqualquerElemento HTML.
Noções Fundamentais • Todoomecanismo de CSS – Cascading Style SheetsébaseadoemRegraseStyle Sheets. • Regra – Definição dos aspectos de estilo de um oumaiselementos. • Style Sheet- Conjunto de umaoumaisregras a aplicar a um documento HTML. Exº: Style Sheet com umaúnicaregra h1 { color: red;}
Definição de Regras de Estilo • Seletor É a ligação entre odocumento HTML eoestilo a ser definido. Identificao(s) elemento(s) a que a regra se aplica (normalmenteonome de um elemento HTML, ex: body,p, h1, etc.). • Bloco de Declarações • Um bloco de declaraçõesédelimitadopor ‘{ }’ eéconstituídopordeclarações, separadaspor ‘;’. • Declaração– Define a propriedade de estilo a aplicaraoselementosidentificadospelo selector. Umadeclaraçãoéconstituídaporduaspartes, separadaspor ‘:’ : • Propriedade – nome do efeito/característica a aplicar. • Valor – Valor a aplicaràpropriedade.
Tipos de Seletores Composta: É possível agrupar regras com declarações iguais, para diferentes selectores numa única regra. Simples: Uma ou mais regras associadas aplicadas a uma única tag. h1{ color: red; text-align: center;} h1{ color: red;} h1{ text-align: center;} Escrevendo várias regras para o mesmo seletor Agrupando várias declarações para o mesmo seletor, separadas por ‘;’ Equivalente a h1 { font-weight: bold;} h2 { font-weight: bold;} h3 { font-weight: bold;} h1,h2,h3 { font-weight: bold;}
Tipos de Seletores Contextual: Define uma tag que receberá as informações sobre estilo, mas somente quando estiverem subordinadas a outra tag definida. p a{ text-align: center;} div p a{ text-align: center;}
Associando o Style Sheet ao HTML Existem três maneiras de vincular uma Style Sheet a uma página HTML: Lincadas ou Importadas (Style Sheet externa). Incorporadas (Style Sheet interno). Inline.
Style Sheet externa (lincada) Uma Style Sheet externa, pode ser associada a uma página HTML através do elemento <link>. A utilização de Style Sheets externas é recomendada quando o mesmo estilo é aplicado a uma grande quantidade de páginas (ex: um site). Utilizando esta técnica, a alteração do aspecto de um site inteiro, consegue-se modificando apenas um único arquivo. <head> <link rel="stylesheet" href="style.css" type="text/css" > </head> style.css body {background-color: white; color:black} a:link {color: red;} a:visited {color: blue;} a:active {color: green;} a:hover {color: fuchsia;} h1 {text-transform: uppercase;}
Style Sheet externa (Importada) Nessa abordagem o conteúdo do Style Sheet presente no arquivo com terminação .css é importado para o código html. Como se estivesse definido dentro da tag <style> <head> ........... <style type="text/css"> @import url("estilo.css"); </style> .......... </head>> style.css body {background-color: white; color:black;} a:link {color: red;} a:visited {color: blue;} a:active {color: green;} a:hover {color: fuchsia;} h1 {text-transform: uppercase;}
Associando o Style Sheet ao HTML Existem três maneiras de vincular uma Style Sheet a uma página HTML: Lincadas ou Importadas (Style Sheet externa). Incorporadas (Style Sheet Interno). Inline.
Definição local – Elemento <style> <html> <head> <title>Bach's home page</title> <style type="text/css"> <!-- body { background-color: silver; } h1 { color: red; } --> </style> </head> <body> <h1>Bach's home page</h1> <p>Johann Sebastian Bach was a prolific composer. Among his works are:</p> <ul> <li>the Goldberg Variations</li> <li>the Brandenburg Concertos</li> <li>the Christmas Oratorio </li> </ul> <h1>Historical perspective</h1> <p>Bach composed in what has been referred to as the Baroque period.</p> </body> </html> • Apenas interfere nos elementos da página onde foram definidos. • Usa-se o comentário css para evitar que browsers antigos interpretem o css de forma errada
Associando o Style Sheet ao HTML Existem três maneiras de vincular uma Style Sheet a uma página HTML: Lincadas ou Importadas (Style Sheet externa). Incorporadas (Style Sheet interno). Inline.
Regras inline Podem ser definidas regras inline através do atributo style, aplicável a qualquer elemento válido no <body> de uma página HTML, excetuando os elementos <basefont>, <param> e <script>. Estas regras apenas são válidas para o elemento onde foram definidas. <p style="color: red; font-family: 'new century schoolbook', serif;"> este parágrafo tem cor red juntamente com fonte do tipo new century schoolbook, se disponível.</p> • A definição de regras inline é o método mais inflexível de todos. Este método perde a maioria das vantagens das regras de estilo, misturando a apresentação com a estrutura.
Multiplas Folhas de Estilo Se alguma propriedade para um elemento html for definida de forma repetida em folhas de estilo diferentes, entrará em ação o efeito cascata e prevalecerão os efeitos da folha de estilo mais específica. Ordem de Prioridade: inline > incorporada > importada estilo.css <html> <head> <link rel="stylesheet" href="estilo.css“ type="text/css" > <style type="text/css"> h2 { color: "#FFCC00"; text-align: "center"; font: "italic 20pt Verdana, Sans-serif"; } </style> </head> <body> <h2> Que dia Lindo </h2> </body> </html> h2 { color: #FFCC00; text-align: center; font:italic 9pt Verdana, Sans-serif; } como há um conflito no tamanho das letras para <h2>, prevalecerá a folha interna e a letra de <h2> terá o tamanho igual a 20 pt.
Estrutura em árvore e herança html head body ul title h1 p strong li li li • A estrutura em árvore de um documento HTML, possibilita um dos mecanismos mais importantes das Style Sheets: Herança. • Os elementos HTML herdam (quase) todas as propriedades de estilo dos seus pais. <html> <head> <title>Bach's home page</title> </head> <body> <h1>Bach's home page</h1> <p>Johann Sebastian Bach was a <strong>prolific</strong> composer. Among his works are:</p> <ul> <li>the Goldberg Variations</li> <li>the Brandenburg Concertos</li> <li>the Christmas Oratorio </li> </ul> </body> </html>
Herança de propriedades de estilo Um elemento pode redefinir propriedades herdadas: Se existirem regras contraditórias, prevalecem as regras mais específicas. Mantém as propriedades não redefinidas. Atribuir a mesma cor ao texto de todos os elementos <style TYPE="text/css"> h1 { color: red; } p { color: red; } li { color: red; } strong { color: red;} </style> <style type="text/css"> body { color: red;} </style> Redefinir atributos herdados <style type="text/css"> body { color: red;} h1 { color: blue;} </style>
Propriedades não herdadas Embora o mecanismo de herança seja válido para quase todas a propriedades de estilo, existem algumas exceções. Estas exceções devem-se normalmente a: Eficiência Aspecto visual Exº: O atributo background não é herdado, ficando todos os filhos com um background transparente, a não ser que o definam. Motivos: É mais eficiente mostrar apenas uma imagem de fundo, sendo o efeito idêntico ao que ocorreria se a propriedade fosse herdada. Como as imagens de fundo são posicionadas relativamente ao elemento a que pertencem, certas imagens poderiam não apresentar o padrão de fundo esperado, após ser replicada várias vezes em cada elemento. body { background: url(textre.gif); }
Seletores class e id As CSS suportam diferentes tipos de seletores Seletores de tipo Seletores de classe Seletores de id Quaisquer um destes tipos de seletores podem ser combinados entre si, permitindo criar seletores bastante complexos, mas também bastante versáteis.
Seletores de tipo Forma mais simples de definir um seletor: Consiste no nome de um elemento html, logo todas as propriedades associadas ao seletor, são aplicadas a todos os elementos com esse nome existentes no documento. Qualquer elemento html, pode ser um seletor. h1 { color: red;} table { border: 2px;} P { text-indent: 3em;} h1, h2, h3 { color: red;} h1 { color: red;} h2 { color: red;} h3 { color: red;}
Seletores classe Você pode definir regras diferentes para o mesmo elemento html, banta definir tipos de classes diferentes para o elemento. elementoHTML.minhaclasse { propriedade: valor; } Exemplo de Style Sheet com definição de duas classes diferentes para o elemento p. p.corum { color:#000000; } p.cordois { color:#0000FF; } O atributo class permite aplicar propriedades de acordo com o seletor usado e o nome da classe. <p class ="corum"> este parágrafo terá cor preta.</p> <p class ="cordois"> este parágrafo terá cor azul. </p>
Seletores classe Pode-se definir uma classe sem especificar o elemento, dessa forma a classe pode ser associada no documento html a qualquer tipo de elemento. Exemplo: Definição de classe omitindo-se o elemento .cortres{ color:#000000; } Exemplo: Associando classe a tipos de elementos html diferentes. <h2 class="cortres"> Este cabeçalho é azul. </h2> <p class="cortres"> Este parágrafo é azul. </p >
Elemento com o atributo class <html> <head> <title>Hamlet, excerpt from act II</title> <style TYPE="text/css"> p.grilo { color: yellow; } p.padre { color: black; } p.bispo { color: blue; } </style> </head> <body> <p class=padre>Eu retiro o que disse, João</p> <p class=grilo>Retirando ou não retirando, o fato é que o cachorro enterrou-se em latim</p> <p class=bispo>Um cachorro? Enterrado em latim? </p> <p class=padre>Enterrado latindo, Senhor Bispo, Au, au, au, não sa-be? </p> </body> </html>
Seletores id O seletor id difere do seletor class, por ser ÚNICO. Um seletor idsó pode ser aplicado a UM e somente UM elemento HTML dentro do documento. Você pode "inventar" um nome e com ele criar umaida qual definirá as regras CSS. Uma idsó pode ser aplicada a UM elemento HTML. A sintaxe para o seletor ID é mostrada abaixo. Um nome qualquer que você "inventa" precedido de # (jogo-da-velha"): <h1 id="principal"> Exemplo CSS</h1> arquivo.css #principal{propriedade: valor; }
Elemento com o atributo id <html> <head> <title>Hamlet, excerpt from act II</title> <styleTYPE="text/css"> p.grilo{color:yellow;} p.padre{color:black;} p.bispo{color:blue;} #titulo{text-align:center; color:blue;font-size:18pt; border-width:3px;border-style:solid;} </style> </head> <body> <h1id="titulo"> Bate Papo </h1> <pclass=padre>Eu retiro o que disse, João</p> <pclass=grilo>Retirando ou não retirando, o fato é que o cachorro enterrou-se em latim</p> <pclass=bispo>Um cachorro? Enterrado em latim? </p> <pclass=padre>Enterrado latindo, Senhor Bispo, Au, au, au, não sa-be? </p> </body> </html>
Inserindo comentários no CSS • Você pode inserir comentários nas CSS para explicar seu código, e principalmente ajudá-lo a relembrar de como você estruturou e qual a finalidade de partes importantes do código. • O comentário introduzido no código, será ignorado pelo browser. • Um comentário nas CSS começa com o "/*", e termina com " */". Veja o exemplo abaixo: /* este é um comentário*/ p { font-size: 14px; /* este é outro comentário*/ color: #000000; font-family: Arial, Serif; }
pseudo-classes e pseudo-elementos pseudo-classes: Permitem que as folhas de estilo diferenciem os diversos estados de uma elemento, sendo úteis para aplicar definições de estilo a um elemento apenas em determinadas situações. (exemplo) <html> <head> <styletype="text/css"> a:link{color:red;} a:visited{color:black;text-decoration:none;} a:hover{color:blue;text-decoration:underline;} a:active{color:yellow;} </style> </head> <body> <p><ahref="default.html">Link com vários estados</a></p> </body> </html> • Dicas para os efeitos funcionarem corretamente: • a:hover deve vir apósa:link no CSS; • a:active deve vir apósa:hover no CSS;
pseudo-classes - Exemplo <html> <head> <style type="text/css"> a.one:link {color: #ff0000} a.one:visited {color: #0000ff} a.one:hover {color: #ffcc00} a.two:link {color: #ff0000} a.two:visited {color: #0000ff} a.two:hover {font-size: 150%} a.three:link {color: #ff0000} a.three:visited {color: #0000ff} a.three:hover {background: #66ff66} a.four:link {color: #ff0000} a.four:visited {color: #0000ff} a.four:hover {font-family: monospace} a.five:link {color: #ff0000; text-decoration: none} a.five:visited {color: #0000ff; text-decoration: none} a.five:hover {text-decoration: underline} </style> </head> <body> <p>Mouse over the links to see them change layout.</p> <p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b></p> <p><b><a class="two" href="default.asp" target="_blank">This link changes font-size</a></b></p> <p><b><a class="three" href="default.asp" target="_blank">This link changes background-color</a></b></p> <p><b><a class="four" href="default.asp" target="_blank">This link changes font-family</a></b></p> <p><b><a class="five" href="default.asp" target="_blank">This link changes text-decoration</a></b></p> </body> </html> Veja Como Ficou
pseudo-classes e pseudo-elementos pseudo-elementos: Utilizadas para especificar partes lógicas de uma elemento, sem que essas partes estejam na hierarquia de um documento. Primeira letra p:first-letter {propriedade:valor;} Primeira linha p:first-line {propriedade:valor;}
Declarações – Propriedades Fontes Fundo e Cores background; background-attachment; background-color; background-image; background-position; background-repeat; color font; font-family; font-size; font-style; font-variant; font-weight Texto Disposição (Layout) border; border-bottom; border-bottom-color; border-bottom-style; border-bottom-width; border-collapse; border-color; border-left; border-left-color; border-left-style; border-left-width; border-right; border-right-color; border-right-style; border-right-width; border-style; border-top; border-top-color; border-top-style; border-top-width; border-width; clear; float; margin; margin-bottom; margin-left; margin-right; margin-top; padding; padding-bottom; padding-left; padding-right; padding-top; table-layout direction; letter-spacing;line-height; max-height; max-width; min-height; min-width; text-align; text-decoration; text-indent; text-shadow; text-transform; vertical-align; white-space; word-spacing Posicionamento bottom; clip; height; left; overflow; position; right; top; visibility; width; z-index Outras propriedades Classificação cursor display; list-style; list-style-image; list-style-type
Declarações – Valores Existem determinados tipos de valores que são válidos para diversas propriedades e cujas gamas de valores podem ser englobadas em vários tipos Tipo de Valor Propriedades que assumem este tipo de valor Dimensões background-position; border; border-bottom; border-bottom-width; border-left; border-left-width; border-right; border-right-width; border-top; border-top-width; border-spacing ; bottom; font-size; height; left; letter-spacing (apenas dimensão); line-height; max-height; max-width; min-height; min-width; right; text-indent; text-shadow; top; vertical-align; width; Percentagens URI background; background-image; cursor; list-style-image; Cores background; background-color; border; border-color; border-bottom; border-bottom-color; border-color; border-left; border-left-color; border-right; border-right-color; border-top; border-top-color; color; text-shadow
Valores - Dimensões Referem-se a medidas horizontais e verticais Existem dois tipos de dimensões Relativas Absolutas Uninades Formato Exemplo Absolutas in – inches (polegadas – 2,54 cm) cm – centímetros mm – milímetros pt – points (1/72 inch) pc – picas (12 pints) h1 { margin: 0.5in; } /* inches */ h2 { line-height: 3cm; } /* centimeters */ h3 { word-spacing: 4mm; } /* millimeters */ h4 { font-size: 12pt; } /* points */h4 { font-size: 1pc; } /* picas */ Relativas em – dimensão da fonte corrente ex – altura da letra ‘x’ da fonte corrente px – pixels (relativa a resolução da tela) h1 { margin: 0.5em; } /* em */ h1 { margin: 1ex;} /* ex */p { font-size: 12px; } /* px */ Formato <numero real> <unidade>
Valores - Percentagens Valores relativos a outro valor, ex: uma dimensão. Cada propriedade que pode assumir valores percentuais, também define a que valor a percentagem se refere. Os valores de referência podem ser: outra propriedade do próprio elemento uma propriedade de um elemento pai um valor do contexto de formatação (ex: largura do bloco que contém o elemento) Formato <numero real> % /* Tabela com uma largura de 60% da largura do elemento que a contém */ table { width: 60%; } /* Parágrafo com uma dimensão de fonte 20% maior que a fonte do contexto onde o parágrafo se encontra */ p { font-size: 120%; }
Cada cor tem como valor uma palavra chave ou uma especificação RGB. Palavras chave definidas: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. RGB #rrggbb (ex., color: #00cc00) – rr, gg e bb são valores em hexadécimal #rgb (ex., color: #0c0) - r, g e b são valores em hexadécimal rgb(x,x,x) - x é um inteiro entre 0 and 255 inclusive (ex., color: rgb(0,204,0)) rgb(y%,y%,y%) - y é um número real entre 0.0 and 100.0 inclusive (ex., color: rgb(0%,80%,0%) Valores - Cores /* Definição de cores com palavras chave */ body {color: black; background: white;} h1 { color: maroon;} h2 { color: olive;} /* Definição de cores em valores RGB*/ p { color: #f00; } /* #rgb */ p { color: #ff0000; } /* #rrggbb */ p { color: rgb(255,0,0); } /* inteiro entre 0 - 255 */ p { color: rgb(100%, 0%, 0%); } /* real entre 0.0% - 100.0% */
Style Sheets – Fontes As propriedades para as fontes, definem as características (os valores na regra CSS) das letras que constituem os textos dentro dos elementos HTML Propriedades básicas das fontes color: Cor da fonte font-family:Tipo de fonte font-size: Tamanho de fonte font-style: Estilo de fonte font-variant: fontes maiúsculas de menor altura font-weight: Quanto mais escura a fonte é (negrito) font: maneira abreviada para todas as propriedades
Style Sheets – Valores Válidos color: código hexadecimal: #FFFFFF código rgb: rgb(255,235,0) nome da cor: red, blue, green...etc
Exemplos – Cor <html> <head> <style type="text/css"> <!-- h1 {color: #FF0000;} h2 {color: #00FF00;} p {color: rgb(0,0,255);} --> </style> </head> <body> <h1>Cabeçalho com letras vermelhas</h1> <h2>Cabeçalho com letras verdes</h2> <p>Parágrafo com letras azuis</p> </body> </html>
Style Sheets – Valores Válidos font-family: Usado para definir uma lista de tipos de fontes possíveis; O browser assume o primeiro nome que ele encontra na lista; Separar cada nome por virgula(,) e sempre prever um nome genérico. Caso o nome da fonte seja composto, usar aspas duplas no nome(“ ”). Mas caso a regra de estilo esteja definida pelo atributo style, então deve-se usar aspas simples (' '). Nomes de fontes: define-se pelo nome da fonte ex:"verdana", "helvetica", "arial", etc. Fontes Genéricas: define-se pelo nome genérico p. ex:"serif", "sans-serif", "cursive", etc.
Exemplos – Tipo <html> <head> <style type="text/css"> <!-- h2 {font-family: arial, helvetica, serif;} p {font-family: sans-serif;} --> </style> </head> <body> <h2>Família por nome: arial, helvetica, serif;</h2> <p>Família genérica: sans-serif;<p> </body> </html> • Separa-se os tipos de fontes possíveis com virgula (,); • Se o nome for composto, por ex. Comic Sans SM. Usar aspas duplas: “Comic Sans SM”
Style Sheets – Valores Válidos Font-size: Indica qual o tamanho que a fonte deve possuir. Por um tamanho padrão: smaller < xx-small < x-small < small < medium < large < x-large < xx-large < larger Pelo Comprimento:uma medida reconhecida pelas CSS (px, pt, em, cm, ...) Percentual (%):Funcionando como um percentual da fonte adquirida pelo elemento
Style Sheets – Valores Válidos Font-style: normal: fonte normal na vertical italic: fonte inclinada oblique:fonte obliqua
Style Sheets – Valores Válidos font-variant: normal: fonte normal small-caps: transforma em maiúsculas de menor altura font-weight: Padronizados: normal, bold, bolder, lighter Por Valor: 100, 200, 300, 400, 500, 600, 700, 800, 900
Exemplos – Estilo + Tamanho Esse exemplo combina mais de um tipo de propriedade: font-style, font-size • <html> <head> <style type="text/css"> <!-- h1 {font-style: italic;} h2 {font-style: normal;} p {font-style: oblique; font-size: 14px} p.menor {font-style: oblique; font-size: smaller} --> </style> </head> <body> <h1>Este é o estilo italic</h1> <h2>Este é o estilo normal</h2> <p>Este é o estilo oblique de 14px</p> <p class="menor">Este é o texto menor</p> </body> </html>
Exemplo: font-varian e font-weight <html> <head> <style type="text/css"> <!-- h1 {font-weight: bold;} h3 {font-variant: normal;} p{font-variant: small-caps;} --> </style> </head> <body> <h1>Cabeçalho gordo</h1> <h3>Este cabeçalho com letras normais</h3> <p>Este parágrafo com letras em "small-caps"</p> </body> </html>
Exemplos – Sintetizando tudo na tag font Maneira abreviada de você escrever uma regra para as propriedades das fontes A sintaxe geral é esta: font: [style] [variant] [weight] [size] [/line-height] [family] | caption | icon | menu | message-box | small-caption | status-bar | inherit Os valores style, variant, weight e size, podem ser declarados em qualquer ordem. • <html> • <head> <style type="text/css"> <!-- p { font: italic small-caps bold 14px "Comic Sans MS", sans-serif; } --> </style> </head> <body> <p>Parágrafo em declaração única</p> </body> </html>
Fontes usadas pelo S.O. do visitante Essas propriedades devem ser declaradas isoladas para a propriedade font caption: fontes usadas em botões; icon: fontes usadas em ícones; menu: fontes usadas em menus; message-box: fontes ussadas em caixas de mensagens; small-caption: fontes usadas em pequenos controles; status-bar: fontes usadas na barra de status; inherit: Herda a fonte declarada pelo elemento pai. • <html> <head> <style type="text/css"> <!-- .p1 { font: status-bar; } .p2 { font: small-caption ; } --> </style> </head> <body> <p class="p1">Parágrafo com fonte status-bar</p> <p class="p2">Parágrafo com fonte small-caption</p> </body> </html>
Cascading Style Sheets (CSS) - Propriedades dos Textos Webdesign
Style Sheets – Texto As propriedades para textos, definem as características (os valores na regra CSS) dos textos inseridos dentro dos elementos HTML. Propriedades básicas das fontes letter-spacing: espaçamento entre letras; word-spacing: espaçamento entre palavras; text-align: alinhamento do texto; text-decoration: decoração do texto; text-indent: recuo do texto; text-transform: forma das letras; Direction: direção do texto; white-space: como o browser trata os espaços em branco;
Style Sheets – Espaço entre letras letter-spacing Valores Válidos: normal: é o espaçamento default lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) São válidos valores negativos <html> <head> <style type="text/css"> <!– h2 {letter-spacing: 1.2em;} p {letter-spacing: 0.4cm;} --> </style> </head> <body> <h2> Este é o cabeçalho</h2> <p> Este é o parágrafo</p> </body> </html>
Style Sheets – Espaço entre palavras • word-spacing • Valores Válidos: • normal: é o espaçamento default • lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) São válidos valores negativos <html> <head> <style type="text/css"> <!– H2 {word-spacing: 1.8em;} p {word-spacing: 80px;} --> </style> </head> <body> <h2> Este é o cabeçalho</h2> <p> Este é o parágrafo</p> </body> </html>
