CSS Conceitos importantes
16
description
Instrutor: Tarso Nunes Aires [email protected]. CSS Conceitos importantes. O que é CSS?. HTML foi escrito para definir o conteúdo de um documento Porém, tags como < font >, atributos de cores e etc. foram introduzidos ao HTML 3.2 Isso se tornou um pesadelo para os designers - PowerPoint PPT Presentation
Transcript of CSS Conceitos importantes
2
O que é CSS?
HTML foi escrito para definir o conteúdo de um documento
Porém, tags como <font>, atributos de cores e etc. foram introduzidos ao HTML 3.2
Isso se tornou um pesadelo para os designers Mistura de conteúdo com apresentação Definições e cores eram adicionados a
cada página, complicando a manutenção
3
O que é CSS?
A tecnologia CSS foi adicionada ao HTML 4.0 para resolver esses problemas Cascade Style Sheets, ou folhas de
estilos em cascata Define como exibir elementos HTML Permite que toda a formatação seja
removida de documentos HTML, separando conteúdo de apresentação
4
Sintaxe
Exemplo:h1 {
color: blue; font-size: 12px;}
h1 é um seletor O texto entre chaves é um conjunto de
declarações O que está antes dos dois pontos é uma
propriedade E o que está depois dos dois pontos é um
valor
5
Sintaxe
Seletores são, geralmente, o elemento HTML que queremos estilizar
Cada declaração consiste em uma propriedade e um valor
Declarações terminam com ponto-e-vírgula
6
Inserindo CSS em uma página
Existem 3 maneiras de inserir um estilo CSS: CSS externo
<head><link rel=“stylesheet” type=“text/css” href=“estilo.css”>
</head>
7
Inserindo CSS em uma página
Existem 3 maneiras de inserir um estilo CSS: CSS interno
<head><style type=“text/css”>
... estilos</style>
</head>
8
Inserindo CSS em uma página
Existem 3 maneiras de inserir um estilo CSS: CSS inline
<p style=“color: red; text-align: center;”>Texto
</p>
Observação: Múltiplos estilos são aplicados em
cascata Ordem de prioridade: inline, interno,
externo
9
Comentários
Comentários em CSS situam-se entre /* e */
Exemplo:/* Todos os parágrafos centralizados e com fonte vermelha*/p {
color: red;text-align: center;
}
10
Seletor id
Utilizado para ajustar o estilo para um único elemento
Referencia o atributo id do elemento HTML
É definido com um “#” Exemplo:#titulo {
text-align: center;color: red;
}
11
Seletor class
Usado para definir um estilo para um grupo de elementos
Ajusta o mesmo estilo para elementos HTML com a mesma classe
Referencia o atributo class do elemento HTML
É definido com um “.” Exemplo:.centralizado {
text-align: center;}
12
Seletor class
É possível também especificar que apenas elementos HTML específicos devem ser afetados por uma classe
Exemplo:/* Afeta apenas elementos <p class=“centralizado”></p> */p.centralizado {
text-align: center;}
13
Box model
Elementos HTML podem ser considerados como caixas (boxes)
Em CSS, o termo “box model” é usado quando falamos de design e layout
O box model é essencialmente uma caixa que fica ao redor dos elementos HTML, e consistem em: margens, bordas, espaçamentos e conteúdo
14
Box model
15
Referências
Referência de CSS: http://www.w3schools.com/css/css_refer
ence.asp Famílias de fontes:
http://www.w3schools.com/css/css_websafe_fonts.asp
Unidades CSS: http://
www.w3schools.com/css/css_units.asp Cores CSS:
http://www.w3schools.com/css/css_colors.asp
16
Prática
Aplicar estilos à aplicação AgendaJSF, desenvolvida durante o curso
Usar predominantemente estilos externos, sendo permitidos estilos internos ou inline em situações particulares
