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

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

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

Apresentações semelhantes


Apresentação em tema: "Desenvolvimento Web Professor Horácio Soares ESCM Desenvolvimento Web I CSS - Cascating Styles Sheet Professor Horácio Soares Tel.: 9223-7512"— Transcrição da apresentação:

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

2 Desenvolvimento Web Professor Horácio Soares 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 - 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 Desenvolvimento Web Professor Horácio Soares 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 propriedadevalor 02

4 Desenvolvimento Web Professor Horácio Soares Exemplos: body { color: black; } p { font-family: sans serif; } p { text-align:center;} CSS – Cascating Styles Sheet 03

5 Desenvolvimento Web Professor Horácio Soares Como adicionar Style Sheet ao HTML: CSS – Cascating Styles Sheet 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: Isto é um parágrafo... 04

6 Desenvolvimento Web Professor Horácio Soares Como adicionar Style Sheet ao HTML: CSS – Cascating Styles Sheet 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 como exemplo abaixo: hr { color: blue; } p { margin-left: 20px; } body { background-image: url("brasil.gif") } 05

7 Desenvolvimento Web Professor Horácio Soares Como adicionar Style Sheet ao HTML: CSS – Cascating Styles Sheet 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: 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 Desenvolvimento Web Professor Horácio Soares Como adicionar Style Sheet ao HTML: CSS – Cascating Styles Sheet External Style Sheet Outra técnica é importar um Style Sheet externo com um elemento STYLE usando url(arq.css); 07

9 Desenvolvimento Web Professor Horácio Soares Seletores: CSS – Cascating Styles Sheet 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 ) 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 Desenvolvimento Web Professor Horácio Soares Seletores: CSS – Cascating Styles Sheet 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 Desenvolvimento Web Professor Horácio Soares Seletores: CSS – Cascating Styles Sheet 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 Desenvolvimento Web Professor Horácio Soares Seletores: CSS – Cascating Styles Sheet Seletor de Classe Especifica que os elementos HTML podem ser agrupados em uma classe utilizando o atributo CLASS: Testando Testando com o parag... 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 Desenvolvimento Web Professor Horácio Soares Seletores: CSS – Cascating Styles Sheet 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. Primeiro Parágrafo... 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 Desenvolvimento Web Professor Horácio Soares Seletores: CSS – Cascating Styles Sheet 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 Some text 13

15 Desenvolvimento Web Professor Horácio Soares Classificação dos Elementos: os elementos CSS podem ser divididos em três tipos: CSS – Cascating Styles Sheet 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 Desenvolvimento Web Professor Horácio Soares Classificação dos Elementos: os elementos CSS podem ser divididos em três tipos: CSS – Cascating Styles Sheet 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 Desenvolvimento Web Professor Horácio Soares Caixas e Bordas: CSS – Cascating Styles Sheet 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 Desenvolvimento Web Professor Horácio Soares border-right 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-leftpadding-bottom - espaço entre a parte inferior do objeto e a borda padding-left padding-right margin- bottom margin-left margin-right Detalhes da Box Model: 17

19 Desenvolvimento Web Professor Horácio Soares 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 Desenvolvimento Web Professor Horácio Soares Referência CSS2 CSS – Cascating Styles Sheet 19

21 Desenvolvimento Web Professor Horácio Soares Box Model: CSS – Cascating Styles Sheet 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 Desenvolvimento Web Professor Horácio Soares Diferentes tipos para especificar tamanhos: CSS – Cascating Styles Sheet 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 Desenvolvimento Web Professor Horácio Soares Cores: CSS – Cascating Styles Sheet #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é 255 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 Desenvolvimento Web Professor Horácio Soares Comentários: CSS – Cascating Styles Sheet /* isso eh um comentario */ p { text-align: center; /* isso eh outro comentario */ color: black; font-family: arial } 23

