Curso de CSS. O curso proposto é resultado da experiência da Pró- Informática em ministrar...

Curso de CSS

O curso proposto é resultado da experiência da O curso proposto é resultado da experiência da

Pró-Informática em ministrar treinamentos para Pró-Informática em ministrar treinamentos para

capacitação na área de TI ao longo dos seus 26 capacitação na área de TI ao longo dos seus 26

anos.anos.

O objetivo principal do curso é ensinar técnicas O objetivo principal do curso é ensinar técnicas

para construção de sites usando CSS.para construção de sites usando CSS.

“a única coisa constante no mundo é a mudança”

Introdução:Introdução:

Folhas de estilos em cascata — Cascading Style Sheets (CSS) — é uma Folhas de estilos em cascata — Cascading Style Sheets (CSS) — é uma ferramenta para construção do layout de websites. Permite que você ferramenta para construção do layout de websites. Permite que você projete websites com uma técnica completamente diferente da projete websites com uma técnica completamente diferente da convencional e possibilita uma considerável redução de tempo de convencional e possibilita uma considerável redução de tempo de trabalho. Conhecer CSS é uma necessidade para qualquer um envolvido trabalho. Conhecer CSS é uma necessidade para qualquer um envolvido com o projeto web.com o projeto web.

Para usar CSS é necessário um conhecimento básico de HTML. Para usar CSS é necessário um conhecimento básico de HTML.

Qual é a diferença entre CSS e HTML?Qual é a diferença entre CSS e HTML?

HTML é usado para estruturar conteúdos. CSS é usado para formatar HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados.conteúdos estruturados.

Quais são os benefícios do uso de CSS?Quais são os benefícios do uso de CSS?

CSS é uma revolução no mundo do web design. Os benefícios concretos do uso de CSS é uma revolução no mundo do web design. Os benefícios concretos do uso de CSS incluem: CSS incluem:

controle do layout de vários documentos a partir de uma simples folha de estilos;controle do layout de vários documentos a partir de uma simples folha de estilos;

maior precisão no controle do layout;maior precisão no controle do layout;

aplicação de diferentes layouts para servir diferentes mídias (tela, impressora, aplicação de diferentes layouts para servir diferentes mídias (tela, impressora, etc.); etc.);

emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento.emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento.

Quais são os benefícios do uso de CSS?Quais são os benefícios do uso de CSS?

CSS é uma revolução no mundo do web design. Os benefícios concretos do CSS é uma revolução no mundo do web design. Os benefícios concretos do uso de CSS incluem: controle do layout de vários documentos a partir de uma uso de CSS incluem: controle do layout de vários documentos a partir de uma simples folha de estilos; maior precisão no controle do layout; aplicação de simples folha de estilos; maior precisão no controle do layout; aplicação de diferentes layouts para servir diferentes mídias (tela, impressora, etc.); diferentes layouts para servir diferentes mídias (tela, impressora, etc.); emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento.emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento.

A sintaxe básica das CSSA sintaxe básica das CSS

Suponha que desejamos uma cor de fundo vermelha para a página web:Suponha que desejamos uma cor de fundo vermelha para a página web:

Usando HTML podemos fazer assim:Usando HTML podemos fazer assim:

Com CSS o mesmo resultado será obtido assim:Com CSS o mesmo resultado será obtido assim:

<body bgcolor="#FF0000“>

