UNIGUAÇU Unidade de Ensino Superior Vale do Iguaçu APOSTILA DE CSS. Prof. Cleverson B. Klettenberg
|
|
|
- Kevin Filipe Barroso Jardim
- 6 Há anos
- Visualizações:
Transcrição
1 UNIGUAÇU Unidade de Ensino Superior Vale do Iguaçu APOSTILA DE CSS Prof. Cleverson B. Klettenberg União da Vitória 2014
2 Sumário 1. INTRODUÇÃO AO CSS O que é CSS? Como Criar Estilos TIPOS DE FOLHA DE ESTILO Estilos Externos Estilos Incorporados Estilos Inline TAGS PERSONALIZADAS (CLASSES) Utilizando a TAG <DIV> Utilizando a TAG <SPAN> ATALHOS CSS PSEUDO CLASSES...16 APÊNDICE I ATRIBUTOS CSS...18
3 1. INTRODUÇÃO AO CSS 1.2. 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 tem muitos tipos de definição aqui veremos muitas delas. No que eles podem nos ajudar? Economizar o seu tempo. Diminuir o tamanho do código de sua página. Sua página irá carregar mais rapidamente. Mais facilidade de manter e fazer alterações na página. Mais controle no layout da página. 1.3 Como Criar Estilos seguinte sintaxe: Cada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a elemento {atributo1: valor; atributo2: valor... Elemento - descreve o elemento de design ao qual o estilo será aplicado. A mesma tag HTML mas, sem os sinais de maior e menor. Essa parte da regra é às vezes chamada de seletor. Atributo - o aspecto específico do elemento que você quer usar como estilo. Deve ser um nome de atributo CSS válido, como o atributo font-size. Valor - a configuração aplicada ao atributo. Deve ser uma configuração válida para o atributo em questão, como 20pt (20 pontos) para font-size. Atributo: valor - à parte declaração da regra. Você pode atribuir múltiplas declarações se desejar separá-los com ponto-e-vírgula (;). Não coloque um ponto- e-vírgula depois da última declaração. Obs.: Uma lista de Atributos e Valores pode ser encontrado no APENDICE I desta apostila. Agora é hora de exemplos. Eis uma regra CSS que especifica que todos os títulos de nível 1 (tags <H1>) sejam exibidos em uma fonte de 36 pontos: H1 {font-size: 36pt
4 Aqui está um exemplo de regra que diz que todos os títulos de nível 2 (tags <H2>) devem ter tamanho de 24 pontos e cor azul; H2 {font-size: 24pt; color: blue Você pode inserir quebras de linha e espaços em branco dentro da regra como quiser. Assim, é possível ver mais facilmente todas as declarações e certificar-se de que colocou todos os sinais de ponto-e-vírgula e colchetes nos lugares corretos. Por exemplo, aqui está uma regra que diz que os parágrafos aparecerão em fonte Times, 12 pontos, azul e recuados meia polegada a partir da margem esquerda da página: P { font-family: Times; font-size: 12pt; color: blue; margin-left: 0.5in Note como é fácil aplicar todas as declarações ao elemento parágrafo (P) e como cada declaração, exceto a última, é seguida pelo caracter de ponto-e-vírgula exigido. Exercício 1: Dado o seguinte html: index.html <html> <head> <title>teste CSS</title> <style type= text/css > configure aqui observando APENDICE I desta apostila cor de fundo da página h1 com 36 pt h2 na cor azul p com margem esquerda de 50 pixels </style> </head> <body> <h1>este cabeçalho tem 36 pt</h1> <h2>este cabeçalho é azul</h2> <p>este parágrafo tem uma margem esquerda de 50 pixels</p> </body> </html>
5 Exercício 2: Vermelha. Arial. a) Título SISTEMAS PARA INTERNET em formato de cabeçalho e centralizado. b) Após o cabeçalho incluir uma linha horizontal tamanho 2 e cor cinza. c) O texto DISCIPLINAS - II SEMESTRE na fonte Arial, negrito, tamanho 3 e cor d) Denominar as disciplinas (1,2 e 3), na fonte Arial, tamanho 3 e cor Verde. e) O texto Esta é a primeira aula de HTML deve ser um texto pré-formato, fonte Exercício 3: A folha de estilos deverá: a) Colocar o texto do lado esquerdo da imagem; b) Separar o texto da borda esquerda da imagem em 30 pixels; c) Usar, para o texto, o alinhamento justificado; d) Separar o texto da borda esquerda da página em 20 pixels; e) Afastar o texto e a imagem da borda superior da página em 40 pixels; f) Separar a borda direita da imagem em relação ao lado direito da página em 10 pixels.
6 2. TIPOS DE FOLHA DE ESTILO Você pode definir regras de CSS em três lugares. E, por definição, pode utilizar uma combinação dos três métodos nos seus web sites. A maneira como as regras interagem entre si está relacionada à parte "em cascata".os três lugares são: 1) em um documento separado fora de todos os documentos HTML; 2) no cabeçalho de um documento HTML e, 3) dentro de uma tag de HTML. Cada um destes métodos tem um nome e afeta as páginas HTML em seu site de um modo diferente, como discutido aqui: Externo - Externo significa que você coloca as regras de CSS em um arquivo separado, e então sua página HTML pode fazer um link para esse arquivo. Essa abordagem lhe permite definir regras em um ou mais arquivos que podem ser aplicadas em alguma página do seu web site. Incorporado - Incorporado significa que você especifica as regras de CSS no cabeçalho do documento. As regras incorporadas afetam somente a página atual. Inline - Inline significa que você especifica as regras de CSS dentro da tag de HTML. Essas regras afetam somente a tag atual. 2.1 Estilos Externos Para definir um conjunto de regras de estilo que você pode facilmente aplicar em alguma página do seu site, é preciso colocar as regras em um arquivo de texto. Você pode criar este arquivo com um editor de textos simples, como o Notepad do Windows, e dar ao nome desse arquivo a extensão.css. Sempre que quiser utilizar esses estilos em uma nova página, basta colocar uma tag <LINK> no cabeçalho que referencie esse arquivo.css. Veja o exemplo: Arquivo OrgaoColegiado.css H4 { font-family: 'Arial'; font-size: 14pt; color: blue Agora, para utilizar os estilos definidos neste arquivo.css você precisa adicionar a tag a seguir ao cabeçalho da página, onde nome_do_arquivo é uma referência absoluta ou relativa ao arquivo.css.
7 <LINK REL="STYLESHEET" HREF=" OrgaoColegiado.css" TYPE="text/css"> OBS: Você deve inserir este texto entre as tags <HEAD>...</HEAD>, e colocar a localização correta do seu arquivo e seu nome. Exercício 1: Teste os códigos abaixo: index.html <html> <head> <title>teste CSS</title> <link rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> <h1> Teste de folha de estilo CSS </h1> <p> Este é um teste de uma <i>folha de estilo</i> CSS. </p> </body> </html> estilo.css body { background-color: yellow; background-image: url("estrela.jpg"); background-epeat: no-repeat; background-attachment: fixed; background-position: right bottom; h1 { font-family: arial, sans-serif; font-size: 12pt; text-transform: uppercase; p { font-weight: bold; font-size: 12pt; font-family: arial, sans-serif; text-align: justify; text-indent: 30px; 2.2 Estilos Incorporados Se quiser criar um conjunto de estilos que se aplicam a uma única página, você pode configurar os estilos exatamente como fizemos no exemplo dos estilos externos - mas em vez de colocar as tags <STYLE>...</STYLE>, e as regras em um arquivo separado, coloque estas tags na própria página HTML. A estrutura básica de uma página da web que utiliza estilos incorporados é semelhante ao seguinte código:
8 <HTML> <HEAD> <TITLE>Exemplo Estilos Incorporados</TITLE> <STYLE TYPE="text/css"> P { background-color: #FFFFFF; font-family:'comic Sans MS'; font-size: 14pt </STYLE> </HEAD> <BODY> <P>teste</P> </BODY> </HTML> Exercício 1: Transforme o exercício 1 do capítulo 2.1 em estilo incorporados 2.3. Estilos Inline Os estilos inline são os que têm menos efeitos. Eles afetam somente a tag atual - não outras tags na página e tampouco outros documentos. A sintaxe para definir um estilo inline é a seguinte: <A STYLE="color: green; text- decoration: none" HREF=" Google</A> Note que em vez das tags <STYLE>...</STYLE>, você apenas utiliza um atributo STYLE dentro da tag para definir o estilo. E, em vez de colocar as regras de CSS entre colchetes, você as coloca entre aspas, separando-as com ponto-e-vírgula como de costume. Exercício 1: Transforme o exercício 1 do capítulo 2.1 em estilo in line Exercício 2: Observe o seguinte trecho de código:... <style type= text/css > B: {color: navy </style>... <B>Minhas páginas agora usarão <I> CSS </I> </B> Diga em que cor é apresentado o texto CSS, justifique?
9 Exercício 3: Dado o arquivo HTML: <HTML> <BODY> <H1>Neste exemplo, estou começando a dominar</h1> <P>O Cascading Style Sheets</P> <HR> </BODY> </HTML> Faça as alterações necessárias de modo a : a) no estilo externo, mude o fundo da página para amarelo e cor do texto vermelho. b) no estilo incorporado, mude o h1 para fonte impact c) no estilo in line mude o h1 para font tamanho 16px Exercício 4: Observe o código seguinte <HTML> <HEAD> <TITLE>Mais um Exemplo se Style Sheet</TITLE> <STYLE TYPE="text/css"> P {color: red </STYLE> </HEAD> <BODY> <P STYLE="color: green">cascading Style Sheets</P> </BODY> </HTML> Tendo em consideração a ordem de prioridade de estilos, diga o que acontece ao texto que se encontra na tag <P>. Exercício 5: a) Faça uma folha de estilo que permita obter um texto de cor vermelha no primeiro parágrafo, verde no segundo parágrafo e cinza para o terceiro. b) Contrua 3 links. Os links criados devem ser mostrados, inicialmente, com o texto na cor vermelha (red), os links que já foram visitados na cor azul (navy). c) Faça um link sem estar sublinhado. Exercício 6: Responda as questões abaixo: a) Qual o significado de CSS? Creative Style Sheets Colorful Style Sheets Cascading Style Sheets Computer Style Sheets
10 b) Qual é a opção correta para referenciarmos um CSS externo? <link rel="stylesheet" type="text/css" href="mystyle.css"> <style src="mystyle.css"> <stylesheet>mystyle.css</stylesheet> c) Em que parte do documento HTML é correcto referenciar um arquivo CSS externo? At the top of the documento In the <head> section In the <body> section At the end of the document d) Qual tag HTML é utilizada para definir um CSS interno? <css> <style> <script> e) Qual atributo HTML é utilizado para definir estilos inline? styles style font class f) Qual é a sintaxe correta CSS? {body;color:black body {color: black body:color=black {body:color=black(body g) Qual é a propriedade que utilizamos para alterar a cor do background? background-color: color: bgcolor: h) Como adicionamos uma cor de background para todos elementos <h1>? h1.all {background-color:#ffffff h1 {background-color:#ffffff all.h1 {background-color:#ffffff i) Como alteramos a cor de texto de um elemento? text-color: color: fgcolor: text-color= j) Qual é a propriedade em CSS que controla o tamanho do texto? text-style text-size font-size font-style
11 k) Qual a sintaxe correta CSS para tornar todos elementos <p> bold? <p style="text-size:bold"> p {text-size:bold <p style="font-size:bold"> p {font-weight:bold l) Como fazer para retirar o sublinhado dos links? a {underline:none a {text-decoration:no underline a {decoration:no underline a {text-decoration:none m) Como alterar o tipo de fonte de um elemento? font-family: font= f: n) Como posicionamos o topo de um elemento a 100 pixels de distância de seu elemento imediatamente anterior? border-left:100px margin-top:100px margin:100px margin-top:100px o) Como alteramos a margem esquerda de um elemento? margin: text-indent: margin-left: indent:
12 3. TAGS PERSONALIZADAS (CLASSES) Com as classes de estilo, é possível definir diversas variações de uma única tag. Por exemplo, você poderia fazer um estilo de parágrafo "texto alinhado à direita", um estilo de parágrafo "texto centralizado" e assim por diante, criando múltiplos temas em torno da tag de parágrafo. (<P>) Você pode definir classes de estilo tanto em folhas de estilo externa como nas incorporadas. (Não há sentido em definir uma classe em um estilo inline!). A sintaxe é praticamente idêntica à sintaxe normal para os estilos externo e incorporado, com adição de um ponto e o nome da classe depois do elemento na qual será utilizado o atributo. <STYLE TYPE="text/css"> elemento.nomedaclasse {atributo:valor;... </STYLE> Adicionar esta TAG dentro da TAG <Head> da página index.html: <STYLE TYPE="text/css"> A.meuslinks { color: blue; text-decoration: none </STYLE> Depois apenas adiciono o atributo CLASS="meuslinks" aos links em que eu desejar que fiquem azuis e não-sublinhados. Veja como deve ficar: <A CLASS="meuslinks" HREF="EstiloTexto.html"> Estilo de Texto </A> 3.1. Utilizando a TAG <DIV> As tags HTML <DIV>...</DIV> podem ser usadas para formatar um grande bloco de texto - uma divisão - abrangendo diversos parágrafos e outros elementos. Isso as torna uma boa opção para definir estilos que afetam grandes seções de um texto em uma página. Veja: <STYLE TYPE="text/css"> DIV.sidebar { font=family: "Arial"; font-size: 12pt; text-align: right; background-color: #C0C0C0; margin-left: 1in; margin-right: 1in </STYLE>
13 Ao colocar na tag <DIV> o atributo CLASS, você estará fazendo com que todos os elementos que estejam englobados nesta tag sigam estes padrões.... Cursos: <OL> <LI>Selecione <DIV CLASS="sidebar">Matemática</DIV> <br> <DIV CLASS="sidebar">Medicina</DIV> </OL>... Exercício 1: Crie um quadro com bordas e que seja preenchido com uma imagem e um texto. Este quadro deve ficar por cima de todos os elementos de uma página qualquer Utilizando a TAG <SPAN> As tags <SPAN>...</SPAN> são como tags <DIV>...</DIV> no sentido de que você pode utilizá-las para definir estilos que formatam um bloco de texto. Ao contrário de <DIV>, contudo, que é utilizada para divisões de texto grandes, a tag <SPAN> é especializada para blocos de textos menores - que podem ser tão pequenos como um único caracter. Veja um bom exemplo do que se pode fazer utilizando esta tag. <STYLE TYPE="text/css"> SPAN.hot { color:green; text-decoration: underline </STYLE> Utilizada no código HTML Para sair de um programa: <OL> <LI>Selecione <SPAN CLASS="hot">A</SPAN>rquivo - <SPAN CLASS="hot">S</SPAN>air </OL>...
14 4. ATALHOS CSS Alguns atributos de CSS lhe permitem fazer diversas configurações em uma declaração. Por exemplo, suponha que você queira definir diversos aspectos da fonte utilizada para tags H1, como segue: H1 { font-style: italic; font-weight: bold; font-size: 18pt; font-family: 'Times Roman' Como alternativa a especificar todas essas formatações de fonte individualmente, você pode utilizar o atributo font: para defini-las todas de uma só vez, assim: H1 { font: italic bold 18pt 'Times Roman' Note como diversos valores - itálico, negrito, 18pt e Times Roman são separados apenas por um espaço em branco. Essas regras abreviadas certamente poupam espaço e tempo de digitação. Exercício 1: Crie uma folha de estilos, chame-a de basico.css, e a carregue no arquivo StyleTest.html e em websites.html (ou utilize outros arquivos). Nesta folha de estilos, usando o mínimo de declarações possível, declare: a) que todo H1 tenha fonte Arial (de preferência) b) que todo o texto do corpo do arquivo tenha tamanho 10 pontos c) que todos os H1, H2 e H3 sejam vermelhos d) que os H1 tenham tamanho 24 pontos e) que os H2 tenham tamanho 18 pontos f) que os H3 tenham tamanho 14 pontos Mude a cor do fundo da página para preto e a cor default do texto para branco em uma única declaração. Faça com que a página websites tenha uma cor de fundo clara e cor de texto escuro (diferente daquela definida por basico.css) sem alterar as outras páginas que usam o mesmo estilo.
15 Exercício 2 : Construa a seguinte página usando apenas CSS para formatação. Utilize classes para definir as linhas verde e vermelha:
16 5. PSEUDO CLASSES Os efeitos em links e outros elementos HTML são possíveis através de declarações de regras de estilo para as pseudo-classes do elemento. São usadas para adicionar efeitos diferentes a alguns seletores, ou a uma instância de alguns seletores. Sintaxe seletor:pseudo-classe {propriedade: valor mesma página. definir diferentes efeitos para links localizados em diferentes lugares em uma A { text-decoration:none A:hover { text-decoration:none; color:red; São quatro as pseudo classes para links: a:link...define o estilo do link no estado inicial; a:visited...define o estilo do link visitado; a:hover...define o estilo do link quando passa-se o mouse sobre ele; a:active...define o estilo do link ativo (o que foi "clicado"). Mais detalhes podem ser encontrados no APENDICE I desta apostila.
17 Exercício 1 : Construa as seguintes páginas usando apenas CSS para formatação. Figura 1 Figura 2
18 APÊNDICE I ATRIBUTOS CSS Seletores Padrão Significado Exemplo CSS Exemplo (X)HTML * * { Seletor universal: qualquer color: #000000; Aplicável a todos os elemento elementos e Seletor de tipo de elemento: e { seleciona qualquer elemento font-family: <e>... </e> <e> sans-serif; e.classe e#id e, f a:link a:visited e:active e:hover e:focus e:firstline e:firstletter Seletor de classe: seleciona h1.pastoral { o(s) elemento(s) <e> em que color: green; se aplicou a "classe" Seletor de ID: seleciona o elemento <e> identificado com Id Agrupamento de seletores: Seleciona os elementos <e> e <f> do agrupamento Pseudo-classe link: aplicase ao elemento <a> com hiperlinks ou âncoras ainda não visitados h1#chapter1 { text-align: center; h1, h2 { font-family: sans-serif; a:link { color: red; Pseudo-classe visited: a:visited { aplica-se ao elemento <a> color: blue; com hiperlinks ou âncoras já visitados Pseudo-classe active: a:active { aplica-se ao elemento <e> color: lime; quando este for ativado pelo usuário Pseudo-classe hover: aplicase ao elemento <e> quando a:hover { color: yellow; o cursor estiver sobre ele, mas sem ativá-lo Pseudo-classe focus: aplicase ao elemento <e> quando o foco estiver posicionado nele Pseudo-elemento first-line: aplica-se à primera linha do elemento <e> Pseudo-elemento firstletter: aplica-se à primera letra do elemento <e> a:focus { background: yellow; p:first-line { text-transform: uppercase; p:first-letter { font-size: 3em; font-weight: normal; <e class="classe"... /> <e id="id"... /> <e> </e> <f> </f> <a href=" eço.link/">link</a > <a href=" eço.link/">link</a > <a href=" eço.link/">link</a > <a href=" eço.link/">link</a > <a href=" eço.link/">link</a > <e>...</e> <e>...</e>
19 Unidades Unidades de tamanho relativas Unidade Descrição px Tamanho em pixels (relativo ao dispositivo) em Tamanho relativo à fonte utilizada no elemento ao qual está inserido Unidades de tamanho absolutas Unidade Descrição in Polegadas (1polegada = 2.54 cm) cm Centímetros mm Milímetros pt Pontos (1pt = 1/72 polegadas) Bordas Propriedade Descrição Valores Descrição border-top-width thin: espessura fina Largura das border-rightwidth medium: espessura média bordas em cada [ thin thick: espessura grossa border-bottomwidth um dos quatro medium lados: superior, thick border-leftwidth direito, inferior e <tamanho> ] e {border-bottom-width: esquerdo medium; Exemplos: Todas as bordas com espessura 'thin': e {border-width: thin; border-width Atalho para definir de uma só vez larguras de bordas para todos os lados [ thin medium thick <tamanho> ] {1,4 Bordas superior e inferior com espessura 'thin', bordas direita e esquerda com espessura 'thick': e {border-width: thin thick; Borda superior com espessura 'thin', bordas direita e esquerda com espessura 'thick', borda inferior com espessura 'medium': e {border-width: thin thick medium; Borda superior com espessura 'thin', borda direita com espessura 'thick', borda inferior com espessura 'medium', borda esquerda com espessura 'thin': e {border-width: thin
20 Propriedade Descrição Valores Descrição thick medium thin; border-top-color border-rightcolor border-bottomcolor border-leftcolor Cor das bordas em cada um dos quatro lados: superior, direito, inferior e esquerdo [ <color> transparent ] e {border-top-color: black; Exemplos: Todas as bordas com a cor 'black': e {border-color: black; border-color Atalho para definir de uma só [ <color> vez cores de transparent ] bordas para todos {1,4 os lados Bordas superior e inferior com a cor 'black', bordas direita e esquerda com a cor 'silver': e {border-color: black silver; Borda superior com a cor 'black', bordas direita e esquerda com a cor 'silver', borda inferior com a cor 'gray': e {border-color: black silver gray; Borda superior com a cor 'black', borda direita com a cor 'silver', borda inferior com a cor 'gray', borda esquerda com a cor 'white': e {border-color: black silver gray white; border-top-style border-rightstyle border-bottomstyle border-leftstyle Estilo de bordas em cada um dos quatro lados: superior, direito, inferior e esquerdo [ none hidden dotted dashed solid double groove ridge inset outset ] none: nenhuma borda (largura computada como zero) hidden: idêntico à 'none', exceto na resolução de conflito de bordas nos elementos de uma tabela dotted: série de pontos dashed: série de segmentos de pequenas linhas solid: segmento de linha simples e contínua double: Duas linhas 'solid'. A soma das duas linhas e o espaço entre elas é igual ao valor definido em 'border-width' groove: Efeito 3D, entalhada ridge: Efeito 3D, oposto de 'groove': ressaltada inset: Efeito 3D, baixo relevo outset: Efeito 3D, alto relevo
21 Propriedade Descrição Valores Descrição e {border-left-style: dotted; Exemplos: Todas as bordas com estilo 'solid': e {border-style: solid; border-style Atalho para definir de uma só vez estilos de bordas para todos os lados [ none hidden dotted dashed solid double groove ridge inset outset ] {1,4 Bordas superior e inferior com estilo 'solid', bordas direita e esquerda com estilo 'dotted': e {border-style: solid dotted; Borda superior com estilo 'solid', bordas direita e esquerda com estilo 'dotted', borda inferior com o estilo 'dashed': e {border-color: solid dotted dashed; border-top border-right border-bottom border-left border Atalho para definir largura, estilo e cor das bordas superior, direita, inferior ou esquerda Atalho para largura, estilo e cor das quatro bordas [ <border-topwidth> <border-topstyle> <border-topcolor> ] [ <border-topwidth> <border-topstyle> <border-topcolor> ] Borda superior com estilo 'solid', borda direita com estilo 'dotted', borda inferior com estilo 'dashed', borda esquerda com o estilo 'double': e {border-color: solid dotted dashed double; e {border-bottom: thick solid red; e {border: thick solid red; Margens Propriedade Descrição Valores Descrição margin-top margin-right margin-bottom margin-left margin Tamaho da margem para cada um dos lados: superior, direito, inferior e esquerdo Atalho para definir de uma só vez o tamanho [ <tamanho> <porcentagem> auto ] [ <tamanho> <porcentagem> body {margin-top: 2em Exemplos: Todas as margens com 2em:
22 Propriedade Descrição Valores Descrição body {margin: 2em Margem superior e inferior com 1em, esquerda e direita com 2em: body {margin: 1em 2em da margem para todos os lados auto ]{1,4 Margem superior com 1em; direita com 2em; inferior com 3em; e esquerda com 2em: body {margin: 1em 2em 3em Margem superior com 1em; direita com 2em; inferior com 3em; e esquerda com 4em: body {margin: 1em 2em 3em 4em Espaçamento Propriedade Descrição Valores Descrição padding-top padding-right padding-bottom padding-left Distância utilizada para espaçamento em cada um dos quatro lados: superior, direito, inferior e esquerdo [ <tamanho> <porcentagem body {padding-top: 2em > ] Exemplos: Todas as margens com 2em: body {padding: 2em Margem superior e inferior com 1em, esquerda e direita com 2em: body {padding: 1em 2em padding Atalho para definir de uma só vez a distância de espaçamento para todos os lados [ <tamanho> Margem superior com 1em; <porcentagem direita com 2em; inferior com > ]{1,4 3em; e esquerda com 2em: body {padding: 1em 2em 3em Margem superior com 1em; direita com 2em; inferior com 3em; e esquerda com 4em: body {padding: 1em 2em 3em 4em
23 Modelo de formtação visual Propriedade Descrição Valores Descrição / Exemplos position Esquema de posicionamento [ static relative absolute fixed ] static: Posicionamento normal de acordo com o fluxo normal dos elementos na página. As proprieades 'top', 'right', 'bottom', e 'left' não se aplicam relative: posicionamento é calculado de acordo com o fluxo normal. O efeito de 'position:relative' é indefinido nos elementos 'table-row-group', 'table-headergroup', 'table-footer-group', 'table-row', 'table-column-group', 'table-column', 'tablecell', e 'table-caption' absolute: Posicionamento (e possivelmente o tamanho) é especificado com as propriedades 'top', 'right', 'bottom', e 'left'. Essas propriedade são especificadas em relação ao conteúdo do bloco fixed: Posicionamento é calculado tal como o modelo 'absolute', mas adicionalmente se manterá fixo, mesmo que se utilize a barra de screen { e#exemplo {position: print { e#exemplo {position: static; top right bottom left Distância do elemento com relação à extremidade de seu elemento-pai [ <tamanho> <porcentagem> auto ] top: Distância vertical em relação à margem superior right: Distância horizontal em relação à margem direita bottom: Distância vertical em relação à margem inferior left: Distância horizontal em relação à margem esquerda e { top: 20px; left: 40px; z-index Níveis de profundidade de sobreposição de elementos [ auto <número inteiro> ] Os números serão considerados para ordenar os elementos que ficarão sobrepostos, do mais baixo para o mais alto: 'z-index: 1'; 'z-index:2'; 'z-index: 3'; e {z-index: 1;
24 Detalhes do modelo de formatação visual Propriedade Descrição Valores Descrição / Exemplos [ <tamanho> width Largura <porcentagem> e {width: 25%; auto ] height Altura [ <tamanho> <porcentagem> auto ] Obs.: Valores em negrito são os adotados como padrão e {height: 250px; Efeitos visuais Propriedade Descrição Valores Descrição / Exemplos visible - O elemento será exibido hidden - O elemento não será exibido, ficando totalmente transparente. Mas o leiaute da página visibility Define se um elemento [ visible hidden continuará sendo afetado estará ou não visível collapse ] collapse - Mesmo efeito que hidden, mas aplicável a elementos de tabela e {visibility: hidden; Cores e Fundo Propriedade Descrição Valores Descrição / Exemplos color Cor do texto e {color: red; presente no <color> e {color: elemento rgb(255,0,0); background-color background-image background-repeat Cor de fundo do elemento Imagem de fundo do elemento Define se e como a imagem de fundo utilizada se [ <color> transparent ] [ url(...) none ] [ repeat repeat-x repeat-y no-repeat ] Para 'transparent' será adotada a cor de fundo do elemento superior e na ausência deste, a cor de fundo padrão do browser e {background-color: #f00; e {background-color: transparent; e {background-image: url( agem.jpg); repeat: a imagem é repetida em ambas as direções: horizontal e vertical repeat-x: a imagem é repetida somente horizontalmente
25 Propriedade Descrição Valores Descrição / Exemplos repetirá repeat-y: a imagem é repetida somente verticalmente. no-repeat: a imagem não será repetida e somente uma cópia da mesma será renderizada background-attachment background-position Define se a imagem de fundo [ scroll fixed ] utilizada será fixa ou com rolagem Posição da imagem de fundo utilizada. [ [ <porcentagem> <tamanho> left center right ] [ <porcentagem> <tamanho> top center bottom]? ] [ [ left center right ] [ top center bottom ] ] e {background-repeat: no-repeat; scroll: a imagem acompanha a rolagem da página na janela do browser, mantendo-se como imagem de fundo fixed: a imagem é fixada na página e não acompanhará a rolagem da página top: Equivalente a '0%' do posicionamento vertical right: Equivalente a '100%' do posicionamento horizontal bottom: Equivalente a '100%' do posicionamento vertical left: Equivalente a '0%' do posicionamento horizontal. center: Equivalente a '50%' do posicionamento horizontal ou '50%' do posicionamento vertical body {backgroundposition: right top; body {backgroundposition: 100% 0; background Atalho para definir de uma só vez todas as propriedades de imagem de fundo [ <background-color> <backgroundimage> <background-repeat> <backgroundattachment> <backgroundposition> ] Obs.: Valores em negrito são os adotados como padrão e {background: red url("chess.png") repeat-x fixed 50% right;
26 Fontes tipográficas Propriedade Descrição Valores Descrição / Exemplos As seguintes famílias-genéricas de fontes são definidas em CSS2.1: font-family Família(s) de fontes [ [ <nome-fonte> <família-genérica> ] [, <nome-fonte> <família-genérica> ]* ] 'serif' 'sans-serif' 'cursive' 'fantasy' 'monospace' font-style Estilo utilizado na fonte [ normal italic oblique ] e {font-family: "New Century Schoolbook", serif; normal: fonte do elemento sem efeito itálico ou oblíquo italic: fonte do elemento com efeito itálico oblique: fonte do elemento com efeito oblíquo fontvariant Exibe o texto em pequena caixa-alta (versalete) ou fonte normal font-weight Peso da fonte [ normal small-caps ] [ normal bold bolder lighter ] e {font-style: italic; normal: fonte do elemento sem efeito de capitalização small-caps: fonte do elemento com efeito de pequena caixa alta (versalete) e {font-variant: smallcaps; normal: fonte do elemento com efeito padrão de peso (corresponde ao valor 400) bold: fonte do elemento com efeito de negrito (corresponde ao valor 700) bolder: fonte do elemento com o valor de peso imediatamente superior ao do valor herdado (p.ex: de 400 para 500) lighter: fonte do elemento com o valor de peso imediatamente inferior ao do valor herdado (p.ex: de 400 para 300) font-size Tamanho da fonte [ [ xx-small x-small small medium large x-large xx-large] [larger smaller] <tamanho> e {font-weight: bold; medium: fonte do elemento com valor padrão de tamanho e equivalente ao padrão do browser. Os demais valores ( xx-small x-small small large x- large xx-large) são calculados pelo
27 Propriedade Descrição Valores Descrição / Exemplos <porcentagem> ] browser considerando esse valor 'medium'. larger smaller: aumenta ou diminui o tamanho em relação ao valor herdado. tamanho: valor absoluto. Não são permitidos valores negativos. porcentagem: porcentagem do tamanho do valor herdado. e {font-size: 90%; Além dos valores para as propriedades de estilo, variação, peso, tamanho, altura da linha e família, pode-se utilizar os seguintes, de acordo com o ambiente do usuário: font Atalho para definir de uma só vez todas as propriedades de fonte [ [ [ <font-style> <font-variant> <fontweight> ]? <font-size> [ / <line-height> ]? <font-family> ] caption icon menu message-box smallcaption status-bar ] caption: fonte utilizada por controles com legenda (ex.: botões, drop-downs, etc.) icon: fonte utilizada em ícones menu: fonte utilizada em menus do sistema (ex.: dropdown menus e menus suspensos) message-box: fonte utilizada em caixas de diálogo. small-caption: fonte utilizada em controles com legenda reduzida status-bar: fonte utiliza em barra de status das janelas e {font: 300 italic 1.3em/1.7em "Helvetica", sans-serif; Obs.: Valores em negrito são os adotados como padrão Texto Propriedade Descrição Valores Descrição / Exemplos left: alinhamento do texto à esquerda right: alinhamento do texto à direita text-align center: alinhamento do texto Alinhamento do [ left right centralizado texto center justify ] justify: alinhamento do texto justificado e {text-align:
28 Propriedade Descrição Valores Descrição / Exemplos center; text-decoration Efeitos decorativos [ none no texto como [ underline sublinhado, tachado, overline linethrough blink ] ] linha acima e piscante none: não produz decoração no texto do elemento underline: cada linha de texto do elemento terá uma linha abaixo (sublinhado) overline: cada linha de texto do elemento terá uma linha acima line-through: cada linha de texto do elemento terá uma linha cortando-o ao meio (tachado) blink: textos piscantes alternadamente entre visíveis e não visíveis letter-spacing word-spacing text-transform Espaçamento entre caracteres Espaçamento entre palavras Transforma o texto em maiúsculas/minúscu las [ normal <tamanho> ] [ normal <tamanho> ] [ capitalize uppercase lowercase none ] e {text-decoration: underline; e {letter-spacing: 0.1em; e {word-spacing: 1em; capitalize: coloca o primeiro caracter de cada palavra do elemento em maiúsculas (caixa alta) uppercase: coloca todos os caracteres de cada palavra do elemento em maiúsculas (caixa alta) lowercase: coloca todos os caracteres de cada palavra do elemento em minúsculas (caixa baixa) none: não aplica efeitos de capitalização white-space Definições sobre espaços em branco num determinado elemento [ normal pre nowrap pre-wrap pre-line ] e {text-transform: capitalize; normal: utiliza a configuração padrão do browser para espaçamentos em branco pre: todos os espaços em branco presentes no código fonte serão exibidos no elemento nowrap: os espaços em branco serão tratados como 'normal', mas as quebras de linha serão
29 Propriedade Descrição Valores Descrição / Exemplos suprimidas pre-wrap: todos os espaços em branco contantes no código-fonte serão exibidos no elemento pre-line: os espaços em branco serão tratados como normal. e {white-space: pre; Obs.: Valores em negrito são os adotados como padrão Tabelas Propriedade Descrição Valores Descrição / Exemplos separate: as bordas serão renderizadas para cada célula, dado a impressão de linha dupla collapse: as border-collapse bordas das células serão mescladas, dando a impressão de uma única linha border-spacing empty-cells Seleciona o modelo de bordas a ser utilizado Distância entre as bordas de células adjacentes (quando 'bordercollapse=separated') Visibilidade das bordas de células sem conteúdo [ collapse separate ] <tamanho> <tamanho>? [ show hide ] table {border-collapse: collapse; table {border-spacing: 15pt; table {border-spacing: 10pt 5pt; show: exibe as células vazias da tabela hide: não exibe as células vazias da tabela table {empty-cells: hide; Obs.: Valores em negrito são os adotados como padrão Interface de usuário Propriedade Descrição Valores Descrição / Exemplos [ [ [ auto crosshair default cursor Especifica o cursor pointer move e-resize neresize nw-resize n-resize e {cursor:help; se-resize sw-resize s- resize w-resize text wait help progress ] speak-header (Aural) Freqüência once: Os títulos de tabelas [ once always ] em que os 'headers' serão 'falados' uma vez,
30 Propriedade Descrição Valores Descrição / Exemplos antes da série de células always: Os títulos de tabelas serão 'falados' sempre que ocorrer uma célula pertinente da tabela serão pronunciados. Utilizado quando 'media=speech' e {speak-header: always; Um Guia mais detalhado por ser encontrado em :
Sintaxe Básica da Linguagem CSS
Sintaxe Básica da Linguagem CSS Regras - Regra CSS é uma declaração com sintaxe própria, que indica como será aplicado um estilo a um ou mais elementos HTML. Ela é composta por três partes: um seletor,
PROGRAMADOR WEB. PROF. Esp. Andrew H. G. Rodrigues
PROGRAMADOR WEB PROF. Esp. Andrew H. G. Rodrigues CSS - CASCADING STYLE SHEETS Folhas de estilo em cascata Para cada estilo deve ser definido uma regra CSS Cada regra CSS deve utilizar a seguinte sintaxe:
INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO CSS - Cascading Style Sheets Folhas de estilo em cascata Para cada estilo deve ser definido uma regra CSS Cada regra CSS deve utilizar
IFSC/Florianópolis - Prof. Herval Daminelli. De fontes De textos De margens De bordas De preenchimentos (padding) De fundos (background) De links
De fontes De textos De margens De bordas De preenchimentos (padding) De fundos (background) De links Propriedades básicas para fontes: color: cor da fonte font-family: tipo de fonte font-size: tamanho
CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet) André Tavares da Silva andre.silva@udesc.br CSS Folha de Estilo em Cascata Mecanismo simples para adicionar estilos (fontes, cores, espaçamentos, por exemplo) aos documentos
HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo
HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo RESUMO Linguagem de Marcação e Estilo - CSS DESCRIÇÃO Regra CSS Vinculação Inline Vinculação Incorporada Vinculação Externa TAGS seletor
PROGRAMAÇÃO EM AMBIENTE WEB I
PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com CSS As folhas de estilo em cascata são mecanismos usados para adicionar estilos em
06/02/2016 PROGRAMAÇÃO EM AMBIENTE WEB I CSS UM POUCO DE HISTÓRIA
PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com CSS As folhas de estilo em cascata são mecanismos usados para adicionar estilos em
TECNOLOGIAS WEB. Unidade 3 Linguagem de Marcação e Estilo. Luiz Leão
Luiz Leão luizleao@gmail.com http://luizleao.com Conteúdo da Unidade Cascading Style Sheet (CSS) Linguagem CSS Introdução É uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos
Cascading Style Sheets
Cascading Style Sheets PROF. ME. HÉLIO ESPERIDIÃO CSS Cascading Style Sheets (CSS) é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação,
Criando estilos. Css. Cada estilo que você cria é definido como uma regra CSS. Cada regra deve-se utilizar a seguinte sintaxe:
Css CSS (Style Sheets Cascating - Folhas de Estilo em Cascata) é um estilo criado para melhorar a formatação de textos, imagens, links, tabelas, formulários e etc das suas páginas HTML. o CSS também facilita
Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]
![Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]](/thumbs/75/71501484.jpg "Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]")
Recurso Didáctico Formador[a] Sónia Rodrigues UFCD / UC 0793 Scripts CGI e Folhas de Estilo Data 05/05/2009 Contextualização / Objectivos Documentação de apoio Orientação Pedagógica Apontamentos de Folhas
08/11/2012. Tecnologias WEB - CSS. Professor Elisson Lobão
Tecnologias WEB - CSS Professor Elisson Lobão 1 CSS CSS(Cascade Style Sheets) são folhas de estilo que permitem controlar a aparência dos elementos HTML Vantagens: Grande liberdade de formatação Maior
Guia de Referência CSS Volume 1: Parâmetros Básicos Prof. Daniel Caetano
Programação Web 1 Guia de Referência CSS Volume 1: Parâmetros Básicos Prof. Daniel Caetano Objetivo: Apresentar os parâmetros básicos que podem ser modificados com a tecnologia CSS. Bibliografia: W3, 2009;
Web Design - CSS. Conteúdo. - O que é CSS? - Sintaxe CSS - Como inserir CSS em HTML - Propriedades CSS
CSS Web Design - CSS Conteúdo - O que é CSS? - Sintaxe CSS - Como inserir CSS em HTML - Propriedades CSS 01 Assunto: CSS O que é CSS? CSS é a sigla para Cascading Style Sheets, que pode ser traduzida para
Estilo em Aplicações Hipermídia na Web
SCC0265 Sistemas Interativos Web Estilo em Aplicações Hipermídia na Web Renata Pontin M. Fortes (renata@icmc.usp.br) PAE: Willian Watanabe (watinha@gmail.com) Instituto de Ciências Matemáticas e de Computação
Comandos Extras Formatações no CSS
Comandos Extras Formatações no CSS Propriedade 'background-color': A propriedade background-color define a cor do fundo de um elemento. Propriedade 'color': A propriedade color define a cor do primeiro
1) Em um documento separado fora de todos os documentos HTML;
Você pode definir regras de CSS em três lugares. E, por definição, pode utilizar uma combinação dos três métodos nos seus web sites. A maneira como as regras interagem entre si está relacionada à parte
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II Prof. Dr. Daniel Caetano 2012-1 Objetivos Apresentar o CSS como ferramenta de layout de página Capacitar para o posicionamento de elementos com
Cascading Style Sheets CSS
Cascading Style Sheets CSS Sistemas de Informação André Monteiro de Oliveira Restivo E-mail: andre.restivo@fe.up.pt URL: www.fe.up.pt/~arestivo/aulas/sinf André Restivo SINF 2003/2004 CSS: 1 CSS: O que
F E B A C. Exercício de Fixação 3. FACULDADE DE EDUCAÇÃO DE BACABAL FEBAC Credenciamento MEC/Portaria: 472/07 Resolução: 80/07
F E B A C FACULDADE DE EDUCAÇÃO DE BACABAL FACULDADE DE EDUCAÇÃO DE BACABAL FEBAC Credenciamento MEC/Portaria: 472/07 Resolução: 80/07 Curso: Sistemas para Internet Período: 2 o Disciplina: Fundamentos
Tarlis Portela Web Design CSS
Tarlis Portela Web Design CSS Web Design CONCEITOS 01 01 Histórico Quando o HTML foi criado, a intenção não era de forma alguma, formatar informação; A medida que o HTML foi se popularizando e evoluindo,
CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira
![CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira](/thumbs/68/59560005.jpg "CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira")
Desenvolvimento e Design de Websites Prof.: Ari Oliveira Folhas de Estilo em Cascata CSS Localização dos estilos Seletores 2 Faça uma página de trabalhe conosco. Esta página deverá conter um formulário
Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto
Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Folhas de estilos em cascata Objetivo Formatar páginas escritas em HTML baseada nos padrões "Cascading Style Sheets",
INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO A partir do HTML 4.01, o único modo de alterar a letra (cor, tamanho, tipo, etc.) ou o fundo (cor ou imagem) é utilizando o atributo
Introdução à Informática Escola Superior de Tecnologia - Ano Lectivo 2005/06 Prof. Bruno Silva
Introdução à Informática Escola Superior de Tecnologia - Ano Lectivo 2005/06 Prof. Bruno Silva Cascading Style Sheets - (CSS] Introdução Uma Style Sheet é um ficheiro que contém regras que dizem ao browser
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
Exercícios Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho
Exercícios Práticos HTML5 + CSS3 Profa. Flávia Pereira de Carvalho Maio de 2018 1 Exemplos e Exercícios Práticos HTML5 e CSS3 1) Primeiro exemplo: 2) Seletor ID: 3) Seletor de Classe: 2 4) Também é possível
Qual a razão do termo cascata na terminologia CSS? A forma como as regras de estilo são aplicadas obedece a 3 princípios básicos: herança,
Qual a razão do termo cascata na terminologia CSS? A forma como as regras de estilo são aplicadas obedece a 3 princípios básicos: herança, especificidade do seletor e proximidade do elemento estilizado.
CSS: Cascading Style Sheets (folhas de estilo) Pimentel, Morganna BSI - UNIRIO DPW
CSS: Cascading Style Sheets (folhas de estilo) Pimentel, Morganna BSI - UNIRIO DPW 2017.2 1 CSS: ementa Texto Fontes Links Ícones Listas Tabelas DPW 2017.2 2 / 18 CSS: text Definição Formatar o texto quanto
INTRODUÇÃO À PROGRAMAÇÃO EXERCÍCIO DE REVISÃO
INTRODUÇÃO À PROGRAMAÇÃO EXERCÍCIO DE REVISÃO Questões de concurso 1. Na interface Web, ele é um arquivo independente do arquivo HTML no qual são declaradas propriedades e valores de estilização para os
CSS. Karen Frigo Busolin
CSS Karen Frigo Busolin O que é CSS? Significa Cascading Style Sheets Estilos define como mostrar elementos HTML Estilos foram adicionandos no HTML 4.0 Estilos na solução de problemas HTML nunca deve a
#Trabalhando com Texto
INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RIO GRANDE DO NORTE CAMPUS SÃO GONÇALO DO AMARANTE PROGRAMAÇÃO WEB #Trabalhando com Texto Eliezio Soares elieziosoares@gmail.com Aula de Hoje Web
HTML, CSS e JavaScript
HTML, CSS e JavaScript Contato: Site: http://professores.chapeco.ifsc.edu.br/lara/ 1 Arquivo externo Dentro da tag head: 2 Qual a dirença
Introdução ao CSS. Programação para a Internet. Prof. Vilson Heck Junior
Introdução ao CSS Programação para a Internet Prof. Vilson Heck Junior Estilos de Páginas CSS Cascading Style Sheets: Estilos de Página em Cascata (trad. livre); É uma linguagem de estilos Define a apresentação
Exemplos Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho
Exemplos Práticos HTML5 + CSS3 Profa. Flávia Pereira de Carvalho Agosto de 2018 2 1 Exemplos Práticos HTML5 e CSS3 1) Primeiro exemplo: 2) Seletor ID: 3) Seletor de Classe: Profa. Flávia Pereira de Carvalho
Cascading: Style Sheet
André Kawamoto 2010 O que é CSS Cascading: Múltiplos estilos podem se sobrepor para especificar uma variedade de estilos desde um website inteiro até um único elemento. Qual estilo é aplicado diz respeito
08/08/2011 TECNOLOGIAS WEB AULA 10 PROF. RAFAEL DIAS Objetivos: Revisar os princípios de CSS Blocos e Elementos Alinhados com CSS
TECNOLOGIAS WEB AULA 10 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Revisar os princípios de CSS Blocos e Elementos Alinhados com CSS 1 SINTAXE: seletor{ propriedade: valor; Seletor: É o elemento HTML
Uma regra CSS quando válida para vários seletores, estes podem ser agrupados. Exemplo: h1, h2, h3, h4, h5, h6 { color: #00FF00; }
CENTRO PASTORAL, EDUCACIONAL E ASSISTENCIAL DOM CARLOS CPEA Reconhecido de Utilidade Pública pelo Decreto No. 5.692 de 08.11.1967 FACULDADE VIZINHANÇA VALE DO IGUAÇU VIZIVALI DOIS VIZINHOS PARANÁ Criada
Web Design Aula 15: Propriedades CSS
Web Design Aula 15: Propriedades CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Roteiro Propriedades de texto Propriedades de Cores Propriedades de Bordas Propriedades de Listas Cor de
Unidade 4: Introdução à Tecnologia CSS Prof. Daniel Caetano
Programação para Internet Rica 1 Unidade 4: Introdução à Tecnologia CSS Prof. Daniel Caetano Objetivo: Apresentar conceitos de introduzir o uso de Folhas de Estilo em Cascata. Bibliografia: W3, 2009; CASCADE,
CSS CASCADING STYLE SHEET
CSS CASCADING STYLE SHEET CURSO TÉCNICO DE INFORMÁTICA MODALIDADE SUBSEQÜENTE DESENVOLVIMENTO WEB 1 PROF. ALEXANDRO DOS SANTOS SILVA 1 SUMÁRIO Conceito Sintaxe básica Tipos de folhas de estilos 2 1 CSS
Tutoriais CSS, Web Standards, Tableless, Acessibilidade, HTML, XHTML, Padrões Web, por Maurício Samy Silva
CSS Site do Maujor Tutoriais CSS, Web Standards, Tableless, Acessibilidade, HTML, XHTML, Padrões Web, por Maurício Samy Silva :: A propriedade text :: Os textos nos elementos HTML As propriedades para
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I Prof. Dr. Daniel Caetano 2012-1 Objetivos Apresentar o CSS como substituto dos parâmetros visuais do HTML Capacitar para a construção de documentos
Respostas - RESUMO: Questionário CSS. 1) O padrão CSS nasceu para tentar minimizar quais problemas ligados à gestão de conteúdos na web?
Faculdade de Informática de Taquara Disciplina: Autoria e Design na Internet I Profa. Flavia Pereira de Carvalho Respostas - RESUMO: Questionário CSS 1) O padrão CSS nasceu para tentar minimizar quais
Desenvolvimento Web. Professor: Bruno E. G. Gomes
Instituto Federal de Educação Ciência e Tecnologia Curso Técnico Integrado em Informática Campus Currais Novos Desenvolvimento Web CSS Conceitos básicos parte I Professor: Bruno E. G. Gomes 2013 Introdução
13 de dezembro de 2012
ao ao Universidade Federal Fluminense 13 de dezembro de 2012 ao 1 2 3 4 5 6 7 Informações principais ao Quando o HTML surgiu, seu objetivo era especialmente a estruturação de informações na página. Com
[background-color] [background-image] [background-repeat] [background-attachment] [background-position] scroll; fixed.
![[background-color] [background-image] [background-repeat] [background-attachment] [background-position] scroll; fixed.](/thumbs/95/126084976.jpg "[background-color] [background-image] [background-repeat] [background-attachment] [background-position] scroll; fixed.")
Tabela de CSS Propriedades relacionadas com o fundo (background) background background-attachment background-color background-image propriedades de background numa só declaração. Entre cada valor utiliza-se
Permite que o conteúdo e o layout de uma página seja separado do design visual e os elementos de apresentação.
Porque usar css? Cascading Style Sheets (css) sobrepõe as características padrões dos browsers São usadas para melhorar e controlar a aparência de uma página web. Porque usar css? Permite que o conteúdo
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
SIMULADOS & TUTORIAIS
SIMULADOS & TUTORIAIS TUTORIAIS CSS Como inserir códigos CSS em páginas HTML Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte
Treinamento em CSS. Índice
Nível: Básico Horas: 2 Treinamento em CSS Índice Índice...1 Introdução...2 Formantando documentos...2 O que é CSS?...2 Por que utilizar CSS?...2 Separando o sistema em camadas...3 Vinculando um arquivo
INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES CSS INTRODUÇÃO E MANIPULANDO FONTES
INTRODUCAO DESENVOLVIMENTO E DESIGN DE CSS INTRODUÇÃO E MANIPULANDO FONTES Introdução CSS significa Cascading Style Sheetes (Folhas de Estilo em Cascata). Não seria ótimo fazer layouts na sua página sem
IFSC/Florianópolis - prof. Herval Daminelli
Existem cinco pseudoclasses associadas ao estado de um link. São elas: a:link - define o estilo do link no estado inicial; a:visited - define o estilo do link visitado; a:hover - define o estilo do link
XML: uma introdução prática X100. Helder da Rocha
XML: uma introdução prática X100 Helder da Rocha (helder@argonavis.com.br) Atualizado em setembro de 2001 1 Apresentação do XML Por que apresentar os dados? Impressão Web Verificação Edição Soluções Cascading
HTML: Recursos Básicos e Especiais
Linguagem de Programação para Web HTML: Recursos Básicos e Especiais Prof. Mauro Lopes 1-31 34 Objetivo Iremos aqui apresentar os recursos básicos e especiais do HTML. Serão apresentados, o uso de fontes,
Web Design Aula 16: Modelo de Caixa e propriedades de Imagem
Web Design Aula 16: Modelo de Caixa e propriedades de Imagem Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Roteiro Introdução Área de Conteúdo Enchimento Bordas Margens Caixas Propriedades
Este exercício será parecido com a montagem de um projeto real, onde trabalhamos com vários arquivos XHTML e um único arquivo CSS.
Este exercício será parecido com a montagem de um projeto real, onde trabalhamos com vários arquivos XHTML e um único arquivo CSS. 1) Crie uma pasta chamada com_estilo e salve dentro dela os arquivos obrigado.html
Desenvolvimento Web. CSS Conceitos básicos parte I. Professor: Bruno Gomes
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA CURSO TÉCNICO INTEGRADO EM INFORMÁTICA CAMPUS CURRAIS NOVOS Desenvolvimento Web CSS Conceitos básicos parte I Professor: Bruno Gomes 2011 INTRODUÇÃO O
CSS Cascading Style Sheets (Folhas de Estilo em Cascata)
CSS Cascading Style Sheets (Folhas de Estilo em Cascata) Instituto Federal de Educação, Ciência e Tecnologia do Triângulo Mineiro Prof. Edwar Saliba Júnior 1 Parte I CSS Basic 2 CSS Determina como elementos
Aula 3 - Parte Final HTML e CSS
Universidade Federal do Paraná - UFPR 16 de Agosto de 2010 Div 1 Div 2 Div Div Podemos dizer que a função da tag < div > é fazer a divisao dos itens de uma pagina, isto é posicionar os layouts. Para um
Aula 8 Formatando o texto (propriedades)
Aula 8 Formatando o texto (propriedades) Prof. Paulo Cesar F. De Oliveira, BSc, PhD 1 Estilizar o texto? 2 font-family body { font-family: Arial; } dt { font-family: Courier, monospace; } p { font-family:
Desenvolvimento Web CSS Conceitos básicos parte II
Desenvolvimento Web CSS Conceitos básicos parte II Prof.: Bruno E. G. Gomes 2014 Folhas de Estilo Externa Estilos são definidos em um arquivo separado e incorporados à página através da tag link Podem
CASCADING STYLE SHEETS (CSS)
UI MARIA LENIR ARAÚJO MENESES Prof Esp. Leonardo Delgado Aula 02: CASCADING STYLE SHEETS (CSS) Unidade IV Aluno: Data: / / CASCADING STYLE SHEETS (CSS) O CSS é uma linguagem de estilo que foi desenvolvida
CSS Cascading Style Sheets
CSS Cascading Style Sheets Linguagem de Folhas de Estilo Introdução Faz parte da versão 4 do html Utilizado para padronizar os componentes html Pode ser utilizado de três formas: Inline quando é utilizada
Language que em tradução livre resulta em Linguagem Extensível para
6.6 XHTML: XHTML é a sigla em inglês para EXtensible HyperText Markup Language que em tradução livre resulta em Linguagem Extensível para Marcação de Hipertexto, uma aplicação XML, escrita para substituir
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I Prof. Dr. Daniel Caetano 2012-2 Objetivos Apresentar o CSS como substituto dos parâmetros visuais do HTML Apresentar a tag DIV Capacitar para a
Programação para Internet
Universidade Federal de Uberlândia Faculdade de Computação Programação para Internet Curso de Sistemas de Informação Prof. Dr. Daniel A. Furtado Módulo 3 HTML com CSS 2 CSS Cascading Style Sheets É uma
CSS EXTERNO. <head> <link href="estilo.css" type="text/css" rel="stylesheet" /> </head>
CSS DDW CSS EXTERNO O CSS é um arquivo que visa personalizar o modo como seu HTML aparece para o usuário. Ele deve ser chamado dentro da tag no topo do site.
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
CSS: Cascading Style Sheets (folhas de estilo) Pimentel, Morganna BSI - UNIRIO DPW
CSS: Cascading Style Sheets (folhas de estilo) Pimentel, Morganna BSI - UNIRIO 1 CSS: ementa Backgrounds Bordas Margens Padding height e width Box model outline 2 / 18 CSS: Backgrounds
CSS Exercício JCC. Comunicações Digitais e Internet, 2006/07 Jornalismo e Ciências da Comunicação, U.Porto. Sumário
CSS Exercício JCC Comunicações Digitais e Internet, 2006/07 Jornalismo e Ciências da Comunicação, U.Porto Sumário Com este exercício pretende-se apresentar e experimentar o processo de implementação de
Faculdade de Engenharia Departamento de Informática. Composição Web
Folha Prática 5 : CSS OBJECTIVO: O objetivo desta ficha é familiarizar-se com as folhas de estilos encadeados (Cascade Style Sheets CSS). RECOMENDAÇÕES: Sempre que necessário, procure informação adicional
Desenvolvimento de Aplicações para Internet
Desenvolvimento de Aplicações para Internet CSS Celso Olivete Júnior olivete@fct.unesp.br HTML Formatando o documento... Formulário Responsável por fazer a interação entre os dados fornecidos pelo usuário
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
HTML BÁSICO E TEMPLATE VIEW. Gabrielle Amorim Porto
HTML BÁSICO E TEMPLATE VIEW Gabrielle Amorim Porto HTML BÁSICO E TEMPLATE VIEW Hypertext Markup Language Linguagem de marcação de hipertexto; Descreve a estrutura das páginas Web utilizando tags. HTML
Módulo 17E. Revisões de HTML. A) Noções básicas de HTML
Módulo 17E Revisões de HTML A) Noções básicas de HTML Estrutura básica de um documento Um documento HTML começa com a tag de abertura e termina com a tag de fecho . De seguida, temos a considerar
INTRODUÇÃO AO DESENVOLVIMENTO FRONT-END COM HTML, CSS E JAVASCRIPT
v1.2 06/04/2017 INTRODUÇÃO AO DESENVOLVIMENTO FRONT-END COM HTML, CSS E JAVASCRIPT AULA 4 CSS E CONSTRUÇÃO DE LAYOUTS (PARTE 1) Eder Franco @ FPF Tech The road so far... HTML Linguagem de marcação. Estrutura
Modelo de formateo visual em CSS
Programação Web Modelo de formateo visual em CSS Conferencia 6 MSc. Yoenis Pantoja Zaldívar Recordando Atributos das caixas largura borde margen fundo altura recheio Resumo Tipos de posicionamento. Visualização
Programação para Internet
Universidade Federal de Uberlândia Faculdade de Computação Programação para Internet Módulo 3 HTML com CSS Prof. Dr. Daniel A. Furtado Introdução e Inserção de Código CSS 2 3 CSS Cascading Style Sheets
Recursos Complementares (Tabelas e Formulários)
Linguagem de Programação para Web Recursos Complementares (Tabelas e Formulários) Prof. Mauro Lopes 1-31 30 Objetivo Nesta aula iremos trabalhar o conceito de tabelas e todas as tags associadas ao seu
Programação para Internet I 6. CSS. Nuno Miguel Gil Fonseca
Programação para Internet I 6. CSS Nuno Miguel Gil Fonseca nuno.fonseca@estgoh.ipc.pt O HTML apenas fornece um controle limitado sobre a formatação das páginas Em HTML deve definir-se principalmente estrutura,
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
CSS Folha de Estilo em Cascatas
O que é CSS? CSS é a abreviatura para Cascading Style Sheets. Folha de Estilos em Cascata. CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores,
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II Prof. Dr. Daniel Caetano 2012-2 Objetivos Aresentar seudo-elementos e seudo-classes do CSS Aresentar o CSS como ferramenta de layout de ágina
Informática Parte 21 Prof. Márcio Hunecke
Escriturário Informática Parte 21 Prof. Márcio Hunecke Informática CSS 3 É no CSS (Cascading Style Sheets) que se define estilos para páginas web com efeitos de transição, imagem, e outros, que dão um
Curso CSS - Cascading Style Sheets
Seja bem Vindo! Curso CSS - Cascading Style Sheets CursosOnlineSP.com.br Carga horária: 50 hs Conteúdo programático: Introdução Entendendo Style Sheets Como Criar Estilos As Folhas de Estilos Adicionar
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I Prof. Dr. Daniel Caetano 2013-1 Objetivos Apresentar o CSS como substituto dos parâmetros visuais do HTML Capacitar para a construção de documentos
<head> <title> Uso de Imagem </title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=iso " /> </head>
1. Digite a seguinte página e salve como imagem_01.html. 2. Digite a seguinte página e salve como imagem_02.html. img.imagem1 {border: solid;} img.imagem2 {border:
COM222 DESENVOLVIMENTO DE SISTEMAS WEB. Aula 01: HTML e CSS
COM222 DESENVOLVIMENTO DE SISTEMAS WEB Aula 01: HTML e CSS 2 Conteúdo Noções introdutórias HTML CSS HTML: HyperText Markup Language 3 Linguagem usada para construir páginas Web Função principal Estruturar
Aula 3. Imagens. <img src="foto.jpg" />
Aula 3 Imagens Para inserir uma imagem na página utilizamos a tag
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
AULA 02 Introdução (HTML, CSS e Javascript) PROGRAMAÇÃO PARA WEB Marcelo Henrique dos Santos
AULA 02 Introdução (HTML, CSS e Javascript) Mestrado em Educação (em andamento) MBA em Negócios em Mídias Digitais MBA em Marketing e Vendas Especialista em games : Produção e Programação Bacharel em Sistema
A diferença entre um site que implementa CSS e outro que não o usa é gigantesca e notável.
Aula 02 - Introdução ao css ( folhas de estilo ) CSS é a sigla para o termo em inglês Cascading Style Sheets que, traduzido para o português, significa Folha de Estilo em Cascatas. O CSS é fácil de aprender
Desenvolvimento WEB1 Aula 03 Profa Wanessa Machado do Amaral
Desenvolvimento WEB1 Aula 03 Profa Wanessa Machado do Amaral Surgimento do CSS Na aula passada tivemos uma breve introdução ao CSS Os documentos web, cada vez mais sofisticados e extensos, estavam fugindo
HTML (HyperText. Markup Language)
Pontifícia Universidade Católica do Rio Grande do Sul PUCRS Faculdade de Informática HTML (HyperText Markup Language) Prof. Fabiano Passuelo Hessel Profª. Leticia Lopes Leite Julho de 2002. 1. Introdução