25 Desenvolvimento Web Professor Horácio Soares Background: CSS – Cascating Styles Sheet 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 lefttop centertop right center leftcenter centercenter right bottom leftbottom centerbottom 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 Desenvolvimento Web Professor Horácio Soares Aparência dos textos em CSS CSS – Cascating Styles Sheet Aplicando cor ao texto 25

27 Desenvolvimento Web Professor Horácio Soares Aparência dos textos em CSS CSS – Cascating Styles Sheet Aplicando cor ao background 26

28 Desenvolvimento Web Professor Horácio Soares Aparência dos textos em CSS CSS – Cascating Styles Sheet Alterando o espaçamento entre as letras 27

29 Desenvolvimento Web Professor Horácio Soares Aparência dos textos em CSS CSS – Cascating Styles Sheet Alinhando o texto 28

30 Desenvolvimento Web Professor Horácio Soares Aparência dos textos em CSS CSS – Cascating Styles Sheet Decoração do texto 29

31 Desenvolvimento Web Professor Horácio Soares Aparência dos textos em CSS CSS – Cascating Styles Sheet Identação do texto 30

32 Desenvolvimento Web Professor Horácio Soares Aparência dos textos em CSS CSS – Cascating Styles Sheet Caixa alta, baixa e as apenas as iniciais em caixa alta 31

33 Desenvolvimento Web Professor Horácio Soares Aparência dos textos em CSS CSS – Cascating Styles Sheet 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 Desenvolvimento Web Professor Horácio Soares Definição - sentido do relógio CSS – Cascating Styles Sheet 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 a b a b a b c d 1px 20 px 5px 10px 33

35 Desenvolvimento Web Professor Horácio Soares Bordas dos elementos - estilos CSS – Cascating Styles Sheet 34

36 Desenvolvimento Web Professor Horácio Soares Bordas (border) - estilos CSS – Cascating Styles Sheet 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 Desenvolvimento Web Professor Horácio Soares Margens (margin) – espaço entre a borda do elemento e outros objetos a sua volta. CSS – Cascating Styles Sheet 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; } a b a b a b c d dois valores quatro valores 36

38 Desenvolvimento Web Professor Horácio Soares Padding (espaçamento entre o conteúdo do elemento e sua borda) CSS – Cascating Styles Sheet 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; } a b a b a b c d dois valores quatro valores 37

39 Desenvolvimento Web Professor Horácio Soares Listas CSS – Cascating Styles Sheet ul { list-style-type:square; list-style-position:inside; list-style-image:url('arrow.gif') } Coffee Tea Coca Cola 38

40 Desenvolvimento Web Professor Horácio Soares Dimensões CSS – Cascating Styles Sheet Height - Altera a altura do elementoauto length % line-height - Altera a distância entre linhas normal number length Width - Altera a largura do elementoauto % length 39

41 Desenvolvimento Web Professor Horácio Soares Display CSS – Cascating Styles Sheet 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 Desenvolvimento Web Professor Horácio Soares Posicionamento CSS – Cascating Styles Sheet 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 Desenvolvimento Web Professor Horácio Soares Posicionamento CSS – Cascating Styles Sheet Overflow: div { background-color:#00FFFF; width:150px; height:150px; overflow: scroll } 42

44 Desenvolvimento Web Professor Horácio Soares Posicionamento CSS – Cascating Styles Sheet Vertical align an image: img.top {vertical-align:text-top} img.bottom {vertical-align:text-bottom} 43

45 Desenvolvimento Web Professor Horácio Soares Posicionamento CSS – Cascating Styles Sheet Z-index: img.x{ position:absolute; left:0px; top:0px; z-index:-1 } 44

46 Desenvolvimento Web Professor Horácio Soares Posicionamento CSS – Cascating Styles Sheet Float Como o elemento será apresentado junto com outros: left right none img { float:right } 45


Carregar ppt "Desenvolvimento Web Professor Horácio Soares ESCM Desenvolvimento Web I CSS - Cascating Styles Sheet Professor Horácio Soares Tel.: 9223-7512"

Apresentações semelhantes


Anúncios Google