Css

CSS
Sintaxe
Seletores
Seletor elemento
Seletor todos
Seletor id
Seletor class (classe)
Seletor atributo
Seletores avanados
CSS Box Model (modelo de caixa do CSS)
Compatibilidade nos navegadores
Bibliografia

CSS um acrnimo para Cascading Style Sheets, algo como Folhas de Estilo em Cascata. O
estilo define como um elemento HTML apresentado e h vrias formas de inseri-los em uma
pgina:
em um arquivo externo (usando elemento link)
no prprio documento HTML (usando elemento style)
no prprio elemento HTML (usando atributo style)
Alm disso, h um estilo padro definido pelo prprio browser. O trecho de cdigo a seguir
ilustra as formas de aplicao de estilos em um documento HTML:

<html>
<link href="estilo.css" rel="stylesheet" type="text/css" />
<style type="text/css">

body {
margin: 0px;
padding: 0px;
}
</style>
<body>
<h1>Ttulo da pgina</h1>
<p style="font-size:12px">Pargrafo na pgina.</p>
</body>
</html>

A forma como os estilos so aplicados aos elementos HTML obedece tambm um ordem de
prioridade. Como os estilos podem ser aplicados de diversas formas, necessrio resolver
conflitos (quando duas ou mais formas redefinem estilos). Assim sendo, a ordem de prioridade
a seguinte:
1. estilo no elemento
2. estilo no documento HTML
3. estilo externo
4. estilo do browser
Sintaxe
Basicamente um estilo CSS entendido como uma regra (e at chamado assim regra
CSS) e possui duas partes principais: um seletor e uma ou mais declaraes (W3SCHOOLS,
2011):

O seletor permite selecionar ou indicar o elemento ou o conjunto de elementos aos quais a
regra se aplica. Cada declarao consiste de um conjunto de pares propriedade : valor. A
propriedade o estilo, e cada estilo possui um valor. CSS tambm aceita comentrios, atravs
dos marcadores /* (incio) e */ (fim). Veja o exemplo:

/* esta regra CSS se aplica a todos os paragrafos */
p {
color: red; /* vermelho */
text-align: center; /* alinhamento no centro da pgina */
font-size: 12pt; /* fonte em tamanho 12 pontos */
}

Seletores
Uma das partes mais importantes sobre CSS a respeito dos seletores. H diversas formas de
seletores, como as que veremos a seguir.
Seletor elemento
Permite selecionar um elemento HTML com base no seu nome.
Seletor todos
Permite selecionar todos os elementos do documento HTML.
Seletor id
Permite selecionar um elemento HTML baseado em seu id. Lembre-se que o id (atributo) de
um elemento HTML deve ser nico, portanto, este seletor permite aplicar uma regra CSS a um
elemento nico na pgina, por seu id.
Seletor class (classe)
Permite selecionar elementos HTML com base no valor do atributo class. Este atributo pode
possuir mais de um valor, ou mais de uma classe, quando os nomes das classes esto
separados por (espao em branco).
Seletor atributo
Permite selecionar elementos HTML com base no valor de atributos.
Seletores avanados
Alm dos seletores individuais vistos anteriormente, h tambm formas mais avanadas de
selecionar objetos, como as seguintes:
Seletor Mltiplo: permite aplicar regras CSS a mais de um seletor. Basta separar por
vrgula um dos seletores individuais
Seletor Aninhado: permite aplicar regras CSS a elementos que estejam dentro de
outros.
Pseudo classes e pseudo elementos: so usados para adicionar efeitos especiais
a alguns seletores. Exemplos: :link, :visited, :hover e :active (note que o : (dois-
pontos) necessrio.

/* seletor elemento */
Body {
margin: 0px;
}

/* seletor todos */
* {
padding: 0px;
}

/* seletor Id */
#primeiroParagrafo {
font-size: 16pt;
}

/* seletor class */
.paragrafo {
font-size: 12pt;
}

