Apostila - CSS

APOSTILA DE CSS

Brazelino Bertolete Neto

Fábio José Colombo

Luciano de Jesus Guesso Rodrigues de Barros

Taquaritinga – SP

2020

LISTA DE FIGURAS

Figura 1 – Box Model ............................................................................................................... 26

Figura 2 – Box Model ............................................................................................................... 27

Figura 3 – Código da Imagem .................................................................................................. 45

LISTA DE QUADROS

Quadro 1 - Parâmetros Utilizados em Media Queries .............................................................. 54

Quadro 2 - Operadores ............................................................................................................. 55

SUMÁRIO

1. CSS(CASCADING STYLE SHEETS) .................................................................................. 6

1.1 BENEFÍCIOS DO CSS..................................................................................................... 6

1.2 FORMAS DE TRABALHAR COM CSS ........................................................................ 6

1.2.1 EXTERNO ................................................................................................................. 6

1.2.1.1 Tipos de Mídia ..................................................................................................... 7

1.2.2 FOLHA DE ESTILO INCORPORADA.................................................................... 8

1.2.3 FOLHA DE ESTILO INCORPORADO NO ESCOPO ............................................ 8

1.2.4 FOLHA DE ESTILO INLINE ................................................................................... 9

1.2.5 FOLHAS DE ESTILO MÚLTIPLAS ........................................................................ 9

2. SELETORES NO CSS ......................................................................................................... 11

2.1 ALGUNS EXEMPLOS DE DECLARAÇÃO DE SELETOR ....................................... 11

2.2 TÉCNICA DE CSS RESET............................................................................................ 24

2.2.1 RESET CSS NORMALIZE.CSS ............................................................................. 25

2.4 BOX MODEL EM CSS(MODELO DE CAIXAS) ........................................................ 26

2.5 UNIDADES DE MEDIDA EM CSS .............................................................................. 27

3. COMANDOS CSS ............................................................................................................... 29

4. LAYOUT .............................................................................................................................. 42

4.1 LAYOUT FLUIDO ........................................................................................................ 42

4.2 TRANSFORMANDO UM LAYOUT FIXO EM LAYOUT FLUIDO ......................... 42

4.3 IMAGENS E RECURSOS FLEXÍVEIS ........................................................................ 45

4.4 TÉCNICAS PARA IMAGENS FLEXÍVEIS ................................................................. 46

4.4.1 RILOADR ................................................................................................................ 46

4.4.2 JQUERY PICTURE ................................................................................................. 47

4.4.3 PICTURELL ............................................................................................................ 47

4.4.4 ADAPTIVE IMAGES.............................................................................................. 48

5. MEDIA QUERIES ............................................................................................................... 50

5.1 MEDIA TYPE ................................................................................................................ 50

5.2 MEDIA QUERIES.......................................................................................................... 51

5.2.1 OUTROS PARÂMETROS UTILIZADOS EM MEDIA QUERIES ...................... 52

5.5.2 OPERADORES ........................................................................................................ 54

5.3 Exemplo Prático da Utilização das Media Queries......................................................... 55

1. CSS(CASCADING STYLE SHEETS)

O CSS surgiu em Outubro de 1994, criado por Hakon Lie, que buscava facilitar o

desenvolvimento de sites, devido na época esta atividade ser muito complexa.

Em 1995, o CSS1 foi criado pela W3C, ganhando muito destaque entre 1997 e 1999, a

partir dai ficou conhecido pelos programadores. Atualmente, encontra-se na versão CSS 3.

1.1 BENEFÍCIOS DO CSS

Algumas vantagens são:

Um único arquivo css pode controlar vários documentos HTML, eliminando assim a

redundância.

Facilidade de criação dos layouts

1.2 FORMAS DE TRABALHAR COM CSS

O CSS formata conteúdo de uma página em HTML. Esse conteúdo pode ser: imagem,

texto, vídeo, áudio ou qualquer outro elemento criado.

O CSS pode ser trabalhado de três formas:

Externas;

Incorporadas;

Inline.

1.2.1 EXTERNO

Segundo o site Maujor(2014):

“Uma folha de estilo é dita externa, quando as regras CSS são declaradas em

um documento a parte do documento HTML, isto é, a folha de estilo é um

arquivo separado do arquivo html. Um arquivo de folha de estilo deve ser

gravado com a extensão .css”

Este tipo é ideal para ser aplicada a várias páginas, porém o arquivo css externo deverá

ser lincado junto ao código HTML, dentro da seção head, conforme o código abaixo:

<head>

<link rel="stylesheet" type="text/css" href="estilo.css" media=”all”>

</head>

Ou:

<head>

<style type="text/css">

@import url("estilo.css");

</style>

</head>

1.2.1.1 Tipos de Mídia

Comando

all

braile

embossed

handheld

print

projection

screen

speech

tty

tv

Os tipos mídias utilizados pelo CSS estão descritos na tabela abaixo:

Todos os dispositivos

Dispositivos táteis braile

Impressoras braile

Descrição

Dispositivos manuais/portáteis (tela pequena, monocromática, gráficos bitmap,

banda limitada)

Impresso, material opaco e documentos visualizados na tela em modo de

impressão

Projetores

Telas de computador

Sintetizadores de voz. Similar a "aural"

Mídias que utilizam caracteres de tamanho fixo, como terminais ou dispositivos

portáteis com capacidades limitadas de tela

Televisores

Tabela 1 – Tipos de Mídias

Fonte: W3C

Utilizado em especificações media queries como também na declaração do CSS

incorporado ou externo através do comando media, como demonstrado no código abaixo:

<link href="estilo.css" rel="stylesheet" media=”all”/>

Ou:

<style type=”text/css” media=”screen”>

</style>

1.2.2 FOLHA DE ESTILO INCORPORADA

Uma folha de estilo incorporada ou intern são declaradas na seção head do próprio

documento HTML. Este tipo de folha é ideal para ser aplicada a uma única página, podendo

somente mudar a aparência de somente um documento.

Conforme sintaxe mostrada a seguir.

<head>

<style rel="stylesheet" type="text/css">

body {

background: #000;

url(imagens/minhaimagem.gif);

}

</style>

</head>

1.2.3 FOLHA DE ESTILO INCORPORADO NO ESCOPO

Segundo o site Maujor(2014):

“A HTML5 criou uma folha de estilo do tipo vinculada para ser usada dentro

de um container da marcação HTML. As regras CSS declaradas nessa

modalidade de folha de estilo se aplicam somente ao elementos da marcação

que se encontram dentro do container, ou no escopo do container, daí seu

nome”.

Ainda de acordo com o site, a sintaxe para declarar uma folha de estilo deste tipo é

mostrada a seguir:



<div class="minha-classe">

<style rel="stylesheet" type="text/css" scoped="scoped">

/* regras de estilo */

</style>



</div>



1.2.4 FOLHA DE ESTILO INLINE

