Curso Web Designer UTD Aula 04

(1)

Curso Web Designer

UTD

(2)

(3)

Objetivos da Aula

➢

Boas práticas com o HTML; ➢

Validando o seu documento; ➢

(4)

Comen a blocos

Inden ação de código entre outras.

1

3

Nomes de atributos com algum significado

2

Boas práticas com o HTML

No HTML também temos boas práticas para o desenvolvimento, assim como: como em qualquer outra linguagem de programação. Coisas simples

3 _Indentação

de código,

,entre outras.

2

Nomes de atributos com algum significado;

;

1

Comentar blocos;

(5)

Boas práticas

com o HTM

L

Comentário e Documentação

Use sempre os comentários, afinal, ao passar os anos sua cabeça não será mais a mesma, mas a função sim.

Comentar um código, se tornou cada dia mais útil e eficiente. Os comentários são a melhor arma que um programador pode ter, pois evitará maiores trabalhos no futuro.

(6)

Boas práticas com o

HTM

L

(7)

Boas práticas com o HTM

L

Indentação

Sem uma boa indentação o código perde toda a hierarquia de No são comandos, e você acaba se perdendo em seu próprio código.

entanto, existem várias formas de indentar o seu código, todas elas

Indentação é sem dúvida, a parte mais importante no

desenvolvimento. Em tipografia, indentação é o recuo de um texto em relação a sua margem.

(8)

Boas práticas com o HTM

L

(9)

Boas práticas com o HTML

Indentação

Por mais que isso vá consumir mais linhas de código, o resultado final é o mesmo. Lembre-se:

Na hora da manutenção, você precisa saber onde alterar/reparar, e não pode perder tempo tentando

entender o que foi feito por você, ou por outros. Salve

(10)

Boas práticas com o HTML

Nomes

Quando falamos de nomes de atributos ou variáveis, que é simples, e não tem importância alguma.

todos pensam

Mas me diga, qual é o significado do código abaixo?

<div id=”topo2” class=”bgCinza1 fonte2 azul metade”> ...<--! Seu código -->

(11)

m

Boas práticas com o HTML

Nomes

O mesmo código escrito de maneira diferente diferente, e também elementos precise se

e modular, visto que estamos em uma página

provavelmente alguns dos diferente.

em uma header que comportar de maneira Qual o real significado disso? Fez sentido para você? E para que

vai atualizar o sistema? O que é bgCinza1, fonte2, azul, etc? Quantos outros atributos sem sentido existem?

(12)

Boas práticas com o HTML

Nomes

Cada desenvolvedor tem seu próprio padrão, mas este precisa fazer algum sentido, e ser utilizado em todo o projeto. Com isto, no final o

código poderá ser reutilizado ou compreendido por qualquer pessoa que o leia, e tenha o mínimo de conhecimento em desenvolvimento.

Qual o é significado de <a href=”#” class=”link1”></a>?

(13)

(14)

Objetivos da Aula

Aula 06 (parte 1/2)

➢

O que é CSS? ➢

Conhecendo suas características; ➢

Agrupamento de seletores; ➢

Seletor descendente (ou encadeado); ➢

Atributos Class e ID; ➢

(15)

Objetivos da Aula

Aula 06 (parte 2/2)

➢ Sprite; ➢ Cores; ➢ Unidades de medida; ➢ Grupos de Propriedades; ➢ Seletores Complexos;

(16)

(17)

O que é CSS?

O Cascading Style Sheets (folha de estilo em cascata, ou simplesmente CSS), é uma linguagem de folhas de estilo que formata a informação entregue pelo HTML. Seu principal benefício é:

Prover a separação entre o formato e o conteúdo de um documento, que pode ser qualquer coisa: imagem, texto, vídeo, áudio ou qualquer outro elemento criado. Portanto, o CSS formata a

(18)

O que é CSS?

No CSS Aural, é possível:

Manipular o áudio entregue

