Apostila - CSS

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 verso CSS 3.
1.1 BENEFCIOS DO CSS
Algumas vantagens so:

Um nico arquivo css pode controlar vrios documentos HTML, eliminando assim a
redundncia.
Facilidade de criao dos layouts
1.2 FORMAS DE TRABALHAR COM CSS
O CSS formata contedo de uma pgina em HTML. Esse contedo pode ser: imagem,
texto, vdeo, udio ou qualquer outro elemento criado.
O CSS pode ser trabalhado de trs formas:
Externas;
Incorporadas;
Inline.
1.2.1 EXTERNO
Segundo o site Maujor(2014):

Uma folha de estilo dita externa, quando as regras CSS so 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 extenso .css
Este tipo ideal para ser aplicada a vrias pginas, porm o arquivo css externo dever
ser lincado junto ao cdigo HTML, dentro da seo head, conforme o cdigo 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 Mdia
Os tipos mdias utilizados pelo CSS esto descritos na tabela abaixo:

Comando Descrio
all Todos os dispositivos
braile Dispositivos tteis braile
embossed Impressoras braile
handheld Dispositivos manuais/portteis (tela pequena, monocromtica, grficos bitmap,
banda limitada)
print Impresso, material opaco e documentos visualizados na tela em modo de
impresso
projection Projetores
screen Telas de computador
speech Sintetizadores de voz. Similar a "aural"
tty Mdias que utilizam caracteres de tamanho fixo, como terminais ou dispositivos
portteis com capacidades limitadas de tela
tv Televisores
Tabela 1 Tipos de Mdias
Fonte: W3C
Utilizado em especificaes media queries como tambm na declarao do CSS
incorporado ou externo atravs do comando media, como demonstrado no cdigo 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 so declaradas na seo head do prprio
documento HTML. Este tipo de folha ideal para ser aplicada a uma nica pgina, podendo
somente mudar a aparncia 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 marcao HTML. As regras CSS declaradas nessa
modalidade de folha de estilo se aplicam somente ao elementos da marcao
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 so declaradas dentro da tag de abertura do elemento HTML

com uso do atributo style, misturando a apresentao com a marcao.
A sintaxe mostrada a seguir:
<p style="color:#000; margin: 5px;">
Aqui um pargrafo de cor preta e com 5px nas 4 margens.
</p>
1.2.5 FOLHAS DE ESTILO MLTIPLAS
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 especfica.
Abaixo segue o exemplo extraindo do site Maujor:
Suponha, uma folha de estilo externa possua as seguintes declaraes 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 EXERCCIOS
Aplique um estilo inline, um incorporado e outro externo nas duas pginas 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 trs partes: um seletor, uma propriedade e um valor. Portanto, sua sintaxe segue
conforme o cdigo 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 caracterstica assumida pela propriedade.
Abaixo segue um exemplo de sintaxe de criao de uma regra no CSS:
p{
color: red;
}
2.1 ALGUNS EXEMPLOS DE DECLARAO DE SELETOR
Abaixo segue alguns exemplos de declarao de seletor no CSS:

*(Asterstico): ele atinge todos os elementos em uma pgina. Entretanto, este tipo de
seletor muito utilizado para zerar as margens e o preenchimento dos elementos de
uma pgina. Porm, tome muito com este tipo de seletor, pois ele deixa o navegador
muito pesado, pois ele tem que selecionar todos os elementos de uma pgina. Alm
disto tudo, este seletor desnecessrio. Abaixo segue um exemplo de sua utilizao:
*{
margin: 0;
padding: 0;
}
Ele tambm 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. Porm, tambm no recomendada sua utilizao.
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. Porm, tome
cuidado com a sua utilizao, pois este tipo de seletor rgido e no permitindo reuso.
Portanto, fica dica de sempre utiliza-lo com a precedncia do nome da tag. Abaixo
segue o exemplo da sua utilizao:
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 diferena entre um
identificador e uma classe que, com a classe, voc pode selecionar vrios elementos.
Portanto, utilize seletor de classe quando voc necessitar aplicar uma regra a um grupo
de elementos. Abaixo segue um exemplo de sua utilizao:
.classe {
color: red;
}
IE6 ou superior;
Firefox;
Chrome;
Safari;
Opera.
Elemento: este tipo de seletor se aplica todos os elementos especficos daquela

