Apostila Bluetrip

UNIVERSIDADE FEDERAL DO PARAN
Pr-Reitoria de Gesto de Pessoas Coordenadoria de Desenvolvimento de Pessoas
BlueTrip
JULHO/2010
SUMRIO
1.1 FRAMEWORK BLUETRIP CSS.........................................................................................................................3 1.2 FRAMEWORK BLUETRIP CSS - USANDO BLUETRIP CSS PARA CRIAR UM LAYOUT DE PGINA DE BASE WEB.............................................................................................................................................4 1.3 FRAMEWORK BLUETRIP CSS - ADICIONANDO OS ARQUIVOS DE CSS.............................................7 1.4 FRAMEWORK BLUETRIP CSS REMOVENDO O GRID.........................................................................10 2.1 ADICIONANDO BORDAS PARA AS COLUNAS DA WEB PAGE COM CSS BLUETRIP.....................13 2.2 ADICIONANDO BORDAS A WEB PAGE BLUETRIP COLUNAS COM CSS - REVIEW: GENRICO SPAN X CLASSES CSS.............................................................................................................................................14 2.3 ADICIONANDO BORDAS PARA AS COLUNAS DA WEB PAGE BLUETRIP COM CSS ADICIONANDO FRONTEIRAS PARA COLUNAS DE PGINA WEB............................................................17 2.4 ADICIONANDO BORDAS PARA AS COLUNAS DAS WEB PAGES BLUETRIP COM CSS ATRIBUIO DE CLASSES CSS FANCY PARA CABEALHOS HTML......................................................20 3.1 USANDO O FRAMEWORK CSS BLUETRIP E CLASSES THIN E CAPS ...............................................24 3.2 USANDO O FRAMEWORK BLUETRIP CSS CLASSES THIN E CAPS - ANLISE: AS CLASSES CSS FANCY................................................................................................................................................................25 3.3 USANDO O FRAMEWORK CSS BLUETRIP E CLASSES THIN E CAPS - TRABALHANDO COM A CLASSE CSS THIN....................................................................................................................................................28 3.4 USANDO O FRAMEWORK CSS BLUETRIP E CLASSES THIN E CAPS - USANDO A CLASSE CSS CAPS............................................................................................................................................................................31 4.1 STYLING SEM ORDEM E LISTA ORDENADA HTML COM BLUETRIP...............................................35 4.2 STYLING SEM ORDEM E LISTA ORDENADA HTML COM BLUETRIP - REVIEW: CLASSES CSS THIN E CAPS.............................................................................................................................................................36 4.3 STYLING SEM ORDEM E LISTA ORDENADA HTML COM BLUETRIP - STYLING LISTAS DESORDENADAS HTML........................................................................................................................................42

PR-REITORIA DE GESTO DE PESSOAS
COORDENADORIA DE DESENVOLVIMENTO DE PESSOAS UNIDADE DE CAPACITAO E APERFEIOAMENTO DE PESSOAS Curso de Desenvolvimento Web BlueTrip 4.4 STYLING SEM ORDEM E LISTA ORDENADA HTML COM BLUETRIP - STYLING LISTAS ORDENADAS HTML................................................................................................................................................46 5.2 STYLING DEFINIO LISTAS COM O CSS BLUETRIP FRAMEWORK - REVIEW: LISTA SEM ORDEM E ORDENADA...........................................................................................................................................51 5.3 STYLING DEFINIO LISTAS COM O CSS BLUETRIP FRAMEWORK - LISTAS DE DEFINIO COM STYLING RAPIDAMENTE BLUETRIP.....................................................................................................57 5.4 STYLING DEFINIO LISTAS COM O CSS BLUETRIP FRAMEWORK - STYLING DIFERENTES CABEALHOS HTML.............................................................................................................................................61 6.1 MAIS USOS PARA AS CLASSES CSS THIN E CAPS NO BLUETRIP ......................................................65 6.2 MAIS USOS PARA AS CLASSES CSS THIN E CAPS NO BLUETRIP - REVISO: LISTAS DE DEFINIO DE ESTILO COM BLUETRIP.........................................................................................................66 6.3 MAIS USOS PARA AS CLASSES CSS THIN E CAPS CSS NO BLUETRIP - SUBORDINAO CLASSES FINA CSS PARA ELEMENTOS H3.....................................................................................................69 6.4 MAIS USOS PARA AS CLASSES CSS THIN E CAPS CSS NO BLUETRIP - CAPS CSS ATRIBUINDO CLASSES AOS ELEMENTOS H2 E H3.................................................................................................................73 7.1 USANDO CLASSES CSS DO BLUETRIP: SUCCESS, NOTICE E ERROR...............................................77 7.2 USANDO CLASSES CSS DO BLUETRIP: SUCCESS, NOTICE E ERROR - RESULTADOS DE MENSAGENS COM SUCESSO BLUETRIP..........................................................................................................78 7.3 USANDO CLASSES CSS DO BLUETRIP: SUCCESS, NOTICE E ERROR - MOSTRANDO ANNCIOS E AVISOS COM BLUETRIP..............................................................................................................82 7.4 USANDO CLASSES CSS DO BLUETRIP: SUCCESS, NOTICE E ERROR - RESULTADOS DE ERROS .......................................................................................................................................................................................86
Pgina 2
2

COORDENADORIA DE DESENVOLVIMENTO DE PESSOAS UNIDADE DE CAPACITAO E APERFEIOAMENTO DE PESSOAS Curso de Desenvolvimento Web BlueTrip
Pgina 3
3
1.1 Framework BlueTrip CSS

