Programação para Internet I 6. CSS. Nuno Miguel Gil Fonseca
|
|
|
- Caio Bergmann Regueira
- 6 Há anos
- Visualizações:
Transcrição
1 Programação para Internet I 6. CSS Nuno Miguel Gil Fonseca nuno.fonseca@estgoh.ipc.pt
2 O HTML apenas fornece um controle limitado sobre a formatação das páginas Em HTML deve definir-se principalmente estrutura, não formato As CSS (Cascading Style Sheets) foram criadas para tratar das formatações dos conteúdos Numa CSS descreve-se a forma como os documentos devem ser apresentados ao utilizador (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 2
3 Permitem controlar um sem número de propriedades dos elementos constituintes de uma página web Toda a linha gráfica de uma página web pode ser centrada num único ficheiro Podemos por outro lado, ter várias style sheets aplicadas a uma mesma página web As regras são aplicadas de forma hierárquica (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 3
4 Exemplo de formatação em HTML Uma das formas de fazer o mesmo com CSS Outra... <p><font face="arial" size="2">texto</font></p> <p style="font-family: Arial; font-size: 10pt">Texto</p>... <head> <style> p.texto{font-family: Arial; font-size: 10pt }</style> </head>... <p class="texto">texto</p>... (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 4
5 A definição de Cascading Style Sheets Uma regra de estilo é constituída por duas partes: Selector - Ligação entre o documento HTML e o estilo Declaração - Descreve o efeito da regra (propriedade : valor) Propriedade Atributo que o selector tem Valor Valor para o atributo selector declaração p.texto{ font-family: Arial; font-size: 10pt } propriedade valor (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 5
6 Regras Podem ser utilizados vários selectores numa mesma regra h1 {font-weight: bold} h2 {font-weight: bold} h3 {font-weight: bold} h1, h2, h3 {font-weight: bold} As declarações podem também ser agrupadas numa regra h1 {color: red} h1 {text-align: center} h1 {color: red; text-align: center} É possível (e muito recomendável) usar comentários como nas linguagens C, Java, etc. /* Comentário */ (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 6
7 As diferentes formas de definir uma Style Sheet Pontuais Aplicação de um estilo pontualmente a uma única tag Utiliza-se um atributo universal a todas as tags, o atributo style <p style="color: red"> Texto </p> Usar se o site tiver apenas um ficheiro, ou então não usar nunca!! (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 7
8 As diferentes formas de definir uma Style Sheet (continuação...) Internas As definições são feitas no cabeçalho do documento a formatar utilizando a tagstyle As formatações são colocadas entre as tags de início e fecho de style definição <style> uso <p class="texto">texto</p>.texto { color: red } </style> Usar se o site tiver poucos ficheiros, ou então não usar nunca!! (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 8
9 As diferentes formas de definir uma Style Sheet (continuação...) Externas A style sheet é definida num ficheiro à parte Estes ficheiros só podem conter regras CSS, comentários e espaços A sua referência deve ser incluída entre as tags<head> e </head> usando para tal a tag link <link rel="stylesheet" type="text/css" href="estilo.css" /> Usar sempre!!! (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 9
10 Definições de selectores Global Aplicação de um estilo a uma tag especifica Define-se que sempre que uma certa tag seja utilizada, esta deve ser formatada de uma forma específica Aconselhada por razões de retrocompatibilidade As tags têm valores por defeito associadas aos seus atributos Os estilos modificam esses valores (ou alguns deles) a {color: red; text-decoration: none; } <a href="xpto.html">... </a> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 10
11 Definições de selectores (continuação...) Definição Específica O estilo é definido antes, sendo posteriormente atribuído individualmente a qualquer tag É necessário indicar expressamente o nome do estilo na tag sempre que se pretender usar Definição de estilo começa por um ponto e pelo nome dado ao estilo Aplicável apenas em elementos de um determinado tipo p.nome_do_estilo { color: blue; text-decoration: underline; } <p class="nome_do_estilo">... </p> Aplicável a todos os elementos.nome_do_estilo { color: blue; text-decoration: underline; } <p class="nome_do_estilo">... </p> <td class="nome_do_estilo">... </tr> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 11
12 Definições de selectores (continuação...) Definição para uma única instância de um elemento Por vezes é necessário aplicar determinada formatação a uma única instância de um elemento de XHTML. Nessas situações, recorre-se ao símbolo #. #identificador_do_elemento { color: blue; text-decoration: underline; } <p id="identificador_do_elemento">... </p> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 12
13 Definições de selectores (continuação...) Por vezes queremos aplicar uma formatação a um determinado tipo de elementos que se encontrem num determinado contexto Por exemplo, podemos querer aplicar uma determinada formatação apenas aos parágrafos que estejam dentro de células de tabelas. table tr td p { color: blue; } <p>não se aplica aqui!</p> <table> <tr> <td> <p> Aplica-se aqui! </p></td> </tr> </table> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 13
14 Formatações Texto É possível especificar um grande número de características do texto, tal como num processador de texto Existe um grande número de atributos e valores respectivos font-size especifica o tamanho das letras font-family fonte a utilizar (ou a sua família, ex: Arial, Times, Courier, Verdana, ) font-weight normal ou bold font-style normal ou italic font-variant normal ou small-caps. text-decoration none, underline, overline, linethrough, blink line-height espaço entre as linhas de texto (ex. 10px, 10%) (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 14
15 Formatações Texto text-align left, center, right, justified vertical-align top, bottom text-indent indentação a dar ao texto (ex. 10px, 10%) letter-spacing normal ou valor para afastamento entre letras (ex. 10px, 10%) text-transform none, capitalize, uppercase ou lowercase (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 15
16 Formatações (cont.) Texto (cont.) Também é possível usar a definição abreviada mediante a seguinte ordem: font-style font-variant font-weight fontsize font-family p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; } p { font: italic bold 30px arial, sans-serif; } (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 16
17 Formatações (continuação...) Cores e Fundos As cores e fundos podem ser aplicados a texto, tabelas e páginas As cores podem ser especificadas em RGB, em hexadecimal ou pelo seu nome (não muito indicado, pois os nomes podem variar de plataforma para plataforma) color: rgb(255,0,0), color: #FF0000, color: red color cor a atribuir ao elemento background define o fundo como cor ou imagem background-color cor de fundo background-image: url(...) imagem de fundo (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 17
18 Formatações (continuação...) Cores e Fundos background-attachment fixed (fundo permanece fixo quando página rola para baixo), scroll (fundo acompanha página) background-position top, bottom, center, left, right background-repeat - repeat-x, repeat-y, no-repeat (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 18
19 Formatações (continuação...) Imagens como background Permite usar imagens de fundo de diferentes formas para além do tradicional mosaico. body { background-color: #FFFFFF; background-image: url(../path/file.png); background-attachment: scroll; background-repeat: no-repeat; background-position: 0% 0%; } também se pode usar a definição abreviada segundo a seguinte ordem: [background-color] [background-image] [backgroundrepeat] [background-attachment] [background-position]. body { background: #FFFFFF url(../path/file.png) scroll no-repeat;} (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 19
20 Formatações (continuação...) Unidades Propriedades numéricas permitem especificar unidades px: pixéis pt: pontos (1/72 de polegada) pc: picas (1/16 de polegada) em: a altura dos elementos do tipo de letra ex: a altura de um x pequeno in: polegadas (1 polegada=2,54 cm) mm: milímetros cm: centímetros %: percentagem (relativa à janela do browser) (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 20
21 Formatações (continuação...) Outras propriedades border-width Permite definir a espessura da border border-style Permite definir o estilo da border: dotted; dashed; solid; double; groove; ridge; inset; outset border-color Permite definir a cor da border div { border-width: 3px; border-style: dotted; border-color: red; } Poderá igualmente ser usada a definição abreviada: div { border: 3px dotted red; } (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 21
22 Formatações (continuação...) Outras propriedades (continuação ) border Permite definir a border total de uma tabela e/ou célula border-top Permite definir a border de cima de uma tabela e/ou célula border-bottom Permite definir a border de baixo de uma tabela e/ou célula border-left Permite definir a border da esquerda de uma tabela e/ou célula border-right - Permite definir a border da direita de uma tabela e/ou célula (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 22
23 Formatações (continuação...) Outras propriedades (continuação...) width permite especificar a largura de tabelas/células height permite especificar altura de tabelas/células padding permite especificar a distância entre as margens das células e os conteúdos das mesmas Variantes: padding-top; padding-right; padding-bottom; padding-left td { padding: 3px 3px 3px 3px; } margin permite especificar a margem do documento. Variantes: margin-top; margin-bottom; margin-right; marginleft (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 23
24 Alteração de cursores É possível alterar o cursor em função do elemento sobre o qual ele se encontra <style>.nomedoestilo { cursor:auto } elemento { cursor:auto } </style> Estão disponíveis os seguintes cursores url, auto, crosshair, default, pointer, move, e-resize, neresize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 24
25 Cursores personalizados A imagem a definir como cursor deverá ser do tipo *.cur Algumas ferramentas de edição de imagem suportam este formato cursor:url(micro.cur) Também é possível alterar a imagem que surge na barra de endereços (mas não é possível fazê-lo através de CSS) <head> <link A rel="icon" imagem href=" deverá ter o tamanho 16x16 type="image/x-icon" /> <link rel="shortcut icon" href=" type="image/x-icon" /> </head> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 25
26 Tabelas Posicionamento da legenda das tabelas Permite especificar se a legenda das tabelas será apresentado em cima ou em baixo da tabela (por defeito é em cima) caption{ caption-side:bottom; } Alterar o espaçamento entre as células das tabelas (equivalente à propriedade cellspacing) table{ border-collapse:separate; border-spacing:10px; } (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 26
27 Instruções para impressora Muitas vezes podemos necessitar de formatar páginas de modo a serem preparadas para serem envidas para a impressora. Uma das coisas que é possível fazer é definir quebras de página, que resultam em passar para uma página nova. As propriedades disponíveis são: page-break-after, page-break-before, print { table {page-break-after:auto} } (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 27
28 Recorte de imagens Por vezes não podemos (ou não pretendemos) mostrar uma imagem na sua totalidade, mas também não queremos ter diferentes versões da mesma imagem. Para isso recorre-se à propriedade clip. clip: rect(top right bottom left) img { position:absolute; clip:rect(100px,200px,200px,100px); } <img src="estgoh_gif.gif" width="306" height="234" /> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 28
29 Pseudo classes first-child Permite aplicar uma determinada formatação apenas ao primeiro filho de um determinado elemento div > p:first-child { font-weight:bold } <div> <p>primeiro elemento</p> <p>segundo elemento</p> </div> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 29
30 Pseudo classes (continuação ) link, visited, active, hover, focus Permite aplicar uma determinada formatação de acordo com o estado de um determinado elemento a:link {color: red; text-decoration: none; } a:active {color: red; text-decoration: none; } a:visited {color: yellow; text-decoration: none; } a:hover {color: green; text-decoration: underline; } td:hover {background-color:#f5f5f5} (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 30
31 Destaques Por vezes é necessário dar algum destaque a um pedaço de texto ou a um campo de formulário. Nessas situações poderá ser utilizada a propriedade outline em conjugação com a pseudo classe focus. Como variantes existem as propriedades outlinewidth, outline-style, outline-color. input:focus { outline-width: 3px; outline-style: solid; outline-color: black } input:focus {outline: 3px solid black} (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 31
32 Pseudo classes (continuação ) after, before Permite inserir conteúdo automaticamente antes ou depois do elemento à qual for aplicada a formatação. p.special:before {content: "novidade! "} p.special:after {content: "novidade! "} Os browsers actuais não suportam!! Portanto, não usem!! (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 32
33 Pseudo elementos first-letter Permite aplicar determinadas formatações apenas à primeira letra de um elemento p:first-letter {font-size:30} <p> Texto </p> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 33
34 Pseudo elementos (continuação...) first-line Permite aplicar determinadas formatações apenas à primeira linha de um elemento p:first-line {color: #0000FF; font-variant: small-caps} <p> Primeira linha <br /> Segunda linha </p> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 34
35 Listas Permitem formatar os itens das listagens list-style-type Valores possíveis: disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha. list-style-image Permite especificar uma imagem como o símbolo que precede cada um dos itens da imagem ul { list-style-image: url(" } list-style-position Permite indicar a forma como o texto de um item se comporta aquando de uma mudança de linha. Valores possíveis: outside e inside Poderá igualmente usar-se a definição abreviada ul { list-style: url(" disc} (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 35
36 Listas Como apresentar uma listagem na horizontal Recorrendo à propriedade display ul li { display: inline; } (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 36
37 Propriedades das scroll-bars Permitem aplicar determinadas formatações às cores das scroll-bars scrollbar-3d-light-color: #ff8000; scrollbar-arrow-color: #000080; scrollbar-base-color: #000080; scrollbar-dark-shadow-color: #24369C; scrollbar-face-color: #99B3CC; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #24369C; (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 37
38 Tipos de media Permite definir estilos diferentes consoante o meio usado para visualizar as tipodemedia{ estilos a aplicar } Principais tipos de media all - usado em todos os dispositivos aural - usado por sintetizadores de voz braille -usado em dispositivos tacteis de braille embossed - usado para impressão em braille handheld - usado em dispositivos móveis print - usado para impressoras normais screen - usado em ecrãs de computador tv - usado em televisões (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 38
39 Layouts sem uso de tabelas Na maior parte das páginas web existentes, a definição do aspecto gráfico das páginas assenta no uso de tabelas É no entanto possível construir layouts elaborados sem recorrer ao uso de tabelas... usando apenas HTML (XHTML) e CSS Poderá não ser possível construir layouts tão complexos como se passa com o uso de tabelas, no entanto, torna o desenvolvimento de páginas web muito mais simples, torna as páginas mais fáceis de manter e até mais fáceis de ler e interpretar pelos browsers Para além do mais, as páginas têm muito menos código, logo, ocupam menos espaço. (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 39
40 Layouts sem uso de tabelas (continuação...) Exemplo (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 40
41 Layouts sem uso de tabelas (continuação...) Exemplo (continuação...) Com tabelas <html> <head> <title>pagina</title> <link rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> <table> <tr> <td colspan="2" class="top">a minha página pessoal</td> </tr> <tr> <td class="menu"> Página principal<br /> Hobbies<br /> Contactos<br /> Links<br /> </td> <td class="content">conteudo</td> </tr> <tr> <td colspan="2" class="footer">rodape</td> </tr> </table> </body> </html>.top { width:400px; padding:10px; font-size:10px; background-color:blue; border:1px solid #000000; }.menu { vertical-align:top; width:100px;height:300px; padding:10px;font-size:10px; background-color:#f5f5f5; border:1px solid #000000; }.content { vertical-align:top; width:300px;height:300px; padding:10px; font-size:10px; background-color:red; border:1px solid #000000; }.footer{ width:400px; padding:10px; font-size:10px; background-color:yellow; border:1px solid #000000; } (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 41
42 Layouts sem uso de tabelas (continuação...) Exemplo (continuação...) Sem tabelas <html> <head> <title>pagina</title> <link rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> <div class="top">a minha página pessoal</div> <div class="menu"> Página principal</br /> Hobbies<br /> Contactos<br /> Links<br /> </div> <div class="content">conteudo</div> <div class="footer">rodapé</div> </body> </html> div.top { width:300px; font-size:10px; padding:10px; background-color:blue; border:1px solid #000000; } div.menu { float:left; margin-top: 2px; width:100px; height:300px; font-size:10px; padding:10px; background-color:#f5f5f5; border:1px solid #000000; } div.content { float: left; margin-top: 2px;margin-left:2px; width:198px; height:300px; font-size:10px; background-color:red; border:1px solid #000000; } div.footer { clear: both; margin-top: 2px; width:300px;height:30px; font-size:10px; background-color:yellow; border:1px solid #000000; } (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 42
43 Layouts sem uso de tabelas (continuação...) As páginas que não usam tabelas são mais simples de programar, no entanto, requer habituação... O conteúdo é inserido em containers div em vez de td <table> <tr> <td class= xxxx > conteúdo </td> </tr> </table> <div clas="xxxx"> conteúdo </div> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 43
44 Layouts sem uso de tabelas (continuação...) Principais propriedades position (relative, absolute) permite definir se os valores de posição são relativos aos containers em que se incluem ou relativos ao início da janela top, bottom, left, right permitem especificar a distância da div em relação ao topo, ao fundo, à esquerda e à direita da janela. width, height permitem especificar o comprimento e altura da div visibility (visible, hidden) permite que uma div não esteja visível overflow (visible, scroll, auto, hidden) permite especificar o que acontece caso o conteúdo exceda o tamanho da div (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 44
45 Layouts sem uso de tabelas (continuação...) Principais propriedades (continuação) float (left, right, none) permite definir a forma como alguns elementos flutuam, isto é, a forma como se comportam os elementos numa situação de redimensionamento de janela de browser. Apenas se aplica a elementos que não sejam posicionados absolutamente. display (none, block, inline, ) define se e como um elemento é apresentado clear (left, right, both, none ) - Esta propriedade especifica em que lados de um elemento não são admitidos elementos float (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 45
46 Layouts sem uso de tabelas (continuação...) Principais propriedades (continuação) min-width, max-width permite especificar que no mínimo/máximo uma div terá uma determinada largura. Tenha em atenção que estas duas propriedades poderão ser utilizadas em conjunto, no entanto, não poderão ser utilizados juntamente com a propriedade width. min-height, max-height permite especificar que no mínimo/máximo uma div terá uma determinada altura. Tenha em atenção que estas duas propriedades poderão ser utilizadas em conjunto, no entanto, não poderão ser utilizados juntamente com a propriedade height. (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 46
47 Layouts sem uso de tabelas (continuação...) O box-model (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 47
48 Layouts sem uso de tabelas (continuação...) O box-model (continuação) Propriedades envolvidas margin-top, margin-right, margin-bottom, margin-left e margin padding-top, padding-right, padding-bottom, padding-left e padding border-top-width, border-right-width, border-bottom-width, borderleft-width e border-width border-top-color, border-right-color, border-bottom-color, borderleft-color e border-color border-top-style, border-right-style, border-bottom-style, borderleft-style e border-style border-top, border-right, border-bottom, border-left e border (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 48
49 Conceitos avançados (continuação...) z-index Permite especificar a ordem pela qual são apresentados elementos sobrepostos (quanto maior o número, mais para cima será apresentado) div.class1{ position:absolute; top: 100px; left: 100px; width:100px; background-color: red; z-index:1; } div.class2{ position:absolute; top: 115px; left: 100px; width:100px; background-color: blue; z-index:2; } <div class="class1">um</div> <div class="class2">dois</div> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 49
50 Conceitos avançados (continuação...) Filtros Com CSS podemos aplicar alguns filtros a texto/imagem O grande problema é que esses filtros só irão funcionar correctamente em alguns browsers, nomeadamente, no Internet Explorer. Filtros disponíveis Alpha Channel Motion Blur Chroma Drop Shadow Flip Glow GrayScale Invert (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 50
51 Conceitos avançados (continuação...) Filtros (cont.) Filtros disponíveis (cont.) Mask Shadow Wave X-Ray Chaining Filters (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 51
52 Conceitos avançados (continuação...) Filtros (cont.) Alpha Channel <img src="images/sunface.gif" style="filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)"> <span style="width: 357; height: 50; fontsize: 36pt; font-family: Arial Black; color: red; Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">"SunShine!"</span> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 52
53 Conceitos avançados (continuação...) Filtros (cont.) Motion Blur <img src="images/sunface.gif" style="filter: Blur(Add = 0, Direction = 225, Strength = 10)"> <span style="width: 357; height: 50; fontsize: 36pt; font-family: Arial Black; color: red; Filter: Blur(Add = 1, Direction = 225, Strength = 10)">"SunShine!"</span> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 53
54 Conceitos avançados (continuação...) Filtros (cont.) Drop Shadow Chroma <span style="width: 357; height: 50; fontsize: 36pt; font-family: Arial Black; color: blue; Filter: DropShadow(Color=#FF0000, OffX=2, OffY=2, Positive=1)">"SunShine!"</span> <span style="width: 580; height: 50; fontsize: 36pt; font-family: Arial Black; color: red; Filter: Chroma(Color = #FF0000)">"SunShine!"</span> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 54
55 Conceitos avançados (continuação...) Filtros (cont.) Flip <span style="width: 300; height: 50; fontsize: 36pt; font-family: Arial Black; color: red; Filter: FlipV">"SunShine!" </span> Glow <span style="width: 357; height: 50; fontsize: 18pt; font-family: Arial Black; color: red; Filter: Glow(Color=#00FF00, Strength=20)">"A Green Glow!"</span> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 55
56 Conceitos avançados (continuação...) Filtros (cont.) Greyscale <img src="images/flood85_1.jpg" style="filter: Gray"> Invert <img src="images/flood85_1.jpg" style="filter: Invert"> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 56
57 Conceitos avançados (continuação...) Filtros (cont.) Wave X-ray <img src="images/flood85_1.jpg" style="filter: Chroma(Color = #000000) Wave(Add=0, Freq=5, LightStrength=20, Phase=220, Strength=10)"> <img src="images/flood85_1.jpg" style="filter: Xray"> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 57
58 Para mais informações (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 58
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
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,
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
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
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
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
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
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
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;
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
[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
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
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
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
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
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
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
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
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
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,
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,
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
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,
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
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 À PROGRAMAÇÃO EXERCÍCIO DE REVISÃO
INTRODUÇÃO À PROGRAMAÇÃO EXERCÍCIO DE REVISÃO Questões de concurso 1. Na interface Web, ele é um arquivo independente do arquivo HTML no qual são declaradas propriedades e valores de estilização para os
Introdução ao HTML e às folhas de estilo (CSS)
MIEEC SIEM ano letivo 2013/14 Introdução ao HTML e às folhas de estilo (CSS) José A. Faria (jfaria@fe.up.pt) FEUP, DEIG Setembro 2013 MIEEC SIEM --- 1 --- José António Faria Introdução ao protocolo HTTP
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
Aula 3 - Parte Final HTML e CSS
Universidade Federal do Paraná - UFPR 16 de Agosto de 2010 Div 1 Div 2 Div Div Podemos dizer que a função da tag < div > é fazer a divisao dos itens de uma pagina, isto é posicionar os layouts. Para um
CSS 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
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.
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
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
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
#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
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
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
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
Aula 5 Cabeçalhos, Imagens e Links
Roteiro Aula 5 Cabeçalhos, Imagens e Links Efeitos em cabeçalhos Imagens e CSS Links Curso: Técnico em Informática / 2º Módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Efeitos
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
Introdução a HTTP, HTML e CSS
MIEEC SIEM ano letivo 2014/15 Introdução a HTTP, HTML e CSS José A. Faria (jfaria@fe.up.pt) FEUP, DEGI Setembro 2014 1. Introdução ao protocolo HTTP Introdução A WEB -worldwideweb é um sistema global de
HTML. HyperText Markup Language. v Rui Menino. Tags de marcação. Referência. (Linguagem de marcação de hypertext)
HTML HyperText Markup Language (Linguagem de marcação de hypertext) Tags de marcação Referência v1.1 2008-2017 Rui Menino tags Para formatar e paginar o texto dentro de uma página html, foi definido o
Exercícios Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho
Exercícios Práticos HTML5 + CSS3 Profa. Flávia Pereira de Carvalho Maio de 2018 1 Exemplos e Exercícios Práticos HTML5 e CSS3 1) Primeiro exemplo: 2) Seletor ID: 3) Seletor de Classe: 2 4) Também é possível
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
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
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
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",
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 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
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
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
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
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
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
Teste de avaliação de frequência Parte Prática
Abaixo está uma proposta de solução para os exercícios do teste de avaliação de frequência às aulas práticas. Se tem dúvidas sobre esta resolução, fale com o seu Professor. GRUPO I HTML 1. CrieumHTMLcom3tiposdiferentesdelistasnãonumeradas.
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
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
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
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
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
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.
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,
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
CSS - Cascading Style Sheets
Universidade Federal do Espírito Santo Centro de Ciências Agrárias CCA UFES Departamento de Computação CSS - Cascading Style Sheets Desenvolvimento de Sistemas para WEB Site: http://jeiks.net E-mail: jacsonrcsilva@gmail.com
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:
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
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
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
2/23/10. Programa. Bibliografia, etc. Aula 1. Métodos & Tecnologias
Aula 1 39 Programa Métodos & Tecnologias Conceitos de IHC Programação web client side Concepção centrada no utilizador Model-based design Programação web server side Avaliação de interfaces 40 Bibliografia,
CSS. Sérgio Nunes. Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13
CSS Sérgio Nunes Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13 1 Objetivos Conhecer as origens e os objetivos da linguagem CSS. Conhecer a estrutura base de uma regra CSS. Compreender
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
CSS Folha de Estilo em Cascatas
O que é CSS? CSS é a abreviatura para Cascading Style Sheets. Folha de Estilos em Cascata. CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores,
Desenvolvimento 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
MODELO DE CAIXA (BOX MODEL)
Programação Web MODELO DE CAIXA (BOX MODEL) Conferencia 5 MSc. Yoenis Pantoja Zaldívar MODELO DE CAIXA (BOX MODEL) ( ) comportamento de CSS que provoca que todos os elementos incluidos numa página HTML
Posicionamento, dimensões e outros elementos de HTML5 e CSS3
R o q u e F e r n a n d o G l a u c i o D a n i e l Te c h n o E d i t i o n E d i t o r a L t d a Posicionamento, dimensões e outros elementos de HTML5 e CSS3 Posicionamento, dimensões e outros elementos
HTML & CSS. uma introdução
HTML & CSS uma introdução HTML hypertext markup language CSS cascading style sheet linguagem de marcação que dá ao conteúdo estrutura e significado linguagem de estilo que dá ao conteúdo estilo e aparência
Inúmeras são as vantagens do uso das CSS nos documentos Web. Eis uma relação das principais:
O que significa a sigla CSS? CSS é a sigla para Cascading Style Sheets que em português foi traduzido para folhas de estilo em cascata e nada mais é que um documento desenvolvido em uma linguagem de programação
<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:
DIV 1 DIV 2 DIV 3 DIV 4 DIV 5
Posicionamento CSS Esquema normal ou fluxo normal é o esquema padrão de posicionamento dos boxe. Segundo as regras desse esquema, elementos de nível de bloco são colocados em sequencia vertical, dentro
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
Aula 3. Imagens. <img src="foto.jpg" />
Aula 3 Imagens Para inserir uma imagem na página utilizamos a tag
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
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
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:
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
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
Faculdade de Engenharia Departamento de Informática. Composição Web
Folha Prática 6: CSS OBJECTIVO: Neste laboratório iremos continuar a trabalhar com Cascade Style Sheets na formatação de uma página muito simples, que apenas contém um título e uma lista desordenada que
Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013
Efeito cascata Aula 4 Modelo CSS Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Fontes das folhas de estilo Autor Usuário Agente do usuário
CSS - Cascading Style Sheets
CSS - Cascading Style Sheets CSS É uma linguagem que define o estilo da informação apresentada em uma página Web. Sendo a informação: Imagem, Texto, Vídeo, Áudio, ou qualquer outro elemento criado. Traz
UNIGUAÇU Unidade de Ensino Superior Vale do Iguaçu APOSTILA DE CSS. Prof. Cleverson B. Klettenberg
UNIGUAÇU Unidade de Ensino Superior Vale do Iguaçu APOSTILA DE CSS Prof. Cleverson B. Klettenberg União da Vitória 2014 Sumário 1. INTRODUÇÃO AO CSS...3 1.2. O que é CSS?...3 1.3 Como Criar Estilos...3
Vamos ver como fica no código HTML e CSS na Listagem 1 abaixo:
Título: Alinhamento Central com CSS Descrição: Neste artigo serão mostrados os atributos e recursos necessários para alinhamentos de elementos inscritos no HTML, que no caso é o CSS. Login: alcideswenner