pgina, como por exemplo, se voc usar o elemento p(pargrafo), ser aplicado em
todos os elementos p da pgina. Abaixo segue um exemplo de sua utilizao:
a{
color: red;
}
IE6 ou superior;
Firefox;
Chrome;
Safari;
Opera.
ElementoX ElementoY: muito comum o seletor de descendncia, pois ele mais

especfico, como por exemplo, s vezes voc quer selecionar um conjunto especfico
de ncoras(a), porm se voc utilizar o seletor anterior, ser selecionado todos os
ncoras, entretanto, voc deseja selecionar somente os ncoras que esto dentro de
uma lista no ordenada(li), portanto esta seria a melhor sintaxe. Abaixo segue o
exemplo de sua utilizao:
li a {
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 aps o primeiro elemento. Como por exemplo, se
voc quiser aplicar a cor vermelha sobre o primeiro pargrafo aps uma lista no
ordenada, voc poder utilizar este seletor. Abaixo segue um exemplo de sua
utilizao:
ul + p {
color: red;
}
IE7 ou superior;
Firefox;
Chrome;
Safari;
Opera.
ElementoX > ElementoY: A diferena 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 esto contidos dentro da div com
identificador lista:
div#lista > ul {
color: red;
}
Na verdade, recomendvel utiliz-lo quando estiver trabalhando seleo de CSS
criados em JavaScript.
IE7 ou superior;
Firefox;
Chrome;
Safari;
Opera.
ElementoX ~ ElementoY: Este seletor muito semelhante ao seletor ElementoX +

ElementoY, porm bem menos restritivo. Enquanto o primeiro(ul + p) s aplicar a
regra ao primeiro elemento aps o elemento inicial, esse aplica a todos os elementos
aps 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 especfico, ou seja, todos elementos que possurem o determinado
atributo, ser aplicado a regra. No exemplo demonstrado abaixo, ser aplicado a
formatao de fonte cor vermelha a todos os pargrafo que possurem o atributo id:
p[id] {
color: red;
}
IE7 ou superior;
Firefox;
Chrome;
Safari;
Opera.
Elemento[atributo="valor"]: Semelhante ao seletor anterior, porm mais especfico,

pois o anterior aplicava a todos os elementos que possui o atributo especfico, este tipo
de seletor j se aplica a todos os elementos que possui o atributo especfico, porm
como este atributo possuindo o valor tambm especfico. No exemplo demonstrado
abaixo, ser aplicado a formatao de fonte cor vermelha a todos os pargrafo que
possurem 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, porm ele apresenta o

coringa chamado asterstico que representa que ela vai seleciona todos elementos
especificado no seletor, tendo o atributo especfico do seletor contendo o valor
especificado em qualquer lugar da string, podendo ser incio, no meio ou no fim da
string. Como por exemplo, ser aplicado a formatao de fonte cor vermelha a todos
os pargrafo que possurem o atributo id com valor texto, no importando que seja
incio, meio ou fim:
p[id*=texto] {
color: red;
}
IE7 ou superior;
Firefox;
Chrome;
Safari;
Opera.
Elemento[atributo^="valor"]: Semelhante ao seletor anterior, porm aplicar a regra

para elementos que possui o atributo com o valor inicial especificado, como por
exemplo, ser aplicado a formatao de fonte cor vermelha a todos os pargrafo que
possurem 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, porm aplicar a regra para

elementos que possui o atributo com o valor final especificado, como por exemplo,
ser aplicado a formatao de fonte cor vermelha a todos os pargrafo que possurem
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 espao, em cada um
dos elementos. Como por exemplo, voc pode criar um data-info dentro de cada
pargrafo, conforme ilustra o cdigo 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 especficos 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
utilizao:
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(boto radio ou checkbox). Como por exemplo, todos elementos
input do tipo radio ficaro 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 aplicao 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 formulrio. 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 algum 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 algum 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 formatao antes do

elemento. Como por exemplo, o elemento a com atributo id artigo, vai mudar de cor
para vermelho quando algum 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 formatao depois do
elemento. Como por exemplo, o elemento a com atributo id artigo, vai mudar de cor
para vermelho quando algum 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 negao. 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
pargrafo, exceto no elemento pargrafo 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 so 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 pargrafo 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 incio para fim.
Como por exemplo, ser aplicada a formatao 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, porm ele parte fim para

o incio. Como por exemplo, ser aplicada a formatao de cor vermelha na letra no
terceiro item do fim para incio, 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 formatao 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 formatao 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 TCNICA DE CSS RESET
Um dos grandes problemas encontrados pelos desenvolvedores web a forma como