/* seletor mltiplo */
#primeiroPagrafo, .paragrafo {
color: black;
}

/* seletor aninhado */
#primeiroParagrafo a {
text-decoration: none;
}

/* seleciona todos os elementos que possuem o atributo title */
[title] {
color: blue;
}

/* seleciona todos os elementos a que possuem atributo href que
contm 'http' */
a[href|=http] {
color: red;
}

/* seletores pseudo-classe */
/* efeito quando o mouse est sobre um link */
a:hover {
text-decoration: underline;
}

/* seleciona o primeiro filho */
p:first-child {
font-size: 18pt;
}

/* seleciona a primeira linha de um texto */
p:first-line {
color: gray;
}

/* seleciona a primeira letra de um texto */
p:first-letter {
font-size: 20pt;
font-weight: bold;
}

/* insere contedo antes do elemento */
p:before {
content: "antes";
}

/* insere contedo depois do elemento */
p:after {
content: "depois";
}

CSS Box Model (modelo de caixa do
CSS)
Guia obtido principalmente com base no CSS21 Working Draft (W3Cb, 2011).
O modelo de caixa do CSS decreve caixas retangulares que so geradas para elementos no
documento HTML e apresentadas conforme um modelo visual de formatao. Cada caixa
contm rea de contedo (content) e, opcionalmente, reas para padding, borda e margem. O
tamanho de cada rea definido por propriedades. O diagrama a seguir apresenta como cada
uma destas reas esto relacionadas e a terminologia usada para definir pedaos de margem,
borda e padding:

Margem, borda e padding podem ser quebrados em segmentos: topo (top), direita (right),
rodap (bottom), esquerda (left). No diagrama acima, por exemplo, estes segmentos so
ilustrados por LM (margem esquerda - left margin), TB (borda topo - top border) e RP (padding
direita - right padding). O permetro de cada uma das quatro reas (contedo, padding, borda e
margem) chamado edge (aresta), ento cada caixa possui quatro edges:
content edge ou inner edge: fica ao redor do retngulo dado pelas propriedades
width e height da caixa, que geralmente dependem do contedo do elemento, quando
renderizado.
padding edge: fica ao redor da caixa padding. Se o padding possui width 0, padding
edge o mesmo que content edge.
border edge: fica ao redor da caixa borda. Se a borda possui width 0, border edge o
mesmo que padding edge.
margin edge ou outer edge: fica ao redor da caixa margem. Se margem possui width
0, margin edge o mesmo que border edge.
Outro conceito muito importante ao tratar do box model que o tamanho total da caixa [de um
elemento] corresponde soma das quatro caixas vistas anteriormente. Exemplo: contedo
possui largura 300px, padding possui 10px direita e 10px esquerda, borda possui 1px
direita e 1px esquerda, margem possui 10px direita e 10px esquerda; tamanho total = 300
+ 10 + 10 + 1 + 1 + 10 + 10 = 344px. Esta regra se aplica sempre que for necessrio saber o
tamanho total da caixa do elemento.
Compatibilidade nos navegadores
O Internet Explorer inclui padding e borda na largura, quando a propriedade width est definida,
a menos que haja uma declarao DOCTYPE. Exemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
</html>

Na Bibliografia voc encontra mais exemplos de utilizao do CSS e tambm mais detalhes e
referncia completa.

960 Grid System
Um dos grandes recursos (e, diria tambm, requisitos) da computao o reuso. Reuso est
em software, na Programao Orientada a Objetos e tambm no CSS. Grande parte dos
layouts de web sites, enxergados de uma forma bastante genrica, podem ser reduzidos a uma
representao em forma de grid que tem, basicamente, dois elementos: linhas e colunas, como
no exemplo a seguir (DEVKIKO, 2010):