Folhas de Estilos Inline são declaradas dentro da tag de abertura do elemento HTML

com uso do atributo style, misturando a apresentação com a marcação.

A sintaxe é mostrada a seguir:

<p style="color:#000; margin: 5px;">

Aqui um parágrafo de cor preta e com 5px nas 4 margens.

</p>

1.2.5 FOLHAS DE ESTILO MÚLTIPLAS

Se houver alguma propriedade definida para um mesmo elemento em folhas de estilo

distintas, ocorrerá assim o EFEITO CASCATA e prevalecendo os valores da folha de estilo

mais específica.

Abaixo segue o exemplo extraindo do site Maujor:

Suponha, uma folha de estilo externa possua as seguintes declarações para o seletor h2:

h2 {

color: #fc0;

text-align: center;

font: italic 9pt Verdana, Sans-serif;

}

Uma folha de estilo interna possua as seguintes propriedades para o seletor h2:

h2 {

color: #fc0;

text-align: center;

font: italic 10pt Verdana, Sans-serif;

}

Prevalecerá a folha interna e, portanto, a fonte de h2 terá o tamanho igual a 10 pt.

LISTA DE EXERCÍCIOS

Aplique um estilo inline, um incorporado e outro externo nas duas páginas com os seguintes

temas:

Loja de Roupa

Loja Pet

2. SELETORES NO CSS

Uma folha de estilo é formada por uma ou mais regra CSS, sendo que cada regra é

composta por três partes: um seletor, uma propriedade e um valor. Portanto, sua sintaxe segue

conforme o código abaixo:

seletor {

propriedade: valor;

}

Seletor: corresponde ao elemento HTML, sendo este ele identificado por uma tag ou

uma classe ou um ID;

Propriedade: corresponde ao atributo do elemento HTML ao qual será aplicada a

regra;

Valor: corresponde a característica assumida pela propriedade.

Abaixo segue um exemplo de sintaxe de criação de uma regra no CSS:

p{

color: red;

}

2.1 ALGUNS EXEMPLOS DE DECLARAÇÃO DE SELETOR

Abaixo segue alguns exemplos de declaração de seletor no CSS:

*(Asterístico): ele atinge todos os elementos em uma página. Entretanto, este tipo de

seletor é muito utilizado para zerar as margens e o preenchimento dos elementos de

uma página. Porém, tome muito com este tipo de seletor, pois ele deixa o navegador

muito pesado, pois ele tem que selecionar todos os elementos de uma página. Além

disto tudo, este seletor é desnecessário. Abaixo segue um exemplo de sua utilização:

*{

margin: 0;

padding: 0;

}

Ele também pode ser usado como um seletor de elementos filho. Abaixo segue um

exemplo:

#pai * {

border: 1px solid black;

}

Isso fará com que ele aplique a seguinte regra em todos os elementos filhos de um

elemento identificado como “pai”. Porém, também não é recomendada sua utilização.

Este tipo de seletor tem compatibilidade com os seguintes navegadores:

IE6 ou superior;

Firefox;

Chrome;

Safari;

Opera.

#Identificador: este tipo de seletor aplica regra no elemento com identificador. Ele é

muito usado, contudo, seja cuidadoso ao usar seletores com identificador. Porém,

tome cuidado com a sua utilização, pois este tipo de seletor é rígido e não permitindo

reuso. Portanto, fica dica de sempre utiliza-lo com a precedência do nome da tag.

Abaixo segue o exemplo da sua utilização:

Forma Mais Comum:

#seletor{

width: 960px;

margin: auto;

}

Forma Otimizado

elemento#seletor{

width: 960px;

margin: auto;

}


IE6 ou superior;

Firefox;

Chrome;

Safari;

Opera.

.classe: muito conhecido como seletor de classe, sendo que a diferença entre um

identificador e uma classe é que, com a classe, você pode selecionar vários elementos.

Portanto, utilize seletor de classe quando você necessitar aplicar uma regra a um grupo

de elementos. Abaixo segue um exemplo de sua utilização:

.classe {

color: red;

}


IE6 ou superior;

Firefox;

Chrome;

Safari;

Opera.

a{

}

Elemento: este tipo de seletor se aplica todos os elementos específicos daquela

página, como por exemplo, se você usar o elemento p(parágrafo), será aplicado em

todos os elementos p da página. Abaixo segue um exemplo de sua utilização:

color: red;


IE6 ou superior;

Firefox;

Chrome;

Safari;

Opera.

ElementoX ElementoY: muito comum é o seletor de descendência, pois ele é mais

específico, como por exemplo, às vezes você quer selecionar um conjunto específico

de âncoras(a), porém se você utilizar o seletor anterior, será selecionado todos os

âncoras, entretanto, você deseja selecionar somente os âncoras que estão dentro de

li a {

}

uma lista não ordenada(li), portanto esta seria a melhor sintaxe. Abaixo segue o

exemplo de sua utilização:

text-decoration: none;


IE6 ou superior;

Firefox;

Chrome;

Safari;

Opera.

ElementoX + ElementoY: Muito conhecido como seletor adjacente. Ele somente

aplicará a regra sobre o elemento após o primeiro elemento. Como por exemplo, se

você quiser aplicar a cor vermelha sobre o primeiro parágrafo após uma lista não

ordenada, você poderá utilizar este seletor. Abaixo segue um exemplo de sua

utilização:

ul + p {

color: red;

}


IE7 ou superior;

Firefox;

Chrome;

Safari;

Opera.

ElementoX > ElementoY: A diferença entre o seletor descendente ElementoX

ElementoY e o seletor ElementoX > ElementoY é que este último somente seleciona

os elementos filhos de forma direta. No exemplo abaixo, ele aplicará regra de cor de

fonte vermelha a todos os elementos ul que estão contidos dentro da div com

identificador “lista”:

div#lista > ul {

color: red;

}

Na verdade, é recomendável utilizá-lo quando estiver trabalhando seleção de CSS

criados em JavaScript.


IE7 ou superior;

Firefox;

Chrome;

Safari;

Opera.

ElementoX ~ ElementoY: Este seletor é muito semelhante ao seletor ElementoX +

ElementoY, porém bem menos restritivo. Enquanto o primeiro(ul + p) só aplicará a

regra ao primeiro elemento após o elemento inicial, esse aplica a todos os elementos

após os primeiro elemento.

ul ~ p {

color: red;

}


IE7 ou superior;

Firefox;

Chrome;

Safari;

Opera.

Elemento[atributo]: Conhecido como seletor de atributos, ele seleciona os elementos

pelo o atributo específico, ou seja, todos elementos que possuírem o determinado

atributo, será aplicado a regra. No exemplo demonstrado abaixo, será aplicado a

formatação de fonte cor vermelha a todos os parágrafo que possuírem o atributo id:

p[id] {

color: red;

}


IE7 ou superior;

Firefox;

Chrome;

Safari;

Opera.

Elemento[atributo="valor"]: Semelhante ao seletor anterior, porém mais específico,