os vrios browsers interpretam de formas diferentes o mesmo cdigo, no conseguindo o
mesmo resultado a pgina desenvolvida.
Para resolver este problema, antigamente os desenvolvedores desenvolviam vrios
arquivos CSS para cada navegador.
Portanto, para resolver esse problema, desenvolveu-se uma tcnica chamada CSS
Reset, que se aplica uma folha de estilos bsica para resetar toda formatao original
aplicada pelo browser. Essa folha de estilos pode ser aplicada internamente HTML ou
externamente, sendo esta a tcnica mais comum, devido vrias pginas podero utilizar a
mesma formatao.
Segundo Rodrigues(2016):
O arquivo contendo o cdigo para realizar o CSS Reset deve ser inserido
antes de qualquer outro arquivo de estilo, para que toda formatao adicional
seja feita com base nos elementos sem estilo.
O ideal que essa tcnica seja utilizada nos momentos iniciais da concepo
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 padro aplicado
pelo browser e no sobre os elementos resetados.
Este arquivo um CSS normal aplicando formatao padro sobre todas as tags,
aplicando formatao sobre fontes, margin e padding. Sendo que cada desenvolvedor pode
desenvolver o seu Reset CSS, porm h, na internet, vrios arquivos CSS prontos.
Entretanto, os desenvolvedores desenvolvem um estilo mais simplificado, conforme
demonstra o cdigo 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 especficos 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 relao ao layout da pgina
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 vrios navegadores. Este arquivo apresenta as seguintes vantagens:
Preserva padres;
Normaliza estilos;
Repara erros e inconsistncias comuns dos diferentes navegadores.
Melhora a usabilidade.
Para se utilizar este arquivo, primeiramente, voc deve baixar da internet e depois
linkar com a sua pgina atravs 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 retngulo, formando uma caixa, ou

seja, todos elementos so blocos ou boxes que vo formando o layout da pgina.
Cada box formado pelos seguintes elementos:
content(contedo): pode ser um texto , imagem etc;
padding(enchimento): est localizado ao redor do contedo;
border(bordas): so linhas que delimitam o elemento;
margin(margens): o espaamento 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:
2.5 UNIDADES DE MEDIDA EM CSS
Vejam abaixo as unidades disponveis:

