Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
css módulo 4
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
Inovando com CSS – Módulo 4
1
Inovando com CSS – Módulo 4
Identificando e Agrupando Elementos
As classes são utilizadas para aplicar estilos a um elemento ou grupo de elementos em particular.
Por exemplo, com o uso do atributo class é possível definir a cor para um determinado cabeçalho,
diferente da usada nos demais cabeçalhos da página. É possível, também, agrupar links em
diferentes categorias e estilizá-las de forma distinta.
Class
Vamos a um exemplo prático! Existem duas listas de links para tipos de jogos
diferentes. O código das listas em HTML é:
Experimente este Código!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<p>Jogos Virtuais</p>
<ul>
<li><a href="pacman.html">Pacman</a></li>
<li><a href="tetris.html">Tetris</a></li>
<li><a href="snake.html">Snake</a></li>
</ul>
<p>Jogos de estratégia</p>
<ul>
<li><a href="xadrez.html">Xadrez</a></li>
<li><a href="domino.html">Dominó</a></li>
<li><a href="damas.html">Damas</a></li>
</ul>
A ideia é que os jogos virtuais sejam da cor vermelha, os jogos de estratégia na
cor verde e os demais links da página devem permanecer em azul.
Para isso, os links foram divididos em duas categorias e isto é feito atribuindo uma
classe para cada link, utilizando o atributo class.
Experimente este Código!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<p>Jogos Virtuais</p>
<ul>
<li><a href="pacman.html" class="virtuais">Pacman</a></li>
<li><a href="tetris.html" class="virtuais">Tetris</a></li>
<li><a href="snake.html" class="virtuais">Snake</a></li>
</ul>
<p>Jogos de estratégia</p>
<ul>
<li><a href="xadrez.html" class="estrategia">Xadrez</a></li>
<li><a href="domino.html" class="estrategia">Dominó</a></li>
<li><a href="damas.html" class="estrategia">Damas</a></li>
2
Inovando com CSS – Módulo 4
</ul>
Propriedades dos Links
Agora, é preciso definir as propriedades específicas para os links de cada categoria.
Veja o exemplo abaixo:
Experimente este Código!
/* CSS Document */
a {
color: blue;
}
a.virtuais {
color: #FF0000;
}
a.estrategia {
color: #11CC00;
No código CSS, as classes são identificadas pelo "." (ponto) que antecede seu
nome .nomedaclasse.
3
Inovando com CSS – Módulo 4
Id
O atributo id é utilizado para atribuir identificação a um elemento. O interessante no seu uso
é que não poderá existir dois ou mais elementos com o mesmo id, ou seja, cada id é único.
Dica: Para os casos que requerem mais de um elemento com a mesma identificação, utiliza-se o
atributo class e não id.
O exemplo ao lado simula os cabeçalhos de um documento estruturado em
capítulos e parágrafos. É comum atribuir um id para cada capítulo.
Experimente este Código!
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.0//EN">
<h1 id="c1">Capítulo 1</h1>
<p>Texto do capítulo 1</p>
...
<h2 id="c11">Capítulo 1.1</h2>
<p>Texto do capítulo 1.1</p>
...
<h2 id="c12">Capítulo 1.2</h2>
<p>Texto do capítulo 1.2</p>
...
<h1 id="c2">Capítulo 2</h1>
<p>Texto do capítulo 2</p>
...
<h2 id="c21">Capítulo 2.1</h2>
<p>Texto do capítulo 2.1</p>
...
<h3 id="c212">Capítulo 2.1.2</h3>
<p>Texto do capítulo 2.1.2</p>
...
Exemplo da Utilização de Id
Vamos supor que o cabeçalho do capítulo 1.2 deva ser na cor azul. Isto pode ser
feito inserindo o código CSS na folha de estilo. Veja o resultado:
Experimente este Código!
/* CSS Document */
#c12 {
color: blue;
}
4
Inovando com CSS – Módulo 4
No código CSS o id é identificado pelo símbolo "#" (sustenido) que antecede seu
nome #nomedoid.
Span
Span e div são elementos muito utilizados para estruturar e agrupar,
respectivamente, um documento. Eles são bastante usados em conjunto com os atributos
class e id.
O elemento <span> é neutro e não adiciona qualquer tipo de semântica ao
documento. No entanto, pode ser usado no CSS para inserir efeitos visuais em partes
específicas do texto. Vamos ver um exemplo?
Vamos supor que fosse necessário dar destaque aos alimentos citados na frase. Foi
preciso marcar as palavras farinha e bolo com <span>. Assim, cada span recebe uma
class, que no HTML e CSS ficam da seguinte maneira:
Experimente este Código!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<p>A mãe e a menina foram ao mercado comprar <span
class="alimento">farinha</span> para fazer o <span class="alimento">bolo</span>.
/* E na folha de estilos ficará da seguinte maneira: */
5
Inovando com CSS – Módulo 4
/* CSS Document */
span.alimento {color:red;}
Div
Div é utilizado para agrupar elementos em um nível de bloco. Veja o exemplo:
Experimente este Código!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<div id="insetos">
<ul>
<li>abelha</li>
<li>formiga</li>
<li>borboleta</li>
<li>mosquito</li>
</ul>
</div>
<div id="repteis">
<ul>
<li>cobra</li>
<li>jacaré</li>
<li>lagarto</li>
<li>tartaruga</li>
</ul>
Na folha de estilos, a estilização é agrupada da mesma maneira que foi realizada no
código HTML. Veja:
Experimente este Código!
/* CSS Document */
#insetos { background:#FFEAEA; }
#repteis { background:#FFF7DD; }
● Abelha
● formiga
● borboleta
● mosquito
● cobra
● jacaré
● Lagarto
● Tartaruga
6
Inovando com CSS – Módulo 4
Box Model
O box model (modelo das caixas) descreve os boxes (caixas) gerados pelos
elementos HTML. É utilizado quando se fala sobre layout e design, pois são essas caixas
que dão a estrutura e o posicionamento dos elementos na página web. Ele detalha as
opções de ajuste de margins, paddings, bordas e conteúdo de cada elemento. Veja a
imagem abaixo:
Como Funciona o Box Model
Para uma explicação prática sobre como funciona o box model será utilizado um
exemplo de texto com cabeçalho. A ideia é posicioná-los dentro do box model, para que
as configurações de espaçamento fiquem visíveis:
Experimente este Código!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<h1>Lorem Ipsum</h1>
<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>
Atributos de Texto
Definindo alguns atributos para o texto, ele ficará da seguinte maneira:
Dica:A princípio, pode parecer muito complexo inserir um box model, mas você verá que
ao aprender sobre margins, paddings e outros elementos em CSS, tudo ficará mais claro e
fácil de ser utilizado.
7
Inovando com CSS – Módulo 4
O exemplo contém dois elementos: <h1> e <p>. As configurações do box model serão as
seguintes:
Definindo Margin
Como exibido anteriormente, o box model depende de outros elementos, como margin e
padding. Vamos visualizar como cada um é aplicado.
Um elemento inserido na página possui quatro lados: right, left, top e bottom (direito,
esquerdo, superior e inferior).
A margin é definida como a distância entre os lados de elementos vizinhos (ou as bordas da página).
Para analisar a aplicação da margin, vamos utilizar o exemplo de um <body>, como
ilustra a imagem a seguir:
8
Inovando com CSS – Módulo 4
Código do Margin
O CSS deste body é exibido abaixo:
Experimente este Código!
/* CSS Document */
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
/* Que também pode ser escrito de forma resumida: */
body {
/* margin: top right bottom left */
margin: 100px 40px 10px 70px;
}
9
Inovando com CSS – Módulo 4
Definindo PaddingO padding pode ser definido como o "preenchimento" do elemento. Ele não é a distância
entre os elementos (margin), mas sim, o que define a distância interna, ou seja, o espaço entre a
borda e o conteúdo. Para entender o uso de padding, veja o exemplo a seguir. Todos os textos têm
uma cor de fundo definida!
Experimente este Código!
/* CSS Document */
h1 {
background: orange;
}
p {
background: yellow;
}
Adicionando Padding aos Cabeçalhos
Inserindo o padding no cabeçalho e parágrafo, o espaço existente ao redor do
conteúdo no elemento vai aumentar. Observe:
Experimente este Código!
/* CSS Document */
10
Inovando com CSS – Módulo 4
h1 {
background: orange;
padding: 10px 10px 10px 30px;
}
p {
background: yellow;
paddingleft: 50px;
}
Altura e Largura
A altura e a largura são atributos simples que devem ser definidos na maioria dos elementos, pois suas dimensões
são importantes para a estrutura da página.
Para definir a altura é utilizada a propriedade Height e, para a largura, Width. O exemplo a seguir apresenta um
box e a possibilidade de inserir um texto nele.
Experimente este Código!
/* CSS Document */
div.box {
width: 200px;
height: 500px;
border: 1px solid black;
background: orange;
}
11
Inovando com CSS – Módulo 4
Flutuando Elementos
A propriedade Float permite que um elemento flutue na página à esquerda ou à
direita. Se aplicarmos essa propriedade em um box, ele será deslocado para a direita ou
para a esquerda do documento e o box seguinte ocupará seu espaço.
Exemplo: um texto precisa ser posicionado em volta de uma figura. Para isso,
basta flutuarmos a imagem. No HTML, construiremos uma div para a imagem:
Experimente este Código!
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.0//EN">
<div id="imagem">
<img src="imagem.jpg" alt="Imagem">
</div>
<p>Este texto se refere à imagem inserida.</p>
12
Inovando com CSS – Módulo 4
Exemplo de Float
Já no CSS, para conseguir o efeito visualizado ao lado, basta definir uma
largura para a div que contém a imagem e declarar o seguinte código:
Experimente este Código!
/* CSS Document */
#imagem {
float: left;
width: 100px;
}
A propriedade Float só poderá ser declarada de três formas: right (direita), left (esquerda)
ou none (nenhuma).
Exemplo de visualização:
13
Inovando com CSS – Módulo 4
A Propriedade Clear
A propriedade Clear é um complemento da propriedade Float. É utilizada para
controlar o comportamento dos elementos que seguem os elementos com Float na página.
O elemento subsequente a um Float ocupa o espaço livre ao lado do elemento
flutuante. Com isso, a propriedade Clear assume os valores left, right, both ou
none. Então, se Clear for definido como both para um box, a margem superior deste box
será posicionada sempre abaixo da margem inferior dos boxes flutuantes que estejam
antes dele no código.
Experimente este Código!
/* CSS Document */
#imagem {
float: left;
width: 100px;
}
p {
clear: both;
}
Posicionando Elementos
O posicionamento em CSS permite que um elemento seja colocado em uma posição
exata na página. Por este motivo, ele é muito utilizado na criação de layouts avançados. É
possível inserir um elemento em qualquer lugar utilizando um sistema de coordenadas.
Este sistema pode ter como referência a janela do navegador, como na imagem abaixo:
14
Inovando com CSS – Módulo 4
Exemplo Cabeçalho
Vamos supor que você precise posicionar um cabeçalho a 100px do topo da página
e a 150px à esquerda. Podemos usar o seguinte código CSS:
Experimente este Código!
/* CSS Document */
h1 {
top: 100px;
left: 150px;
}
15
Inovando com CSS – Módulo 4
Posicionamento Absoluto
Ao declarar que o posicionamento de um elemento será absoluto significa que não
haverá nenhum espaço vazio após ele ser posicionado na página. O código para essa
declaração é "position: absolute;"
Para exemplificar, veja o código abaixo, que cria quatro boxes nos quatro cantos da
página:
Experimente este Código!
#box3 {
position:absolute;
bottom: 30px;
right: 30px;
background: yellow;
width: 50px;
height: 50px;
}
#box4 {
position:absolute;
bottom: 30px;
left: 30px;
background: green;
width: 50px;
height: 50px;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
Posicionamento Relativo
A diferença entre o posicionamento absoluto e o relativo é a maneira como ele é
calculado. A posição relativa é calculada com base na posição original do elemento,
pois existe uma movimentação relativa para a esquerda, para a direita, para cima ou para
baixo. Assim, o elemento ocupa um espaço após ser posicionado. O código para a inserção
do posicionamento relativo é "position: relative;"
Tente posicionar três imagens, relativamente, nas suas posições originais na página.
Note como as imagens deixam um espaço vazio nas posições originais:
Experimente este Código!
/* CSS Document */
#flor1 {
position:relative;
left: 350px;
16
Inovando com CSS – Módulo 4
bottom: 150px;
}
#flor2 {
position:relative;
left: 150px;
bottom: 500px;
}
#flor3 {
position:relative;
left: 50px;
bottom: 700px;
Parabéns!!!
Você chegou ao final do Módulo 04 - Agrupando e Alinhando Elementos! Agora
você está apto(a) a continuar este curso.
Siga para o Módulo 05 - Conclusão e Novidades e tenha um excelente
aprendizado.
17Materiais relacionados
16 pág.
28 pág.
Perguntas relacionadas
Compartilhar