ESCM Desenvolvimento Web I

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

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.0. 01

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

Exemplos: body { color: black; } p { font-family: sans serif; } p { text-align:center;} 03

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Referência CSS2 19

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

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

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

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

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

Aparência dos textos em CSS Aplicando cor ao texto 25

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

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

Aparência dos textos em CSS Alinhando o texto 28

Aparência dos textos em CSS Decoração do texto 29

Aparência dos textos em CSS Identação do texto 30

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

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

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

Bordas dos elementos - estilos 34

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

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

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

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

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

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

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

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

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

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

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

ESCM Desenvolvimento Web I

Apresentações semelhantes

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

Apresentações semelhantes

Sobre projeto

Feedback

Login

Autorizar-se através da rede social:

ESCM Desenvolvimento Web I

Apresentações semelhantes

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

Apresentações semelhantes

Sobre projeto

Feedback