Absolutas:
o in (polegadas)
o cm (centmetros)
o mm (milmetros)
o pt (pontos)
o pc (picas)
o px (pixels)
Relativas:
o em
o ex
Porcentagem:
o %
Unidades mais recomendadas so as relativas, pois o desenvolvedor mantm um
controle relativo em relao ao tamanho da fonte padro do usurio. J as unidades absolutas
permitem um controle exato da aparncia da pgina.
LISTA DE EXERCCIOS
Aplique um pelo menos trs seletores nas duas pginas 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 Definio Valores Exemplo
Possveis
text-align Alinhamento de Texto Left text-align: left;
Center
Right
Justify
Start
End
text-indent Endentao de Valores text-indent: 5px;
Pargrafo Numricos Em
Conjunto Com
Uma das
Unidades de
Medidas(px,
em, entre
outras)
text-transform Formatao de lowercase; text-transform: uppercase;
capitalizao(Maiscul none;
a e Minscula). uppercase;
text-decoration Formatao de linha none; text-decoration: none;
decorativa. underline;
overline;
line-through
text-shadow Coloca sombreamento Deslocamento text-shadow: 1px 1px 1px
no texto. Horizontal, rgba(0,0,0,0.6);
Vertical,
Esfumaament
o e Cor.
Posicionamento
Comando Definio Valores
Possveis
Position Posio do objeto na Absolute position: absolute;
tela. Relative
Fixed
Static
Bottom Alinhamento do Objeto auto; bottom: auto;
Com Relao a Valores bottom: 60px;
Margem Inferior Numricos Em
Conjunto Com
Uma das
Unidades de
Medidas(px,
em, entre
outras)
Left Alinhamento do Objeto auto; left: auto;
Com Relao a Valores left: 60px;
Margem Esquerda Numricos Em
Conjunto Com
Uma das
Unidades de
Medidas(px,
em, entre
outras)
Right Alinhamento do Objeto auto; right: auto;
Com Relao a Valores right: 60px;
Margem Direita Numricos Em
Conjunto Com
Uma das
Unidades de
Medidas(px,
em, entre
outras)
Top Alinhamento do Objeto auto; top: auto;
Com Relao a Valores top: 60px;
Margem Superior Numricos Em
Conjunto Com
Uma das
Unidades de
Medidas(px,
em, entre
outras)
Borda
Possveis
Border Colocar borda em Tamanho da border: 5px dotted red;
objeto. borda, Estilo da
Borda e Cor.
border-bottom Colocar borda na parte Tamanho da border: 5px dotted red;
inferior do objeto. borda, Estilo da
Borda e Cor.
border-left Colocar borda Tamanho da border: 5px dotted red;
esquerda do objeto. borda, Estilo da
Borda e Cor.
border-right Colocar borda direita Tamanho da border: 5px dotted red;
do objeto. borda, Estilo da
Borda e Cor.
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,
Esfumaament
o 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
Possveis
Float Direo da flutuao da float; float: left;
caixa. inherit;
right;
none;
Clear Limpa o efeito de both; clear: both;
flutuao. float;
inherit;
right;
none;
Width Largura do Box auto; width: auto;
Valores width: 200px;
Numricos Em
Conjunto Com
Uma das
Unidades de
Medidas(px,
em, entre
outras).
max-width Largura mxima do auto; max-width: auto;
Box Valores max-width: 200px;
Numricos Em
Conjunto Com
Uma das
Unidades de
Medidas(px,
em, entre
outras).
min-width Largura mnima do Box auto; min-width: auto;
Valores min -width: 200px;
Numricos Em
Conjunto Com
Uma das
Unidades de
Medidas(px,
em, entre
outras).
Height Altura do Box auto; height: auto;
Valores height: 200px;
Numricos Em
Conjunto Com
Uma das
Unidades de
Medidas(px,
em, entre
outras).
max-height Altura mxima do Box auto; max-height: auto;
Valores max-height: 200px;
Numricos Em
Conjunto Com
Uma das
Unidades de
Medidas(px,
em, entre
outras).
min-height Altura mnima do Box auto; min-height: auto;
Valores min-height: 200px;
Numricos Em
Conjunto Com
Uma das
Unidades de
Medidas(px,
em, entre
outras).
Padding Espaamento da borda Valores padding: 5px;
em relao ao objeto; Numricos Em padding: 5px 3px 2px 4px;
Conjunto Com
Uma das
Unidades de
Medidas(px,
em, entre
outras).
padding- Espaamento da borda Valores padding-bottom: 5px;
bottom abaixo em relao ao Numricos Em
objeto; Conjunto Com
Uma das
Unidades de
Medidas(px,
em, entre
outras).
padding-left Espaamento da borda Valores padding-left: 5px;
esquerda em relao Numricos Em
ao objeto; Conjunto Com
Uma das
Unidades de
Medidas(px,
em, entre
outras).
padding-right Espaamento da borda Valores padding-right: 5px;
direita em relao ao Numricos Em
Uma das
Unidades de
Medidas(px,
em, entre
outras).
padding-top Espaamento da borda Valores padding-top: 5px;
acima em relao ao Numricos Em
Uma das
Unidades de
Medidas(px,
em, entre
outras).
Margin Margem da borda em Valores margin: 5px;
relao ao objeto. Numricos Em margin: 5px 3px 2px 4px;
Conjunto Com
Uma das
Unidades de
Medidas(px,
em, entre
outras).
margin-bottom Margem da borda Valores margin-bottom: 5px;
abaixo em relao ao Numricos Em
objeto. Conjunto Com
Uma das
Unidades de
Medidas(px,
em, entre
outras).
margin-left Margin da borda Valores margin-left: 5px;
esquerda em relao ao Numricos Em
Uma das
Unidades de
Medidas(px,
em, entre
outras).
margin-right Margem da borda Valores margin-right: 5px;
direita em relao ao Numricos Em
Uma das
Unidades de
Medidas(px,
em, entre
outras).
margin-top Margem da borda Valores margin-top: 5px;
acima em relao ao Numricos Em
Uma das
Unidades de
Medidas(px,
em, entre
outras).
Cor
Possveis
Color Colocar cor no texto Nome das cores color: red;
em ingls; color: #0052cc;
#Valores color: rgba(0,0,0,1);
Hexadecimais;
Comando
rgba(Red,
Green, Blue,
Alpha).
Opacity Opacidade do objeto. inherit; opacity: 0.5;
Valores
Numricos( sab
endo-se que o 1
representa o
mximo e 0
representa o
mnimo)
Fundo da Pgina
Possveis
Background Colocar cor ou imagem Nome das cores background: white;
no fundo em ingls; background: #ee00ff;
#Valores background:
Hexadecimais; url("../_imagens/imagem.jpg")
Caminho das no-repeat 0px 80px;
Imagens,
Quantidade de
Repetio e
Tamanho;
background- Colocar cor de fundo na Nome das cores background-color: white;
color pgina. em ingls; background-color: #ee00ff;
#Valores
Hexadecimais.
background- Colocar uma imagem Caminho da background-image:
image de fundo na pgina. imagem. url("../_imagens/imagem.jpg")
;
background- Define a repetio da no-repeat; background-repeat: repeat;
repeat imagem no fundo da repeat; background-repeat: no-repeat;
pgina repeat-x;
repeat-y;
Layout
Possveis
box-sizing Tamanho do box border-box; box-sizing: border-box;
padding-box;
margin-box;
contente-box;
Transio
Possveis
Transition Transio de Efeitos Efeito e Tempo. transition: opacity 1s;
Contedo Genrico
Possveis
Display Exibio do contedo. block; display: block;
inline-block;
none.
Lista e Marcadores
Possveis
list-style Estilo de marcadores da none; list-style: none;
lista. Lista No list-style: disc;
Ordenada: list-style: decimal;
circle;
square;
disc.
Lista Ordenada:
decimal;
lower-latin;
Entre Outros.
Fonte
Possveis
font-family Define a fonte das Nome das font-family: Arial;
letras. fontes.
font-size Define o tamanho das Valores font-size: 10pt;
fontes. Numricos( sab
endo-se que o 1
representa o
mximo e 0
representa o
mnimo)
font-weight Define o negrito nas bold font-weight: bold;
letras. bolder
font-style Define o itlico nas italic font-style: italic;
letras.
Contedo
Possveis
Contente Define o contedo. Valores de content: "\03B2";
texto ou
smbolo.
Caso queira se aprofundar, consulte o arquivo CSS Referencial que consta neste material ou
acesse o site W3C.
LISTA DE EXERCCIOS
Aplique formatao de estilo nas duas pginas com os seguintes temas:

Loja de Roupa
Loja Pet
4. LAYOUT
4.1 LAYOUT FLUIDO
uma tcnica utilizada pelos os desenvolvedores para que o seu site esteja adaptvel
para qualquer resoluo, a sua adaptao est relacionada com a unidade de medida utilizvel.
As unidades de medidas pontos e pixels so que unidades de medida fixas e ems e
porcentagens, variveis, portanto, eles se adaptam e mantm relaes de tamanho com outros
elementos de um documento.
Portanto, segundo Trcio(2012):
Fica claro que usar pts ou pxs no o adequado para designs responsivos
(num primeiro momento, j que, com a prtica e/ou experincia e/ou
demanda do projeto, pode ser necessrio especificar alguns valores fixos em
determinadas situaes).
Ainda de acordo com Trcio(2012):
marcar unidades com porcento fornece uma exibio mais consistente e
acessvel para os visitantes. Quando as configuraes de exibio do cliente
se alteram, as medidas marcadas com % se alteram de maneira mais razovel,
permitindo que a legibilidade seja preservada, bem como a acessibilidade e o
design visual.
Agora com relao a fontes sempre utilizado a unidade de medida em.
Portanto, quando se fala em responsividade com relao 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 clculo 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
Para este exemplo, ser modificado a pgina e o CSS que est junto no material desta apostila.
Primeiramente, deve-se utilizar a meta tag viewport, pois ela responsvel exibir
pginas web feitas somente para desktop (no momento, a imensa maioria de todas elas)
ajustando. Deve-se seguir conforme cdigo abaixo:
<meta name="viewport" content="width=device-width,initial-scale=1">.
Agora, se voc pegar o elemento container, ele uma div, e portanto, no h um
elemento pai, portanto, pega-se a resoluo de 960px a unidade fixa do container e divide-se
pela resoluo, 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 padro 32px para converter para
unidade de medida em, deve-se pegar o 32px e dividir pelo elemento pai que no caso o
padro do navegador(16px), sendo assim ter um valor de 2em.
Agora se pegar a margem do contedo com relao 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, no possui declarao
explcita de largura, preciso verificar o prximo elemento ascendente. No caso, o
.container. Este sim com declarao (prvia) 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 extrado do livro de Trcio(2012):
O elemento .hero (e seu descendente .brief), dentro de .content-main,
tambm precisa ter suas medidas convertidas. Algo interessante a se levar em
conta que o clculo da relatividade de .hero .brief 5 / 593 = 0.008431.
Contudo, apesar de esta ser uma cincia (pretensiosamente) exata, h muito
do fator humano envolvido. Portanto, quando estiver desenvolvendo grids
flexveis e algum resultado, apesar de preciso, no for do agrado, no h nada
demais em (caso isso seja responsabilidade sua) arredondar este valor.
Agora altere os outros elementos descendente do .content-main, conforme cdigo
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, includo 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 */
text-decoration: none;
}
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 FLEXVEIS
Dentro de uma pgina, h vrios elementos visuais(imagens) que devem ser ajustar em
conjunto com a resoluo da tela, para isto, utiliza-se o CSS. Ser feito um exemplo,
utilizando o exemplo do captulo anterior, portanto, adicione a linha abaixo no cdigo:
Agora tente modificar a resoluo 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, ento 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.
Tcnicas Para Imagens Flexveis
Porm, 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 no seja o problema, porm quando voc visualiza de um dispositivo
mvel com uma resoluo menor e uma internet mais lenta, pode parecer um terror. Para isto,
h vrias tcnicas para imagens flexveis.
Riloadr
Segundo Trcio, o Riloadr se auto-intitula um framework independente carregador de