body {background-color: #FF0000;}

Você pode aplicar CSS a um documento de três maneiras distintas. Os três Você pode aplicar CSS a um documento de três maneiras distintas. Os três métodos de aplicação estão exemplificados a seguir. Recomendamos que métodos de aplicação estão exemplificados a seguir. Recomendamos que você foque no terceiro método, ou seja o método externo.você foque no terceiro método, ou seja o método externo.

Método 1: In-line (o atributo style)Método 1: In-line (o atributo style)

Método 2: Interno (a tag style)Método 2: Interno (a tag style)

Método 3: Externo (link para uma folha de estilos)Método 3: Externo (link para uma folha de estilos)

Uma maneira de aplicar CSS é pelo uso do atributo style do HTML. Uma maneira de aplicar CSS é pelo uso do atributo style do HTML. Tomando como base o exemplo mostrado anteriormente a cor vermelha Tomando como base o exemplo mostrado anteriormente a cor vermelha para o fundo da página pode ser aplicada conforme mostrado a seguir:para o fundo da página pode ser aplicada conforme mostrado a seguir:

<html><head>

<title>Exemplo</title></head> <body style="background-color: #FF0000;">

<p>Esta é uma página com fundo vermelho</p>

</body></html>

Uma outra maneira de aplicar CSS e pelo uso da tag <style> do HTML. Uma outra maneira de aplicar CSS e pelo uso da tag <style> do HTML. Como mostrado a seguir: Como mostrado a seguir:

<html> <head>

<title>Exemplo</title> <style type="text/css">

body {background-color: #FF0000;} </style>

</head> <body>

<p>Esta é uma página com fundo vermelho</p> </body> </html>

O método recomendado é o de lincar para uma folha de estilos externa. O método recomendado é o de lincar para uma folha de estilos externa. Usaremos este método em nosso treinamento.Usaremos este método em nosso treinamento.

Uma folha de estilos externa é um simples arquivo de texto com a Uma folha de estilos externa é um simples arquivo de texto com a extensão .css. Tal como com qualquer outro tipo de arquivo você pode colocar extensão .css. Tal como com qualquer outro tipo de arquivo você pode colocar uma folha de estilos tanto no servidor como no disco rígido.uma folha de estilos tanto no servidor como no disco rígido.

Vamos supor, por exemplo, que sua folha de estilos tenha sido nomeada de Vamos supor, por exemplo, que sua folha de estilos tenha sido nomeada de style.css.style.css.

O "truque" é criar um link no documento HTML (default.htm) para a folha de O "truque" é criar um link no documento HTML (default.htm) para a folha de estilos (style.css). O link é criado em uma simples linha de código HTML como estilos (style.css). O link é criado em uma simples linha de código HTML como mostrado a seguir:mostrado a seguir:

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

Notar que o caminho para a folha de estilos é indicado no atributo href. Notar que o caminho para a folha de estilos é indicado no atributo href. Esta linha de código deve ser inserida na seção header do documento Esta linha de código deve ser inserida na seção header do documento HTML, isto é, entre as tags <head> e </head>. Conforme mostrado abaixo:HTML, isto é, entre as tags <head> e </head>. Conforme mostrado abaixo:

<html> <head> <title>Meu documento</title> <link rel="stylesheet" type="text/css" href="style.css" />

</head> <body> ...

body { background-color: #FF0000; }

default.htm

style.css

Vamos aprender como aplicar cores de primeiro plano e cores de fundo Vamos aprender como aplicar cores de primeiro plano e cores de fundo no seu website. Abordaremos ainda os métodos avançados de controle e no seu website. Abordaremos ainda os métodos avançados de controle e posicionamento de imagens de fundo. Serão explicadas as seguintes posicionamento de imagens de fundo. Serão explicadas as seguintes propriedades CSS:propriedades CSS:

••colorcolor••background-colorbackground-color••background-imagebackground-image••background-repeatbackground-repeat••background-background-attachmentattachment••background-positionbackground-position••backgroundbackground

A propriedade color define a cor do primeiro plano de um elemento.A propriedade color define a cor do primeiro plano de um elemento.

Considere, por exemplo, que desejamos que todos os cabeçalhos de primeiro nível no Considere, por exemplo, que desejamos que todos os cabeçalhos de primeiro nível no documento sejam na cor vermelha. O elemento HTML que marca tais cabeçalhos é o documento sejam na cor vermelha. O elemento HTML que marca tais cabeçalhos é o elemento <h1>. O código a seguir define todos os <h1> na cor vermelha.elemento <h1>. O código a seguir define todos os <h1> na cor vermelha.

h1 { color: #ff0000;

}

A propriedade background-color define a cor do fundo de um elemento.A propriedade background-color define a cor do fundo de um elemento.

O elemento <body> contém todo o conteúdo de um documento HTML. O elemento <body> contém todo o conteúdo de um documento HTML. Assim, para mudar a cor de fundo da página, devemos aplicar a Assim, para mudar a cor de fundo da página, devemos aplicar a propriedade background-color ao elemento <body>. propriedade background-color ao elemento <body>.

body { background-color: #FFCC66;

} h1 { color: #990000;

background-color: #FC9804; }

A propriedade CSS background-image é usada para definir uma imagem de A propriedade CSS background-image é usada para definir uma imagem de fundo.fundo.

body { background-color: #FFCC66;background-image: url(“img.tipo");

} h1 { color: #990000;

background-color: #FC9804; }

A tabela a seguir mostra os quatro diferentes valores para background-repeat.A tabela a seguir mostra os quatro diferentes valores para background-repeat.

Parâmetro Descrição

Background-repeat: repeat-x A imagem se repete na horizontal

background-repeat: repeat-y A imagem se repete na vertical

background-repeat: repeatA imagem se repete na tanto na horizontal como na vertical

background-repeat: no-repeat A imagem não se repete

A propriedade background-attachment define se a imagem será fixa ou A propriedade background-attachment define se a imagem será fixa ou se irá rolar juntamente com o elemento que a contém. se irá rolar juntamente com o elemento que a contém.

Value Description

Background-attachment: scroll A imagem rola com a página

Background-attachment: fixed A imagem é fixa

body { background-color: #FFCC66;

background-image: url("butterfly.gif"); background-repeat: no-repeat;

background-attachment: fixed; }

Por padrão uma imagem de fundo é posicionada no canto superior Por padrão uma imagem de fundo é posicionada no canto superior esquerdo da tela. esquerdo da tela.

A propriedade background-position permite alterar este posicionamento A propriedade background-position permite alterar este posicionamento padrão e colocar a imagem em qualquer lugar na tela. padrão e colocar a imagem em qualquer lugar na tela.

Existem várias maneiras de definir o posicionamento da imagem na tela Existem várias maneiras de definir o posicionamento da imagem na tela definindo valores para background-position. Todas elas se utilizam de um definindo valores para background-position. Todas elas se utilizam de um sistema de coordenadas. Por exemplo, os valores '100px 200px' sistema de coordenadas. Por exemplo, os valores '100px 200px' posiciona a imagem a 100px do topo e a 200px do lado esquerdo da posiciona a imagem a 100px do topo e a 200px do lado esquerdo da janela do navegador. janela do navegador.

As coordenadas podem ser expressas em percentagem da largura da As coordenadas podem ser expressas em percentagem da largura da janeja, em unidades fixas (pixels, centímetros, etc.) ou pode-se usar as janeja, em unidades fixas (pixels, centímetros, etc.) ou pode-se usar as palavras top, bottom, center, left e right. A figura a seguir ilustra o palavras top, bottom, center, left e right. A figura a seguir ilustra o modelo de coordenadas:modelo de coordenadas:

Value Description

background-position: 2cm 2cmA imagem é posicionada a 2 cm da esquerda e 2 cm para baixo na página

background-position: 50% 25%A imagem é centrada na horizontal e a um quarto (25%) para baixo na página

background-position: top rightA imagem é posicionada no canto superior direito da página

background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

Com background você declara várias propriedades de modo abreviado, Com background você declara várias propriedades de modo abreviado, economizando digitação e alguns bytes, além de tornar a folha de economizando digitação e alguns bytes, além de tornar a folha de estilo mais fácil de se ler e entender estilo mais fácil de se ler e entender

Nesta lição estudaremos as fontes e como aplicá-las usando CSS. Nesta lição estudaremos as fontes e como aplicá-las usando CSS. Veremos como criar situações para que determinada fonte seja Veremos como criar situações para que determinada fonte seja visualizada pelo usuário mesmo não estando instalada em seu sistema visualizada pelo usuário mesmo não estando instalada em seu sistema operacional. Descreveremos as seguintes propriedades CSS:operacional. Descreveremos as seguintes propriedades CSS:font-familyfont-stylefont-variantfont-weightfont-sizefont

h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif;}

Estilo da fonte [font-style]Estilo da fonte [font-style]h2 {font-family: "Times New Roman", serif; h2 {font-family: "Times New Roman", serif; font-style: font-style: italic;}italic;}

Fonte variante [font-variant]Fonte variante [font-variant]h1 {font-variant: small-caps;} h2 {font-variant: h1 {font-variant: small-caps;} h2 {font-variant: normal;} normal;}

Peso da fonte [font-weight]Peso da fonte [font-weight]p {font-family: arial, verdana, sans-serif;} p {font-family: arial, verdana, sans-serif;} td {font-family: arial, verdana, sans-serif; font-weight: td {font-family: arial, verdana, sans-serif; font-weight: bold;}bold;}

Tamanho da fonte [font-size]Tamanho da fonte [font-size] h1 {font-size: 30px;} h2 {font-size: 12pt;} h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%;} p {font-size: 1em;} h3 {font-size: 120%;} p {font-size: 1em;}

Compilando [font]Compilando [font]p { p { font: italic bold 30px arial, sans-serif; font: italic bold 30px arial, sans-serif; } }

p {p { text-indent: 30px;  --> } }

th { th { text-align: right;text-align: right;

} } td {td { text-align: center; text-align: center; }} p {p { text-align: justify; text-align: justify; }}

Decoração de textos [text-decorationDecoração de textos [text-decoration]]h1 {h1 {

text-decoration: underline, overline ou line-through; text-decoration: underline, overline ou line-through; } }

A propriedade text-transform controla a capitalização (tornar A propriedade text-transform controla a capitalização (tornar maiúscula) do texto. Você pode escolher capitalize, uppercase ou maiúscula) do texto. Você pode escolher capitalize, uppercase ou lowercase independentemente de como o texto foi escrito no código lowercase independentemente de como o texto foi escrito no código HTML.HTML.

capitalize Capitaliza a primeira letra de cada palavra. Por exemplo: “pro capitalize Capitaliza a primeira letra de cada palavra. Por exemplo: “pro informática" transforma-se para “Pro Informática ".informática" transforma-se para “Pro Informática ".

uppercase Converte todas as letras para maiúscula. Por exemplo: “pro uppercase Converte todas as letras para maiúscula. Por exemplo: “pro informática " transforma-se para “PRO INFORMATÍCA".informática " transforma-se para “PRO INFORMATÍCA".

lowercase Converte todas as letras para minúscula. Por exemplo: " PRO lowercase Converte todas as letras para minúscula. Por exemplo: " PRO INFORMATÍCA " transforma-se para" pro informática ".INFORMATÍCA " transforma-se para" pro informática ".

h1 { h1 { text-transform: uppercase; text-transform: uppercase;

}}

O espaçamento entre os caracteres de um texto é controlado pela O espaçamento entre os caracteres de um texto é controlado pela propriedade letter-spacing. O valor desta propriedade define o espaço propriedade letter-spacing. O valor desta propriedade define o espaço entre os caracteres. Por exemplo, se você deseja um espaço de 3px entre entre os caracteres. Por exemplo, se você deseja um espaço de 3px entre as letras do texto de um parágrafo <p> e de 6px entre as letras do texto as letras do texto de um parágrafo <p> e de 6px entre as letras do texto de um cabeçalho <h1> o código a seguir deverá ser usado.de um cabeçalho <h1> o código a seguir deverá ser usado.

h1 {h1 { letter-spacing: 6px; letter-spacing: 6px; } } p { p { letter-spacing: 3px;letter-spacing: 3px;} }

Você pode aplicar aos links tudo que aprendeu nas lições Você pode aplicar aos links tudo que aprendeu nas lições anteriores (mudar cores, fontes, sublinhados, etc). A novidade aqui é que anteriores (mudar cores, fontes, sublinhados, etc). A novidade aqui é que você pode definir as propriedades de maneira diferenciada de acordo com você pode definir as propriedades de maneira diferenciada de acordo com o estado do link ou seja visitado, não visitado, ativo ou com o ponteiro do o estado do link ou seja visitado, não visitado, ativo ou com o ponteiro do mouse sobre o link. Isto possibilita adicionar interessantes efeitos ao seu mouse sobre o link. Isto possibilita adicionar interessantes efeitos ao seu website. Para estilizar estes efeitos você usará as chamadas pseudo-website. Para estilizar estes efeitos você usará as chamadas pseudo-classes.classes.

O que é pseudo-classe?O que é pseudo-classe?Uma pseudo-classe permite estilizar levando em conta condições Uma pseudo-classe permite estilizar levando em conta condições diferentes ou eventos ao definir uma propriedade de estilo para uma tag diferentes ou eventos ao definir uma propriedade de estilo para uma tag HTML.HTML.Vamos ver um exemplo. Como você já sabe, links são marcados no HTML Vamos ver um exemplo. Como você já sabe, links são marcados no HTML com tags <a>. Podemos então usar a como um seletor CSS:com tags <a>. Podemos então usar a como um seletor CSS:

a {a {color: blue;color: blue;

} }

Um link pode ter diferentes Um link pode ter diferentes estados. Por exemplo, pode ter estados. Por exemplo, pode ter sido visitado ou não visitado. sido visitado ou não visitado. Você usará pseudo-classes Você usará pseudo-classes para estilizar links visitados e para estilizar links visitados e não visitados. não visitados.

a:link {a:link {color: blue;color: blue;

}}

a:visited {a:visited {color: red; color: red;

} }

Use as pseudo-classes a:link e a:visited para estilizar Use as pseudo-classes a:link e a:visited para estilizar links não visitados e visitados respectivamente. Links ativos links não visitados e visitados respectivamente. Links ativos são estilizados com a pseudo-classe a:active e a:hover, esta são estilizados com a pseudo-classe a:active e a:hover, esta última é a pseudo-classe para links com o ponteiro do mouse última é a pseudo-classe para links com o ponteiro do mouse sobre ele. sobre ele.

A seguir explicaremos com mais detalhes e A seguir explicaremos com mais detalhes e exemplificação, as quatro pseudo-classes.exemplificação, as quatro pseudo-classes.

a:link {a:link {color: green;color: green;

}}

A pseudo-classe :link é usada para links não A pseudo-classe :link é usada para links não visitados.visitados.

No exemplo a seguir links não vistados serão na No exemplo a seguir links não vistados serão na cor verde.cor verde.

a:visited {a:visited {color: yellow;color: yellow;

}}

A pseudo-clases :visited é usada para links A pseudo-clases :visited é usada para links visitados. No exemplo a seguir links visitados visitados. No exemplo a seguir links visitados serão na cor amarela:serão na cor amarela:

a:active {a:active {background-color: red;background-color: red;

}}

A pseudo-classe :active é usada para links ativos.A pseudo-classe :active é usada para links ativos.

No exemplo a seguir links ativos terão seu fundo No exemplo a seguir links ativos terão seu fundo na cor vermelha:na cor vermelha:

Você pode usar Você pode usar text-decoration:none; para text-decoration:none; para remover o sublinhado dos links.remover o sublinhado dos links.

Em alguns casos você deseja aplicar estilos a um elemento ou Em alguns casos você deseja aplicar estilos a um elemento ou grupo de elementos em particular. Nesta lição veremos como grupo de elementos em particular. Nesta lição veremos como usar class e id para estilizar elementos.usar class e id para estilizar elementos.

Como definir uma cor para um determinado cabeçalho, Como definir uma cor para um determinado cabeçalho, diferente da cor usada para os demais cabeçalhos do website? diferente da cor usada para os demais cabeçalhos do website? Como agrupar links em diferentes categorias e estilizar cada Como agrupar links em diferentes categorias e estilizar cada categoria diferentemente? Estas são algumas das questões categoria diferentemente? Estas são algumas das questões que iremos responder nesta lição.que iremos responder nesta lição.

Agrupando elementos com uso de classeAgrupando elementos com uso de classe

Vamos supor que temos duas listas de links para diferentes Vamos supor que temos duas listas de links para diferentes tipos de uvas usadas na produção de vinho branco e de vinho tipos de uvas usadas na produção de vinho branco e de vinho tinto. O código HTML conforme mostrado abaixo:tinto. O código HTML conforme mostrado abaixo:

Veja uma lista de links sem formataçãoVeja uma lista de links sem formatação

<p>Uvas para vinho branco:</p><p>Uvas para vinho branco:</p><ul><ul><li><a href="ri.htm">Riesling</a></li><li><a href="ri.htm">Riesling</a></li><li><a href="ch.htm">Chardonnay</a></li><li><a href="ch.htm">Chardonnay</a></li><li><a href="pb.htm">Pinot Blanc</a></li><li><a href="pb.htm">Pinot Blanc</a></li></ul></ul>

<p>Uvas para vinho tinto:</p><p>Uvas para vinho tinto:</p><ul><ul><li><a href="cs.htm">Cabernet Sauvignon</a></li><li><a href="cs.htm">Cabernet Sauvignon</a></li><li><a href="me.htm">Merlot</a></li><li><a href="me.htm">Merlot</a></li><li><a href="pn.htm">Pinot Noir</a></li><li><a href="pn.htm">Pinot Noir</a></li></ul></ul>

Vamos criar a seguintes classes no style.css ou outro arquivo.Vamos criar a seguintes classes no style.css ou outro arquivo.

a {a {color: blue;color: blue;

}}

a.whitewine {a.whitewine {color: #FFBB00;color: #FFBB00;

}}

a.redwine {a.redwine {color: #800000;color: #800000;

}}

Com esta configuração nossa lista terá outro visual.Com esta configuração nossa lista terá outro visual.

<p>Uvas para vinho branco:</p><p>Uvas para vinho branco:</p><ul><ul><li><a href="ri.htm" class="whitewine">Riesling</a></li><li><a href="ri.htm" class="whitewine">Riesling</a></li><li><a href="ch.htm" <li><a href="ch.htm" class="whitewine">Chardonnay</a></li>class="whitewine">Chardonnay</a></li><li><a href="pb.htm" class="whitewine">Pinot <li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>Blanc</a></li></ul></ul>

<p>Uvas para vinho tinto:</p><p>Uvas para vinho tinto:</p><ul><ul><li><a href="cs.htm" class="redwine">Cabernet <li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>Sauvignon</a></li><li><a href="me.htm" class="redwine">Merlot</a></li><li><a href="me.htm" class="redwine">Merlot</a></li><li><a href="pn.htm" class="redwine">Pinot Noir</a></li><li><a href="pn.htm" class="redwine">Pinot Noir</a></li></ul></ul>

Além de agrupar elementos podemos Além de agrupar elementos podemos atribuir identificação a um único atribuir identificação a um único elemento. Isto é feito usando o elemento. Isto é feito usando o atributo id.atributo id.

O que há de especial no atributo id é O que há de especial no atributo id é que não poderá existir dois ou mais que não poderá existir dois ou mais elementos com a mesma id, ou seja elementos com a mesma id, ou seja em um documento apenas um e em um documento apenas um e somente um elemento poderá ter somente um elemento poderá ter uma determinada id. Cada id é uma determinada id. Cada id é única. Para casos em que haja única. Para casos em que haja necessidade de mais de um necessidade de mais de um elemento com a mesma identificação elemento com a mesma identificação usamos o atributo class. A seguir um usamos o atributo class. A seguir um exemplo de possível uso de id:exemplo de possível uso de id:

No arquivo de estilos vamos criar o seguite id.

#c1-2 {color: red;

}

<h1>Capítulo 1</h1><h1>Capítulo 1</h1>......<h2>Capítulo 1.1</h2><h2>Capítulo 1.1</h2>......<h2>Capítulo 1.2</h2><h2>Capítulo 1.2</h2>......<h1>Capítulo 2</h1><h1>Capítulo 2</h1>......<h2>Capítulo 2.1</h2><h2>Capítulo 2.1</h2>......<h3>Capítulo 2.1.2</h3><h3>Capítulo 2.1.2</h3>......

<h1 id="c1">Capítulo 1</h1><h1 id="c1">Capítulo 1</h1>......<h2 id="c1-1">Capítulo 1.1</h2><h2 id="c1-1">Capítulo 1.1</h2>......<h2 id="c1-2">Capítulo 1.2</h2><h2 id="c1-2">Capítulo 1.2</h2>......<h1 id="c2">Capítulo 2</h1><h1 id="c2">Capítulo 2</h1>......<h2 id="c2-1">Capítulo 2.1</h2><h2 id="c2-1">Capítulo 2.1</h2>......<h3 id="c2-1-2">Capítulo <h3 id="c2-1-2">Capítulo 2.1.2</h3>2.1.2</h3>......

O elemento <span> é um elemento neutro e que não adiciona qualquer O elemento <span> é um elemento neutro e que não adiciona qualquer tipo de semântica ao documento. Contudo, <span> pode ser usado pelas tipo de semântica ao documento. Contudo, <span> pode ser usado pelas CSS para adicionar efeitos visuais a partes específicas do texto no seu CSS para adicionar efeitos visuais a partes específicas do texto no seu documento.documento.

Um exemplo deste uso é mostrado na citação abaixo de autoria de Um exemplo deste uso é mostrado na citação abaixo de autoria de Benjamin Franklin:Benjamin Franklin:

<p>Dormir cedo e acordar cedo faz o homem saudável, rico e sábio.</p><p>Dormir cedo e acordar cedo faz o homem saudável, rico e sábio.</p>

Folha de estilos:Folha de estilos:span.benefit {span.benefit {

color:red;color:red;}} <p>Dormir cedo e acordar cedo faz o homem<span <p>Dormir cedo e acordar cedo faz o homem<span

class="benefit">saudável</span>,<span class="benefit">saudável</span>,<span class="benefit">rico</span>e <span class="benefit">rico</span>e <span class="benefit">sábio</span>.</p>class="benefit">sábio</span>.</p>

Enquanto <span> é usado dentro de um elemento nível de bloco como Enquanto <span> é usado dentro de um elemento nível de bloco como vimos no exemplo anterior, <div> é usado para agrupar um ou mais vimos no exemplo anterior, <div> é usado para agrupar um ou mais elementos nível de bloco.elementos nível de bloco.

Diferenças à parte, o agrupamento com <div> funciona mais ou menos Diferenças à parte, o agrupamento com <div> funciona mais ou menos da mesma maneira. Vamos ver um exemplo tomando duas listas de da mesma maneira. Vamos ver um exemplo tomando duas listas de presidentes dos Estados Unidos agrupados segundo suas filiações presidentes dos Estados Unidos agrupados segundo suas filiações políticas:políticas:

#democrats {#democrats {background:blue;background:blue;

}} entrada no CSSentrada no CSS#republicans {#republicans {