do som, tipo da voz, ou em qual

De certa forma, o usuário formata a informação que está em formato de áudio, e que o visitante consume ao entrar no site. O CSS prepara

a informação para ser consumida da melhor maneira possível. Para mais Controlar o volume, profundidade

caixa de som a voz sairá. ao visitante pelo sistema

(19)

O que é CSS?

Basicamente, as atualizações do HTML 5

foram:

Com o CSS que nós conhecemos podemos formatar algumas características básicas: cores, background, características de font,

muito

margins, paddings, posição e ainda controlamos de uma maneira 1 As criações de novas tags.

2 A mudança do significado de alguns elementos que foram modificados. 3 Outras tags que foram descontinuadas.

(20)

O que é CSS?

Com as atualizações do CSS3 e com os browsers atualizando o suporte do CSS2.1, nós entramos em um patamar onde sem

arma mais poderosa para o designer web.

dúvida o CSS é a

Você deve entender 3 coisas sobre o CSS:

Ele resolve problemas do _{HTML (formatação);} dados da formatação; Separa a estruturação de

Economiza tempo de trabalho, aumentando a reusabilidade.

(21)

O que é CSS?

Solução para problemas no HTML

Tags HTML foram desenvolvidas originalmente para definir o conteúdo do documento;

O layout do documento era supostamente tratado pelo browser, sem usar qualquer formatação;

Economizam tempo de trabalho, aumentando a reusabilidade; O conteúdo do documento HTML foi claramente

layout de apresentação de documentos.

(22)

O que é CSS?

Para resolver este problema,

o W3C

criou o Estilo (STYLE) no HTML4.0

(23)

(24)

Conhecendo suas características

Para construir uma CSS basta utilizar corretamente os 5 componentes:

Muito do poder da linguagem CSS está nos seletores. Com eles, podemos escolher qualquer elemento na página para aplicar estilos. Um

seletor representa uma estrutura. Ela é ultilizada como uma condição para determinar quais elementos de um grupo serão formatados.

Valor Propriedade Declaração Bloco de declaração Seletor

(25)

Conhecendo suas

características

Veja como funciona:

p { color: blue; }

(26)

Conhecendo suas

características

Veja como funciona:

p { color: blue; }

(27)

Conhecendo suas

características

Veja como funciona:

p { color: blue; }

(28)

Conhecendo suas

características

Veja como funciona:

p { color: blue; }

Propriedade

(29)

Conhecendo suas

características

Veja como funciona:

p { color: blue; }

(30)

Conhecendo suas

características

Veja como funciona:

p { color: blue; }

p

= Seletor

{ }

= Bloco de declaração

color: blue

= Declaração

(31)

Conhecendo suas características

Se o valor é composto de múltiplas palavras, será necessária a utilização de aspas:

(32)

Conhecendo suas características

Para especificar vírgula.

mais de uma propriedade, é necessário utilizar ponto e