pois o anterior aplicava a todos os elementos que possui o atributo específico, este tipo

de seletor já se aplica a todos os elementos que possui o atributo específico, porém

como este atributo possuindo o valor também específico. No exemplo demonstrado

abaixo, será aplicado a formatação de fonte cor vermelha a todos os parágrafo que

possuírem o atributo id com valor “texto”:

p[id=”texto”] {

color: red;

}


IE7 ou superior;

Firefox;

Chrome;

Safari;

Opera.

Elemento[atributo*="valor"]: Semelhante ao seletor anterior, porém ele apresenta o

coringa chamado asterístico que representa que ela vai seleciona todos elementos

especificado no seletor, tendo o atributo específico do seletor contendo o valor

especificado em qualquer lugar da string, podendo ser início, no meio ou no fim da

string. Como por exemplo, será aplicado a formatação de fonte cor vermelha a todos

os parágrafo que possuírem o atributo id com valor “texto”, não importando que seja

início, meio ou fim:

p[id*=”texto”] {

color: red;

}


IE7 ou superior;

Firefox;

Chrome;

Safari;

Opera.

Elemento[atributo^="valor"]: Semelhante ao seletor anterior, porém aplicará a

regra para elementos que possui o atributo com o valor inicial especificado, como por

exemplo, será aplicado a formatação de fonte cor vermelha a todos os parágrafo que

possuírem o atributo id com valor inicial “texto”:

p[id^=”texto”] {

color: red;

}


IE7 ou superior;

Firefox;

Chrome;

Safari;

Opera.

Elemento[atributo$="valor"]: Semelhante ao anteior, porém aplicará a regra para

elementos que possui o atributo com o valor final especificado, como por exemplo,

será aplicado a formatação de fonte cor vermelha a todos os parágrafo que possuírem

o atributo id com valor final “texto”:

p[id$=”texto”] {

color: red;

}


IE7 ou superior;

Firefox;

Chrome;

Safari;

Opera.

Elemento[atributo~="valor"]: Neste tipo de seletor, poder-se-ia criar um atributo

chamado data-info que recebesse uma lista de itens, separados por espaço, em cada um

dos elementos. Como por exemplo, você pode criar um data-info dentro de cada

parágrafo, conforme ilustra o código abaixo:

<p id="linha01" data-info="linha palavra texto"> Linha 01 </p>

<p id="linha02" data-info="linha palavra texto"> Linha 02 </p>

Depois, você pode criar a seguinte regra:

a[data-info~="linha"] {

color: red;

}

a[data-info~="texto"] {

border: 1px solid black;

}

Portanto, será aplicado para o elementos específicos que contenha atributos com

algum valor da lista especificada no data-info de cada elemento.


IE7 ou superior;

Firefox;

Chrome;

Safari;

Opera.

Elemento:visited e Elemento:link: A pseudo-classe :link é muito utilizada quando

selecionar todas as âncoras que foram clicadas. Assim como, é utilizado pseudo-classe

:visited todas as âncoras que foram visitadas. Abaixo segue o exemplo de sua

utilização:

a:link {

color: red;

}

a:visted{

color: purple;

}


IE7 ou superior;

Firefox;

Chrome;

Safari;

Opera.

Elemento:checked: Essa pseudo-classe somente aplicará regra aos elementos que

foram selecionados(botão radio ou checkbox). Como por exemplo, todos elementos

input do tipo “radio” ficarão azul quando forem selecionados:

input[type=”radio”]:checked {

color: blue;

}


IE9 ou superior;

Firefox;

Chrome;

Safari;

Opera.

Elemento:hover: este tipo de seletor corresponde quando o mouse passa por cima do

elemento, e ele sofre aplicação da regra. Como por exemplo, o elemento p com

atributo id “linha”, vai mudar de cor para vermelho quando o mouse passar por cima:

p#linha:hover {

color: red;

}


IE6 ou superior;

Firefox;

Chrome;

Safari;

Opera.

Elemento:focus: este tipo de seletor esteja focado pelo teclado, como links ou campos

de um formulário. Como por exemplo, o elemento input com atributo id “campo”, vai

mudar de cor para vermelho quando ganhar o foco:

input#campo:focus {

color: red;

}


IE6 ou superior;

Firefox;

Chrome;

Safari;

Opera.

Elemento:visited: este tipo de seletor corresponde quando um link foi visitado. Como

por exemplo, o elemento a com atributo id “artigo”, vai mudar de cor para vermelho

quando alguém acessar o link:

a#artigo:visited {

color: red;

}


IE6 ou superior;

Firefox;

Chrome;

Safari;

Opera.

Elemento:active: este tipo de seletor corresponde quando um link está sendo

pressionado. Como por exemplo, o elemento a com atributo id “artigo”, vai mudar de

cor para vermelho quando alguém clicar para acessar o link:

a#artigo:active {

color: red;

}


IE6 ou superior;

Firefox;

Chrome;

Safari;

Opera.

Elemento:before: este tipo de seletor corresponde colocar uma formatação antes do

elemento. Como por exemplo, o elemento a com atributo id “artigo”, vai mudar de cor

para vermelho quando alguém clicar para acessar o link:

a#artigo:before {

border: 8px solid red;

}


IE6 ou superior;

Firefox;

Chrome;

Safari;

Opera.

Elemento:after: este tipo de seletor corresponde colocar uma formatação depois do

elemento. Como por exemplo, o elemento a com atributo id “artigo”, vai mudar de cor

para vermelho quando alguém clicar para acessar o link:

a#artigo:after {

border: 8px solid red;

}


IE6 ou superior;

Firefox;

Chrome;

Safari;

Opera.

Elemento:not(selector): este é a pseudo-classe negação. Caso você queira selecionar

um conjunto de elementos da mesma categoria, exceto alguns elementos especificados

por seus atributos, portanto, você pode utilizar este tipo de seletor que será muito útil.

Como por exemplo, será aplicada a cor vermelha no texto de todos os elementos

parágrafo, exceto no elemento parágrafo com identificador “linha”:

p:not(#linha) {

color: red;

}


IE9 ou superior;

Firefox;

Chrome;

Safari;

Opera.

Elemento::pseudoElemento: Este tipo de seletor é formado por pseudo-elementos

que são designados por ::, utilizado para aplicar regras de CSS na primeira linha ou na

primeira letra. Como por exemplo, aplicar a cor de letra vermelha na primeira linha:

p::first-line {

color: red;

}

Ou selecionar a primeira letra do parágrafo com letra vermelha:

p::first-letter {

color: red;

}


IE6 ou superior;

Firefox;

Chrome;

Safari;

Opera.

Elemento:nth-child(n): Este tipo de seletor é muito utilizado em uma lista de itens,

aplicando a regra CSS no item especificado pelo índice, partindo do início para fim.

Como por exemplo, será aplicada a formatação de cor vermelha na letra no terceiro

item:

li:nth-child(3) {

color: red;

}


IE9 ou superior;

Firefox;

Chrome;

Safari.

Elemento:nth-last-child(n): Semelhante ao seletor anterior, porém ele parte fim para

o início. Como por exemplo, será aplicada a formatação de cor vermelha na letra no

terceiro item do fim para início, ou seja, de uma lista de quatro itens, isto corresponde

ao segundo item:

li:nth-last-child(3) {

color: red;

}


IE9 ou superior;

Firefox 3.5 ou superior;

Chrome;

Safari;

Opera.

Elemento:first-child: Este seletor aplicará a regra CSS no primeiro item de cada

conjunto de item, ou seja, se houver de um conjunto de itens, será aplicado no

primeiro item de cada lista. Como por exemplo, será aplicada a formatação de cor de

texto vermelha no primeiro item de um conjunto de lista:

li:first-child {

color: red;

}


IE7 ou superior;

Firefox;

Chrome;

Safari;

Opera.

Elemento:last-child: Este seletor aplicará a regra CSS no último item de cada

conjunto de item, ou seja, se houver de um conjunto de itens, será aplicado no último

item de cada lista. Como por exemplo, será aplicada a formatação de cor de texto

vermelha no primeiro item de um conjunto de lista:

li:last-child {

color: red;

}


IE9 ou superior;

Firefox;

Chrome;

Safari;

Opera.

2.2 TÉCNICA DE CSS RESET

Um dos grandes problemas encontrados pelos desenvolvedores web é a forma como

os vários browsers interpretam de formas diferentes o mesmo código, não conseguindo o

mesmo resultado a página desenvolvida.

Para resolver este problema, antigamente os desenvolvedores desenvolviam vários

arquivos CSS para cada navegador.

Portanto, para resolver esse problema, desenvolveu-se uma técnica chamada “CSS

Reset”, que se aplica uma folha de estilos básica para resetar toda formatação “original”

aplicada pelo browser. Essa folha de estilos pode ser aplicada internamente HTML ou

externamente, sendo esta a técnica mais comum, devido várias páginas poderão utilizar a

mesma formatação.

Segundo Rodrigues(2016):

“O arquivo contendo o código para realizar o CSS Reset deve ser inserido

antes de qualquer outro arquivo de estilo, para que toda formatação adicional

seja feita com base nos elementos “sem estilo”.

O ideal é que essa técnica seja utilizada nos momentos iniciais da concepção

do site, pois inserir um arquivo desses com o site já funcionando pode gerar

problemas, uma vez que o layout foi montado em cima do padrão aplicado

pelo browser e não sobre os elementos “resetados””.

Este arquivo é um CSS normal aplicando formatação padrão sobre todas as tags,

aplicando formatação sobre fontes, margin e padding. Sendo que cada desenvolvedor pode

desenvolver o seu Reset CSS, porém há, na internet, vários arquivos CSS prontos.

Entretanto, os desenvolvedores desenvolvem um estilo mais simplificado, conforme

demonstra o código abaixo:

* {

padding:0;

margin:0;

vertical-align:baseline;

list-style:none;

border:0;

}

Ainda de acordo com Rodrigues(2016):

“A partir desse ponto os estilos específicos podem ser aplicados para montar

o layout desejado. Claro que problemas de incompatibilidade existem, mas

pelo menos assim se está partindo de uma mesma base, independente do

browser. Ou seja, um problema a menos com relação ao layout da página

quando esta é visualizada em diferentes navegadores”.

2.2.1 RESET CSS NORMALIZE.CSS

Normalize.css é um arquivo CSS que padroniza todos os elementos HTML para

serem processados em vários navegadores. Este arquivo apresenta as seguintes vantagens:

Preserva padrões;

Normaliza estilos;

Repara erros e inconsistências comuns dos diferentes navegadores.

Melhora a usabilidade.

Para se utilizar este arquivo, primeiramente, você deve baixar da internet e depois

linkar com a sua página através do seguinte comando: <link href="normalize.css"

rel="stylesheet"/>.

2.4 BOX MODEL EM CSS(MODELO DE CAIXAS)

Todos elementos do HTML é composto em um retângulo, formando uma caixa, ou

seja, todos elementos são blocos ou boxes que vão formando o layout da página.

Cada box é formado pelos seguintes elementos:

content(conteúdo): pode ser um texto , imagem etc;

padding(enchimento): está localizado ao redor do conteúdo;

border(bordas): são linhas que delimitam o elemento;

margin(margens): é o espaçamento entre os elementos.

A figura abaixo demonstra isto:

Figura 1 – Box Model

Fonte: W3School

Sabendo-se que cada elemento desta caixa é formado: Acima(Top), Abaixo(Bottom),

Esquerda(Left) e Direita(Right). Estes elementos podem ser formatado, conforme

demonstrado na figura abaixo:

Figura 2 – Box Model

Fonte: W3School

2.5 UNIDADES DE MEDIDA EM CSS

Vejam abaixo as unidades disponíveis:

Absolutas:

o in (polegadas)

o cm (centímetros)

o mm (milímetros)

o pt (pontos)

o pc (picas)

o px (pixels)

Relativas:

o em

o ex

Porcentagem:

o %

Unidades mais recomendadas são as relativas, pois o desenvolvedor mantém um

controle relativo em relação ao tamanho da fonte padrão do usuário. Já as unidades absolutas

permitem um controle exato da aparência da página.


Aplique um pelo menos três seletores nas duas páginas com os seguintes temas:

Loja de Roupa

Loja Pet

3. COMANDOS CSS

Abaixo segue uma tabela com alguns comandos de CSS:

Comandos CSS

Texto

Comando Definição Valores

Exemplo

Possíveis

text-align Alinhamento de Texto Left

Center

Right

Justify

Start

End

text-align: left;

text-indent Endentação de

Parágrafo

text-transform Formatação de

capitalização(Maiúscula

e Minúscula).

text-decoration Formatação de linha

decorativa.

Valores text-indent: 5px;

Numéricos Em

Conjunto Com

Uma das

Unidades de

Medidas(px,

em, entre

outras)

lowercase; text-transform: uppercase;

none;

uppercase;

none;


underline;

overline;

line-through

text-shadow Coloca sombreamento

no texto.

Deslocamento

Horizontal,

Vertical,

Esfumaçamento

e Cor.

text-shadow: 1px 1px 1px

rgba(0,0,0,0.6);

Posicionamento


Possíveis

Position Posição do objeto na

tela.

Absolute

Relative

Fixed

Static

Bottom Alinhamento do Objeto auto;

Com Relação a Valores

Margem Inferior Numéricos Em

Conjunto Com

Uma das

Unidades de

Medidas(px,

em, entre

outras)

Left

Alinhamento do Objeto auto;


Margem à Esquerda Numéricos Em

Conjunto Com

Uma das

Unidades de

Medidas(px,

em, entre

outras)

position: absolute;

bottom: auto;