background:red;background:red;}}

<div id="democrats"><div id="democrats"><ul><ul><li>Franklin D. Roosevelt</li><li>Franklin D. Roosevelt</li><li>Harry S. Truman</li><li>Harry S. Truman</li><li>John F. Kennedy</li><li>John F. Kennedy</li><li>Lyndon B. Johnson</li><li>Lyndon B. Johnson</li><li>Jimmy Carter</li><li>Jimmy Carter</li><li>Bill Clinton</li><li>Bill Clinton</li></ul></ul></div></div>

<div id="republicans"><div id="republicans"><ul><ul><li>Dwight D. Eisenhower</li><li>Dwight D. Eisenhower</li><li>Richard Nixon</li><li>Richard Nixon</li><li>Gerald Ford</li><li>Gerald Ford</li><li>Ronald Reagan</li><li>Ronald Reagan</li><li>George Bush</li><li>George Bush</li><li>George W. Bush</li><li>George W. Bush</li></ul></ul></div></div>

O box model (modelo das caixas) em CSS, descreve os boxes (as caixas) geradas O box model (modelo das caixas) em CSS, descreve os boxes (as caixas) geradas pelos elementos HTML. O box model, detalha ainda, as opções de ajuste de pelos elementos HTML. O box model, detalha ainda, as opções de ajuste de margens, bordas, padding e conteúdo para cada elemento. Abaixo apresentamos margens, bordas, padding e conteúdo para cada elemento. Abaixo apresentamos um diagrama representando a estrutura de construção do box model:um diagrama representando a estrutura de construção do box model:

A ilustração anterior é teórica. Vamos explicá-la na prática tomando como base um A ilustração anterior é teórica. Vamos explicá-la na prática tomando como base um cabeçalho e um texto. O HTML para nosso exemplo (o texto foi retirado da cabeçalho e um texto. O HTML para nosso exemplo (o texto foi retirado da Declaração Universal dos Direitos Humanos e está no original em inglês) é o Declaração Universal dos Direitos Humanos e está no original em inglês) é o mostrado abaixo:mostrado abaixo:

<h1>Article 1:</h1><h1>Article 1:</h1>

<p><p>All human beings are born free and equal in All human beings are born free and equal in dignity and rights. They are endowed with reason dignity and rights. They are endowed with reason and conscience and should act towards one and conscience and should act towards one another in a spirit of brotherhoodanother in a spirit of brotherhood</p></p>

Embora possa parecer um pouco complicado, a ilustração mostra como cada um Embora possa parecer um pouco complicado, a ilustração mostra como cada um dos elementos é contido em um box (uma caixa). Boxes que podem ser ajustados e dos elementos é contido em um box (uma caixa). Boxes que podem ser ajustados e controlados via CSS. controlados via CSS.

Na lição anterior vimos o box model. Nesta lição veremos como controlar a Na lição anterior vimos o box model. Nesta lição veremos como controlar a apresentação de um elemento definindo as propriedades margin.apresentação de um elemento definindo as propriedades margin.