imagens responsivas.
Ainda de acordo com o prprio autor, ele realmente possui muitas boas caractersticas. S
para citar algumas:
Relativamente fcil de aprender e usar;

Oferece bastante controle sobre como as imagens responsivas iro se comportar;
Opo de carregamento sob demanda (lazy load) das imagens;
Suporta browsers com JavaScript desabilitado (ou sem JavaScript);
No faz mltiplas requisies para a mesma imagem.
A ideia principal do Riloadr trocar o atributo src pelo atributo data-src. E com JavaScript,
possvel conseguir excelentes resultados:
<img data-src="cachorro.jpg">
<noscript>
<img src="img/small/cachorro.jpg">
</noscript>
jQuery Picture
Ele um plugin para jQuery(Tamanho de 2 KB), responsvel por deixar as imagens
responsivas. Ele utilizado com elemento <figure>, em conjunto alguns data-*), tambm
utilizado com elemento <picture>. Abaixo segue um exemplo:
<figure class="responsive" data-media="assets/img/small.png" data-

media440="assets/img/medium.png" data-media600="assets/img/large.png">
<noscript>
<img src="assets/img/large.png" alt="">
</noscript>
</figure>
Aps isto, para inicializar o plugin, basta digitar o seguinte cdigo JQuery:
$(function(){
$('figure.responsive').picture();
})
Ele tem suporte pelos melhores navegadores e pelo Internet Explorer.
Picturell
Ele uma abordagem de imagens responsivas. Porm, ele exige uma marcao diferente:
<div data-picture data-alt="Descrio 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="Descrio da imagem">

</noscript>
</div>
Adaptive Images
De acordo com Trcio(2012):
Adaptive Images uma das tcnicas que, na opinio 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 verses redimensionadas de imagens referenciadas
em tags <img>, apropriadas ao dispositivo que est sendo usado.
A tcnica envolve o uso de PHP, JavaScript e um pouco de contedo em seu

arquivo .htaccess. Alm de ser bastante e ciente por servir diferentes
tamanhos da mesma imagem dependendo do dispositivo usado para a
visualizao do site, um outro ponto forte que nenhuma alterao na
marcao HTML se faz necessria.
Cuidado Com as Imagens de Alta Resoluo
Algumas dicas para voc trabalhar com imagens de alta resoluo e no sobrecarregue a sua aplicao web,
sendo que Trcio cita Bradley:
No fazer requisio da mesma imagens vrias vezes. Quando o