bottom: 60px;

left: auto;

left: 60px;

Right

Alinhamento do Objeto auto;


Margem à Direita Numéricos Em

Conjunto Com

Uma das

Unidades de

Medidas(px,

em, entre

outras)

Top

Alinhamento do Objeto

Com Relação a

Margem Superior

Borda

auto;

Valores

Numéricos Em

Conjunto Com

Uma das

Unidades de

Medidas(px,

em, entre

outras)


Possíveis

Border Colocar borda em Tamanho da

objeto.

borda, Estilo da

Borda e Cor.

border-bottom Colocar borda na parte Tamanho da

inferior do objeto. borda, Estilo da

Borda e Cor.

border-left Colocar borda à Tamanho da

esquerda do objeto. borda, Estilo da

Borda e Cor.

border-right Colocar borda à direita Tamanho da

do objeto.

borda, Estilo da

Borda e Cor.

right: auto;

right: 60px;

top: auto;

top: 60px;

Exemplo

border: 5px dotted red;




border-top Colocar borda na parte Tamanho da border: 5px dotted red;

superior do objeto. borda, Estilo da

Borda e Cor.

box-shadow Colocar um Deslocamento box-shadow: 1px 1px 4px

sobreamento na borda. Horizontal, black;

Vertical,

Esfumaçamento

e Cor.

border-color Coloca cor na borda Cor border-color: #CCC #999

#999 #CCC;

border-radius Coloca curvas nas Valores em border-radius: 8px 6px 7px

bordas.

pixels ou 5px;

porcentagem.

Caixa


Exemplo

Possíveis

Float

Direção da flutuação da float;

float: left;

caixa.

inherit;

right;

none;

Clear Limpa o efeito de both;

clear: both;

flutuação.

float;

inherit;

right;

none;

Width Largura do Box auto;

Valores

Numéricos Em

Conjunto Com

Uma das

Unidades de

Medidas(px,

em, entre

outras).

max-width Largura máxima do auto;

Box

Valores

Numéricos Em

Conjunto Com

Uma das

Unidades de

Medidas(px,

em, entre

outras).

min-width Largura mínima do Box auto;

Valores

Numéricos Em

Conjunto Com

Uma das

Unidades de

Medidas(px,

em, entre

outras).

width: auto;

width: 200px;

max-width: auto;

max-width: 200px;

min-width: auto;

min -width: 200px;

Height Altura do Box auto;

Valores

Numéricos Em

Conjunto Com

Uma das

Unidades de

Medidas(px,

em, entre

outras).

max-height Altura máxima do Box auto;

Valores

Numéricos Em

Conjunto Com

Uma das

Unidades de

Medidas(px,

em, entre

outras).

min-height Altura mínima do Box auto;

Valores

Numéricos Em

Conjunto Com

Uma das

Unidades de

Medidas(px,

em, entre

outras).

height: auto;

height: 200px;

max-height: auto;

max-height: 200px;

min-height: auto;

min-height: 200px;

Padding Espaçamento da borda

em relação ao objeto;

padding-bottom Espaçamento da borda

abaixo em relação ao

objeto;

padding-left Espaçamento da borda

à esquerda em relação

ao objeto;

padding-right Espaçamento da borda

à direita em relação ao

objeto;

Valores

Numéricos Em

Conjunto Com

Uma das

Unidades de

Medidas(px,

em, entre

outras).

Valores

Numéricos Em

Conjunto Com

Uma das

Unidades de

Medidas(px,

em, entre

outras).

Valores

Numéricos Em

Conjunto Com

Uma das

Unidades de

Medidas(px,

em, entre

outras).

Valores

Numéricos Em

Conjunto Com

Uma das

Unidades de

Medidas(px,

em, entre

outras).

padding: 5px;

padding: 5px 3px 2px 4px;

padding-bottom: 5px;

padding-left: 5px;

padding-right: 5px;

padding-top Espaçamento da borda

acima em relação ao

objeto;

Margin Margem da borda em

relação ao objeto.

margin-bottom Margem da borda

abaixo em relação ao

objeto.

margin-left Margin da borda à

esquerda em relação ao

objeto;

Valores

Numéricos Em

Conjunto Com

Uma das

Unidades de

Medidas(px,

em, entre

outras).

Valores

Numéricos Em

Conjunto Com

Uma das

Unidades de

Medidas(px,

em, entre

outras).

Valores

Numéricos Em

Conjunto Com

Uma das

Unidades de

Medidas(px,

em, entre

outras).

Valores

Numéricos Em

Conjunto Com

Uma das

Unidades de

Medidas(px,

em, entre

outras).

padding-top: 5px;

margin: 5px;

margin: 5px 3px 2px 4px;

margin-bottom: 5px;

margin-left: 5px;

margin-right Margem da borda à

direita em relação ao

objeto;

margin-top Margem da borda

acima em relação ao

objeto;

Cor

Valores

Numéricos Em

Conjunto Com

Uma das

Unidades de

Medidas(px,

em, entre

outras).

Valores

Numéricos Em

Conjunto Com

Uma das

Unidades de

Medidas(px,

em, entre

outras).


Possíveis

Color Colocar cor no texto Nome das cores

em inglês;

#Valores

Hexadecimais;

Comando

rgba(Red,

Green, Blue,

Alpha).

margin-right: 5px;

margin-top: 5px;

Exemplo

color: red;

color: #0052cc;

color: rgba(0,0,0,1);

Opacity Opacidade do objeto. inherit;

Valores

Numéricos(

sabendo-se que

o 1 representa o

máximo e 0

representa o

mínimo)

Fundo da Página


Possíveis

Background Colocar cor ou imagem Nome das cores

no fundo

em inglês;

#Valores

Hexadecimais;

Caminho das

Imagens,

Quantidade de

Repetição e

Tamanho;

backgroundcolor

Colocar cor de fundo na Nome das cores

página.

em inglês;

#Valores

Hexadecimais.

backgroundimage

Colocar uma imagem Caminho da

de fundo na página. imagem.

backgroundrepeat

Define a repetição da no-repeat;

imagem no fundo da repeat;

página

repeat-x;

repeat-y;

opacity: 0.5;

Exemplo

background: white;

background: #ee00ff;

background:

url("../_imagens/imagem.jpg")

no-repeat 0px 80px;

background-color: white;

background-color: #ee00ff;

background-image:

url("../_imagens/imagem.jpg");

background-repeat: repeat;

background-repeat: no-repeat;

Layout


Possíveis

box-sizing Tamanho do box border-box;

padding-box;

margin-box;

contente-box;

Transição


Possíveis

Transition Transição de Efeitos Efeito e

Tempo.

Conteúdo Genérico


Possíveis

Display Exibição do conteúdo. block;

inline-block;

none.

Lista e Marcadores


Possíveis

list-style Estilo de marcadores da none;

lista.

Lista Não

Ordenada:

circle;

square;

disc.

Lista Ordenada:

decimal;

lower-latin;

Entre Outros.

Exemplo

box-sizing: border-box;

Exemplo

transition: opacity 1s;

Exemplo

display: block;

Exemplo

list-style: none;

list-style: disc;

list-style: decimal;

Fonte


Possíveis

font-family Define a fonte das Nome das

letras.

fontes.

font-size Define o tamanho das Valores

fontes.

Numéricos(

sabendo-se que

o 1 representa o

máximo e 0

representa o

mínimo)

font-weight Define o negrito nas bold

letras.

bolder

font-style Define o itálico nas

letras.

italic

Conteúdo


Possíveis

Contente Define o conteúdo. Valores de

texto ou

símbolo.

Exemplo

font-family: Arial;

font-size: 10pt;

font-weight: bold;

font-style: italic;

Exemplo

content: "\03B2";

Caso queira se aprofundar, consulte o arquivo CSS Referencial que consta neste material ou

acesse o site W3C.


Aplique formatação de estilo nas duas páginas com os seguintes temas:

Loja de Roupa

Loja Pet

4. LAYOUT

4.1 LAYOUT FLUIDO

É uma técnica utilizada pelos os desenvolvedores para que o seu site esteja adaptável

para qualquer resolução, a sua adaptação está relacionada com a unidade de medida utilizável.

As unidades de medidas pontos e pixels são que unidades de medida fixas e ems e

porcentagens, variáveis, portanto, eles se adaptam e mantêm relações de tamanho com outros

elementos de um documento.

Portanto, segundo Tárcio(2012):

“Fica claro que usar pts ou pxs não é o adequado para designs responsivos

(num primeiro momento, já que, com a prática e/ou experiência e/ou

demanda do projeto, pode ser necessário especificar alguns valores fixos em

determinadas situações)”.

Ainda de acordo com Tárcio(2012):

“marcar unidades com porcento fornece uma exibição mais consistente e

acessível para os visitantes. Quando as configurações de exibição do cliente

se alteram, as medidas marcadas com % se alteram de maneira mais razoável,

permitindo que a legibilidade seja preservada, bem como a acessibilidade e o

design visual”.

Agora com relação a fontes sempre é utilizado a unidade de medida em.

Portanto, quando se fala em responsividade com relação a texto, você deverá utilizar

a seguinte unidade de medida em, sabendo-se que para converter o elemento alvo em pixels

para contexto em pixel utiliza-se a seguinte forma para cálculo correto para gerar um site

responsivo: Resultado Final = Elemento Alvo / Contexto do Elemento Alvo. Ou seja:

Elemento Alvo. Elemento-alvo com a medida atual;

Contexto do Elemento Alvo. Tomando como base o elemento-pai;

Resultado Final. O valor relativo.

4.2 TRANSFORMANDO UM LAYOUT FIXO EM LAYOUT FLUIDO

apostila.

Para este exemplo, será modificado a página e o CSS que está junto no material desta

Primeiramente, deve-se utilizar a meta tag viewport, pois ela é responsável exibir

páginas web feitas somente para desktop (no momento, a imensa maioria de todas elas)

ajustando. Deve-se seguir conforme código abaixo:

<meta name="viewport" content="width=device-width,initial-scale=1">.

Agora, se você pegar o elemento container, ele é uma div, e portanto, não há um

elemento pai, portanto, pega-se a resolução de 960px é a unidade fixa do container e divide-se

pela resolução, como no exemplo, a tela utilizada tinha 1366px, sendo isto dará um resultado

final de 70,27%.

Agora se pegar o elemento h1, ele tem como padrão 32px para converter para

unidade de medida em, deve-se pegar o 32px e dividir pelo elemento pai que no caso é o

padrão do navegador(16px), sendo assim terá um valor de 2em.

Agora se pegar a margem do conteúdo com relação elemento pai container, você

deve-se pegar o valor do elemento alvo(15px) e dividir pelo elemento pai(960px) e depois

multiplicar por 100, que dará um valor final de 1.5625%.

Como o Contexto de .content-main, que é o elemento .content, não possui declaração

explícita de largura, é preciso verificar o próximo elemento ascendente. No caso, é o

.container. Este sim com declaração (prévia) de largura de 960px. Por isso, neste caso, o

Contexto será de 960, portanto pega-se o valor do elemento alvo .content-main(593px) e

divide-se pelo elemento de contexto(960px) que dará o resultado de 61.7708%.

Ainda de acordo com o exemplo extraído do livro de Tárcio(2012):

“O elemento .hero (e seu descendente .brief), dentro de .content-main,

também precisa ter suas medidas convertidas. Algo interessante a se levar em

conta é que o cálculo da relatividade de .hero .brief é 5 / 593 = 0.008431.

Contudo, apesar de esta ser uma ciência (pretensiosamente) exata, há muito

do fator humano envolvido. Portanto, quando estiver desenvolvendo grids

flexíveis e algum resultado, apesar de preciso, não for do agrado, não há nada

demais em (caso isso seja responsabilidade sua) arredondar este valor”.

Agora altere os outros elementos descendente do .content-main, conforme código

abaixo:

.last-contents {

font-size: .75em; /* 12 / 16 */

}

.last-content-call {

float: left;

margin: 2.5295% 2.5295% 2.5295% 0; /* 15 / 593 (.content-main) */

width: 47.2175%; /* 280 / 593 */

}

.last-content-call .brief {

margin: 1.7857% 0; /* 5 / 280 */

}

Agora com a barra lateral, incluído todos os seus descendentes, altere:

.content-sidebar {

background-color: #F0F0F0;

float: right;

padding: 1.0416%; /* 10 / 960 */

width: 33.5416%; /* 322 / 960 */

}

.main-nav ul {

list-style-type: none;

}

.main-nav li {


float: left;

margin: 4.6583%; /* 15 / 322 (.content-sidebar) */

outline: 1px solid #DEDEDE;

text-align: center;

width: 40.3726%; /* 130 / 322 */

}

.main-nav a {

display: block;

padding: 7.6923%; /* 10 / 130 */


}

E para finalizar, agora vem o rodapé:

.main-footer {


float:left;

font-size: .75em; /* 12 / 16 */

margin: 1.5625% 0; /* 15 / 960 */

}

padding: 1.5625%; /* 15 / 960 */

text-align: center;

width: 100%;

4.3 IMAGENS E RECURSOS FLEXÍVEIS

Dentro de uma página, há vários elementos visuais(imagens) que devem ser ajustar em

conjunto com a resolução da tela, para isto, utiliza-se o CSS. Será feito um exemplo,

utilizando o exemplo do capítulo anterior, portanto, adicione a linha abaixo no código:

Figura 3 – Código da Imagem

Fonte: Próprio Autor

Agora tente modificar a resolução da tela do navegador, você verá que a imagem foi

fixada com o tamanho de 350px de largura. Para resolver, este problema basta somente um

pouco de CSS, então acrescente o seguinte CSS no arquivo style.css:

img,

iframe,

object,

embed,

video {

height: auto;

max-width: 100%;

}

Agora você verá que a imagem se ajusta automaticamente em 100% de acordo com o

container o qual está inserido a imagem.

4.4 TÉCNICAS PARA IMAGENS FLEXÍVEIS

Porém, há um grande dilema: uma imagem apresenta tamanho de Kb, Mb entre outros.

Quando você visualiza esta imagem de um computador desktop com uma internet veloz

parece que o tamanho não seja o problema, porém quando você visualiza de um dispositivo

móvel com uma resolução menor e uma internet mais lenta, pode parecer um terror. Para isto,

há várias técnicas para imagens flexíveis.

4.4.1 RILOADR

Segundo Tárcio, o Riloadr se auto-intitula um framework independente carregador de

imagens responsivas.

Ainda de acordo com o próprio autor, ele realmente possui muitas boas características.

Só para citar algumas:

Relativamente fácil de aprender e usar;

Oferece bastante controle sobre como as imagens responsivas irão se comportar;

Opção de carregamento sob demanda (“lazy load”) das imagens;

Suporta browsers com JavaScript desabilitado (ou sem JavaScript);

Não faz múltiplas requisições para a mesma imagem.

A ideia principal do Riloadr é trocar o atributo src pelo atributo data-src. E com

JavaScript, é possível conseguir excelentes resultados:

<img data-src="cachorro.jpg">

<noscript>

<img src="img/small/cachorro.jpg">

</noscript>

4.4.2 JQUERY PICTURE

Ele é um plugin para jQuery(Tamanho de 2 KB), responsável por deixar as imagens

responsivas. Ele é utilizado com elemento <figure>, em conjunto alguns data-*), também

utilizado com elemento <picture>. Abaixo segue um exemplo:

<figure class="responsive" data-media="assets/img/small.png" datamedia440="assets/img/medium.png"

data-media600="assets/img/large.png">

</figure>

$(function(){

})

<noscript>

</noscript>

<img src="assets/img/large.png" alt="">

Após isto, para inicializar o plugin, basta digitar o seguinte código JQuery:

$('figure.responsive').picture();

Ele tem suporte pelos melhores navegadores e pelo Internet Explorer.

4.4.3 PICTURELL

Ele é uma abordagem de imagens responsivas. Porém, ele exige uma marcação

diferente:

<div data-picture data-alt="Descrição da imagem">

<div data-src="small.jpg"></div>

<div data-src="medium.jpg" data-media="(min-width: 400px)">

</div>

<div data-src="large.jpg" data-media="(min-width: 800px)">

</div>

<div data-src="extralarge.jpg" data-media="(min-width: 1000px)">

</div>

<noscript>

<img src="assets/img/small.jpg" alt="Descrição da imagem">

</noscript>

</div>

4.4.4 ADAPTIVE IMAGES

De acordo com Tárcio(2012):

“Adaptive Images é uma das técnicas que, na opinião do criador (e de

milhares de pessoas pelo mundo que a utilizam), mais fazem mais sentido.

Adaptive Images detecta o tamanho da tela do visitante e automaticamente

cria, faz cache e entrega versões redimensionadas de imagens referenciadas

em tags <img>, apropriadas ao dispositivo que está sendo usado.

A técnica envolve o uso de PHP, JavaScript e um pouco de conteúdo em seu

arquivo .htaccess. Além de ser bastante e ciente por servir diferentes

tamanhos da mesma imagem dependendo do dispositivo usado para a

visualização do site, um outro ponto forte é que nenhuma alteração na

marcação HTML se faz necessária.”

Cuidado Com as Imagens de Alta Resolução

Algumas dicas para você trabalhar com imagens de alta resolução e não sobrecarregue

a sua aplicação web, sendo que Tárcio cita Bradley:

“Não fazer requisição da mesma imagens várias vezes. Quando o

navegador vê pela primeira vez um elemento img no DOM, ele,

imediatamente faz uma requisição ao servidor para esta imagem (mesmo

antes de o DOM estar pronto). O atributo src deve ser alterado antes mesmo

de o navegador passar pelo elemento de imagem ou já será tarde e a

requisição já terá sido feita. Além disso, se vários pedidos estavam sendo

feitos para uma imagem, isso não só retarda o navegador e impacta na

performance, mas, também, aumenta o “estresse” adicional sobre os

servidores.

Não usar cookie nem o elemento <base>. Não se deve usar por causa do

lookahead parser dos navegadores que já dispara mais requisições das <img>

antes mesmo de o JavaScript entrar em ação. Ou seja, o download da imagem

começa antes de o código que especifica o cookie ou base rodar.

Manipulação mínima do DOM. Manipular o DOM requer tempo e retarda a

atuação do navegador, portanto, a solução usada deve fazer tão poucas

atualizações no DOM quanto possível para garantir que todos os dispositivos,

especialmente os de baixa capacidade de processamento, possam lidar com

esta manipulação.

Imagens devem continuar visíveis sem JavaScript. Se o JavaScript não

estiver habilitado, o navegador ainda deve ser capaz de interpretar e

renderizar todas as imagens da página em seu tamanho default.

Não apresentar imagens em alta resolução para todos. A maioria dos

usuários não têm displays de alta resolução, isso é fato. Ter servidores

servindo imagens maiores para todos os usuários adiciona uma “pressão

extra” nos servidores, clientes, largura de banda, etc. Só apresente imagens de

alta resolução para aqueles que realmente podem se valer deste recurso”.

5. MEDIA QUERIES

5.1 MEDIA TYPE

É uma recomendação da W3C(desde do CSS2) para especificação qual é tipo de

dispositivo será aplicado as regras de estilos(CSS), como por exemplo, se estiver utilizando

uma TV para projetação do site, portanto, no atributo media, que está contido na tag link(tag

que liga o arquivo CSS com a página), deve-se especificar TV, conforme demonstrado na

figura abaixo:

<link href="estilo.css" rel="stylesheet" media=”tv”/>

E assim, deve especificar qual é o dispositivo que será exibido a página. Na tabela xx

tem todos tipos de media disponível para o CSS.

Também é possível dentro de um mesmo arquivo CSS, você criar várias regras CSS

para vários dispositivos, como ilustra o exemplo abaixo:

@media screen{

body{

color: red;

}

}

@media projection{

body{

color: blue;

}

}

Se você observar o código anterior, há duas regras de estilos para serem aplicadas em

dois tipos de dispositivos, um tela de computador(screen) e outra para projetores(projection).

Também poderia juntar duas mídias numa mesma regra, conforme ilustrado na figura

abaixo:

@media projection, screen{

body{

color: blue;

}

}

Portanto, com o passar dos anos, os dispositivos foram evoluindo, e ai as Media Type

não conseguiam mais diferenciar os diferentes tipos de dispositivos, pois mesmo dispositivos

menores tinham poder de renderização dos seus navegadores como se fossem navegadores de