Margens do documentoMargens do documentobody {body {

margin-top: 100px;margin-top: 100px;margin-right: 40px;margin-right: 40px;margin-bottom: 10px;margin-bottom: 10px;margin-left: 70px;margin-left: 70px;

}}

Forma compilada e magens de Forma compilada e magens de paragrafosparagrafos

body {body {margin: 100px 40px 10px margin: 100px 40px 10px

70px;70px;}}

p {p {margin: 5px 50px 5px 50px;margin: 5px 50px 5px 50px;

}}

Padding pode também ser entendido como "enchimento". Isto faz sentido, porque Padding pode também ser entendido como "enchimento". Isto faz sentido, porque padding não é computado na distância entre elementos, padding define padding não é computado na distância entre elementos, padding define simplesmente a distância entre a borda e o conteúdo do elemento.simplesmente a distância entre a borda e o conteúdo do elemento.

Definindo padding para os cabeçalhos, alteramos a quantidade de Definindo padding para os cabeçalhos, alteramos a quantidade de enchimento existente ao redor de cada um deles:enchimento existente ao redor de cada um deles:

h1 {h1 {background: yellow;background: yellow;padding: 20px 20px 20px 80px;padding: 20px 20px 20px 80px;

}}

h2 {h2 {background: orange;background: orange;padding-left:120px;padding-left:120px;

}}