p {

text-align: center;

color: blue;

(33)

(34)

Agrupamento de seletores

Agrupa elementos formatação.

separados por vírgula, para que herdem a mesma

(35)

(36)

Seletor descendente (ou encadeado)

Com este seletor, podemos dentro de outro, ou seja, que

escolher um ou mais elementos que estão são descendentes do elemento principal.

Com isso, selecionamos apenas tags strong que estão dentro de

(37)

Seletor descendente (ou encadeado)

Podemos selecionar com mais especificidade, escrevendo com mais elementos, como:

Neste exemplo, selecionamos links (a) que estão dentro de tags strong, que sua vez, estão dentro de parágrafos, e ficam dentro de tags div.

(38)

(39)

Atributos Class e ID

Seletor de classe

Ele seleciona elementos com uma classe específica aplicada.

O .destaque seleciona todos os elementos com a classe "destaque".

(40)

Atributos Class e ID

Seletor de id

O seletor de id, seleciona o elemento com a id especificada. Cada id é única e não pode ser repetida no mesmo documento.

(41)

(42)

Combinando Seletores

Podemos combinar os seletores para conseguir diferentes elementos, e partes mais específicas de nossos sites. Veja alguns exemplos:

p.destaque seleciona apenas os parágrafos que possuem

"destaque"; a classe ➢ div#cabecalho h1 a id "cabecalho". #conteudo ul li a

por sua vez, estão

seleciona tags h1 que estejam dentro da div, com

➢

seleciona dentro de

links (a) dentro de itens

tags ul, e ficam dentro de

de lista, que um elemento

(43)

Combinando Seletores

#conteudo p.destaque strong seleciona elementos strong dentro

➢

de parágrafos com a dentro de um elemento

.mensagem.destaque

classe "mensagem", e

classe "destaque", que por sua vez, estão com a id "conteudo";

seleciona apenas elementos que tenham a

➢

a classe "destaque".

Separa itens por vírgulas, como p.destaque, h1, a.saiba-mais e

➢

seleciona todos os elementos para as regras.

(44)

Combinando Seletores

Estes seletores são para cobrir suas necessidades básicas de formatação de elementos. Eles simplificam de uma forma que vai fazer você:

Trabalhar menos, e escrever

menos código CSS e Javascript.

São os seletores complexos que veremos posteriormente.

(45)

(46)

1 2

3

Utilização do CSS

Existem 3 formas de utilização do CSS:

3 _{Em um arquivo}_CSS_externo.

2 No cabeçalho _<HEAD>de uma página HTML;

(47)

Utilização do CSS

CSS Inline

Mistura a estrutura com apresentação;

➢

➢_{Não recomendado} _{pelos padrões web (Web Standards).}

Exemplo:

(48)

Utilização do CSS

CSS dentro do HTML

Um único estilo para um documento;

Não recomendado pelos padrões web (Web Standards);

➢ ➢

➢_{Deve ser inserido no cabeçalho} _{do HTML pelas TAGs} _<style>_.

Exemplo:

<head>

<style type="text/css"> p{color: blue;}

(49)

Utilização do CSS

CSS externo

Ideal para aplicar em várias páginas; Recomendado pelos padrões web (Web

➢ ➢ ➢ ➢ ➢ ➢ Standards); Possibilita mudar o layout apenas do arquivo CSS;

Cada página deve ter um vínculo com a folha de estilo; CSS externo é apenas um arquivo com extensão .css;

Todas as páginas que utilizam esta folha de estilo, terão o seu conteúdo alterado.

(50)

Utilização do CSS

Posso utilizar os três modos?

Sim, mas atente-se a ordem de execução:

CSS inline sobre-escreve todas as outras.

Em uma TAG HTML (inline) CSS dentro do

HTML (<head>) CSS externo

(51)

(52)

Sprite

Pra quem não conhece, essa é uma técnica que se baseia em combinar diversas imagens em uma só, em busca de diminuir o número de requisições HTTP para o servidor.

E essa é apenas uma de suas aplicações, no mundo dos games, por exemplo, ela é muito usada para fazer animações.

(53)

Sprite

Fazer uma requisição para cada uma das imagens é muito ruim em termos de performance, por

seguinte maneira: Montamos

isso podemos recorrer aos CSS Sprites da nossa lista não-ordenada de elementos, mas ao invés de utilizarmos

dos itens.

a tag img, aplicamos uma classe para cada um

Exemplo:

<ul>

<li class="escudos class="escudos

(54)

Sprite

Para então no CSS, utilizarmos como background apenas uma imagem

que contém todos os escudos. E para cada um dos elementos, colocamos a posição X e Y dentro dessa imagem que contém todos eles.

Exemplo: .escudos { background: url('images/sprite.png') } .atletico-mg { no-repeat; background-position: 0 -416px; } .botafogo { 0 -557px;

(55)

Sprite

Assim, conseguimos diminuir o tamanho em KB dos dados também o número de requisições HTTP para o servidor.

trafegados e

Para aplicar essa técnica você pode recorrer ao Photoshop ou Illustrator colocando todas as imagens em um só arquivo e então buscando a posição X (vertical) e Y (horizontal) com a régua. Uma excelente alternativa para pessoas masoquistas.

(56)

(57)

1 2

Cores

A W3C propõe diferentes maneiras de definir cores entre elas:

3 Código Hexadecimal.

2 RGB em valores inteiros ou porcentagem;

(58)

Cores

Você pode definir a cor, utilizando o nome da cor. Os nomes das cores que são válidos, são os listados nas recomendações CSS do W3C.

As recomendações para CSS 2.1, listam as 17 cores seguintes:

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, e yellow

(59)

Cores

(60)

Cores

É possível definir mais de 16 O RGB é abreviatura para:

milhões de cores indicando os valores RGB.

Assim, o código rgb(X, Y, Z)

quantidade X de vermelho

indica uma cor obtida, com a mistura de uma + Y de verde e Z de azul. Duas são as maneiras de definir a quantidade de cada cor: Uma faixa de numeração (0

(61)

Cores

Não é válido usar em uma definição número e porcentagem.

Exemplos:

Definições válidas

rgb(145, 230, 50) ou rgb(20%, 0%, 70%)

(62)

Cores

Em Hexadecimal também é possível definir mais de 16 milhões, assim como no RGB. Esta é a maneira mais conhecida de definir uma cor com

#RRGGBB onde RR, GG e BB representam um número hexadecimal entre 00 e FF para o Vermelho, o Verde e o Azul.

Hexadecimal é uma notação de 16 dígitos:

(63)

Cores

É indiferente usar letras maiúsculas ou minúsculas na sintaxe hexadecimal de cores,

dígitos:

no entanto, é válido abreviar a notação para três

#FFF = #FFFFFF ➢ ➢ #CF9 = #CCFF99 #cde = #ccddee #49c = #4499cc ➢ ➢

(64)

(65)

Unidades de medida

Tamanhos:

px: É a unidade para pixel;

%: É a unidade para porcentagem;

pt: É a unidade para pontos;

➢ ➢ ➢

(66)

Unidades de medida

(67)

(68)

Grupos de Propriedades

Dividiremos as propriedades em grupos. São eles:

1 1 2 2 3 3 4 4 5 5 Link k s Listas Cores de fundo Fontes Text

t o o s 6 6 7 7 Agrupamentos de Outras propriedades

(69)

(70)

Cores de Fundo

Grupo 1: Cores de fundo

background-color: É a propriedade que define elemento;

a cor de fundo de um

➢

background-image: É a propriedade que define uma imagem como fundo;

background-position: É a propriedade que define o posicionamento da imagem na página;

background-attachment: É a propriedade que define se a imagem

➢

(71)

Cores de Fundo

Grupo 1: Cores de fundo

background-repeat: É a propriedade que controla uma imagem de fundo. (repeat | repeat-x | repeat-y |

a repetição de

no-repeat);

➢

background-size: É a propriedade que define o tamanho das

➢

(72)

(73)

Fontes

Grupo 2: Fontes

font-family: É a propriedade que define a lista de fontes a ser utilizada;

serif: Caracterizada pelas fontes que possuem “pé”, (Times, Georgia);

san-serif: Caracterizada pelas fontes que não possuem “pé” (Arial);

➢ ➢ ➢

➢_monospace:_{Caracterizada pelas fontes que possuem uma largura} _fixa.

Ao especificar a fonte, é necessário informar qual a sua característica, caso nenhuma da lista for encontrada.

(74)

Fontes

Grupo 2: Fontes

font-style: É a propriedade que define

italic | oblique*);

o estilo da fonte. (normal |

➢

font-variant: É a propriedade que define a variação em tamanho da fonte. (normal | small-caps);

➢

font-weight: É a propriedade que define o “peso” da fonte.

bold | lighter | number);

(normal |

➢

font-size: É a propriedade que define o tamanho da fonte.

(75)

(76)

Textos

Grupo 3: Textos

color: É a propriedade que define a cor

text-align: É a propriedade que define

right | center | justify);

de um texto;

o alinhamento do texto. (left |

➢ ➢

text-decoration: É a propriedade que define “decoração” no texto. (none | underline | overline | line-through);

text-indent: É a propriedade que define um espaçamento da primeira linha do texto;

➢

(77)

Textos

Grupo 3: Textos

line-height: É a propriedade que define texto;

a distância entre as linhas do

➢

word-spacing: É a palavras;

letter-spacing: É a

propriedade que define o espaçamento entre as

➢

propriedade que define o espaçamento entre os

➢

(78)

(79)

Links

Grupo 4: Links

Para usarmos CSS em links, precisamos conhecer um pouco mais sobre

Pseudo-Classes. CSS Pseudo-Classes são usadas para adicionar efeitos especiais em alguns seletores.

(80)

Links

Grupo 4: Links

:active: Adiciona um estilo no elemento

:focus: Adiciona um estilo que tem foco

ativo; ativo;

➢ ➢

➢_:hover:_{Adiciona um estilo que tem o ponteiro do}

elemento;

:link: Adiciona um estilo no link que não foi visitado;

mouse sobre o

➢

(81)

(82)

Listas

Grupo 5: Listas

list-style-image: É marcador da lista. list-style-position: marcador da lista.

a propriedade que defini uma imagem como

➢

É a propriedade que define a posição do

➢

list-style-type:

lista.

É a propriedade que define o estilo de marcador da

(83)

(84)

Box-Model

Grupo 6: Box Model

O box model (modelo de caixa) compreende todos os elementos documento HTML e está relacionado ao layout da sua página.

do

Essencialmente, um box model consiste dos seguintes itens:

Conteúdo Espaçamentos

Bordas Margens

(85)

Box-Model

(86)

Box-Model

Grupo 6: Box Model

A leitura do tamanho deve ser realizada em sentido final de um box model é definido pela soma de:

horário, e o tamanho

Largura total = width + left padding + right padding + left border + right border + left margin + right margin.

Altura total = height + top padding + bottom padding + top border

+ bottom border + top margin + bottom margin.

➢

(87)

Box-Model

Grupo 6: Box Model

Qual será o tamanho final deste elemento?

div{

width:220px; height:500px; padding:10px;

border:5px solid gray;

(88)

Box-Model

Grupo 6: Box Model

Largura final: 220 + 10 + 10 + 5 + 5 = 250px

(89)

Box-Model

Grupo 6: Box Model

Margem, espaçamento e bordas

forma:

podem ser declarados da seguinte

propriedade-top: valor; propriedade-left: valor; propriedade-bottom: valor; propriedade-right: valor; ➢ ➢ ➢ ➢

(90)

Box-Model

Grupo 6: Box Model

Margens(margin): são as distâncias definidas, entre os lados que determinam o limite do seu documento/elemento.

body{

margin-top:100px; margim-right:50px; margim-bottom:150px; margim-left:100px;

(91)

Box-Model

Grupo 6: Box Model

Espaçamento(padding): são as distâncias e o conteúdo do documento/elemento.

definidas, entre as margens

body{

margin:100px 50px 150px 100px; padding: 20px;

(92)

Box-Model

Grupo 6: Box Model

Bordas(border): são as distâncias definidas, entre as margens e o espaçamento/conteúdo do seu documento/elemento.

body{ margin:100px 50px padding: 20px; border-width:1px; 150px 100px; }

(93)

Box-Model

Grupo 6: Box Model

border-width: É a propriedade que define a espessura de borda que

➢

será utilizado (medium | thin | thick | length);

border-color: É a propriedade que define a cor da borda;

➢

border-style: É

dashed | solid |

a propriedade que define

double | groove | ridge |

o estilo da borda

inset | outset).

(dotted |

(94)

Box-Model

Grupo 6: Box Model

Há também uma forma de controlar o Box-Model chamada box-sizing.

É uma propriedade que permite que mudemos o comportamento padrão do box-model.

Por padrão todos os elementos possuem o valor content-box para essa propriedade, sendo definido pelo conteúdo.

(95)

Box-Model

Grupo 6: Box Model

Essa propriedade permite um novo valor que resolve todos os problemas:

box-sizing: border-box;

O que ela faz? Simples! Altera o comportamento do box-model

fazendo com que o navegador calcule

contando não apenas o seu conteúdo mas

a largura e altura do elemento

(96)

Box-Model

Grupo 6: Box Model

Para aplicar essa regra geral para todo o site e, que seja funcional em todos os navegadores, basta adicionar a regra abaixo no CSS:

* {

-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;

(97)

Box-Model

(98)

(99)

Outras propriedades

Grupo 7: Outras propriedades

É possível controlar a largura e altura dos elementos.

width: Determina a largura de um elemento;

height: Determina a altura de um elemento;

max-width e min-width: Determina a largura um elemento; ➢ ➢ ➢ _{máxima e mínima de} max-height e um elemento.

min-height: Determina a altura máxima e mínima de

(100)

Outras propriedades

Grupo 7: Outras propriedades

Display (mostra) e Visibility (visibilidade).

A propriedade display determina como será apresentado o elemento, enquanto visibility determina se o elemento será visível ou não.

Os Os valores valores possíveis possíveis para para

visibility são: (visible | hidden);

display são: (none | block | inline

➢

(101)

Outras propriedades

Grupo 7: Outras propriedades

As diferenças entre display:none e visibility:hidden são:

display:none ocultará um elemento, e não ocupará o espaço no layout;

➢

visibility:hidden ocultará um elemento, mas continuará ocupando o

➢

(102)

Outras propriedades

Grupo 7: Outras propriedades

Posicionamento(position): Esta propriedade os elementos na tela. Este posicionamento atributos top, right, bottom e left.

permite que posicionemos pode ser realizado pelos

Para que estes atributos funcionem corretamente, devemos primeiramente definir qual o método

| fixed | relative | absolute).

(103)

Outras propriedades

Grupo 7: Outras propriedades

static: Segue o fluxo do layout da página;

➢

fixed: Método que fixará o elemento, mesmo um scroll;

que a página possua

➢

relative: bottom

Método que em conjunto com os de

atributos top, right,

➢

e left, movimentam o elemento acordo com o valor declarado. Este elemento pode sobrepor outros elementos, mas o

(104)

Outras propriedades

Grupo 7: Outras propriedades

absolute: Método que em conjunto com os atributos top, right,

➢

bottom e left, movimentam o elemento de acordo com o valor declarado. Este elemento não preserva o espaço de origem.

Há uma opção que controla a posição de profundidade do elemento, podendo controlar a

elemento em cima do

posição em via de camada, como se fosse um outro. É necessário usar posição para funcionar.

z-index: Método que permite trabalharmos os elementos em

(105)

Outras propriedades

Grupo 7: Outras propriedades

Flutuação(float):

Esta propriedade permite movimentar

um elemento para esquerda ou direita, e ainda podemos preencher o espaço vago

lado com outro elemento.

ao

Um elemento pode ser movimentado, apenas para a esquerda ou para

cima ou

a direita. Não é possível movimentar um elemento para para baixo. Para isto, utiliza-se a propriedade float.

(106)

Outras propriedades

Grupo 7: Outras propriedades

Um elemento flutua para esquerda ou para a direita, até possuir Caso não possua mais espaço, o elemento flutuará para baixo:

espaços.

left: Flutua o elemento para a esquerda;

right: Flutua o elemento para a direita.

➢ ➢

Para quebrarmos essa flutuação, utilizamos dos seguintes valores: (left | right | both).

(107)

(108)

Seletores Complexos

Boa parte da inteligência do CSS, está em saber utilizar uma maneira eficaz, escalável e inteligente.

os seletores de

Os seletores complexos selecionam elementos, que talvez seja preciso

fazer algum script em JavaScript para poder marcá-lo com uma

CLASS, ou um ID, para, então, formatá-lo.

Com os seletores complexos, você consegue formatar

elementos que antes eram inatingíveis.

(109)

Seletores Complexos

Agora, veja uma lista de seletores complexos e suas funções:

Não são todas as possibilidades, porque podem haver modificações e novos formatos. Lista atualizada pelo W3C:

www.w3.org/TR/css3-selectors/#selectors

Imagine que você tenha um título (h1), seguido de um parágrafo (p). É preciso selecionar todos os parágrafos que vem depois de um título H1. Com os seletores complexos, você fará assim:

(110)

Seletores Complexos

Este seletor é um dos mais simples e mais úteis, comparado utilizados em projetos por aí.

aos que são

Não é preciso adicionar uma classe com JQuery, e nem manipular o

CMS para marcar esse parágrafo. Ou seja, não precisamos fazer

H1. “milagre” para encontrar os parágrafos que vem logo depois de um

(111)

Seletores Complexos

elemento[atr]: Elemento com um atributo específico;

➢

➢_{elemento[atr=”x”]:} _{Elemento que tenha} _{um atributo} _{com valor}

específico, igual a “x”;

elemento[atr~=”x”]: Elemento com um atributo, cujo valor é uma lista separada por espaços, sendo que um dos valores é “x”;

elemento[atr^=”x”]: Elemento com um atributo, cujo valor comece exatamente com string “x”;

elemento[atr$=”x”]: Elemento com um atributo, cujo valor termina exatamente com string “x”;

➢

(112)

Seletores Complexos

elemento:nth-child(n):

elemento;

Seleciona um objeto N de um determinado

➢

elemento:checked: Seleciona elementos que estão checados, como radio buttons e checkboxes;

➢ E E > + F: F: Seleciona Seleciona

os elementos Es, que são filhos diretos de F;

➢

(113)

(114)

Pseudo-classes

Pseudo-classes são tipos de classes especiais pelo desenvolvedor (já são pré-definidas).

que não são definidas

A sua o link nome

maior utilização é com links (a) para definir diversos estilos quando é novo, visitado, etc. O seletor de pseudo-classe é escrito com o do elemento + dois pontos(:) + nome da pseudo-classe.

(115)

Pseudo-classes

As pseudo-classes dinâmicas

As pseudo-classes dinâmicas controlam os estados dos elementos.

Todos os elementos tem estados definidos, por exemplo o elemento link (a) tem vários estados:

Quando você passa o mouse, tira o mouse, clica no mouse e

quando ele é visitado. Estes estados do link podem ser formatados e também estão presentes em outros elementos.

(116)

Pseudo-classes

Para começar, vamos nos familiarizar com as pseudo-classes de links:

a:link: Apenas para os links não-visitados;

➢ ➢ ➢

a:visited: Quando o elemento foi visitado;

a:active: Quando o elemento está ativo ou pressionamos Enter.

(117)

Pseudo-classes

a:hover: Quando o mouse está em cima do mesmo.

➢

a:focus: Quando o elemento ganha foco. Por exemplo, quando os

➢

inputs ganham foco para serem preenchidos.

Útil para pessoas que possuem habilidade limitada, Podemos fazer diversos efeitos interessantes,

(118)

Pseudo-classes

Pseudo-classes estruturais

As pseudo-classes estruturais encontram elementos elementos.

em uma árvore de

Eles não formatam os estados, mas nos ajudam a encontrar elementos

específicos para que sejam formatados sem a ajuda de programação, ou inserção de alguma identificação direta no código. Por exemplo, uma

(119)

Pseudo-classes

Hoje podemos encontrar facilmente estes elementos, classe: nth-child().

utilizando a

(120)

Pseudo-classes

O seletor anterior encontra todas as linhas da tabela (tr) ímpares (odd)

dentro da tabela, e aplica um background cinza. Simples, não é?

Então, lembre-se:

Pseudo-classes selecionam elementos específicos nas árvores de elementos do HTML.

(121)

Pseudo-classes

Veja a lista de pseudo-classes que o CSS3 adicionou à cartilha:

elemento:target: Encontra um elemento alvo, e é muito utilizado para fazer abas;

elemento:empty: Encontra elementos que não tem filhos;

elemento:enabled: Encontra elementos que estão habilitados. Por exemplo: inputs de checkbox, texto e etc;

➢

➢ ➢

elemento:disabled: Encontra ou manipulação;

elementos desabilitados para edição

➢

(122)

Pseudo-classes

elemento:first-of-type: Encontra o primeiro elemento do tipo;

elemento:last-of-type: Encontra o último elemento do tipo;

elemento:first-child: Encontra o primeiro elemento filho;

elemento:last-child: Encontra o último elemento filho;

➢ ➢ ➢ ➢

➢ _{elemento:nth-of-type(}_pos_): _Encontra _{um elemento} _tomando _como

base sua posição na árvore de elementos do mesmo gênero;

elemento:nth-child(pos): Encontra um elemento tomando como base sua

posição na árvore de elementos;

➢

elemento:not(class): Seleciona os elementos definidos, MENOS os

➢

(123)

Pseudo-classes

Pseudo-elementos

Os pseudo-elementos permite que os autores selecionem informações

inacessíí́veis, e também possibilita aos desenvolvedores um caminho para referenciar conteúdos que não existem. Por exemplo:

Podemos inserir um elemento antes (::before), ou depois (::after) de um objeto já existente no HTML.

(124)

Pseudo-classes

Existem alguns pseudo-elementos básicos, que você já deve ter usado em seus projetos:

elemento::first-letter: Encontra a primeira letra da primeira palavra de um bloco de texto;

elemento::first-line: Seleciona a primeira linha de um bloco de texto;

➢

➢ _{elemento::before:}_{Insere um elemento no}

elemento;

início do conteúdo de um

elemento::after:

elemento.

Insere um elemento no final do conteúdo de um

(125)

(126)

Prefixos de identificação dos browsers

A combinação da grande variação de browsers no em

mercado, com

problemas

as

de

mais novas features do CSS, resultam

compatibilidade. Exemplo:

Utilizar uma feature que ainda está sendo estudada, e que somente o Firefox, por exemplo, suporta.

Caso você utilize a propriedade no seu CSS, os browsers que não suportam essa propriedade, ou que suportam com uma sintaxe diferente, podem dar problemas.

(127)

Prefixos de identificação dos browsers

Os prefixos (ou vendor-prefixes) são úteis para podermos experimentar

features que ainda estão sendo estudadas, e que são rascunhos nos documentos do W3C. A necessidade de ser adicionar prefixos antes das

propriedades, vem do fato que o CSS3 vem sendo adicionado gradativamente nos navegadores.

Um efeito x não funcionará da

=

Navegador y

Efeito X _{mesma maneira dos navegadores}

y e z, e pode ser que alguns deles não Navegador z

(128)

Prefixos de identificação dos browsers

Os principais abaixo:

(129)

Prefixos de identificação dos browsers

A primeira vista pode parecer complicado trabalhar com prefixos, mas além de ser uma parte importante no processo de padronização do

CSS3, você poderá posteriormente, evitar retrabalhos em projetos.

Além borda

CSS3

linhas

disso, ao trabalhar com um efeito de arredondada, por exemplo, sem utilizar o

você teria muito mais de código e imagens.

(130)