navegador v pela primeira vez um elemento img no DOM, ele,
imediatamente faz uma requisio 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
requisio j ter sido feita. Alm disso, se vrios pedidos estavam sendo
feitos para uma imagem, isso no s retarda o navegador e impacta na
performance, mas, tambm, aumenta o estresse adicional sobre os
servidores.
No usar cookie nem o elemento <base>. No se deve usar por causa do
lookahead parser dos navegadores que j dispara mais requisies das <img>
antes mesmo de o JavaScript entrar em ao. Ou seja, o download da imagem
comea antes de o cdigo que especifica o cookie ou base rodar.
Manipulao mnima do DOM. Manipular o DOM requer tempo e retarda a
atuao do navegador, portanto, a soluo usada deve fazer to poucas
atualizaes no DOM quanto possvel para garantir que todos os dispositivos,
especialmente os de baixa capacidade de processamento, possam lidar com
esta manipulao.
Imagens devem continuar visveis sem JavaScript. Se o JavaScript no
estiver habilitado, o navegador ainda deve ser capaz de interpretar e
renderizar todas as imagens da pgina em seu tamanho default.
No apresentar imagens em alta resoluo para todos. A maioria dos
usurios no tm displays de alta resoluo, isso fato. Ter servidores
servindo imagens maiores para todos os usurios adiciona uma presso
extra nos servidores, clientes, largura de banda, etc. S apresente imagens de
alta resoluo para aqueles que realmente podem se valer deste recurso.
Media Queries
Introduo
Media Type
uma recomendao da W3C(desde do CSS2) para especificao qual tipo de dispositivo ser aplicado as
regras de estilos(CSS), como por exemplo, se estiver utilizando uma TV para projetao do site, portanto, no
atributo media, que est contido na tag link(tag que liga o arquivo CSS com a pgina), 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 pgina. Na tabela xx tem todos tipos de media
disponvel para o CSS.
Tambm possvel dentro de um mesmo arquivo CSS, voc criar vrias regras CSS para vrios dispositivos,
como ilustra o exemplo abaixo:
@media screen{
body{
color: red;
@media projection{
body{
color: blue;
Se voc observar o cdigo anterior, h duas regras de estilos para serem aplicadas em dois tipos de dispositivos,
um tela de computador(screen) e outra para projetores(projection).
Tambm poderia juntar duas mdias 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 no conseguiam mais
diferenciar os diferentes tipos de dispositivos, pois mesmo dispositivos menores tinham poder de renderizao
dos seus navegadores como se fossem navegadores de dispositivos maiores, porm a forma de trabalhar dos
dispositivos continuava diferente, ou seja, a resoluo de tela. Para resolver este problema, surge as Media
Queries.
Media Queries
uma recomendao da W3C(desde do 2012) para especificao qual tipo de dispositivo ser aplicado as
regras de estilos(CSS), como por exemplo, se estiver utilizando um Projetor, com largura mxima de 320px, para
projetao do site, portanto, no atributo media, que est contido na tag link(tag que liga o arquivo CSS com a
pgina), pode-se especificar conforme demonstrado na figura abaixo:
<link href="estilo.css" rel="stylesheet" media=tv and (max-width: 320px)/>

Tambm possvel dentro de um mesmo arquivo CSS, voc criar vrias regras CSS para um mesmo dispositivo
com vrias resolues, como ilustra o exemplo abaixo:
@media screen and (min-width: 320px){
body{
color: red;
@media screen and (min-width: 480px){
body{
color: blue;
Outros Parmetros Utilizados em Media Queries
Pode-se utilizar outros parmetros, conforme demonstra a tabela abaixo:
Parmetros Utilizados em Media

Queries
Parmetros Definio Sintaxe
aspect-radio Define a proporo que ser (aspect-radio: proporo)
exibido o navegador na tela,
sendo o primeiro nmero
aplicado a proporo de pixels
na horizontal, e o segundo
nmero, a proporo de pixel na
vertical.
@media screen and (aspect-radio: 16/9){
body{
color: blue;
}
}
color Indica a quantidade de bit de cor (color: quantidade de bits)
do dispositivo. Se o dispositivo
no tiver nmeros diferentes de
bit, ento 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 proporo da tela do (device-aspect-radio: proporo)
dispositivo, sendo o primeiro
nmero aplicado a proporo de
pixels na horizontal, e o segundo
nmero, a proporo de pixel na
vertical.
@media screen and (device-aspect-radio: 16/9){
body{
color: blue;
}
}
device-height Define a altura da tela do (device-height: nmero px)
dispositivo(em pixel).
@media screen and (max-device-height: 329px){
body{
color: blue;
}
}
@media screen and (min-device-height: 290px){

body{
color: blue;
}
}
device-width Define a largura da tela do (device-width: nmero 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: orientao)
exibio(Paisagem/Retrato) que
est sendo exibido.
@media screen and (orientation: landscape){
body{
color: blue;
}
}
@media screen and (orientation: portrait){

body{
color: blue;
}
}
Aqui foi apresentado somente alguns tipos de parmetros, porm h vrios.
Operadores
Para declarao de uma Media Querie, h alguns operadores que se pode trabalhar, na tabela abaixo est
representado estes operadores:

and Operador de juno(e). @media dispositivo and
(parmetro: valor)
@media screen and (min-width: 480px) and (max-width: 500px){
body{
color: blue;
}
}
, Operador de disjuno(ou). @media dispositivo and
(parmetro: valor), @media
(parmetro: 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 @media only dispositivo and
determinado dispositivo com (parmetro: valor),
aquela determinada resoluo
@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;
}
}
Exemplo Prtico da Utilizao 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>
Ttulo Importante
</h2>
<img src="cute-dogs.jpg">
<p class="brief">
Descrio ou resumo de um
contedo importante, que precisa ser
mostrado para evidenciar a notoriedade deste
contedo. Descrio ou
resumo de um contedo importante, que
precisa ser mostrado para evidenciar a
notoriedade deste contedo.
</p>
</article>
</div>
</div>
</header>
</div>
</body>
</html>
Agora ser colocado o cdigo 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;
Efeito Gradiente
combinao de duas cores com indicando uma posio(top, left, rigth e bottom). Este efeito utilizado com a
propriedade background-image. Abaixo segue um exemplo:
background-image: linear-gradient(left, blue, silver);

http://www.devmedia.com.br/como-utilizar-a-tecnica-css-reset/26797
https://jaison.com.br/post/normalizecss-padronizar-css
http://www.maujor.com/tutorial/sintaxetut.php
http://code.tutsplus.com/pt/tutorials/the-30-css-selectors-you-must-memorize--net-16048
http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-tipos

Apostila - CSS

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Apostila - CSS

Transféré par

Droits d'auteur :

Formats disponibles

1.

CSS(CASCADING STYLE SHEETS)

1.1 BENEFCIOS DO CSS

Algumas vantagens so:

1.2 FORMAS DE TRABALHAR COM CSS

Segundo o site Maujor(2014):

1.2.1.1 Tipos de Mdia

Os tipos mdias utilizados pelo CSS esto descritos na tabela abaixo:

1.2.2 FOLHA DE ESTILO INCORPORADA

1.2.3 FOLHA DE ESTILO INCORPORADO NO ESCOPO

Segundo o site Maujor(2014):

Folhas de Estilos Inline so declaradas dentro da tag de abertura do elemento HTML

1.2.5 FOLHAS DE ESTILO MLTIPLAS

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

2.1 ALGUNS EXEMPLOS DE DECLARAO DE SELETOR

Abaixo segue alguns exemplos de declarao de seletor no CSS:

Elemento: este tipo de seletor se aplica todos os elementos especficos daquela

ElementoX ElementoY: muito comum o seletor de descendncia, pois ele mais

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

ElementoX > ElementoY: A diferena entre o seletor descendente ElementoX

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

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

Elemento[atributo="valor"]: Semelhante ao seletor anterior, porm mais especfico,

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

Elemento[atributo^="valor"]: Semelhante ao seletor anterior, porm aplicar a regra

Elemento[atributo$="valor"]: Semelhante ao anteior, porm aplicar a regra para

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

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

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

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

Elemento:before: este tipo de seletor corresponde colocar uma formatao antes do

Elemento:not(selector): este a pseudo-classe negao. Caso voc queira selecionar

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

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

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

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

2.2 TCNICA DE CSS RESET

Um dos grandes problemas encontrados pelos desenvolvedores web a forma como

2.2.1 RESET CSS NORMALIZE.CSS

2.4 BOX MODEL EM CSS(MODELO DE CAIXAS)

Todos elementos do HTML composto em um retngulo, formando uma caixa, ou

Figura 1 Box Model

Vejam abaixo as unidades disponveis:

Abaixo segue uma tabela com alguns comandos de CSS:

Aplique formatao de estilo nas duas pginas com os seguintes temas:

4.1 LAYOUT FLUIDO

4.2 TRANSFORMANDO UM LAYOUT FIXO EM LAYOUT FLUIDO

4.3 IMAGENS E RECURSOS FLEXVEIS

Tcnicas Para Imagens Flexveis

Segundo Trcio, o Riloadr se auto-intitula um framework independente carregador de

Relativamente fcil de aprender e usar;

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

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

Ele tem suporte pelos melhores navegadores e pelo Internet Explorer.

<div data-picture data-alt="Descrio da imagem">

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

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

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

<img src="assets/img/small.jpg" alt="Descrio da imagem">

De acordo com Trcio(2012):

Adaptive Images uma das tcnicas que, na opinio do criador (e de

A tcnica envolve o uso de PHP, JavaScript e um pouco de contedo em seu

Cuidado Com as Imagens de Alta Resoluo

No fazer requisio da mesma imagens vrias vezes. Quando o