#aula nº 3 – estilo css - samus.com.brsamus.com.br/webstandards/aula3.pdfapresentar os conceitos...
TRANSCRIPT
#Aula Nº 3 – Estilo CSSwebstandards.samus.com.brwebstandards.samus.com.br/aulas/aula3.pdfVinicius Fiorio Custó[email protected]
Apresentar os conceitos de utilização do CSS, Sintaxe, Seletores e Propriedades.Com foco nos padrões de utilização e organização das folhas de estilo. Como organizar o projeto a partir de um projeto gráfico.
#Objetivo
IDE: Eclipse Galileoc:\ws\eclipse\eclipse.exe
Workspace: c:\ws\
Criando o Projeto:File > New Project > Web > Static Web Project
Nome do Projeto: “ws3”
#Ambiente de Desenvolvimento
Cascading Style Sheets Utilizado para aplicar formatação / estilo em páginas WEB e também em outras mídias.
Funcionamento: a partir de um seletor podem ser aplicadas várias propriedades aos elementos
#O que é CSS?
O CSS pode ser escrito diretamente no HTML através do atributo “style” ou em folhas de estilo separadas. Use sempre arquivos separados.
<div style=”color: red”>Errado</div>
#CSS Inline x Folha de Estilo
Inclua as folhas de estilo utilizando a tag <link>. Esta tag é usada para outras coisas por isso o atributo “rel” é obrigatório
<link rel="stylesheet" href="file.css" />Atributo Type é opicional<link rel="stylesheet" type="text/css" href="file.css" />
#Incluindo o CSS no HTML
Uma folha de estilo pode incluir outras folhas de estilo. Utilize a tag @import para isso.
Use esse método apenas para incluir arquivo css dentro de outros arquivos css, não no html
@import url("file.css");
#Incluindo o CSS no CSS
Um código que faz referencia à um elemento do seu documento XHTML, podendo ser um elemento da HTML ou um Identificador informado (Classe ou ID).
Ex.:body {}.titulo {}#menu {}
#O que é um Seletor?
Qualquer estilo que pode ser aplicado à um seletor.
Ex.:font-size: 11px;color: #f3f3f3;width: 80%;border: 5px solid black;background-image: url('tits.jpg');
#O que é uma propriedade
Sintaxe é simples e intuitiva.seletor { propriedade: valor da propriedade;}.seletor { color: red;}
#Sintaxe
Utiliza-se o nome de qualquer elemento da HTMLCSS:body { color: red; }HTML:<body> Eu vou ser um texto vermelho</body>
#Tipos de seletores - HTML
Seletores de classe utilizam o ponto: “.” + nome da classeCSS:.preto { color: black; }.titulo { font-weight: bold; font-size: 14px; }HTML:<div class=”titulo”>Eu sou titulo</div>
#Tipos de seletores - Classe
Seletores de ID utilizam tralha: “#” + nome do elementoCSS:#menu { background-color: purple; color: white; }HTML:<div id=”menu”> Menu Legal</div>
#Tipos de seletores - ID
Seleciona todos os elementos, usado em alguns casos bem específicos
CSS:* { margin: auto; color: black; }
#Seletor universal
Define uma prioridade de aplicação de propriedades e de folhas de estilo quando há algum conflito.
div { color: black; }
.red { color: red; }
#Conceitos - Cascata
Elementos filhos herdam as propriedades dos seus elementos pai, quando não há conflito.
div { color: blue; }
<div><span>Eu vou ser Blue</span>
</div>
#Conceitos - Herança
Um elemento pode pertencer à várias classes ao mesmo tempo, recebendo todas as propriedades de cada uma das classes.<div class=”vermelho bold underline”> Sou um texto de varias classes</div>
#Conceitos – Varias Classes
Pode ser criado um seletor que use “mais” de um seletor, com o objetivo de ser mais específico e/ou selecionar um elemento específico dentro de uma herança.
#Combinando Seletores
Seleciona um elemento de um tipo/classe/id específico. Basta “juntar” sem espaço os seletores
div.titulo {}span.titulo{}
#Combinando Seletores - Tipo
Seleciona qualquer elemento descendente ao seletor da esquerda. Use espaço “ “.classe1 { background-color: silver;}.classe1 .classe2 { background-color: yellow;}
#Combinando Seletores - Descendentes
Seleciona qualquer elemento que seja FILHO ao seletor da esquerda. Use “ > “.classe1 { background-color: silver;}.classe1 >.classe2 { background-color: yellow;}
#Combinando Seletores - Filhos
Existem vários outros seletores mais específicos, a maioria tem algum problema de incompatibilidade mesmo que sejam muito uteis.
Ex.:Atributo Especifico:input [type=text] {}
#Seletores Especiais
Existem dezenas de propriedades CSS. Dividiremos da seguinte forma para serem explicadas:
Backgrounds, Bordas, Classificação, Conteúdo, Contornos, Dimensões, Espaçamento, Fontes, Listas e marcadores, Margens, Posicionamento, Tabelas, Texto
#Propriedades
Propriedades que definem planos de fundo dos elementos.
background-attachmentbackground-colorbackground-imagebackground-positionbackground-repeat
#Propriedades - Background
Propriedades que definem bordas para os elementos
borderborder-styleborder-colorborder-width
(border-right-color, border-right-style, border-bottom-width...)
#Propriedades - Bordas
Propriedades que definem o tipo de elemento alterando comportamento padrão.
cursorcleardisplayfloatpositionvisibility
#Propriedades - Classificação
Propriedades que definem o tipo de elemento alterando comportamento padrão, mas em sua maioria não são suportados pelos navegadores
content *counter-reset *counter-increment *quotes
#Propriedades - Conteúdo
Define contornos externos à borda (não suportada por alguns navegadores)
outlineoutline-coloroutline-styleoutline-width
#Propriedades - Contornos
Tamanho dos elementos, exatos ou relativos
heightline-heightmax-width *max-height *min-height *min-width *width
#Propriedades - Dimensões
Existem várias medidas usadas por propriedades que definem tamanhos. Utilize sempre “px” (pixels) para tamanhos especificos e “%” para tamanhos relativos.
14Px100%
#Propriedades – Dimensões 2 - Medidas
Define espaços “dentro” dos elementos
paddingpadding-bottompadding-leftpadding-rightpadding-top
#Propriedades - Espaçamento
Propriedades das fontes, não dos textos. São mais genéricas que as de texto
fontfont-familyfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weight
#Propriedades - Fontes
Propriedades das listas (<ul> <li> e etc)
list-stylelist-style-imagelist-style-positionlist-style-typemarker-offset
#Propriedades – Listas e Marcadores
Define espaçamentos “fora” do elemento
marginmargin-bottommargin-leftmargin-rightmargin-top
#Propriedades – Margens
Padding define o espaçamento interno entre o limite do elemento e o seu conteúdo
Margin define um espaçamento após o limite do elemento
Navegadores interpretam a lagura final do elemento de diferentes formas
#Propriedades – Diferença entre padding e margin
Define espaçamentos “fora” do elemento
bottomclipleftoverflow (overflow-x , overflow-y)rightTopVertical-align *z-index
#Propriedades – Posicionamento
Propriedades exclusivas para tabelas
border-collapseborder-spacingcaption-sideempty-cellstable-layout
#Propriedades – Tabelas
Propriedades de texto
colordirectionletter-spacingtext-aligntext-decorationtext-indenttext-transformunicode-bidiwhite-space
#Propriedades – Texto
Isso tudo que vimos aplica-se a versão 2.0 e 2.1 da CSS, os navegadores atuais não suportam ou não interpretam todas as propriedades desta versão, mas estão se preparando para a versão 3.0 que mudará muita coisa facilitando nossa vida.
Jquery adianta o suporte à várias vantagens da css3
#CSS 3