Bordas podem ser usadas para muitas coisas, por exemplo, como Bordas podem ser usadas para muitas coisas, por exemplo, como elemento decorativo ou para servir de linha de separação entre duas elemento decorativo ou para servir de linha de separação entre duas coisas. CSS proporciona infinitas possibilidades de uso de bordas na coisas. CSS proporciona infinitas possibilidades de uso de bordas na página.página.

••border-widthborder-width••border-colorborder-color••border-styleborder-style••Exemplos de definição de bordas Exemplos de definição de bordas ••borderborder

A espessura das bordas [border-width] => border-width:2px;A espessura das bordas [border-width] => border-width:2px;

As cores das bordas [border-color] => border-color:#000000;As cores das bordas [border-color] => border-color:#000000;

Tipos de bordas[border-style] => border-style: Tipos de bordas[border-style] => border-style:

(dotted,dashed,solid,double,gloove,ridge,inset,outset) (dotted,dashed,solid,double,gloove,ridge,inset,outset)

Forma compiladaForma compilada

p {p {border: 1px solid blue;border: 1px solid blue;

}}

Até agora ainda não fizemos qualquer consideração sobre as dimensões dos Até agora ainda não fizemos qualquer consideração sobre as dimensões dos elementos com que trabalhamos. Nesta lição veremos como é fácil atribuir uma elementos com que trabalhamos. Nesta lição veremos como é fácil atribuir uma altura e uma largura para um elemento.altura e uma largura para um elemento.

