A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

ESCM Desenvolvimento Web I

Apresentações semelhantes


Apresentação em tema: "ESCM Desenvolvimento Web I"— Transcrição da apresentação:

1 ESCM Desenvolvimento Web I
CSS - Cascating Styles Sheet Professor Horácio Soares Tel.:

2 CSS – Cascating Styles Sheet
Trata-se de um padrão de formatação para páginas web que vai além das limitações impostas pelo html. Proposto pelo W3 Consortium <http://www.w3.org> - uma espécie de comitê que define os padrões de programação para a WWW - o CSS foi introduzido pela primeira vez pela Microsoft, no lançamento do Internet Explorer 3.0. 01

3 CSS – Cascating Styles Sheet
A style sheet consiste em uma ou mais regras que descrevem como os elementos de uma página Web, que correspondem particularmente aos Tags HTML serão apresentados (displayed). Toda regra em CSS tem duas partes, o Seletor e a declaração. H1 {color : purple;} seletor declaração propriedade valor 02

4 CSS – Cascating Styles Sheet
Exemplos: body { color: black; } p { font-family: sans serif; } p { text-align:center;} 03

5 CSS – Cascating Styles Sheet
Como adicionar Style Sheet ao HTML:  Inline Style Sheet Esta forma de aplicar CSS em documentos HTML perde algumas das vantagens de sua aplicação misturando conteúdo e apresentação. Utilize este método com parcimônia. Para utilizar estilos Inline, aplique o atributo “style” nos tags HTML. O atributo poderá conter qualquer propriedade CSS. Veja a aplicação abaixo: <p style="color: sienna; margin- left: 20px;"> Isto é um parágrafo... </p> 04

6 CSS – Cascating Styles Sheet
Como adicionar Style Sheet ao HTML:  Internal Style Sheet Um Style Sheet Interno deverá ser aplicado quando um simples documento tem um único estilo. Os estilos internos deverão ser definidos no HEAD do documento, utilizando o tag <STYLE> como exemplo abaixo: <head> <style type="text/css"> hr { color: blue; } p { margin-left: 20px; } body { background-image: url("brasil.gif") } </style> </head> 05

7 CSS – Cascating Styles Sheet
Como adicionar Style Sheet ao HTML:  External Style Sheet Para incluir um arquivo *.css com todos os estilos que serão usados por todas as páginas do seu site, basta incluir no HEAD do documento HTML um link para o arquivo CSS como descrito no exemplo abaixo: <head> <link rel="stylesheet" type="text/css" href="arq.css" /> </head> Um arquivo Style Sheet externo pode ser escrito em qualquer editor de textos. O arquivo não deverá conter TAGs HTML. Seu Style Sheet deverá ser salvo com a extensão “.css”. 06

8 CSS – Cascating Styles Sheet
Como adicionar Style Sheet ao HTML:  External Style Sheet Outra técnica é importar um Style Sheet externo com um elemento STYLE usando a <head> <style type=“text/css”> @import url(arq.css); </style> </head> 07

9 CSS – Cascating Styles Sheet
Seletores:  Efeito Cascata Como a tradução de CSS já diz, é uma folha de estilos em camadas, desta forma, os estilos seguem uma hierarquia como descrita abaixo: 1. Browser default 2. External Style Sheet 3. Internal Style Sheet (dentro do tag <head>) 4. Inline Style (dentro de elementos HTML) Obs.: O item (4) sobrepõem o (3), que sobrepõem o (2), que por sua vez sobrepõem o (1). 08

10 CSS – Cascating Styles Sheet
Seletores:  Elemento Seletor São os próprios tags HTML p { text-align:center; color:red;} Para fazer com que as definições de estilo fiquem mais fáceis de entender, você pode colocar cada propriedade em uma linha. p { text-align: center; color: black; font-family: arial; } Agrupando: Vc pode agrupar seletores, para isto, coloque uma vírgula para separar os seletores. Cada um dos headers terá cor verde. h1,h2,h3,h4,h5,h6 { color: green; } 09