Perceba que o posicionamento dos itens da interface, como o formulrio de login, o menu, os
ttulos e as diversas colunas, podem ser representados utilizando o conceito do grid. Desta
forma, o 960 GS procura minimizar os esforos, principalmente dos no designers. O objetivo
criar layouts de forma simplificada, atravs do conceito do grid, enxergando linhas e colunas no
layout. O nmero 960 representa a largura da rea visvel da pgina considerando a resoluo
de tela mais comumente utilizada: 1024px. Exemplos mais comuns de colunas so 12, 16 e
24. Como um framework CSS, h vrias regras CSS definidas, conforme a quantidade de
colunas do layout. A ferramenta disponvel em http://www.spry-soft.com/grids/ permite gerar
um layout em colunas de acordo com sua necessidade. Por exemplo, se precisar de 12 ou 36
colunas, possvel gerar o CSS atravs de uma tela de configurao.

Basicamente, trabalhar com 960 GS envolve a utilizao de algumas regras CSS
representadas por classes:
.container_XX: a classe principal, representa, como o nome diz, o container que
ter linhas e colunas, ou seja, o grid. XX representa o nmero de colunas do layout, por
exemplo .container_12
.grid_XX: usada para definir a quantidade de colunas numa linha. XX representa a
quantidade de colunas, por exemplo, .grid_7
.prefix_XX e .sufix_XX so utilizadas para adicionar colunas vazias antes e
depois de uma coluna, respectivamente. XX representa a quantidade de colunas a
serem adicionadas
.alpha usada para indicar que no deve ser adicionado padding antes da coluna
.omega usada para indicar que no deve ser adicionado padding depois da coluna

Ao final deste tutorial vamos criar uma interface como a representada pela figura a seguir:

Para iniciar o trabalho com o 960.gs, faa o download dos arquivos em http://960.gs. Dentre os
vrios arquivos, os que iremos utilizar so os seguintes:
code/css/uncompressed/reset.css
code/css/uncompressed/text.css
code/css/uncompressed/960.css

Para facilitar, copie estes arquivos para a mesma pasta onde est seu arquivo HTML. Estes
arquivos devem ser referenciados na pgina HTML nesta ordem.

Vamos comear enxergando o grid no mais alto nvel: possui 3 linhas, 1 coluna com tamanho
12 em cada linha. O cdigo inicial , portanto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/
/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Exemplo de layout com 960 Grid System</title>

<link href="reset.css" rel="stylesheet" type="text/css" />
<link href="text.css" rel="stylesheet" type="text/css" />
<link href="960.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div class="container_12">
<div class="grid_12">
cabealho - 12
</div>
<div class="clear"></div>

conteudo
</div>

rodape
</div>
</div>
</body>
</html>

Como as classes grid_XX usam a propriedade float, importante ter algum elemento com a
classe clear depois de uma linha do grid.

Vamos trabalhar com o cabealho. Queremos que o cabealho tenha duas colunas: a primeira
com tamanho 8, a segunda com tamanho 4. O cdigo completo da pgina torna-se:


<head>


<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="grid_12 header">
<div class="alpha grid_8">
<h1>linguagem <span style="font-size:50px">de</span>
programao para web</h1>
</div>
<div class="omega grid_4">
<p>Aprendendo LPWEB : lio sobre CSS e 960 Grid System</
p>
</div>
<div class="grid_12 sub-header">
<p>Prof. Jackson Gomes | jgomes at ceulp.edu.br <br />
Centro Universitrio Luterano de Palmas - Curso de
Sistemas de Informao
</p>
</div>
</div>

conteudo
</div>

rodape
</div>

</div>
</body>
</html>

Veja que estamos utilizando as classes alpha e omega para retirar espao da esquerda e
da direita, respectivamente. Isso preciso sempre que houver grids aninhados, em outras
palavras, a linha tem colunas. Como voc percebeu, tambm criamos as classes header
e sub-header. O cdigo do arquivo CSS, at o momento:

.header
{
background-color: #FFFFFF;
height: 300px;
margin: 10px;
}

h1
{
margin: 20px;
font-size: 80px;
font-weight: bold;
line-height: 50px;
color: #333333;
}

.header p
{
margin: 20px;
font-weight: bolder;
color: #999999;
font-size: 30px;
line-height: 30px;
font-style: italic;
}

.sub-header p
{
font-size: 14px;
font-style: normal;
color: #666666;
}

Uma das lies mais valiosas ao utilizar 960.gs : muito cuidado ao modificar alguma
propriedade do CSS que altere a o box-model. Por exemplo, Uma coisa bastante utilizada
modifcar o padding de um elemento. Ao utilizar 960.gs, no faa isso. Se precisar de espao
extra entre a margem de uma coluna e o contedo, use a propriedade margin. Perceba que
fizemos isso para a classe header e tambm para os elementos h1 e p.

Agora que temos o cabealho, vamos criar as sees restantes: meio e rodap. Para o meio
da pgina (a regio de contedo), vamos utilizar um layout com trs colunas. Cada coluna
apresentar um texto curto. Cdigo HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//
EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>


</head>
<body>
</div>
<p>Aprendendo desenvolvimento de software para a
web : lio sobre CSS e 960 Grid System</p>
</div>
<p>Prof. Jackson Gomes | jgomes at ceulp.edu.br <br /
>
</p>
</div>
</div>

<div class="grid_12 conteudo">
<div class="panel">
<h2>Tecnologias no cliente</h2>
<p>Uso de tecnologias como HTML, CSS, JavaScript,
jQuery e jQuery UI</p>
</div>
</div>
<div class="panel">
<h2>Tecnologias no servidor</h2>
<p>Uso de tecnologias do .NET Framework para a
WEB, essencialmente, ASP.NET</p>
</div>
</div>
<div class="grid_4 omega">
<div class="panel">
<h2>Integrao cliente-servidor</h2>
<p>Uso de tecnologias do ASP.NET que permitem a
comunicao com o cliente atravs de jQuery</p>
</div>
</div>
</div>

rodape
</div>

</div>
</body>
</html>

Cdigo do CSS:

body {
font-family: "Segoe UI";
font-size: 12px;
background-color: #C0C0C0;
}

.header
{
height: 300px;
margin: 10px;
}
h1
{
margin: 20px;
font-size: 80px;
font-weight: bold;
line-height: 50px;
color: #333333;
}
.header p
{
margin: 20px;
font-weight: bolder;
color: #999999;
font-size: 30px;
line-height: 30px;
font-style: italic;
}
.sub-header p
{
font-size: 14px;
font-style: normal;
color: #666666;
}
.conteudo
{
}
.panel
{
margin: 20px;
}
.panel h2
{
font-size:30px;
line-height:25px;
font-weight:bolder;
color: #333333;
}

Por ltimo, vamos criar o rodap. Cdigo do HTML final:


<head>


</head>
<body>
</div>
<p>Aprendendo desenvolvimento de software para a web :
lio sobre CSS e 960 Grid System</p>
</div>
<p>Prof. Jackson Gomes | jgomes at ceulp.edu.br <br />
</p>
</div>
</div>

<div class="grid_12 conteudo">
<div class="panel">
<h2>Tecnologias no cliente</h2>
<p>Uso de tecnologias como HTML, CSS, JavaScript,
jQuery e jQuery UI</p>
</div>
</div>
<div class="panel">
<h2>Tecnologias no servidor</h2>
<p>Uso de tecnologias do .NET Framework para a WEB,
essencialmente, ASP.NET</p>
</div>
</div>
<div class="grid_4 omega">
<div class="panel">
<h2>Integrao cliente-servidor</h2>
<p>Uso de tecnologias do ASP.NET que permitem a
comunicao com o cliente atravs de jQuery</p>
</div>
</div>
</div>