O exemplo a seguir constrói um box dentro do qual podemos digitar um texto:O exemplo a seguir constrói um box dentro do qual podemos digitar um texto:

CssCss#box {#box {

height: 500px;height: 500px;width: 200px;width: 200px;border: 1px solid black;border: 1px solid black;background: orange;background: orange;

}}

HTMLHTML<div id ="box“> texto</div><div id ="box“> texto</div>

Um elemento pode ser 'flutuado' à esquerda ou à direita com uso da propriedade Um elemento pode ser 'flutuado' à esquerda ou à direita com uso da propriedade float. Isto significa que o box e seu conteúdo são deslocados para a direita ou para float. Isto significa que o box e seu conteúdo são deslocados para a direita ou para a esquerda do documento (ou do bloco container) a esquerda do documento (ou do bloco container)

Floats podem ser usados para construir colunas em um documento. Para criar as Floats podem ser usados para construir colunas em um documento. Para criar as colunas estruturamos as colunas no código HTML usando <div> como mostrado a colunas estruturamos as colunas no código HTML usando <div> como mostrado a seguir:seguir:

CSSCSS

#column1 {#column1 {float:left;float:left;width: 33%;width: 33%;

}}#column2 {#column2 {

float:left;float:left;width: 33%;width: 33%;

}}#column3 {#column3 {

