CSS Cascading Style Sheets. O que é CSS?  Conjunto de regras que definem a aparência do documento HTML.  Inline: Definido dentro da tag pelo atributo.

Apresentação em tema: "CSS Cascading Style Sheets. O que é CSS?  Conjunto de regras que definem a aparência do documento HTML.  Inline: Definido dentro da tag pelo atributo."— Transcrição da apresentação:

1 CSS Cascading Style Sheets

2 O que é CSS?  Conjunto de regras que definem a aparência do documento HTML.  Inline: Definido dentro da tag pelo atributo Style.  Interna: Regras declaradas dentro do documento HTML.  Externa: Regras definidas em um documento externo.

3 Css Inline  Aplicada a um único elemento Html.  Declarada dentro da tag, utilizando o atributo Style.  Ex.: Este é um parágrafo que tem a fonte preta e o alinhamento justificado.

4 Css Interna  Aplicada a um único documento Html.  Declarada entre as tags e. Regras CSS Conteúdo do documento

5 Css Interna  Ex.:... <! - - h3 { color: #f00; align: center; } p { align: left } - ->...

6 Css Externa  Pode ser utilizada por vários documentos Html.  É um arquivo externo salvo com a extensão.css. CSS HTML

7 Css Externa  Ex.: principal Meu primeiro parágrafo. Meu segundo parágrafo. /* CSS Document */ p { background-color:#FF0; font-family:Arial; color:#F00; } #painel { position:absolute; left:2%; width:18%; } Documento HtmlDocumento CSS

8 Sintaxe Css  Seletor: Elemento Html que pode ser identificado por sua tag, classe ou ID.  Propriedade: Atributo do elemento ao qual será aplicada a regra.  Valor: Característica específica assumida pela propriedade. Seletor { propriedade:valor; propriedade:valor;}

9 Tipos de seletores  Seletor de ID: representado pelo sinal # e tem como alvo o elemento com um valor de ID específico. #fundo { position:absolute; left:5%; width:90%; height:98%; z-index:1; } As regras CSS serão aplicadas ao elemento cujo ID seja fundo.

10 Tipos de seletores  Seletor de Classe: serve para aplicar um estilo a todos os elementos que pertençam a uma mesma classe..1 { font-size:14px; font-style:italic; text-align:center; }.2 { font-size:8px; } As regras CSS serão aplicadas aos elementos cujas classes sejam 1 e 2.

11 Tipos de seletores  Seletor de tipo: serve para aplicar um estilo a todas as instâncias de um determinado elemento. H3{ font-family:verdana; font-style:italic; text-align:center; } As regras CSS serão aplicadas ao elemento H3 em todas as instâncias do documento HTML onde ele aparecer.

12 Pseudo-classes  Tipos de classes já definidas pelo desenvolvedor (predefinidas). a:link {text-decoration: none;} a:hover {text-decoration: none; font-style: normal; color:#FF6347} a:visited {text-decoration:none; border-color: } a: active {text-decoration:none; color:#990033; border-color:non} As regras CSS serão aplicadas aos vários estados de um hiperlink. São eles: Link: estado inicial do link. Hover: quando passamos o cursor sobre o link. Visited: links visitados. Active: quando um link é acionado.

13