<div class="panel">Centro Universitrio Luterano de Palmas
(copyleft) 2011</div>
</div>
<div class="prefix_1 grid_3 omega">
<div class="panel"><a href="http://ulbra-to.br">ulbra-
to.br</a></div>
</div>
</div>

</div>
</body>
</html>

O CSS continuou o mesmo.

H vrias discusses e ferramentas sobre o 960.gs, entre estes, destaco os seguintes links:
http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-
framework/
http://www.webdesignerdepot.com/2010/03/fight-div-itis-and-class-itis-with-the-960-grid-
system/
http://uxmovement.com/wireframes/wireframing-effectively-on-the-new-and-improved-
970-grid-system
http://978.gs/

Trabalho #1(pra entregar)
Para aprender melhor os recursos do 960.gs nada melhor do que uma atividade prtica. Esta
atividade ser realizada em duas etapas:

Etapa #1: escolha um site e reproduza seu layout utilizando o 960.gs (pode ser utilizado
outro framework de grid tambm ou um grid configurado por voc, por exemplo, a ferramenta
geradora de grid do site spry-soft.

Etapa #2: utilizando um sistema de grid (ex: 960.gs) crie o prottipo da pgina inicial de um site
de venda de produtos de informtica. A loja possui categorias, como equipamentos, software,
fontes e placas-me. Pgina inicial deve ter uma seo para apresentar produtos que esto
em promoo e outra seo que apresenta produtos mais recentes. A quantidade produtos em
cada seo fica a seu critrio. Deve haver uma seo para apresentar uma nuvem de tags, que
permitem realizar buscas por produtos (cada elemento da nuvem um link que realiza uma
pesquisa conforme o texto do elemento). Deve haver uma seo que permita realizar buscas
por produtos. Itens/sees adicionais podem ser criados.

Ferramentas
https://www.jumpchart.com/
http://www.mockflow.com/
http://www.gliffy.com/wireframe-software/
https://gomockingbird.com/
http://creately.com/Online-UI-Mockups-and-Wireframes
http://www.hotgloo.com/

Bibliografia
W3SCHOOLS, 2011. CSS. Online: http://www.w3schools.com/css. ltimo acesso em 18/02/
2011.

W3C, 2011. CSS. Online: http://www.w3.org/Style/CSS. ltimo acesso em 18/02/2011.

W3Cb, 2011. Box Model. Online: http://www.w3.org/TR/CSS21/box.html. ltimo acesso em 18/
02/2011.

MAUJOR, 2011. Site do Maujor. CSS, Padres Web, Acessibilidade. Online: http://maujor.com/.
ltimo acesso: 18/02/2011.

MAUJORb, 2011. Tutorial: CSS desde o incio. Online: http://www.maujor.com/tutorial/joe/
cssjoe1.php. ltimo acesso: 18/02/2011.

WPDFD, 2011. Webpage Design for Desginers. Online: http://www.wpdfd.com/. ltimo acesso:
18/02/2011.

TABLELESS-HTML5, 2011. Guia de Referncia - Tutorial sobre HTML5. Online: http://
tableless.com.br/html5/. ltimo acesso: 18/02/2011.

LITTLEBOXES, 2011. Little Boxes. Online: http://www.thenoodleincident.com/tutorials/
box_lesson/boxes.html. ltimo acesso: 18/02/2011.

CSSNOLANCHE, 2011. CSS no Lanche. Online: http://www.cssnolanche.com.br. ltimo
acesso: 18/02/2011.

960GS, 2011. 960 Grid System. Online: http://960.gs/. ltimo acesso: 24/02/2011.

DEVKICO, 2010. Melhorando seus layouts com 960 Grid System (para no designers, como
eu). Online: http://www.itexto.net/devkico/?p=671. ltimo acesso: 24/02/2011.

Css

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Css

Caricato da

Copyright:

Formati disponibili

CSS

Potrebbero piacerti anche