float:left;float:left;width: 33%;width: 33%;

}}

HTMLHTML

<div id="column1"><div id="column1"><p>Texto coluna1</p><p>Texto coluna1</p>

</div></div>

<div id="column2"><div id="column2"><p>Texto coluna2</p><p>Texto coluna2</p>

</div></div>

<div id="column3"><div id="column3"><p>Texto coluna 3</p><p>Texto coluna 3</p>

</div></div>

Podemos utilizar o CSS para construção de menus de forma rápida e pratica, Podemos utilizar o CSS para construção de menus de forma rápida e pratica, vamos partir de uma lista cotoca, onde a classe menu_vertical será criada em um vamos partir de uma lista cotoca, onde a classe menu_vertical será criada em um css. css.

HTML>HTML><head><head> <title>Meu documento</title><title>Meu documento</title> <link rel="stylesheet" type="text/css" <link rel="stylesheet" type="text/css" href="style.css"/>href="style.css"/></Head></Head>

<ul class="menu_vertical"><ul class="menu_vertical"> <li><a href="#">Home</a></li><li><a href="#">Home</a></li> <li><a href="#">História</a></li><li><a href="#">História</a></li> <li><a href="#">Filosofia</a></li><li><a href="#">Filosofia</a></li> <li><a href="#">Produtos</a></li><li><a href="#">Produtos</a></li> <li><a href="#">Contato</a></li><li><a href="#">Contato</a></li></ul></ul></HTML></HTML>

ul.menu_vertical {ul.menu_vertical { margin: 0;margin: 0; padding: 0;padding: 0; list-style: none;list-style: none; width:100;width:100; height:auto;height:auto;}}

ul.menu_vertical li a{ul.menu_vertical li a{ display: block;display: block; padding: 10px;padding: 10px; color: #333;color: #333; background: #eee;background: #eee; border-bottom: 1px solid border-bottom: 1px solid #fff;#fff; text-decoration: none;text-decoration: none; width:100;width:100; height:auto;height:auto;}}

ul.menu_vertical li a:hover ul.menu_vertical li a:hover {{ background: #ccc;background: #ccc; width:100;width:100; height:auto;height:auto;}}


<ul class="menu_vertical"><ul class="menu_vertical"> <li><a href="#">Home</a></li><li><a href="#">Home</a></li> <li><a href="#">História</a></li><li><a href="#">História</a></li> <li><a href="#">Filosofia</a></li><li><a href="#">Filosofia</a></li> <li><a href="#">Produtos</a></li><li><a href="#">Produtos</a></li> <li><a href="#">Contato</a></li><li><a href="#">Contato</a></li></ul></ul></HTML></HTML>

Podemos utilizar o CSS para construção de menus de forma rápida e pratica, Podemos utilizar o CSS para construção de menus de forma rápida e pratica, vamos partir de uma lista cotoca, onde a classe menu_vertical será criada em um vamos partir de uma lista cotoca, onde a classe menu_vertical será criada em um css. css.


<ul class="menu_horizontal"><ul class="menu_horizontal"> <li><a href="#">Home</a></li><li><a href="#">Home</a></li> <li><a href="#">História</a></li><li><a href="#">História</a></li> <li><a href="#">Filosofia</a></li><li><a href="#">Filosofia</a></li> <li><a href="#">Produtos</a></li><li><a href="#">Produtos</a></li> <li><a href="#">Contato</a></li><li><a href="#">Contato</a></li></ul></ul>

ul.menu_horizontal {ul.menu_horizontal { margin: 0;margin: 0; padding: 0;padding: 0; list-style: none;list-style: none;}}

ul.menu_horizontal li {ul.menu_horizontal li {display: inline;display: inline;}}

ul.menu_horizontal li a{ul.menu_horizontal li a{ float: left;float: left; display: block;display: block; padding: 10px;padding: 10px; color: #333;color: #333; background: #eee;background: #eee; text-decoration: none;text-decoration: none;}}

ul.menu_horizontal li a:hover {ul.menu_horizontal li a:hover { background: #ccc;background: #ccc;}}


<<ul class="menu_horizontal">ul class="menu_horizontal"> <li><a href="#">Home</a></li><li><a href="#">Home</a></li> <li><a href="#">História</a></li><li><a href="#">História</a></li> <li><a href="#">Filosofia</a></li><li><a href="#">Filosofia</a></li> <li><a href="#">Produtos</a></li><li><a href="#">Produtos</a></li> <li><a href="#">Contato</a></li><li><a href="#">Contato</a></li></ul></ul></HTML></HTML>

Posição Absoluta e Relativa:Posição Absoluta e Relativa:

#topleft {#topleft {

position:absolute;position:absolute;

top:0;top:0;

left:0;left:0; }}

Curso de CSS. O curso proposto é resultado da experiência da Pró- Informática em ministrar...

Documents

Transcript of Curso de CSS. O curso proposto é resultado da experiência da Pró- Informática em ministrar...