Se voc est procurando um framework CSS para iniciantes, no procure mais. Esta srie apresenta o framework CSS BlueTrip. Nesta primeira parte, vou explicar como desenvolver um projeto bsico de pgina web usando as classes principais CSS fornecidos pelo framework. Como voc ver em breve, este processo bastante simples, mesmo que atualmente no tenha um profundo conhecimento de CSS. Se voc est atualizado com as ltimas tendncias que regem o mundo do web design moderno, ento certamente voc estar ciente da crescente popularidade dos frameworks CSS. Na verdade, h um grande nmero de designers que usam extensivamente em seus projetos hoje em dia. Frameworks permitem aos usurios criar layouts complexos pgina web que sero processados de forma consistente em diferentes browsers, sem ter que criar pginas web a partir do zero. Tal como acontece com outras partes de software com vista a reduzir o tempo de desenvolvimento, frameworks CSS tem prs e contras que devem ser cuidadosamente avaliados. Naturalmente, uma de suas armadilhas mais importante que as classes CSS includa com eles no tm significado semntico verdadeiro. Alguns designers puristas se recusam a utilizar os frameworks, contudo, esse efeito colateral ser simplesmente irrelevante. Os frameworks CSS, como BluePrint, por exemplo, inclui recursos verdadeiramente teis, como estilos de comprovada capacidade e redefinir a capacidade de criar layouts de pginas web usando uma grade consistente. Em suma, independentemente das opinies que voc pode ter (ou j ouviu falar) sobre elas, frameworks CSS esto aqui para ficar, e os mais poderosos merecem um olhar mais atento. Neste grupo de artigos que exploraremos em profundidade o framework BlueTrip CSS (http://bluetrip.org), que pretende reunir os melhores recursos fornecidos pelo BluePrint CSS e Tripoli, entre os principais. Pessoalmente, tenho usado BlueTrip CSS por alguns meses para a criao de designs de pgina web e achei muito fcil de aprender. Alm disso, ele vem com um grupo puro de reset, impresso e estilos de texto que ir tornar sua vida muito mais fcil. Apresentaremos como possvel a construo de layouts de pginas web com o framework CSS BlueTrip, para que possa comear rapidamente a us-lo em seus projetos web.

Pgina 4
4
1.2 Framework BlueTrip CSS - Usando BlueTrip CSS para criar um layout de pgina de base web
Como j exposto na introduo, a curva de aprendizado BlueTrip CSS extremamente simples. Ele oferece uma grade de fundo composto por 24 colunas, que pode ser estendido por todo o documento da Web em conformidade com as exigncias de um layout especfico da pgina web. Desse ponto em diante, possvel puxar e empurrar os elementos vontade, bem como cabealhos de estilo, pargrafos, listas e assim por diante. Com base nesse esquema de design simples, vou criar a marcao de uma pgina web bsica, que ir usar algumas das classes que medem CSS que vm com o framework. Abaixo, est a pgina web exemplo, que exibe a grade de fundo. D uma olhada no exemplo de cdigo correspondente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Basic example on using BlueTrip</title> </head> <body> <div class="container showgrid"> <div class="span-24"> <h1>BlueTrip CSS Grid example showing the grid</h1> </div> <div class="span-8"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8">

Pgina 5
5
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-16"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </body> </html>
Se voc trabalhou com o CSS antes, voc vai entender como funciona a marcao acima. Enfim, a primeira coisa a notar que todo o layout da pgina web envolvido em um recipiente em geral, que tenha sido atribuda duas classes CSS, chamado de "container" e "showgrid", respectivamente. Como voc pode imaginar, a primeira dessas classes responsvel por centralizar o contedo do documento web inteira, enquanto o ltimo encarregado de exibir a grade de fundo. muito simples.

Pgina 6
6
O resto da marcao auto-explicativo. Ele usa um conjunto de classes que medem, apelidado genericamente "span-x", onde X o nmero de colunas que ser gerado por uma div especfica. Neste exemplo, decidi criar primeiro uma coluna para o cabealho, em seguida, uma seo de corpo composto de trs recipientes e, finalmente, uma rea de rodap composta de duas divs. vlido mencionar o uso do "x-span passado" classe CSS, que utilizado para localizar a ltima coluna na grade de base. Neste ponto, esperamos que voc compreendeu a lgica que est por trs de criao de layouts de pgina da Web bsica com BlueTrip. Ento, vou adicionar ao documento anterior web os arquivos CSS que ir processar o layout conforme o esperado. Este tpico ser abordado em detalhes na prxima seo.

Pgina 7
7
1.3 Framework BlueTrip CSS - Adicionando os arquivos de CSS

Na seo anterior, que construiu a estrutura do esqueleto de um layout bsico da pgina web, voc pde se familiarizar com o uso das classes CSS fundamentais previstas pelo quadro CSS Blueprint. No entanto, em seu estado atual, a pgina em questo no carrega nenhum arquivo CSS necessrio para tornar o layout correto. Ento hora de corrigir isso agora. Basicamente, o quadro vem com trs folhas de estilo do ncleo. O primeiro encarregado de fornecer os estilos que sero utilizados nas telas do computador, o segundo ser utilizado para a impresso, e o ltimo arquivo CSS um conjunto de hacks que abordam algumas incompatibilidades relacionadas com Internet Explorer. (isso soa familiar a voc?). Abaixo, est a definio completa do (X) HTML arquivo criado anteriormente, desta vez incluindo o arquivo CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Basic example on using BlueTrip (showing the background grid)</title> <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/print.css" type="text/css" media="print">  </head> <body> <div class="container showgrid"> <div class="span-24"> <h1>BlueTrip CSS Grid example showing the grid</h1>

</div> <div class="span-8"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-16"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </body> </html> Pgina 8
8

Pgina 9
9
Se voc tentar executar o arquivo de exemplo anterior em seu prprio navegador, voc deve obter o seguinte resultado:
Esse exemplo de layout de pgina web simples, til para demonstrar como uma folha de estilo CSS como este pode ajud-lo na execuo de diferentes tipos de projetos web rapidamente. Se o significado semntico de divs no uma grande preocupao para voc (mas deve ser), ento BlueTrip CSS deve ser definitivamente ser uma boa alternativa, convm examinar. Agora que voc aprendeu como criar um layout bsico de pgina Web, com BlueTrip, vou terminar este captulo introdutrio da srie, mostrando outro arquivo de amostra, o que ir esconder a grade de fundo da tela.

Pgina 10
10
1.4 Framework BlueTrip CSS Removendo o Grid

Vimos como criar um layout simples de pgina web, onde o grid de fundo era visvel. Logicamente, esta grade deve ser usada como um guia para o posicionamento de elementos no documento web, embora deva ser escondido quando usado em ambientes de produo. Como isso pode ser feito? Bem, realmente simples. Remover o "showgrid" classe CSS a partir do container principal far o truque. O exemplo a seguir mostra como ocultar a grade de fundo do display:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Basic example on using BlueTrip (hiding the background grid)</title> <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/print.css" type="text/css" media="print">  </head> <body> <div class="container"> <div class="span-24"> <h1>BlueTrip CSS Grid example showing the grid</h1> </div> <div class="span-8"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Pgina 11
11
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8">
Se voc experimentar o (X)HTML no seu navegador, voc ver que o grid foi removida. Como a classe CSS "showgrid", foi retirado da div do container principal. Sugiro que voc faa

Pgina 12
12
testes com este exemplo, posicionar elementos na pgina web, assim voc pode produzir duas verses diferentes do layout a ser desenvolvido. Consideraes finais. Neste captulo introdutrio da srie, eu expliquei como desenvolver um projeto bsico pgina web usando as classes principais CSS fornecidos pelo framework CSS BlueTrip. Como voc viu por si mesmo, esse processo foi bastante simples, mesmo se voc no tem um fundo conhecimento de CSS. No prximo artigo, discutiremos a estrutura para a adio de colunas de uma pgina web, e as fronteiras tambm.

Pgina 13
13
2.1 Adicionando bordas para as colunas da Web Page com CSS BlueTrip
Nesta segunda parte de uma srie que introduz o framework BlueTrip CSS, vou mostrar como usar algumas classes CSS prticas para adicionar bordas para as colunas de uma pgina web e criar cabealhos H2. Sem dvida, frameworks CSS ajudam a encurtar o tempo necessrio para o desenvolvimento de sites web. Como voc deve saber, existem poucos poderosos contendores que ganharam popularidade considervel ao longo do tempo. Isto devido s suas funcionalidades teis, tais como a incluso de bem confiveis para novas funcionalidades, texto e estilo web forma completa, as folhas de estilo para impresso e assim por diante. Dentre as inmeras CSS frameworks disponveis atualmente, que se tornaram a ferramenta preferida de muitos web designers, BlueTrip muito possivelmente uma das mais populares. Alega reunir as melhores caractersticas fornecidas pelo CSS BluePrint e do Trpoli, e que parece ser mais do que um truque de marketing. Ento, se voc estiver interessado em aprender a trabalhar com o CSS BlueTrip, ento esta srie de artigos pode ser o que voc est procurando. Se voc j leu o tutorial introdutrio, ento voc sabe como criar layouts de pgina da Web bsica com BlueTrip. Neste artigo especfico, eu expliquei como usar o framework genrico span x classes CSS para construo de duas pginas web simples. No primeiro caso, a grade de fundo usado para alinhar elemento no documento web foi exibida na tela, enquanto no segundo exemplo, a grade foi escondido da vista, graas manipulao do "showgrid classe CSS", que foi atribudo alternadamente e removido da marcao. No entanto, estou apenas arranhando a superfcie dos recursos oferecidos pela BlueTrip. Na prximas linhas vou explicar como usar algumas das classes de seu CSS para adicionar molduras s colunas de uma pgina web e aplicar os estilos elegantes de cabealhos de HTML.

Pgina 14
14
2.2 Adicionando bordas a Web Page BlueTrip colunas com CSS - Review: genrico span x classes CSS
Abaixo eu reintroduzi um dos exemplos que usei no artigo anterior, para mostrar como usar o BlueTrip CSS e construir um layout de pgina web. Ele funciona usando o framework genrico "span-x classes" CSS. Aqui est:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Basic example on using BlueTrip (showing the background grid)</title> <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/print.css" type="text/css" media="print">  </head> <body> <div class="container showgrid"> <div class="span-24"> <h1>BlueTrip CSS Grid example showing the grid</h1> </div> <div class="span-8"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>

<div class="span-8"> Pgina 15
15
Como mostrado acima, a criao de um layout de uma simples pgina web com BlueTrip apenas uma questo de utilizar o genrico "span-x" e "passado classes" CSS de acordo com o tipo de projeto que precisa ser construdo. Neste caso, o documento anterior usa classe CSS showgrid "adicionais" para exibir a grade de fundo, mas, naturalmente, em ambientes de produo deve ser retirado.

Pgina 16
16
Sem dvida, a compreenso da lgica que implementa BlueTrip para criar colunas de posio atravs de uma pgina web muito simples, mesmo quando as classes CSS utilizados durante este processo falta um sentido verdadeiramente semntico. Assim, supondo que voc esteja familiarizado com os conceitos bsicos de trabalho com o anterior "span-x", hora de explorar mais algumas funcionalidades do framework. Assim, em consonncia com os conceitos utilizados na introduo, na prxima seo vou explicar como usar uma outra classe CSS fornecidos pelo BlueTrip para adicionar fronteiras sutis para as colunas de uma pgina web.

Pgina 17
17
2.3 Adicionando bordas para as colunas da Web Page BlueTrip com CSS - Adicionando fronteiras para colunas de pgina web
Tal como acontece com todos os recursos oferecidos pelo BlueTrip, adicionar bordas para as colunas de uma pgina web reduzido para atribuir uma classe CSS genrico, no surpreendentemente chamado de "fronteira", com elementos selecionados. No entanto, para compreender mais claramente como adicionar algumas fronteiras sutis para determinados recipientes, abaixo eu codificado um exemplo totalmente novo que usa a classe CSS para realizar esta tarefa em apenas alguns passos simples:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Basic example on using BlueTrip (using the border class)</title> <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/print.css" type="text/css" media="print">  </head> <body> <div class="container"> <div class="span-24"> <h1>BlueTrip CSS Grid example using the border class</h1> </div> <div class="span-8 border"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure

Pgina 18
18
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 border"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-16 border"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </body> </html>
Como voc pode ver, o exemplo acima parece muito semelhante ao que voc viu no segmento anterior, com uma ligeira diferena: um par de colunas da pgina web tem sido

Pgina 19
19
atribuda a "fronteira" classe CSS, o que adiciona uma borda do lado direito desses elementos, desta forma torn-los um pouco mais elegante. Alm disso, aqui est uma imagem simples que mostra como o documento da Web anterior processado pelo navegador, aps a incorporao das fronteiras. Aqui est:
Agora que voc aprendeu a atribuir as fronteiras para colunas em uma pgina web usando a "fronteira" de classe CSS, vou explicar como usar uma outra classe fornecida pelo BlueTrip para a construo de alguns cabealhos fantasia HTML.

Pgina 20
20
2.4 Adicionando bordas para as colunas das Web pages BlueTrip com CSS - Atribuio de classes CSS fancy para cabealhos HTML
Na realidade, o framework CSS BlueTrip, por padro, vem equipado com algumas classes teis CSS que pode ser usado para temperar o olhar de diferentes elementos de um documento web. Neste caso particular, eu vou mostrar como usar uma dessas classes, chamado de "fancy", para dar um estilo elegante com elementos baseados em texto. O exemplo abaixo demonstra como atribuir a esta classe para todos os cabealhos H2 includa em uma pgina web.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Basic example on using BlueTrip (using the fancy class)</title> <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/print.css" type="text/css" media="print">  </head> <body> <div class="container"> <div class="span-24"> <h1 class="fancy">BlueTrip CSS Grid example using the fancy class</h1> </div> <div class="span-8"> <h2 class="fancy">Level 2 heading</h2>

Pgina 21
21
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8"> <h2 class="fancy">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="fancy">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-16"> <h2 class="fancy">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="fancy">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div>

</body> </html> Pgina 22
22
A partir do exemplo acima, para ver como simples transformar o cabealhos H2 em elemento elegante usando a "fancy", da classe CSS BlueTrip. Uma vez que a amostra de cdigo fala por si, abaixo, a imagem que mostra como a pgina web anterior exibido no navegador:
Nada mal, hein? Como voc provavelmente concordar comigo, BlueTrip torna realmente fcil para adicionar "fancy" estilos de cabealhos de HTML em um documento web. No exemplo acima, esses estilos foram adicionados a uma H2, mas, naturalmente, esse processo pode ser aplicado a outros elementos de texto, como pargrafos e listas. E com este ltimo hands-on exemplo, estou terminando este segundo tutorial sobre como trabalhar com o framework CSS BlueTrip. Como sempre, sinta-se livre para editar todas as amostras de cdigo mostrado neste artigo, para que possa obter uma melhor compreenso do uso de classes CSS que vm junto com BlueTrip. Consideraes finais Neste segundo captulo da srie, eu mostrei-lhe como usar algumas classes teis do CSS que vem com o framework BlueTrip para adicionar molduras s colunas de pgina web e criar cabealhos H2.

Pgina 23
23
No artigo seguinte, exploraremos mais classes CSS fornecidas pelo framework, que ser usado para exibir as variaes de cabealhos de HTML. No perca a prxima parte!

Pgina 24
24
3.1 Usando o Framework CSS BlueTrip e Classes Thin e Caps

Nesta terceira parcela de uma srie sobre o quadro CSS BlueTrip, discuto o uso das classes CSS thin e caps que vm com BlueTrip. Essas classes podem ser muito teis para adicionar um toque mais elegante de cabealhos em HTML, de listas, e assim por diante. Caso voc no tenha ouvido falar sobre isso ainda, BlueTrip um framework CSS poderoso, que combina os melhores recursos fornecidos por dois contendores popular neste terreno, que BluePrint CSS e Tripoli, respectivamente. Ento, se voc quiser encurtar o tempo de desenvolvimento necessrio para a construo de seus sites usando o framework BlueTrip CSS, em seguida, este grupo ou artigos que voc vai encontrar um guia completo que vai lhe mostrar como trabalhar com as suas caractersticas mais relevantes. Estes incluem a habilidade para criar layouts de pginas complexas da web, assim como suas numerosas classes agrupadas CSS, acessvel para denominar cabealhos, pargrafos, listas, e assim por diante de forma muito rpida e simples. Naturalmente, se voc um leitor paciente e passou os dois tutoriais anteriores desta srie, voc tem um background slido na construo de projetos de pgina simples da web e estilos H2 com BlueTrip. Nesses dois tutoriais que eu desenvolvi alguns exemplos bsicos que demonstrou como realizar essas tarefas por meio do genrico "span-x" e "fancy" classes CSS que vem includo por padro no framework. Na verdade, extremamente simples para prover cabealhos HTML e outros elementos de web baseado em texto de pgina com um estilo elegante, atravs das classes CSS que vm com BlueTrip. Tambm vlido ressaltar que o framework apresenta algumas outras classes que permitem que voc vire cabealhos e pargrafos em elementos extravagantes. Assim, com base nesta capacidade de BlueTrip, nas prximas linhas vou dar uma olhada nas classes CSS "thin" e "caps". Estes podem ser usados para criar variaes elegantes de todos os elementos de pgina de texto baseado em web, incluindo as mencionadas anteriormente.

Pgina 25
25
3.2 Usando o Framework BlueTrip CSS Classes Thin e Caps - Anlise: as classes CSS fancy
Antes de mostrar como trabalhar com as classes CSS thin e caps oferecido pelo estilo de cabealhos HTML BlueTrip, eu gostaria de reintroduzir um exemplo desenvolvido no captulo anterior desta srie. demonstrado como adicionar um estilo elegante de alguns elementos H2 de um documento web, utilizando o quadro de "fancy" classe CSS. Este exemplo parece-se com este:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Basic example on using BlueTrip (using the fancy class)</title> <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/print.css" type="text/css" media="print">  </head> <body> <div class="container"> <div class="span-24"> <h1 class="fancy">BlueTrip CSS Grid example using the fancy class</h1> </div> <div class="span-8"> <h2 class="fancy">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Pgina 26
26
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8"> <h2 class="fancy">Level 2 heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="fancy">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-16"> <h2 class="fancy">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="fancy">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </body> </html>

Pgina 27
27
Como mencionei antes, no exemplo acima, a classe CSS "fancy" que vem com BlueTrip tem sido atribudo a alguns elementos H2 de um documento de base web, desta forma tornandoos cabealhos mais elegantes. Isso demonstrado pela imagem abaixo:
Enquanto o exemplo em questo um pouco simplista, ele mostra como fcil produzir variaes interessantes de um elemento HTML comum usando apenas uma nica classe CSS. No entanto, o quadro tambm d aos webdesigners BlueTrip a possibilidade de usar outros estilos CSS para fornecer determinados elementos do texto-base com um look extravagante. Na seo seguinte, examinaremos mais de perto uma nova classe CSS de tag chamada "thin", que pode ser utilizado para fazer os elementos selecionados na pgina web um pouco "mais fino".

Pgina 28
28
3.3 Usando o Framework CSS BlueTrip e Classes Thin e Caps - Trabalhando com a classe CSS thin
Se voc no estiver completamente satisfeito com a aparncia visual alcanado quando se utiliza a "fancy" da classe CSS que voc aprendeu antes, o quadro BlueTrip prev outras classes que produzem variaes teis de qualquer elemento baseado em texto includo em um documento web. Para demonstrar mais claramente este conceito, vou desenvolver um tipo neste novo exemplo. Ela vai atribuir uma outra classe CSS chamada "thin" para alguns cabealhos H2 dentro de uma pgina web bsica para torn-los mais finos. O exemplo parece este:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Basic example on using BlueTrip (using the thin class)</title> <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/print.css" type="text/css" media="print">  </head> <body> <div class="container"> <div class="span-24"> <h1 class="thin">BlueTrip CSS Grid example using the thin class</h1> </div> <div class="span-8"> <h2 class="thin">Level 2 heading</h2>

Pgina 29
29
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8"> <h2 class="thin">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="thin">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-16"> <h2 class="thin">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="thin">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div>

</body> </html> Pgina 30
30
No exemplo anterior, a amostra apenas cria um layout simples usando o j familiar "span-x classes" CSS que voc aprendeu nos captulos anteriores desta srie, mas atribui a classe CSS "thin" para um H2 com poucos elementos, dando uma aparncia mais elegante. Naturalmente, essa classe especial (e outros, naturalmente) pode ser aplicado a qualquer elemento baseado em texto da pgina web, ento eu sugiro que voc faa isso como lio de casa. Alm da amostra de cdigo acima, aqui est uma imagem complementar que mostra como os cabealhos H2 da pgina de exemplo so apresentados aps a atribuio da classe CSS "thin" a eles. Aqui est:
No to ruim, certo? Inegavelmente, BlueTrip oferece aos designers de web com uma base slida de classes CSS que lhe permite alterar a aparncia dos cabealhos HTML, pargrafos, listas e assim por diante com muita facilidade. E falando do aspecto visual de elementos baseados em texto, o que se deseja faz-los ser exibido inteiramente em letras maisculas no navegador? Bem, graas existncia de outra classe CSS que vem com BlueTrip chamado "caps", este processo pode ser realizado com aborrecimentos menores. Eu gostaria de terminar este tutorial, mostrando-lhe um uso simples da classe especfico

Pgina 31
31
3.4 Usando o Framework CSS BlueTrip e Classes Thin e Caps - Usando a classe CSS caps
Na realidade, a tampa superior de qualquer elemento da pgina web baseada em texto com BlueTrip reduzida a atribuir ao elemento de uma classe CSS especfica denominada "caps". Desde a sua utilizao muito semelhante a trabalhar com a thin e fancy, classes discutidas anteriormente, neste caso especfico, eu s vou criar um exemplo simples, assim voc pode ver como ele funciona. Dito isto, aqui est o exemplo de cdigo que mostra como usar as tampas de classe CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Basic example on using BlueTrip (using the caps class)</title> <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/print.css" type="text/css" media="print">  </head> <body> <div class="container"> <div class="span-24"> <h1 class="caps">BlueTrip CSS Grid example using the caps class</h1> </div> <div class="span-8"> <h2 class="caps">Level 2 heading</h2>

Pgina 32
32
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-16"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </body>

</html> Pgina 33
33
Aqui voc tem. Como demonstrado no exemplo anterior, as tampas de classe CSS que foi atribudo para todos os cabealhos H2 da pgina web anterior. Assim, esses elementos sero apresentados em letras maisculas na tela, como claramente demonstrado pela captura de tela a seguir:
Como mencionei anteriormente, o CSS BlueTrip permite que voc altere a aparncia visual dos elementos com base em texto de uma forma muito rpida e simples, mantendo um significado semntico mais rigorosas, com referncia s classes CSS que ele usa. Esta no aplicvel quando as colunas de posicionamento em um documento web. Mas como voc sabe, tudo na vida tem um custo, e isso no uma exceo. Ento agora voc sabe como usar a thin e caps classes CSS fornecidas por BlueTrip, para produzir variaes elegantes de cabealhos de H2. Se voc ainda tiver dvidas sobre como trabalhar com estas classes, sugiro que voc tente atribu-los a outros elementos do texto-base para ver como eles afetam a sua aparncia visual. Consideraes finais E isso tudo para o momento. Nesta terceira parcela da srie, eu discuti o uso dos thin "e" caps "classes CSS que vm com BlueTrip, que pode ser realmente til para adicionar um toque mais elegante de cabealhos HTML, listas, e assim por diante.

Pgina 34
34
No prximo captulo, eu vou continuar a explorar as potencialidades oferecidas pela BlueTrip til, desta vez para exibir as listas ordenados e no ordenados.

Pgina 35
35
4.1 Styling sem ordem e lista ordenada HTML com BlueTrip

Bem-vindo quarta parte de uma srie de sete artigos sobre o CSS BlueTrip. Nesta parte, veremos como usar o CSS de estilos padro para melhorar a aparncia visual de ambas listas HTML os ordenados e no ordenados. Este um processo fcil e simples. Se voc j se perguntou o que faz um framework CSS, uma ferramenta de webdesign slida, ento voc perceber que ele deve fornecer um conjunto de classes confivel de redefinio de estilo e uma grade de fundo limpo, padronizando o estilo comum e elementos HTML de formas diferentes , tais como cabealhos e pargrafos, listas e links, formulrios e tabelas, e assim por diante. Felizmente, hoje h um grupo de frameworks de CSS que servem a maioria desses requisitos. Esta lista inclui BlueTrip, que pretende reunir os melhores recursos oferecidos pelo BluePrint CSS e Trpoli (da seu nome). Ento, se voc um web designer que est procura de um guia completo que mostra como trabalhar com este enquadramento CSS popular, ento este grupo de artigos pode ser o material que voc precisa. E agora que voc foi introduzido com o objetivo principal desta srie, um bom momento para rever os temas que foram abordados no ltimo artigo. Nesse artigo eu desenvolvi alguns exemplos bsicos que demonstrou como usar o thin "e" caps "classes CSS que vm com BlueTrip para produzir algumas variaes elegantes de cabealhos de H2. No entanto, quando se trata de estilo elementos da pgina web baseada em texto de forma rpida, BlueTrip oferece inmeras possibilidades interessantes e atraentes. Dessa forma, na quarta parte desta srie eu vou discutir como estilo de ambas listas os ordenados e no ordenados usando classes CSS padro fornecidas pelo BlueTrip.

Pgina 36
36
4.2 Styling sem ordem e lista ordenada HTML com BlueTrip - Review: classes CSS thin e caps
Na edio anterior eu expliquei como atribuir a thin e caps, classes CSS que vm com BlueTrip ao estilo de alguns cabealhos H2 em uma pgina web bsica. Abaixo, reintroduzi alguns exemplos desenvolvidos em artigo que mostra como realizar este processo de uma forma simples. Aqui esto elas:
(example on using the 'thin' CSS class)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Basic example on using BlueTrip (using the thin class)</title> <link rel="stylesheet" href="../css/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="../css/print.css" type="text/css" media="print">  </head> <body> <div class="container"> <div class="span-24"> <h1 class="thin">BlueTrip CSS Grid example using the thin class</h1> </div> <div class="span-8"> <h2 class="thin">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

Pgina 37
37
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8"> <h2 class="thin">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="thin">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-16"> <h2 class="thin">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="thin">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </body>

</html> Pgina 38
38
(example on using the 'caps' CSS class)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Basic example on using BlueTrip (using the caps class)</title> <link rel="stylesheet" href="../css/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="../css/print.css" type="text/css" media="print">  </head> <body> <div class="container"> <div class="span-24"> <h1 class="caps">BlueTrip CSS Grid example using the caps class</h1> </div> <div class="span-8"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8"> <h2 class="caps">Level 2 heading</h2>

Pgina 39
39
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-16"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </body> </html>
Como voc pode ver a partir de amostras de cdigo acima, extremamente fcil de produzir variaes de cabealhos de H2 e outros elementos de web baseado em texto pgina por meio do thin e caps, classes CSS. No primeiro caso, a sada gerada pelo browser ser semelhante imagem a seguir:

Pgina 40
40
Enquanto no segundo exemplo, os cabealhos H2 ser exibido todos os ttulos, j que a finalidade do caps (classe). Aqui est uma imagem que mostra como complementar esses estilos e como so renderizados na tela:

Pgina 41
41
Bem, nesta fase voc certamente lembra de como usar as classes anteriores CSS em casos concretos. Assim, hora de explorar outros recursos oferecidos pela BlueTrip. Como j expresso na introduo, BlueTrip fornece outros estilos padro que sero aplicadas automaticamente a outros elementos de pgina web comum, como listas no ordenadas HTML. Assim, no segmento seguinte, eu estou indo para um cdigo de exemplo que demonstram como realizar essa tarefa.

Pgina 42
42
4.3 Styling sem ordem e lista ordenada HTML com BlueTrip - Styling listas desordenadas HTML
Tal como acontece com outros frameworks CSS, BlueTrip permite que voc defina estilos padro para ambas listas HTML, sem ordem e ordenada. Neste caso, vou criar um exemplo totalmente novo para voc, que ir mostrar como listas unordered so exibidas no navegador quando usado o arquivo "screen.css do framework. Veja como exemplo este novo aspecto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Basic example on using BlueTrip (using unordered lists)</title> <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/print.css" type="text/css" media="print">  </head> <body> <div class="container"> <div class="span-24"> <h1 class="caps">BlueTrip CSS Grid example using unordered lists</h1> </div> <div class="span-8"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

Pgina 43
43
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3 <ul> <li>Sub List Item 1</li> <li>Sub List Item 2 <ul> <li>Sub List Item 1</li> <li>Sub List Item 2</li> <li>Sub List Item 3</li> </ul> </li> </ul> </li> </ul> </div> <div class="span-8"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div> <div class="span-16"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </body> </html> Pgina 44
44
Fiel forma, a amostra de cdigo acima muito simples de seguir. Tudo que faz criar um layout de pgina de base web, onde um de seus recipientes inclui um conjunto de listas no ordenadas aninhadas HTML. At agora, isso no nada incomum, porm, as coisas vo se tornar mais interessante se voc olhar para a imagem abaixo, que mostra como essas listas so exibidas no browser. Aqui est:

Pgina 45
45
A partir da figura acima, claro, para ver como simples e rpido o estilo de listas desordenadas pode ser quando se utiliza o framework CSS BlueTrip. Claro, no poderia ser o melhor estilo que pode ser atribudo a estes elementos da pgina web, mas eles parecem muito elegante e profissional. Depois de ter explicado brevemente o HTML com listas desordenadas e estilo com BlueTrip, agora mostraremos como fazer o mesmo processo com as listas ordenadas.

Pgina 46
46
4.4 Styling sem ordem e lista ordenada HTML com BlueTrip - Styling listas ordenadas HTML
Como eu disse anteriormente, o ltimo exemplo que vou criar, para este tutorial ir demonstrar como o estilo de listas ordenadas com BlueTrip. Tal como acontece com listas no ordenadas HTML, o quadro prev um estilo padro para esses elementos que fazem lhes o olhar muito polido. O exemplo de cdigo a seguir cria uma pgina web bsica em que algumas listas ordenadas foram includas:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Basic example on using BlueTrip (using unordered lists)</title> <link rel="stylesheet" href="css projection"> /screen.css" type="text/css" media="screen,
<link rel="stylesheet" href="css/print.css" type="text/css" media="print">  </head> <body> <div class="container"> <div class="span-24"> <h1 class="caps">BlueTrip CSS Grid example using ordered lists</h1> </div> <div class="span-8"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure

Pgina 47
47
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <ol> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3 <ol> <li>Sub List Item 1</li> <li>Sub List Item 2 <ol> <li>Sub List Item 1</li> <li>Sub List Item 2</li> <li>Sub List Item 3</li> </ol> </li> </ol> </li> </ol> </div> <div class="span-8"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>

<div class="span-16"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </body> </html> Pgina 48
48
Mesmo que a amostra de cdigo acima tenha aparncia muito semelhante desenvolvida no segmento anterior, neste caso, mostra como uma lista ordenada HTML exibido com os estilos BlueTrip aplicada a ele. Naturalmente, este exemplo seria incompleta se eu no mostrasse a captura de tela que retrata a sada do navegador. Aqui est:

Pgina 49
49
Definitivamente, a compreenso de como trabalhar com listas ordenadas e BlueTrip um processo extremamente simples, por isso no vou gastar mais tempo explicando como funciona o exemplo anterior. No entanto, vou encoraj-lo a tentar incluir outros elementos HTML para ver como eles so processados usando os estilos padro fornecidos pelo framework. Consideraes finais Nesta quarta parte da srie, eu expliquei como usar os estilos padro fornecidos pelo BlueTrip para melhorar a aparncia visual de ambas listas HTML os ordenados e no ordenados. Como voc viu, este um processo simples, pelo que no dever ter grandes problemas apreender a sua lgica. No prximo artigo, vou discutir como trabalhar com listas de definio quando se utiliza o framework CSS BlueTrip.

Pgina 50
50
5.1 Styling Definio listas com o CSS BlueTrip Framework

Bem-vindo quinta parte de uma srie de sete artigos sobre o framework CSS BlueTrip. Nesta parte, voc vai aprender o estilo de listas de definio com BlueTrip e como atribuir o seu padro "estilo de classes" CSS para um H2 alguns cabealhos e H3. Voc ver a flexibilidade que lhe permite aplicar estilos diferentes para os elementos da pgina web de forma rpida e simples. Recentemente, um framework CSS novo ganhou popularidade considervel com webdesigners. Muitas devido sua capacidade de estilo marcante. Estas capacidades permitem aos desenvolvedores criar layouts de pginas web consistente muito rapidamente e com menor esforo. Estamos falando do BlueTrip, uma estrutura impressionante, que afirma reunir em uma nica pea de software com os melhores recursos fornecidos por outros dois frameworks, BluePrint e Tripoli. Assim, se voc se sentir intrigado e quer saber como comear a usar o BlueTrip CSS para o desenvolvimento de seus sites, ento esta srie de artigos pode ser o que voc precisa. E agora que voc sabe o que esperar desse grupo de tutoriais, hora de revisar os tpicos que foram abordados na ltima. Na parte especfica da srie, eu expliquei como usar os estilos padro fornecidos pelo BlueTrip para a aparncia visual das listas HTML ordenadas e no ordenadas. Foi um processo fcil de entender. Como voc deve ter percebido, porm, o framework CSS BlueTrip vem com muitos padres CSS e outras classes que permitem facilmente o estilo de outros elementos comuns em HTML, como formulrios, tabelas e listas de definio, etc. Portanto, neste quinto captulo da srie eu vou explicar a definio de estilo de listas com BlueTrip. Alm disso, voc vai aprender a atribuir as classes CSS thin que voc aprendeu nos artigos anteriores para outros cabealhos HTML.

Pgina 51
51
5.2 Styling Definio listas com o CSS BlueTrip Framework - Review: lista sem ordem e ordenada
Antes de eu mostrar-lhe como dar uma aparncia mais atraente para as listas de definio, utilizando BlueTrip, eu gostaria de reintroduzir um par de exemplos criados no tutorial anterior. Estes exemplos demonstram como executar esta tarefa para as duas listas: ordenada e sem ordem. Veja como esses exemplos foram desenvolvidos originalmente:
(example on styling unordered lists)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Basic example on using BlueTrip (using unordered lists)</title> <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/print.css" type="text/css" media="print">  </head> <body> <div class="container"> <div class="span-24"> <h1 class="caps">BlueTrip CSS Grid example using unordered lists</h1> </div> <div class="span-8">

<h2 class="caps">Level 2 heading</h2> Pgina 52
52
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3 <ul> <li>Sub List Item 1</li> <li>Sub List Item 2 <ul> <li>Sub List Item 1</li> <li>Sub List Item 2</li> <li>Sub List Item 3</li> </ul> </li> </ul> </li> </ul> </div> <div class="span-8"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

Pgina 53
53
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-16"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </body> </html>
(example on styling ordered lists)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Basic example on using BlueTrip (using unordered lists)</title> <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection">

<link rel="stylesheet" href="css/print.css" type="text/css" media="print">  </head> <body> <div class="container"> <div class="span-24"> <h1 class="caps">BlueTrip CSS Grid example using ordered lists</h1> </div> <div class="span-8"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <ol> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3 <ol> <li>Sub List Item 1</li> <li>Sub List Item 2 <ol> <li>Sub List Item 1</li> <li>Sub List Item 2</li> <li>Sub List Item 3</li> </ol> </li> </ol> </li> </ol> Pgina 54
54

</div> <div class="span-8"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-16"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </body> </html> Pgina 55
55

Pgina 56
56
Inegavelmente, os dois exemplos de cdigo mostrados acima so extremamente simples de seguir. Estruturam o HTML para listas ordenadas e sem ordem em duas pginas web. No entanto, o mais importante desses exemplos a sada que eles produzem, j que eles usam os estilos CSS fornecidos pelo padro BlueTrip. As imagens seguintes mostram como as listas so exibidas no navegador:
Neste momento espero recordar as listas de estilo HTML com BlueTrip. Na sequencia, demonstraremos como este mesmo processo pode ser realizado por meio de listas de definio.

Pgina 57
57
5.3 Styling Definio listas com o CSS BlueTrip Framework - listas de definio com styling rapidamente BlueTrip
A definio de listas de estilo CSS usando o padro BlueTrip no difere muito da utilizao da lista HTML ordenada e no ordenada. Tudo que necessrio neste caso, incluir as listas de definio em uma pgina web; BlueTrip simplesmente faz o resto automaticamente. Afim de esclarecer a forma como BlueTrip lida com listas, aqui est uma outra amostra de cdigo que incorpora estes elementos em uma pgina web simples. Abaixo temos outro exemplo :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Basic example on using BlueTrip (using definition lists)</title> <link rel="stylesheet" href=".css/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/print.css" type="text/css" media="print">  </head> <body> <div class="container"> <div class="span-24"> <h1 class="caps">BlueTrip CSS Grid example using definition lists</h1> </div> <div class="span-8"> <h2 class="caps">Level 2 heading</h2>

Pgina 58
58
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <dl> <dt>Definition list title 1</dt> <dd>Description list 1</dd> <dt>Definition list title 2</dt> <dd>Description list 1</dd> <dd>Description list 2</dd> </dl> </div> <div class="span-8"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-16"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last">

59
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </body> </html>
Como voc pode ver, o arquivo web acima inclui uma lista de definio simples. As coisas realmente interessantes iniciam aqui, se voc experimentar este exemplo em seu navegador, ento voc ter uma sada muito semelhante ao abaixo:

Pgina 60
60
BlueTrip fez seu trabalho, a definio da lista mencionada anteriormente foi fornecida com uma boa aparncia. Claro, sempre possvel melhorar os estilos atribudos a diferentes elementos HTML por padro do framework, mas agora isso vai ser deixado como lio de casa para voc. Agora que apresentei listas de definio de estilo, hora de explorar alguns outros recursos fornecidos pelo framework. Com essa idia em mente, na ltima seo deste tutorial vou explicar como atribuir as classes CSS que voc aprendeu nos tutoriais anteriores da srie de H2 e H3 cabealhos de HTML.

Pgina 61
61
5.4 Styling Definio listas com o CSS BlueTrip Framework - Styling diferentes cabealhos HTML
Em um captulo anterior da srie, expliquei brevemente como atribuir a classe CSS fornecidos pelo BlueTrip a alguns elementos H1. Agora hora de mostrar-lhe como executar esta tarefa com cabealhos H2 e H3 tambm. O exemplo de cdigo abaixo faz isso:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Basic example on using BlueTrip (using h2 and h3 heading levels with fancy class)</title> <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/print.css" type="text/css" media="print">  </head> <body> <div class="container"> <div class="span-24"> <h1 class="caps">BlueTrip CSS Grid example using h2 and h3 heading levels with fancy class</h1> </div> <div class="span-8"> <h2 class="fancy">Level 2 heading</h2>

<h3 class="fancy">Level 3 heading</h3> Pgina 62
62
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8"> <h2 class="fancy">Level 2 heading</h2> <h3 class="fancy">Level 3 heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="fancy">Level 2 heading</h2> <h3 class="fancy">Level 3 heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-16"> <h2 class="fancy">Level 2 heading</h2> <h3 class="fancy">Level 3 heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="fancy">Level 2 heading</h2> <h3 class="fancy">Level 3 heading</h3>

Pgina 63
63
O exemplo de cdigo acima demonstra como atribuir a classe CSS para todos os cabealhos H2 e H3 includos nos documentos web pertinentes. Desde que o cdigo fala por si, sugiro que voc olhe a imagem abaixo, que mostra a sada gerada pelo browser:
Neste ponto, voc aprendeu como transformar cabealhos H2 e H3 em elementos elegantes usando a classe CSS com BlueTrip. Edite todas as amostras de cdigo criado neste artigo, assim, voc pode obter uma base mais slida em inmeras funcionalidades oferecidas por este framework CSS popular.

Pgina 64
64
Consideraes finais Neste quinto captulo da srie, voc aprendeu o estilo de listas de definio com BlueTrip e como atribuir o seu padro de classes CSS para alguns cabealhos H2 e H3. A partir dos exemplos desenvolvidos anteriormente fica claro ver que o framework lhe permite aplicar estilos diferentes para os elementos da pgina web de forma rpida e simples. No prximo artigo, vou discutir a forma de atribuir as classes CSS thin e caps revista em artigos anteriores a elementos H2 e H3.

Pgina 65
65
6.1 Mais usos para as Classes CSS Thin e Caps no BlueTrip

Nesta sexta parte de uma srie de sete artigos sobre o framework CSS BlueTrip, voc vai aprender como atribuir as classes CSS thin e caps para os elementos H2 e H3 de uma pgina web. O uso dessas classes faz com que os elementos paream mais elegantes e visualmente atraente. Se voc um webdesigner que quer encurtar o tempo necessrio para criar os layouts de pgina utilizada com seus prprios web sites, ento voc talvez queira dar uma olhada no framework CSS BlueTrip. uma biblioteca slida que lhe permitir criar todos os tipos de layouts atraentes usando apenas algumas classes CSS til para posicionar elementos em um documento web e dar-lhes um aparncia visual elegante. Naturalmente, se voc leu os captulos anteriores desta srie, ento agora voc tem uma base slida de como tirar proveito das caractersticas mais relevantes oferecidos por BlueTrip. Nesses tutoriais expliquei, no s como criar layouts de pgina da Web bsica com suas classes CSS padro, mas como estilo de diferentes tipos de listas em HTML de uma forma rpida e fcil. E por falar em classes CSS o padro fornecido pelo BlueTrip, voc certamente lembra que em um artigo anterior, abordei o uso dos chamados, "thin" e "caps", respectivamente. Neste caso particular, foram atribudos a todos os elementos H2 includa em uma pgina web amostra. No entanto, tambm possvel atribuir essas classes para outros elementos de texto HTML da mesma forma sem esforo. Portanto, neste sexto artigo desta srie vou explicar como aplicar as classes thin e o caps de cabealhos H3, ampliando ainda mais sua experincia na utilizao do BlueTrip. Agora que voc sabe o que esperar deste artigo, hora de ver como transformar o cabealho HTML H3 em elementos elegantes, graas magia da BlueTrip. Vamos comear!

Pgina 66
66
6.2 Mais usos para as Classes CSS Thin e Caps no BlueTrip - Reviso: listas de definio de estilo com BlueTrip
No caso de voc no ter lido o artigo anterior, onde discutiram a forma de listas de definio de estilo por meio de estilos CSS padro dado por BlueTrip. Abaixo, inclu um exemplo que mostra como realizar essa tarefa em alguns passos simples.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Basic example on using BlueTrip (using definition lists)</title> <link rel="stylesheet" href=".css/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/print.css" type="text/css" media="print">  </head> <body> <div class="container"> <div class="span-24"> <h1 class="caps">BlueTrip CSS Grid example using definition lists</h1> </div> <div class="span-8"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<dl> <dt>Definition list title 1</dt> <dd>Description list 1</dd> <dt>Definition list title 2</dt> <dd>Description list 1</dd> <dd>Description list 2</dd> </dl> </div> <div class="span-8"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-16"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="caps">Level 2 heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure Pgina 67
67

Pgina 68
68
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </body> </html>
Do exemplo acima, fica claro o quo simples o estilo de listas de definio usando as classes CSS fornecidos por padro pelo BlueTrip. Neste caso, o cdigo do arquivo anterior (X)HTML muito fcil de seguir, assim. vamos prestar ateno figura seguinte, que mostra a sada correspondente gerado pelo browser:
Bem, agora que voc lembrou que a lista de definio de estilo HTML com o framework CSS BlueTrip, hora de explorar algumas das suas outras caractersticas teis. Na seo seguinte, discutiremos como atribuir as (j familiares) classes CSS thin para os elementos H3 de uma pgina web bsica.

Pgina 69
69
6.3 Mais usos para as Classes CSS Thin e Caps CSS no BlueTrip - Subordinao classes fina CSS para elementos H3
Como j expresso na seo anterior, possvel atribuir a classe CSS thin fornecidos por padro pelo BlueTrip a qualquer elemento HTML baseado em texto. No tutorial anterior da srie, expliquei como usar a classe com cabealhos de H2, mas neste caso especfico, veja como esse mesmo processo pode ser aplicado a cabealhos H3 tambm. Basicamente, a amostra de cdigo que realiza esta tarefa a seguinte:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Basic example on using BlueTrip (using h2 and h3 heading levels with thin class)</title> <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/print.css" type="text/css" media="print">  </head> <body> <div class="container"> <div class="span-24"> <h1 class="caps">BlueTrip CSS Grid example using h2 and h3 heading levels with fancy class</h1> </div> <div class="span-8">

<h2 class="thin">Level 2 heading</h2> <h3 class="thin">Level 3 heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8"> <h2 class="thin">Level 2 heading</h2> <h3 class="thin">Level 3 heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="thin">Level 2 heading</h2> <h3 class="thin">Level 3 heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-16"> <h2 class="thin">Level 2 heading</h2> <h3 class="thin">Level 3 heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="thin">Level 2 heading</h2> <h3 class="thin">Level 3 heading</h3> Pgina 70
70

Pgina 71
71
Como mostrado acima, extremamente simples transformar elementos H2 e H3 para os mais finos, atribuindo-lhes a classe CSS thin. Alm do mais, a imagem a seguir devem lhe dar uma idia clara de como estes elementos so renderizados no browser depois de ser denominado:
Vimos como fcil criar um layout de pgina, atravs do BlueTrip. Mas h mais para ver. Tambm possvel converter elementos do texto-base HTML em suas verses de letras maisculas, por meio das classe CSS que voc aprendeu em um artigo anterior desta srie.

Pgina 72
72
Com esta idia em mente, na prxima seo vou desenvolver um outro exemplo semelhante ao que voc acabou de ver, mas desta vez os cabealhos H2 e H3 sero estilizados com a classe caps.

Pgina 73
73
6.4 Mais usos para as Classes CSS Thin e Caps CSS no BlueTrip - caps CSS Atribuindo classes aos elementos H2 e H3
Na realidade, transformando os cabealhos H2 e H3 em elementos de letras maisculas em apenas um local de configurao e atribuir-lhes os estilos da classe CSS BlueTrip, e nada mais. O exemplo a seguir demonstra o uso desta classe com os dois cabealhos H2 e H3. Aqui est:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Basic example on using BlueTrip (using h2 and h3 heading levels with caps class)</title> <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/print.css" type="text/css" media="print">  </head> <body> <div class="container"> <div class="span-24"> <h1 class="caps">BlueTrip CSS Grid example using h2 and h3 heading levels with caps class</h1> </div> <div class="span-8"> <h2 class="caps">Level 2 heading</h2> <h3 class="caps">Level 3 heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure

Pgina 74
74
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8"> <h2 class="caps">Level 2 heading</h2> <h3 class="caps">Level 3 heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="caps">Level 2 heading</h2> <h3 class="caps">Level 3 heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-16"> <h2 class="caps">Level 2 heading</h2> <h3 class="caps">Level 3 heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="caps">Level 2 heading</h2> <h3 class="caps">Level 3 heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div> </div> </body> </html> Pgina 75
75
A partir da amostra do cdigo acima, verifica-se que o cabealho superior H2 e cabealhos H3 um processo simples que pode ser resolvido com um esforo menor. Considerando que o exemplo anterior realmente fcil de seguir, voc deve olhar para a tela a seguir, que mostra como esses cabealhos HTML so exibidos na tela depois de terem sido desenhados com as classes CSS:
Como voc deve ter deduzido, possvel, tambm, maisculas para todos os elementos do texto-base de um documento HTML web usando a classe caps. Nesse caso particular, decidi realizar esta tarefa s com cabealhos de H2 e H3, mas possvel test-lo com listas, pargrafos, e assim por diante. As possibilidades so infinitas. E, finalmente, sentir-se livre para editar todas as amostras de cdigo mostrado neste artigo

Pgina 76
76
para ajud-lo a construir uma melhor experincia no uso dos estilos mais relevantes que vm defindos por padro com o framework CSS BlueTrip. A experincia vai ser educativa e porque no, tambm divertido! Consideraes finais Neste sexto episdio da srie, voc aprendeu a atribuir as classes CSS thin e caps fornecidos pelo BlueTrip dos elementos H2 e H3 de uma pgina web. Como voc viu nas figuras complementares que acompanhou cada uma das amostras de cdigo anterior, o uso dessas classes faz com que os elementos paream mais elegantes e visualmente atraentes. Seguindo em frente, no ltimo artigo demonstraremos como trabalhar com trs classes teis que vm com esse quadro, chamado "sucesso", "alerta" e "erro", respectivamente. Como os nomes sugerem, elas podem ser usadas para informar os utilizadores de uma forma visual limpa e quando alguns desses eventos ocorrem.

Pgina 77
77
7.1 Usando Classes CSS do BlueTrip: Success, Notice e Error

Bem-vindo ao artigo final de uma srie sobre o framework CSS BlueTrip. Composto de sete tutoriais abrangentes, esta srie mostra as principais classes CSS que vm junto com BlueTrip atravs de uma variedade decente de exemplos de cdigo. Entre os numerosos frameworks CSS disponveis hoje em dia, BlueTrip definitivamente um dos mais populares entre os designers de web. Ele vem com um conjunto de caractersticas marcantes que permitem aos programadores criar todos os tipos de layouts de pginas web de um modo verdadeiramente fcil. Portanto, se voc estiver interessado em aprender como colocar essa biblioteca CSS para trabalhar para voc por meio de um guia acessvel, ento voc deve comear lendo este artigo agora. hora de revisar os tpicos que foram discutidos no ltimo tutorial. Numa parte da srie, expliquei como converter cabealhos HTML H2 e H3 em elementos elegantes, atribuindo-lhes as classes CSS thin e caps fornecidos pelo BlueTrip. Logicamente, este processo foi demonstrado para fins de exemplo, pois voc est livre para aplicar essas classes de todos os elementos com base em texto de uma pgina web, no apenas a alguns cabealhos de HTML. vlido ressaltar, porm, que BlueTrip tambm vem com um conjunto til de trs classes predefinidas, chamada de "sucesso", "advertncia" e de "erro", respectivamente, para informar os usurios sobre a ocorrncia destes eventos especficos, de forma visual e apelativa. Na maioria dos casos, essas classes devem ser aplicados para divs, ou para exibir os erros e mensagens de advertncia, ou quando um determinado processo foi concludo com xito. Mas, naturalmente, podem ser ligados a outros elementos HTML como bem disponvel. Em resumo, nesta ltima parte da srie que apresentarei as classes CSS e em como us-los em casos concretos. Agora, vamos deixar as preliminares e concluir este estudo do framework CSS BlueTrip.

Pgina 78
78
7.2 Usando Classes CSS do BlueTrip: Success, Notice e Error - Resultados de mensagens com sucesso BlueTrip
Como expressei no comeo, BlueTrip oferece trs classes CSS predefinidas que pode ser utilizado para mostrar os erros, avisos e mensagens de sucesso com facilidade. Primeiro, eu vou criar um exemplo simples que demonstram como trabalhar com o "sucesso" da classe CSS. Neste caso particular, a classe ser atribuda a um pargrafo, o exemplo de cdigo que faz isso o seguinte:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Basic example on using BlueTrip (using success class)</title> <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/print.css" type="text/css" media="print">  </head> <body> <div class="container"> <div class="span-24"> <h1 class="caps">BlueTrip CSS Grid example using success class</h1> </div> <div class="span-8"> <h2 class="caps">Level 2 heading</h2> <h3 class="caps">Level 3 heading</h3> <p class="success">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

Pgina 79
79
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8"> <h2 class="caps">Level 2 heading</h2> <h3 class="caps">Level 3 heading</h3> <p class="success">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="caps">Level 2 heading</h2> <h3 class="caps">Level 3 heading</h3> <p class="success">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-16"> <h2 class="caps">Level 2 heading</h2> <h3 class="caps">Level 3 heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="caps">Level 2 heading</h2> <h3 class="caps">Level 3 heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Pgina 80
80
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </body> </html>
Como visto no exemplo acima, o "sucesso" da classe CSS tem sido atribudo a alguns pargrafos, que reconhecidamente no nada espetacular. No entanto, se voc der uma olhada na figura a seguir, voc ter uma idia melhor de como esta classe pode ser usado para exibir todos os tipos de mensagens de confirmao:
Como voc pode ver, o "sucesso" da classe CSS atribui uma cor de fundo verde para os pargrafos selecionados, indicando aos usurios que qualquer medida tomada por eles tem sido realizado com xito. Muito provavelmente voc vai querer usar outros estilos para mostrar esse tipo de mensagem para os visitantes, mas o padro de "sucesso" da classe CSS pode valer a pena dar uma olhada. Agora espero que voc tenha aprendido a trabalhar com esta classe CSS til do BlueTrip,

Pgina 81
81
hora de dar uma olhada no outro, destinado a ser usado para exibir os alertas e avisos em geral. Essa classe chamada "aviso", e ser analisado em detalhe na seo seguinte.

Pgina 82
82
7.3 Usando Classes CSS do BlueTrip: Success, Notice e Error - Mostrando anncios e avisos com BlueTrip
Mostrando anncios e avisos: trabalhar com o aviso de classe CSS Como o prprio nome indica, o anncio de classe CSS fornecidos pelo BlueTrip usado para exibir os anncios e avisos. isso a. Ento, qual a diferena entre esta "classe" de sucesso discutido na seo anterior? Bem, no to real, uma vez que quando um elemento denominado com o aviso de "classe", ser atribuda uma cor de fundo amarelo. O exemplo de cdigo abaixo mostra como usar essa classe CSS com alguns pargrafos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Basic example on using BlueTrip (using notice class)</title> <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/print.css" type="text/css" media="print">  </head> <body> <div class="container"> <div class="span-24"> <h1 class="caps">BlueTrip CSS Grid example using notice class</h1> </div> <div class="span-8"> <h2 class="caps">Level 2 heading</h2>

83
<p class="notice">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8"> <h2 class="caps">Level 2 heading</h2> <h3 class="caps">Level 3 heading</h3> <p class="notice">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="caps">Level 2 heading</h2> <h3 class="caps">Level 3 heading</h3> <p class="notice">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-16"> <h2 class="caps">Level 2 heading</h2> <h3 class="caps">Level 3 heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="caps">Level 2 heading</h2> <h3 class="caps">Level 3 heading</h3>

Pgina 84
84
Se voc examinar o exemplo acima, voc vai perceber que praticamente idntica que foi criada no segmento anterior, exceto por uma diferena sutil: existem trs pontos que foram atribudos a "notificao" classe CSS. Logicamente, o exemplo de cdigo em si no vai dizer muito sobre como olhar estes nmeros, mas a imagem que se segue deve dissipar eventuais dvidas que voc possa ter:

Pgina 85
85
Como voc pode ver, o anncio de classe CSS deve ser utilizado para exibir algum tipo de aviso em um site, nos casos apropriados, e pode ser facilmente melhorado, adicionando estilos personalizados tambm. To longe, to bom. Agora que voc j compreendeu a lgica que est por trs de aplicao das classes CSS de "aviso" para os elementos de um documento web, hora de analisar outro padro classe CSS junto ao BlueTrip. Neste caso, estou falando sobre o "erro" de classe, que deve ser usado para exibir mensagens de erro em uma pgina web.

Pgina 86
86
7.4 Usando Classes CSS do BlueTrip: Success, Notice e Error - Resultados de erros
O ltimo exemplo de cdigo neste artigo ser destinada a ilustrar como trabalhar com a classe CSS de "erro" junto ao BlueTrip. Como voc pode imaginar, essa classe deve ser utilizada para exibir vrios tipos de mensagens de erro, e uma simples demonstrao de seu uso mostrado no exemplo de cdigo abaixo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Basic example on using BlueTrip (using error class)</title> <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/print.css" type="text/css" media="print">  </head> <body> <div class="container"> <div class="span-24"> <h1 class="caps">BlueTrip CSS Grid example using error class</h1> </div> <div class="span-8"> <h2 class="caps">Level 2 heading</h2> <h3 class="caps">Level 3 heading</h3> <p class="error">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat

Pgina 87
87
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8"> <h2 class="caps">Level 2 heading</h2> <h3 class="caps">Level 3 heading</h3>
<p class="error">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="caps">Level 2 heading</h2> <h3 class="caps">Level 3 heading</h3> <p class="error">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-16"> <h2 class="caps">Level 2 heading</h2> <h3 class="caps">Level 3 heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="span-8 last"> <h2 class="caps">Level 2 heading</h2> <h3 class="caps">Level 3 heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div> </div> </body> </html> Pgina 88
88
Neste caso, a classe CSS de "erro" foi atribudo a alguns pargrafos para faz-los se destacarem do resto dos elementos que compem a pgina web. Naturalmente, a melhor maneira de entender como essa classe CSS faz o seu negcio atravs de uma imagem ilustrativa abaixo:
Como voc pode ver acima, cada ponto que tem sido atribudo a classe CSS de "erro", agora tem uma cor de fundo vermelho, o que o torna ideal para a exibio de informaes relacionadas a falhas em geral. E com este ltimo exemplo, estou concluindo o tutorial final desta srie sobre as potencialidades do framework CSS BlueTrip. Edite todas as amostras de cdigo includo neste artigo, para que voc possa adquirir mais prtica usando esta biblioteca CSS styling muito til.

Pgina 89
89
Consideraes finais Esperemos que toda a experincia tenha sido instrutivo para voc, uma vez que este grupo de artigos que foram fornecidos com um guia acessvel a dominar as principais caractersticas que vm com o framework CSS BlueTrip. Tal como acontece com outros frameworks populares, o grande inconveniente do BlueTrip que ele usa classes CSS que no so semanticamente significativos. Do ponto de vista purista, este um ponto negativo. Por outro lado, se voc precisa reduzir o tempo que leva para criar seus sites, BlueTrip uma boa opo a considerar.

Pgina 90
90
8 Referncias Bibliogrficas
1. BlueTrip: http://bluetrip.org/ 2. Artigos sobre o framework CSS Bluetrip: http://bluetrip.org/forum/35

Apostila Bluetrip

Caricato da

Informazioni sul documento

Titolo originale

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

Apostila Bluetrip

Caricato da

Copyright:

Formati disponibili

UNIVERSIDADE FEDERAL DO PARAN

Pr-Reitoria de Gesto de Pessoas Coordenadoria de Desenvolvimento de Pessoas

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

1.1 Framework BlueTrip CSS

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

1.3 Framework BlueTrip CSS - Adicionando os arquivos de CSS

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

1.4 Framework BlueTrip CSS Removendo o Grid

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

3.1 Usando o Framework CSS BlueTrip e Classes Thin e Caps

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

4.1 Styling sem ordem e lista ordenada HTML com BlueTrip

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

(example on using the 'caps' CSS class)

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

5.1 Styling Definio listas com o CSS BlueTrip Framework

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

UNIVERSIDADE FEDERAL DO PARAN

(example on styling ordered lists)

UNIVERSIDADE FEDERAL DO PARAN