dispositivos maiores, porém a forma de trabalhar dos dispositivos continuava diferente, ou

seja, a resolução de tela. Para resolver este problema, surge as Media Queries.

5.2 MEDIA QUERIES

É uma recomendação da W3C(desde do 2012) para especificação qual é tipo de

dispositivo será aplicado as regras de estilos(CSS), como por exemplo, se estiver utilizando

um Projetor, com largura máxima de 320px, para projetação do site, portanto, no atributo

media, que está contido na tag link(tag que liga o arquivo CSS com a página), pode-se

especificar conforme demonstrado na figura abaixo:

<link href="estilo.css" rel="stylesheet" media=”tv and (max-width: 320px)”/>

Também é possível dentro de um mesmo arquivo CSS, você criar várias regras CSS

para um mesmo dispositivo com várias resoluções, como ilustra o exemplo abaixo:

@media screen and (min-width: 320px){

body{

color: red;

}

}

@media screen and (min-width: 480px){

body{

color: blue;

}

}

5.2.1 OUTROS PARÂMETROS UTILIZADOS EM MEDIA QUERIES

Pode-se utilizar outros parâmetros, conforme demonstra a tabela abaixo:

Parâmetros Utilizados em Media Queries

Parâmetros Definição Sintaxe

aspect-radio

Define a proporção que (aspect-radio: proporção)

será exibido o navegador

na tela, sendo o primeiro

número aplicado a

proporção de pixels na

horizontal, e o segundo

número, a proporção de

pixel na vertical.

@media screen and (aspect-radio: 16/9){

body{

color: blue;

}

}


color

Indica a quantidade de bit (color: quantidade de bits)

de cor do dispositivo. Se o

dispositivo não tiver

números diferentes de bit,

então o valor será 0.

@media screen and (color){

body{

color: blue;

}

}

@media screen and (min-color: 6){

body{

color: blue;

}

}

@media screen and (max-color: 16){

body{

color: blue;

}

}


device-aspect-radio Define a proporção da tela

do dispositivo, sendo o

primeiro número aplicado a

proporção de pixels na

horizontal, e o segundo

número, a proporção de

pixel na vertical.

@media screen and (device-aspect-radio: 16/9){

body{

color: blue;

}

}


device-height

Define a altura da tela do

dispositivo(em pixel).

@media screen and (max-device-height: 329px){

body{

color: blue;

}

}

(device-aspect-radio:

proporção)

(device-height: número px)

@media screen and (min-device-height: 290px){

body{

color: blue;

}

}


device-width

Define a largura da tela do (device-width: número px)

dispositivo(em pixel).

@media screen and (max-device-width: 329px){

body{

color: blue;

}

}

@media screen and (min-device- width: 290px){

body{

color: blue;

}

}


orientation Indica o modo de (orientation: orientação)

exibição(Paisagem/Retrato)

que está sendo exibido.

@media screen and (orientation: landscape){

body{

color: blue;

}

}

@media screen and (orientation: portrait){

body{

color: blue;

}

}

Quadro 1 - Parâmetros Utilizados em Media Queries

Aqui foi apresentado somente alguns tipos de parâmetros, porém há vários.

5.5.2 OPERADORES

Para declaração de uma Media Querie, há alguns operadores que se pode trabalhar, na

tabela abaixo está representado estes operadores:


and Operador de junção(e). @media dispositivo and

(parâmetro: valor)

@media screen and (min-width: 480px) and (max-width: 500px){

body{

color: blue;

}

}

, Operador de disjunção(ou). @media dispositivo and

(parâmetro: valor),

@media (parâmetro: valor)

@media screen and (min-width: 480px) and (max-width: 500px),

@media projection and (min-width: 380px) and (max-width: 720px),

{

body{

color: blue;

}

}

only Somente para aquele

determinado dispositivo

com aquela determinada

resolução

@media only dispositivo

and (parâmetro: valor),

@media only screen and (min-width: 480px) and (max-width: 500px),

@media only projection and (min-width: 380px) and (max-width: 720px),

{

body{

color: blue;

}

}

Quadro 2 - Operadores

5.3 Exemplo Prático da Utilização das Media Queries

Abaixo o exemplo do HTML:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Layout Fixo</title>

<meta name="viewport" content="width=device-width,initial-scale=1">.

<link href="normalize.css" rel="stylesheet" />

<link href="style.css" rel="stylesheet" />

</head>

<body>

<div class="container">

<header class="header">

<h1>

Media Queries

</h1>

<div class="content">

<div class="content-main">

<article class="hero">

<h2>

Título Importante

</h2>

<img src="cute-dogs.jpg">

<p class="brief">

Descrição ou resumo de um

conteúdo importante, que precisa ser

deste

mostrado para evidenciar a notoriedade

conteúdo. Descrição ou

resumo de um conteúdo importante, que

precisa ser mostrado para evidenciar a

notoriedade deste conteúdo.

</p>

</article>

</div>

</div>

</header>

</html>

</body>

</div>

Agora será colocado o código do CSS:

@charset "UTF-8";

html {

}

font-family: Arial, Helvetica, sans-serif;

.container {

margin: 0 auto;

width: 70.27%;

}

h1 {

}

font-size: 4em;

h2{

}

font-size: 2em;

p{

font-size: 1.5em;

}

.content {

margin: 1.5625% 0;

}

.content-main {

float: left;

width: 61.7708%;

}

.content-main {

float: left;

width: 61.7708%;

}

.hero {

}

margin: 4.2158% 0;

.brief {

}

margin: 1% 0;

img{

width: 40%;

height: 40%;

}


h1 {

font-size: 2em;

}

h2{

font-size: 1em;

}

p{

font-size: .5em;

}

body

{

background-color: yellow;

}

}


h1 {

font-size: 1em;

}

h2{

}

font-size: .50em;

p{

}

font-size: .25em;

body

{

background-color: silver;

}

}

REFERÊNCIAS

RODRIGUES, J. Como utilizar a técnica CSS Reset. Disponível

em:<http://www.devmedia.com.br/como-utilizar-a-tecnica-css-reset/26797>. Acessado

em: Out. 2015.

SILVA, M. S. A regra CSS e sua sintaxe. Disponível

em:<http://www.maujor.com/tutorial/sintaxetut.php>. Acessado em: Fev. 2016.

SILVA, P. Normalize. Disponível em: <https://jaison.com.br/post/normalizecsspadronizar-css>.

Acessado em: Jan. 2016.

Site W3C. Guia de Referência CSS 2.1. Disponível em:

<http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-tipos>. Acessado em: Mar.

16.

WAY, J. Os 30 Seletores CSS Que Você Deve Memorizar. Disponível em:

<http://code.tutsplus.com/pt/tutorials/the-30-css-selectors-you-must-memorize--net-

16048>. Acessado em: Fev. 2016.

Apostila - CSS

Create successful ePaper yourself

Delete template?

Save as template?