11 CSS – Cascating Styles Sheet
Seletores:  Seletor Contextual Este seletor especifica os atributos style para elementos HTML baseados no contexto em que ele é apresentado. Neste exemplo abaixo o seletor contextual especifica que o texto bold com uma lista “purple” li b {color: purple;} Nos seletores contextuais, os seletores individuais são separados por um espaço em branco. 10

12 CSS – Cascating Styles Sheet
Seletores:  Seletor de Classe Especifica que os elementos HTML podem ser agrupados em uma classe utilizando o atributo CLASS: <H1 CLASS=“teste”>Testando</H1> <p CLASS=“teste”>Testando com o parag...</H1> para especificar um style para elementos de uma classe particular, coloque o nome da classe logo após o Seletor separados por um (.) ponto. H1.teste {color:red;} Para aplicar um Style para todos os elementos HTML através de uma classe retire a tag .teste {color:red;} 11

13 CSS – Cascating Styles Sheet
Seletores:  Seletores de ID O Seletor ID é diferente do Seletor Classe. Com Seletor de Classe vc pode ser aplicado a diversos elementos em uma página HTML, com o Seletor ID será sempre aplicado a um único elemento. O atributo ID deve ser único no documento. <p ID=“pri-paragrafo”>Primeiro Parágrafo...</p> para aplicar um Style em um elemento com ID, crie seu ID colocando o símbolo # na frente do nome do seletor. #pri-paragrafo {font-weight:bold;} 12

14 CSS – Cascating Styles Sheet
Seletores:  Seletores de ID A regra de estilo abaixo, serra aplicada ao elemento p que tem o valor de ID = “para1” p#para1 { text-align: center; color: red; } A regra de estilo abaixo será aplicada ao primeiro elemento que tem valor de ID = “wer345” #wer345 {color: green;} A regra será aplicada ao elemento H1 <h1 id="wer345">Some text</h1> 13

15 CSS – Cascating Styles Sheet
Classificação dos Elementos: os elementos CSS podem ser divididos em três tipos:  Elementos lock-Level Elementos como parágrafos (P), títulos (H1), listas, tabelas, DIV´s e BODY. Geralmente, elementos do tipo block-level aparecem na página HTML em uma linha própria, começando uma nova linha e forçando qualquer outro elemento a fazer o mesmo.  Elementos Inline Elemento como a ancora (A), EM, e a maioria dos elementos, como imagens, campos de entrada de dados de um formulário. Elementos Inline, não forçam a quebra de linha antes e depois como o Block-level. 14

16 CSS – Cascating Styles Sheet
Classificação dos Elementos: os elementos CSS podem ser divididos em três tipos:  Elementos List-item Elementos que no HTML incluem apenas os elementos de listas (LI). Eles são especialmente definidos para terem uma apresentação aspectos como um marcador (bullet, letra, numero). 15

17 CSS – Cascating Styles Sheet
Caixas e Bordas: Todos os elementos em CSS geram uma caixa retangular em volta dele próprio chamado “element box”. Está caixa descreve quanto espaço em um elemento deve ocupar. Existem diversas propriedades para ajustar os espaços entre o conteúdo do elemento e sua borda, do elemento com outros elementos, etc. 16

18 Detalhes da Box Model: Width (largura) height (altura) padding-top - espaço entre a parte superior do objeto e a borda border-top border-bottom margin-top (espaço entre borda superior e outros objetos) border-left padding-bottom - espaço entre a parte inferior do objeto e a borda padding-left padding-right margin- bottom margin-left margin-right border-right 17

