css

CSS

SintaxeSeletores

Seletor elementoSeletor todosSeletor idSeletor class (classe)Seletor atributoSeletores 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:

body {

margin: 0px;padding: 0px;

}

Ttulo da pginaPargrafo na pgina.

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 elemento2. estilo no documento HTML3. estilo externo4. estilo do browser

SintaxeBasicamente 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 */

}

SeletoresUma das partes mais importantes sobre CSS a respeito dos seletores. H diversas formas de seletores, como as que veremos a seguir.

Seletor elementoPermite selecionar um elemento HTML com base no seu nome.

Seletor todosPermite selecionar todos os elementos do documento HTML.

Seletor idPermite 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 atributoPermite selecionar elementos HTML com base no valor de atributos.

Seletores avanadosAlm 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 navegadoresO Internet Explorer inclui padding e borda na largura, quando a propriedade width est definida, a menos que haja uma declarao DOCTYPE. Exemplo:

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

960 Grid SystemUm 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:

Exemplo de layout com 960 Grid System

cabealho - 12 conteudo rodape

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:


linguagem de programao para web Aprendendo LPWEB : lio sobre CSS e 960 Grid System Prof. Jackson Gomes | jgomes at ceulp.edu.br Centro Universitrio Luterano de Palmas - Curso de Sistemas de Informao conteudo rodape

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:


linguagem de programao para web Aprendendo desenvolvimento de software para a web : lio sobre CSS e 960 Grid System Prof. Jackson Gomes | jgomes at ceulp.edu.br

> Centro Universitrio Luterano de Palmas - Curso de Sistemas de Informao Tecnologias no cliente Uso de tecnologias como HTML, CSS, JavaScript, jQuery e jQuery UI Tecnologias no servidor Uso de tecnologias do .NET Framework para a WEB, essencialmente, ASP.NET Integrao cliente-servidor Uso de tecnologias do ASP.NET que permitem a comunicao com o cliente atravs de jQuery rodape

Cdigo do CSS:

body { font-family: "Segoe UI"; font-size: 12px; background-color: #C0C0C0;} .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;}.conteudo{ background-color: #FFFFFF;}.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:


linguagem de programao para web Aprendendo desenvolvimento de software para a web : lio sobre CSS e 960 Grid System Prof. Jackson Gomes | jgomes at ceulp.edu.br Centro Universitrio Luterano de Palmas - Curso de Sistemas de Informao

Tecnologias no cliente Uso de tecnologias como HTML, CSS, JavaScript, jQuery e jQuery UI Tecnologias no servidor Uso de tecnologias do .NET Framework para a WEB, essencialmente, ASP.NET Integrao cliente-servidor Uso de tecnologias do ASP.NET que permitem a comunicao com o cliente atravs de jQuery Centro Universitrio Luterano de Palmas (copyleft) 2011 ulbra-to.br

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.

Ferramentashttps://www.jumpchart.com/http://www.mockflow.com/http://www.gliffy.com/wireframe-software/https://gomockingbird.com/http://creately.com/Online-UI-Mockups-and-Wireframeshttp://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

Documents