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 3
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
CSS – módulo 3 – Principais propriedades do CSS
Cores
As cores na web são representadas por um sistema de cores aditivas, chamado
RGB, sigla das cores Red, Green e Blue (em português Vermelho, Verde e Azul).As
cores que vemos no monitor são combinações dessas três cores.
RGB é um sistema hexadecimal (base 16): vai do 0 ao 9 e, em seguida, do A ao
F (o "A" seria o 10, o "B" o 11 e assim sucessivamente). Logo, os valores de cada um dos
seis caracteres pode variar do 0 ao F, onde 0 é o menor valor (mais escuro) e F é o maior
valor (mais claro).
Dos seis caracteres, os dois primeiros são referentes à cor vermelha; os dois
seguintes à cor verde e os dois últimos à cor azul.
1
esta propriedade é utilizada
para atribuir apenas uma cor de fundo ao
elemento. Por exemplo, para alterar a cor de fundo
esta propriedade é utilizada
para atribuir apenas uma cor de fundo ao
elemento. Por exemplo, para alterar a cor de fundo
esta propriedade é utilizada
para atribuir apenas uma cor de fundo ao
elemento. Por exemplo, para alterar a cor de fundo
esta propriedade é utilizada
para atribuir apenas uma cor de fundo ao
elemento. Por exemplo, para alterar a cor de fundo
do body, utilize o código abaixo.
Experimente este Código!
Agora é a sua vez!
Abra seu arquivo estilos.css e insira o
código para alterar o background. Teste
todos os atributos: cor, imagens
repetidas ou únicas. Teste, também, o
uso das cores.
Explore todas as funcionalidades!
Quanto mais vezes você tentar, mais
vai aprender! Existem outras propriedades de texto,
menos utilizadas, que você pode explorar no
Existem outras propriedades de texto,
menos utilizadas, que você pode explorar no
site www.w3schools.com/css/css_text.asp
Em relação ao tamanho da fonte de <body>, a fonte <h1> é 150% maior e a fonte <h2> é 120%.
CSS – módulo 3 – Principais propriedades do CSS
Combinação das Cores
O valor de determinada cor é a combinação das três cores primárias, nas quais o
sistema RGB se baseia. Logo, a cor #FF0000 significa toda a intensidade do vermelho
(FF), nenhuma intensidade ou tom de verde (00) e nenhuma intensidade ou tom de azul
(00).
Da mesma maneira, a cor #00FFFF é a combinação do máximo da intensidade
tanto do azul quanto do verde e nenhuma do vermelho. E #8800FF é a combinação de
vermelho (não muito claro, mas não muito escuro), o máximo da intensidade do azul e
nenhuma do verde.
A combinação das três cores em sua intensidade máxima gera o branco (#FFFFFF), enquanto #000000 é
o preto.
Propriedade Color
No CSS, a propriedade color define a cor do primeiro plano de um elemento. Por
exemplo, todos os parágrafos <p> da página web serão da cor verde. O código a seguir
define isso:
Experimente este Código!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<style type="text/css">
p {color:#11CC00}
</style>
</head>
<body>
<p>Exemplo de Parágrafo</p>
</body>
</html>
Atividade
É hora de praticar! Experimente trocar as cores de seus textos, fundo de página,
linhas e demais elementos da página.
Veja um exemplo de página utilizando o código abaixo.
2
CSS – módulo 3 – Principais propriedades do CSS
Resumindo as Cores
Para exemplificar:
Para #AB5599, não é possível resumir, pois o primeiro caractere é diferente do segundo.
Se você colocar #A59, a cor será #AA5599 e, apesar de aos seus olhos ser a
mesma cor, na realidade não é. Não para o computador. Da mesma forma que 1,1114 é
diferente de 1,1115. Pouca diferença, mas há diferença.
Background-color
Usamos as propriedades do atributo Background para definir efeitos de fundo nos
elementos da página. Fazem parte deste grupo as seguintes propriedades:
background-color: esta propriedade é utilizada para atribuir apenas uma cor de
fundo ao elemento. Por exemplo, para alterar a cor de fundo do body, utilize o código
abaixo.
Experimente este Código!
/* CSS Document */
body {
background-color: #90CDE6;
}
Dica: Quando trabalhamos com CSS as cores podem ser definidas por três formas
diferentes. São elas:
• Valores hexadecimais: "#FF0000";
• Valores RGB: "rgb(255,0,0)";
3
CSS – módulo 3 – Principais propriedades do CSS
• Nome da cor (em inglês): red.
Background-image
Background-image: esta propriedade é usada para definir uma imagem como plano de
fundo. Por padrão do CSS, a imagem utilizada será repetida até cobrir toda a área do elemento.
Utilize a síntese ao lado para adicionar uma imagem de fundo no body.
Experimente este Código!
/* CSS Document */
body {
background-image:url('imagem.gif');
}
Saiba mais: A imagem adicionada como background deve estar na mesma pasta que o
arquivo CSS. Caso não esteja, inclua o endereço completo do diretório no código para que
ela seja encontrada.
Background-repeat
Background-repeat: esta propriedade possibilita estabelecer uma forma
especifica de repetição, otimizando o padrão. A repetição pode ser horizontal ou vertical.
Experimente este Código!
Horizontal
/* CSS Document */
body {
background-image:url('imagem.gif');
background-repeat:repeat-x;
}
Vertical
/* CSS Document */
body {
background-image:url('imagem.gif');
background-repeat:repeat-y;
}
4
CSS – módulo 3 – Principais propriedades do CSS
No-repeat
/* CSS Document */
body {
background-image:url('imagem.gif');
background-repeat:no-repeat;
}
Background-attachment
background-attachment: com a propriedade background-attachment podemos
definir se o plano de fundo inserido será fixo ou se ele rolará com o restante da página.
Veja o exemplo abaixo:
Experimente este Código!
* CSS Document */
body
{
background-image: url('imagem.gif');
background-repeat: no-repeat;
background-attachment: fixed;
}
As opções dessa propriedade são:
Scroll: A imagem de fundo rolará com o restante da página. No CSS, este é o modelo
padrão, ou seja, caso você não defina a propriedade background-attachment, esta será a
opção definida.
Fixed: O plano de fundo será fixo.
Background-position
background-position: esta opção permite especificar o posicionamento da
imagem de fundo. Veja a síntese abaixo:
Experimente este Código!
/* CSS Document */
body {
background-image:url('imagem.gif');
background-repeat:no-repeat;
5
CSS – módulo 3 – Principais propriedades do CSS
background-position:right top;
}
Seguindo o alinhamento horizontal e vertical, os valores para esta propriedade são:
Atributos do Background
Acabamos de aprender que dentro do atributo Background há diversas
propriedades para a definição de nosso plano de fundo.
Para encurtar o código e torná-lo mais simples, podemos usar apenas uma vez a
propriedade background e, assim, resumir todas as outras propriedades em uma só. A
síntese a seguir constrói e define o plano de fundo do body.
Experimente este Código!
/* CSS Document */
body {
background:#ffffff url('img_tree.png') no-repeat right top;
}
6
CSS – módulo 3 – Principais propriedades do CSS
Atividade
Agora é a sua vez!
Abra seu arquivo estilos.css e insira o código para alterar o background. Teste todos os
atributos: cor, imagens repetidas ou únicas. Teste, também, o uso das cores.
Explore todas as funcionalidades!
Quanto mais vezes você tentar, mais vai aprender!
Textos
As propriedades do atributo Text permitem que alteremos a cor, o alinhamento e
muitas outras opções que resultam em um texto bem formatado e com um estilo único. As
principais propriedades de texto são:
color: a opção color é usada para definir a cor do texto indicado. Para utilizar esta
propriedade use a seguinte sintaxe:Experimente este Código!
/* CSS Document */
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
7
CSS – módulo 3 – Principais propriedades do CSS
Text-align
Esquerda
p{
text-align:left;
}
Direita
p{
text-align:right;
}
centro
p{
text-align:center;
}
Justificado
p{
text-align:Justify;
}
Text-align: é a propriedade que define o alinhamento horizontal do texto, que pode
ser centralizado, alinhado à esquerda, alinhado à direita ou justificado.
Experimente este Código!
/* CSS Document */
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
Dica: O valor justify alinha seu texto de modo que todas as linhas tenham a mesma
largura e que suas margens sejam retas. É muito utilizado em revistas, jornais e, também,
neste curso!
8
CSS – módulo 3 – Principais propriedades do CSS
Text-decoration
Text-decoration: usamos esta propriedade para adicionar ou remover a decoração
do texto. Veja alguns exemplos.
Experimente este Código!
/* CSS Document */
/* Remove o sublinhado de um link */
a {text-decoration:none;}
/* Adiciona uma linha sob o texto */
h1 {text-decoration:overline;}
/* Risca o texto */
h2 {text-decoration:line-through;}
/* Sublinha o texto */
h3 {text-decoration:underline;}
/* Faz o texto piscar (nem todos os browsers aceitam esta opção) */
h4 {text-decoration:blink;}
Não é recomendado sublinhar textos que não são links, pois isto pode confundir o usuário.
9
CSS – módulo 3 – Principais propriedades do CSS
Text-transform
Text-transform: com esta opção podemos colocar todo o texto em caixa alta (letras
maiúsculas), em caixa baixa (minúsculas), ou ainda, capitular a primeira letra de cada
palavra. Veja a síntese:
Experimente este Código!
/*CSS Document*/
/*Para caixa alta (tudo maiusculo)*/
p.uppercase {text-transform:uppercase;}
/*Para caixa baixa (tudo minusculo)*/
p.lowercase {text-transform:lowercase;}
/*Para capitular a primeira letra (a primeira letra maiuscula e as demais minusculas de
CADA palavra)*/
p.capitalize {text-transform:capitalize;}
Text-indent
Text-indent: esta propriedade é usada para especificar o recuo da primeira linha do
texto. Veja, abaixo, a síntese para usá-la
Experimente este Código!
/* CSS Document */
p {text-indent:50px;}
Saiba mais: Existem outras propriedades de texto, menos utilizadas, que você pode
explorar no site www.w3schools.com/css/css_text.asp
10
CSS – módulo 3 – Principais propriedades do CSS
Fonte
A estrutura da fonte refere-se à forma como uma letra é construída. Assim, é
importante saber que existem duas categorias de fontes: com serifa e sem serifa,
conforme podemos ver no exemplo abaixo. A estrutura de cada categoria é muito distinta.
Fontes sem serifa tornam a leitura em frente ao computador mais fácil e são as
mais utilizadas nas páginas web.
Font-family
Font-family: esta propriedade define uma ou mais fontes para o texto. É importante incluir
mais de uma fonte, pois se o browser não suportar a primeira, tentará a próxima. É recomendável
sempre começar com a fonte desejada e terminar com uma família genérica dela. Assim, o browser
escolherá uma fonte similar, caso nenhuma das fontes adicionadas esteja disponível.
Experimente este Código!
/* CSS Document */
p {font-family:"Times New Roman", Times, serif;}
Nomes de fontes com mais de uma palavra devem ser escritos entre aspas. As
fontes devem ser separadas por vírgula, caso haja mais de uma.
Saiba mais: Para conhecer as combinações de fontes mais utilizadas, acesse Web Safe
Font Combinations: w3schools.com/css/css_websafe_fonts.asp
Veja, abaixo, alguns tipos de font-family:
• Arial, helvetica, sans-serif
• Times new Roman, times, serif
• Courier new, Courier, monospace
11
CSS – módulo 3 – Principais propriedades do CSS
Interpretação do Browser
Veja como o browser interpreta as fontes listadas na especificação de font-family:
Experimente este Código!
A fonte escolhida é a Verdana, encontrada na maioria dos computadores
com Windows. Se ela não estiver disponível, a segunda opção é
Geneva, encontrada na maioria dos Macs.
Se nenhuma for encontrada, a última opção será sans-serif, que é a
família tipográfica sem serifas.
Body{
font-family: verdana, geneva,arial, sans-serif;
}
Se nenhuma das duas opções estiverem disponíveis, a terceira opção é Arial, que é
comum em ambos.
Esta é uma maneira de criar uma lista de fontes. Se o browser não identificar
uma dessas opções, oferecerá uma fonte genérica da mesma família.
Font-style
font-style: é usado para alterar o estilo da fonte. Existem três opções possíveis:
- Normal: texto aparece normal
- Italic: texto em itálico
- Oblique: texto inclinado que é similar ao Italic, mas um pouco menos inclinado
Experimente este Código!
/* CSS Document */
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
Font-size
font-size: usada para definir o tamanho dos textos na página. Existem quatro
opções para definir este atributo. Explicaremos cada uma delas e mostraremos qual a
melhor forma de usá-las.
Px: Podemos especificar o tamanho da fonte em pixels
%: A ṕorcentagem indica qual o percentual que a fonte terá em relação a outra fonte:
body { font-size: 14px;}
h1{font-size:150%;}
12
CSS – módulo 3 – Principais propriedades do CSS
EM: A terceira forma de atribuir valor à propriedade font-size é o EM, que calcula o
tamanho da fonte a partir de um valor herdado especificando um fator de escala.
body{font-size: 14px;}
h1{font-size:1.2em;}
Palavras-chave: Existe a possibilidade de utilizar palavras-chave para definir o tamanho do
texto. Estas palavras serão traduzidas em valores de pixels, podendo variar de acordo com
as definições de cada browser.
As palavras-chave são: xx-small, x-small, small, mediun, large, x-large,xx-large.
body{font-size:small;}
Dica: Usando o pixel como valor, o texto só será redimensionado no Firefox, Chrome e
Safari. Nos demais browsers, o texto poderá ser redimensionado com a utilização da
ferramenta Zoom, porém, esta opção altera o tamanho da página inteira e não apenas do
texto.
Abaixo, temos exemplos das palavras-chave de tamanho e como elas se
relacionam. Cada tamanho é, aproximadamente, 20% maior que o anterior.
O tamanho small é, normalmente, definido em torno de 12 pixels de altura.
Entretanto, as palavras-chave nem sempre são definidas da mesma maneira em todos os
browsers e os usuários podem redefini-las, se desejarem.
13
CSS – módulo 3 – Principais propriedades do CSS
Decisão Sobre o Tipo de Tamanho da Fonte
Descrevemos as quatro formas de especificar o tamanho das fontes e mostramos
seus aspectos positivos e negativos. Qual das opções podemos usar e obter bons
resultados? A seguir você verá um método de combinação que trabalhará bem em todos
os browsers.
Usando essa técnica você beneficiará o usuário e a si mesmo! Caso queira
aumentar as fontes da página, em vez de mudar uma por uma, você só terá de aumentar
a do corpo da página e as outras serão alteradas automaticamente. Não haverá nenhum
problema caso o usuário deseje aumentar as fontes da página, pois elas também se
ajustarão automaticamente.
Na Prática
Em relação ao tamanho da fonte de <body>, a fonte <h1> é 150% maior e a fonte
<h2> é 120%.
O <p> não possui nenhum valor de font-size definido, portanto, por padrão, herda o tamanho da
fonte de <body>.
Links
Os links podem ser estilizados com todas as opções de texto aprendidas até agora.
Experimente este Código!
14
CSS – módulo 3 – Principais propriedades do CSS
/* CSS Document */
a {color: #0000ff;}
A novidade é que esta estilização poderá ser diferente, de acordo com o estado dolink:
• Não visitado
• Visitado
• Ao passar o mouse sobre o link
• Ativo
Para definir as características de cada estado, faremos uso de pseudoclasses, que
possibilitam a estilização a partir das condições ou eventos de um elemento. Veja o
exemplo:
Experimente este Código!
/* CSS Document */
/* Para links não visitados */
a:link {color:#FF0000;}
/* Para links já visitados */
a:visited {color:#00FF00;}
/* Ao passar o mouse sobre os links */
a:hover {color:#FF00FF;}
/* Links ativos */
a:active {color:#0000FF;}
Estilo Diferente para Cada Estado do Link
Quando definimos um estilo diferente para cada estado dos links, devemos nos
atentar para a ordem dos elementos:
• a:hover deve sempre vir depois do a:link e a:visited
• a:active deve sempre vir depois do a:hover
Lembre-se: não é aconselhável retirar o sublinhado do link e nem alterar sua cor, pois os
usuários estão acostumados com essa formatação. Se você alterá-los, faça de uma forma
que o usuário perceba. Usabilidade é tudo!
Listas
Em HTML, existem dois tipos de listas:
• Não ordenadas: são utilizados marcadores para identificar os itens
15
CSS – módulo 3 – Principais propriedades do CSS
• Ordenadas: são utilizados números ou letras para identificar os itens
As propriedades do elemento Lista possibilitam a utilização de diferentes
marcadores para listas ordenadas e não ordenadas, além de permitir uma imagem como
marcador.
Saiba mais: Para conhecer todos os tipos de marcadores existentes, acesse o site
http://www.w3schools.com/css/pr_list-style-type.asp
Marcadores de Listas
Veja, abaixo, exemplos de marcadores de lista não ordenada, lista ordenada e a
utilização de uma imagem como marcador:
Experimente este Código!
/* CSS Document */
/* Marcadores circulares */
ul {list-style-type: circle;}
/* Marcadores quadrados */
ul {list-style-type: square;}
/* Números romanos */
ol {list-style-type: upper-roman;}
/* Letras em caixa baixa */
ol {list-style-type: lower-alpha;}
/* Imagem como marcador */
ul { list-style-image: url('ArrowPurple.gif'); }
Dica:Esta propriedade não é exibida da mesma forma por todos os browsers. No
Internet Explorer e no Opera, a imagem definida como marcador será exibida um pouco
menor que nos demais navegadores. O site http://www.w3schools.com/css/css_list.asp nos oferece
uma alternativa para solucionar este problema. Para isso, leia o item Crossbrowser Solution.
Tabelas
Utilizando as propriedades do elemento Table, podemos alterar completamente o
visual de uma tabela HTML. Veja o exemplo ao lado:É importante lembrar que a função de
uma tabela é exibir dados tabulados.
Antes da chegada do CSS, tabelas eram usadas para estruturar o layout das
páginas, o que as tornavam complexas e de difícil manutenção.
Hoje, esta técnica é considerada ultrapassada, tendo em vista as facilidades e
simplicidades proporcionadas pelo CSS combinado ao HTML.
16
CSS – módulo 3 – Principais propriedades do CSS
Bordas das Tabelas
border: determina a cor e a largura da borda da tabela.
Experimente este Código!
/* CSS Document */
table, th, td {border: 1px solid black;}
No exemplo à cima, a tabela tem bordas duplas. Isto se deve ao fato de tanto o
elemento table, quanto o th e td terem bordas separadas.
border-collapse: é utilizada para definir se essas bordas serão separadas ou
exibidas como uma única borda.
Experimente este Código!
Experimente este Código!
/* CSS Document */
table {border-collapse:collapse;}
Propriedades das Tabelas
width e height: determinam a largura e altura da tabela.
Experimente este Código!
/* CSS Document */
table {width:100%;}
th {height:30px;}
17
CSS – módulo 3 – Principais propriedades do CSS
padding: controla o espaço entre a borda e o conteúdo da tabela.
Atenção! O padding deve apenas ser usado nos elementos td ou th.
Experimente este Código!
/* CSS Document */
td {padding:10px;}
Atividade
Nos seus arquivos HTML e CSS, explore as funcionalidades ensinadas durante este
módulo. Experimente todas as opções e inove!
Quanto mais vezes você explorar, experimentar e inovar, mais adquirirá
conhecimento e se tornará expert em CSS!
Parabéns!!!
Você chegou ao final do Módulo 03 - Principais Propriedades do CSS! Agora
você está apto(a) a continuar este curso.
Siga para o Módulo 04 - Agrupando e Alinhando Elementos e tenha um
excelente aprendizado.
18Materiais relacionados
55 pág.
56 pág.
55 pág.
52 pág.
Perguntas relacionadas
Compartilhar