19 Problemas da Box Model:
Existe uma diferença entre a aplicação de valores no Box Model do Internet Explorer e do resto dos navegadores. IE - Quando definimos a largura de um elemento em 100px e incluímos, por exemplo, um valor para o padding (espaço entre o conteúdo e a borda do elemento) a esquerda e direita em 10 px, a largura do elemento continua em 100px, só que a área do conteúdo do elemento agora passou a ser de 80px. Outros – Nos outros navegadores, quando temos o mesmo elemento com largura de 100px e incluímos um valor para o padding a esquerda e direita em 10px, a largura do elemento passa a ser de 120px e enquanto a área do conteúdo do elemento continua em 100px. Rack para funcionar da mesma maneira em todos os navegadores: .teste1{background:gray;width:400px; padding:10px;} .teste2{background:gray;width:400px; _width:420px; padding:10px;} 18

20 CSS – Cascating Styles Sheet
Referência CSS2 19

21 CSS – Cascating Styles Sheet
Box Model: H1 { width: 880px; height: 50px; padding: 15px 5px 15px 50px; border-top: red 5px solid; border-left: red 2px dashed; border-right: red 2px dashed; border-bottom: red 1px solid; margin: 12px 10px 1px 10px; color: #336699; font-size: 20px; font-family: arial, sans-serif; background-color: #eeeeee; text-align: left; } 20

22 CSS – Cascating Styles Sheet
Diferentes tipos para especificar tamanhos:  in (Polegadas)  cm (Centimetros)  mm (Milimetros)  pt (Pontos - Padrão em tipografia, usados em impressoras. Existem 72 pontos para cada polegada)  pc (Picas - equivalente a 12 pontos)  em (por exemplo, 1.2em é o mesmo que 120%)  px (Pixels)  % (Percentual) - por exemplo: H1 {line-height:120%} seta a separação entre linhas para 120% do tamanho corrente de altura. 21

23 CSS – Cascating Styles Sheet
Cores:  #RRGGBB (Hexadecimal para vermelho, verde e azul)  #RGB (Uma forma curta para os valores em Hexa para com valores repetidos. Ex: #F8C  #FF88CC  rgb (rrr, ggg, bbb) - especifica valores de 0 até ex.: verde puro rgb(0, 255, 0)  Palavras chaves baseadas nas cores originais do Windows VGA: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, e yellow. 22

24 CSS – Cascating Styles Sheet
Comentários: /* isso eh um comentario */ p { text-align: center; /* isso eh outro comentario */ color: black; font-family: arial } 23

25 CSS – Cascating Styles Sheet
Background: body { background: #FF0000 } body { background: url(imagem.gif) no-repeat top } body { background: #00FF00 url(imagem.gif) no-repeat fixed top } Valores possíveis para posicionamento: top left top center top right center left center center center right bottom left bottom center bottom right Obs.: o primeiro valor é de posicionamento horizontal e o segundo vertical. O canto supetior esquer é 0 0. Pixels pode ser uma medida utilizada (0px 0px) 24

26 CSS – Cascating Styles Sheet
Aparência dos textos em CSS Aplicando cor ao texto 25

27 CSS – Cascating Styles Sheet Aplicando cor ao background
Aparência dos textos em CSS Aplicando cor ao background 26

28 CSS – Cascating Styles Sheet Alterando o espaçamento entre as letras
Aparência dos textos em CSS Alterando o espaçamento entre as letras 27

29 CSS – Cascating Styles Sheet
Aparência dos textos em CSS Alinhando o texto 28

30 CSS – Cascating Styles Sheet
Aparência dos textos em CSS Decoração do texto 29

31 CSS – Cascating Styles Sheet
Aparência dos textos em CSS Identação do texto 30

32 Aparência dos textos em CSS
CSS – Cascating Styles Sheet Aparência dos textos em CSS Caixa alta, baixa e as apenas as iniciais em caixa alta 31

33 CSS – Cascating Styles Sheet
Aparência dos textos em CSS Tipo de fonte, tamanho, estilo, etc. p.tipo{ font-family:arial,verdana} p.tamanho1{font-size:10px;} p.tamanho2{font-size:14pt;} p.tamanho3{font-size:2em;} p.peso1{font-weight:bold;} p.peso2{font-weight:bolder;} p.peso3{font-weight:normal;} p.peso4{font-weight:lighter;} p.estilo1{font-style:normal;} p.estilo2{font-style:italic;} p.estilo3{font-style:oblique;} Dica – propriedades em uma só declaração: p{font: italic small-caps bolder 12px arial;} 32

34 CSS – Cascating Styles Sheet
Definição - sentido do relógio a border: 10px; margin:1px; padding:5px; Propriedade: a b; Border: 1px (em cima e em baixo) 5px (esquerda e direita) Border-top:1px; border-bottom:1px; border-left:5px; border-right:5px; Propriedade: a b c d; border:1px 20px 5px 10px; border-top:1px; border-right:20px; border-bottom:5px; border-left:10px a a a a b b 1px a 20 px a 10px d b 5px c 33

35 CSS – Cascating Styles Sheet
Bordas dos elementos - estilos 34

36 CSS – Cascating Styles Sheet
Bordas (border) - estilos p{ border-style: solid; (estilo da borda) border-color: #0000ff; (cor da borda que também pode ser aplicada das seguintes formas - border-color:blue; border-color:#00f; ou border-color:rgb(0,0,255); ) border-bottom-width: 15px (espessura da linha) } Todos os estilos em uma única declaração: p { border: 16px double rgb(250,0,255); } 35

37 CSS – Cascating Styles Sheet
Margens (margin) – espaço entre a borda do elemento e outros objetos a sua volta. p{ margin-top:10px; margin-right:20px; margin-bottom:15px margin-left: 5px; } Todos os estilos em uma única declaração: p { margin: 16px; } p { margin: 16px 24px; } p{ margin: 10px 15px 20px;} p { margin:10px 20px 15px 5px; } dois valores a b b a quatro valores a d b c 36

38 CSS – Cascating Styles Sheet
Padding (espaçamento entre o conteúdo do elemento e sua borda) p{ padding-top:10px; padding-right:20px; padding-bottom:15px padding-left: 5px; } Todos os estilos em uma única declaração: p {padding: 16px; } p {padding: 16px 24px; } p{padding: 10px 15px 20px;} p {padding:10px 20px 15px 5px; } dois valores a b b a quatro valores a d b c 37

39 CSS – Cascating Styles Sheet
Listas <html><head> <style type="text/css"> ul { list-style-type:square; list-style-position:inside; list-style-image:url('arrow.gif') } </style></head> <body> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> </body> </html> 38

40 CSS – Cascating Styles Sheet
Dimensões Height - Altera a altura do elemento auto length % line-height - Altera a distância entre linhas normal number length Width - Altera a largura do elemento auto % length   39

41 CSS – Cascating Styles Sheet
Display Display Como o elemento será apresentado: none inline block list-item Visibility Se o elemento está ou não visível: visible hidden 40

42 CSS – Cascating Styles Sheet
Posicionamento Position Se a posição do elemento será: relativa, absoluta, estática ou fixa: static relative absolute fixed Posição: bottom (auto, 50% ou 100px) left (auto, 50% ou 100px) right (auto, 50% ou 100px) top (auto, 50% ou 100px) 41

43 CSS – Cascating Styles Sheet
Posicionamento Overflow: <style type="text/css"> div { background-color:#00FFFF; width:150px; height:150px; overflow: scroll } </style> 42

44 CSS – Cascating Styles Sheet
Posicionamento Vertical align an image: <style type="text/css"> img.top {vertical-align:text-top} img.bottom {vertical-align:text-bottom} </style> 43

45 CSS – Cascating Styles Sheet
Posicionamento Z-index: <style type="text/css"> img.x { position:absolute; left:0px; top:0px; z-index:-1 } </style> 44

46 CSS – Cascating Styles Sheet
Posicionamento Float Como o elemento será apresentado junto com outros: left right none <style type="text/css"> img { float:right } </style> 45


Carregar ppt "ESCM Desenvolvimento Web I"

Apresentações semelhantes


Anúncios Google