Internet I
Unidade 3 – Introdução ao CSS
QI ESCOLAS E FACULDADES
SUMÁRIO
INTRODUÇÃO AO CSS ... 3
1 REVISÃO ... 3
2 CASCADE STYLE SHEET ... 3
2.1 Importância do CSS ... 3 2.2 Sintaxe CSS ... 4 2.2.1 Comentários ... 4 2.3 Tipos de CSS ... 5 2.3.1 Código CSS inline ... 5 2.3.2 Código CSS interno ... 5 2.3.3 Arquivo CSS externo ... 6 2.4 Seletores CSS ... 8 2.4.1 Seletor de elemento ... 8 2.4.2 Seletor Id ... 8 2.4.3 Seletor Class ... 9 2.4.4 Seletores agrupados ... 10 2.5 Unidades de Medida CSS ... 10 2.6 Cores CSS ... 11 3 ESTILOS CSS BÁSICOS ... 12 3.1 Fontes ... 12 3.1.1 Famílias de fonte ... 12 3.1.2 Estilos de fonte ... 13 3.1.3 Tamanhos de fonte ... 14 3.2 Textos ... 14 3.2.1 Cor do texto ... 14 3.2.2 Alinhamento de texto ... 15 3.2.3 Decoração de texto ... 15 3.2.4 Transformação de texto ... 16 3.2.5 Indentação de texto ... 17 3.3 Fundo (background) ... 17 3.3.1 Cor de fundo ... 18 3.3.2 Imagem de fundo ... 18
3.3.3 Imagem de fundo – repetição horizontal e vertical ... 19
INTRODUÇÃO AO CSS
1 REVISÃO
Na Unidade 2 foram apresentadas algumas tags básicas do HTML, como títulos, parágrafos, quebras de linha e imagens. Em alguns tópicos também foi citada a linguagem CSS, que é o principal assunto dessa Unidade 3.
Nos próximos capítulos serão mostrados a importância do CSS, sua forma de utilização e os estilos básicos que podem ser aplicados às páginas HTML.
2 CASCADE STYLE SHEET
CSS é a sigla de Cascade Style Sheet, folha de estilos em cascata. É uma linguagem que aplica formatações de estilo e de layout a documentos HTML. Em outras palavras, CSS é capaz de definir como os elementos HTML serão exibidos na página.
Com ele, é possível economizar tempo de codificação de estilos em uma página, pois um mesmo arquivo CSS pode ser referenciado em quantos documentos HTML se quiser.
A atual versão do CSS é o CSS3, que inclui novos estilos e seletores.
2.1 Importância do CSS
Os estilos CSS resolveram um grande problema do desenvolvimento Web. Um pouco de história para explicar:
Depois de a tag <font> ter sido incluída no HTML, os desenvolvedores passaram a aplicar cores, tamanhos e diversos outros estilos aos textos das páginas. No entanto, como um site pode conter muitas páginas, a alteração de cor de um texto que precisasse ser feita em todo o site necessitava de manutenção em todas as páginas, gastando muito tempo. (W3Schools, 2014)
Para resolver esse e outros problemas, o W3C desenvolveu a linguagem CSS, que pode conter todas as formatações do site em um único arquivo de estilos, facilitando o desenvolvimento e a manutenção de páginas Web.
A tag font citada era utilizada para formatar textos diretamente no HTML e deixou de ser aceita no HTML5, substituída por estilos CSS.
2.2 Sintaxe CSS
Uma regra CSS possui duas partes principais: um seletor, e uma ou mais declarações. A Figura 1 mostra a estrutura de uma regra CSS.
Figura 1 – Sintaxe CSS
Fonte: http://www.w3schools.com/css/selector.gif
O seletor é normalmente o elemento HTML que se quer estilizar. No exemplo da imagem acima, o elemento que receberá o estilo será o <h1>. Mais à frente, os seletores serão explicados detalhadamente.
Já as declarações, que ficam dentro de chaves { }, consistem de uma propriedade e um valor. A propriedade é o atributo de estilo que será alterado: color e font-size, no exemplo acima. O valor da propriedade é o que vai alterar, de fato, o elemento: blue e
12px. Toda declaração deve ser encerrada com ponto-e-vírgula.
No exemplo de código abaixo, por exemplo, o elemento <p> está sendo estilizado: o atributo color (cor do texto) recebeu o valor red (vermelho), e o atributo text-align (alinhamento do texto) recebeu o valor center (centralizado).
p {
color: red;
text-align: center; }
O código CSS jamais irá conter tags.Os seletores referem-se apenas ao nome da tag. O seletor p, por exemplo, referencia a tag <p>.
2.2.1 Comentários
Assim como no HTML, os comentários no CSS são usados para explicar o código, e podem ser úteis ao editar os estilos posteriormente. Os comentários são ignorados pelos navegadores e, no CSS, eles iniciam com /* e encerram com */.
color: red; /* Altera a cor da fonte para vermelho */
text-align: center; /* Aplica alinhamento centralizado ao texto */
}
2.3 Tipos de CSS
Há, basicamente, três maneiras diferentes de inserir CSS a uma página HTML:
Código CSS inline Código CSS interno Arquivo CSS externo
2.3.1 Código CSS inline
Para aplicar estilos inline, utiliza-se o atributo style no elemento que se pretende estilizar. Esse atributo pode conter qualquer propriedade CSS, por exemplo:
<p style="color: red; margin: 20px;">Parágrafo formatado com CSS.</p> O exemplo acima mostra um parágrafo com estilo, como mostra a Figura 2.
Figura 2 – Página formatada com código CSS inline
Usar os estilos inline, apesar de funcionar normalmente, perde muitas das vantagens dos arquivos de estilos e vai contra os Web Standards, que recomendam a separação de códigos. Por isso, esse método precisa ser conhecido mas, ao mesmo tempo, evitado em qualquer página.
2.3.2 Código CSS interno
Códigos CSS internos devem ser declarados na seção <head> do arquivo HTML utilizando a tag <style>.
<head> <style> h1 { text-align: center; } p { color: green; } </style> </head>
<body>
<h1>Título centralizado</h1> <p>Parágrafo com estilo</p> </body>
A Figura 3 mostra o resultado do código acima na página.
Figura 3 – Página formatada com código CSS interno
O código CSS interno é aplicado apenas à página onde está escrito e, por isso, deve ser evitado, assim como o estilo inline, pois não fica separado do HTML.
2.3.3 Arquivo CSS externo
Os arquivos CSS externos são ideais para aplicar estilos a muitas páginas. Também são a maneira mais correta de se desenvolver sites, pois seguem os Web
Standards que recomendam a separação de códigos.
Para utilizar arquivos CSS externos em uma página HTML, o documento HTML deve conter um link para o arquivo de estilos, utilizando a tag <link> na seção <head>.
<head>
<link rel="stylesheet" type="text/css" href="estilo.css"> </head>
<body>
<h1>Título azul</h1>
<p>Parágrafo com margem à esquerda.</p> </body>
O atributo href do elemento <link> está apontando para o nome de um arquivo externo chamado “estilo.css”. Esse arquivo pode ser criado no mesmo editor do HTML, e salvo com o tipo “Cascade Style Sheet File”.
h1 {
color: blue; }
p {
}
A Figura 4 mostra o editor Notepad++ com os dois arquivos, index.html e
estilo.css abertos.
Figura 4 – HTML e CSS abertos no Notepad++
O link faz referência direta ao nome do arquivo porque ambos estão no mesmo diretório. Se eles estiverem em pastas distintas, deve-se informar todo o caminho até o arquivo.
O resultado dessa página apontando para o arquivo CSS é mostrado na Figura 5.
Figura 5 – Página formatada com arquivo CSS externo
Com esse arquivo CSS externo criado, qualquer página HTML pode fazer um link para ele, e passará a utilizar aqueles estilos definidos. Dessa forma, um site inteiro pode ter seu estilo formatado utilizando apenas uma folha CSS.
Os estilos CSS são aplicados em cascata, ou seja, caso o navegador encontre mais de uma declaração para o mesmo elemento, elas serão somadas ou substituídas utilizando a regra da mais específica.
A partir desse ponto, todos os códigos CSS mostrados nos exemplos estarão escritos em um arquivo de estilos externo, como visto nessa seção. Como esse é o tipo
mais correto de aplicação de estilos em uma página, será essa a utilização realizada em todas as aulas.
2.4 Seletores CSS
Os seletores do CSS são usados para encontrar (ou selecionar) elementos HTML baseado no seu id, classes, tipos, atributos, valores de atributos e muito mais.
Os tipos de seletores não mostrados agora serão vistos nas próximas unidades, conforme o conhecimento de HTML e CSS for evoluindo.
2.4.1 Seletor de elemento
O seletor de elemento seleciona os elementos baseado no seus nomes. Pode-se selecionar todos os elementos <p> de uma página, por exemplo, e aplicar a cor vermelha.
p {
color: red; }
2.4.2 Seletor Id
O seletor Id utiliza o atributo id de uma tag HTML para encontrar o elemento específico. Um Id deve ser único dentro de uma página, então o seletor Id é usado quando se quer selecionar somente um elemento.
Nomes de Ids não devem ser iniciados com um número.
Para encontrar um elemento com um Id específico, utiliza-se uma hashtag (#), seguida pelo Id do elemento. O exemplo abaixo aplica um estilo ao elemento com id=”p1”.
#p1 {
color:red; }
Figura 6 – Parágrafo formatado com seletor id
2.4.3 Seletor Class
O seletor class encontra elementos com uma classe específica. Ele utiliza o atributo class do HTML.
Para encontrar elementos com uma classe específica, utiliza-se um ponto (.), seguido pelo nome da classe. No exemplo abaixo, todos os elementos com a classe “center” terão alinhamento centralizado.
.center {
text-align: center; }
A Figura 7 mostra um parágrafo formatado com o seletor class.
Figura 7 – Parágrafo formatado com seletor class
2.4.4 Seletores agrupados
Frequentemente, há elementos que possuem o mesmo estilo. Para minimizar o tamanho do código CSS, é possível agrupar os seletores. Para isso, basta separar cada um deles com uma vírgula (,). No exemplo abaixo, os elementos <h1>, <h2> e <p> terão o mesmo estilo. h1, h2, p { text-align:center; color:red; }
Nesse caso, todos os elementos <h1>, <h2> e <p> da página teriam um alinhamento centalizado e a cor da fonte vermelha.
2.5 Unidades de Medida CSS
Nas folhas de estilos, algumas propriedades recebem valores que precisam especificar uma unidade de medida. Existem várias unidades de medida em CSS, mas as mais comuns são:
% percentual em relação ao elemento pai.
em 1em é igual ao tamanho da fonte atual, 2em é o dobro do tamanho, e assim por diante. É bastante utilizado em textos.
pt pontos, semelhantes aos tamanhos utilizados no software Word. px pixels, é o tamanho de um pixel na tela do computador.
A Figura 8 mostra um código formatando quatro parágrafos com o tamanho da fonte em unidades diferentes.
O resultado do código acima é exibido na Figura 9.
Figura 9 – Parágrafos de tamanhos diferentes
2.6 Cores CSS
As cores CSS são definidas utilizando uma notação hexadecimal que combina os valores de vermelho, verde e azul (RGB). O menor valor que pode ser dado a uma cor é 0 (00 em hexadecimal). E o maior valor é 255 (FF em hexadecimal).
Os valores hexadecimais são escritos com três pares de dígitos, iniciando com uma hashtag (#). Alguns exemplos são mostrados na Figura 10.
Figura 10 – Exemplos de cores e seus códigos hexadecimais
Apesar de existirem algumas cores que podem ser referenciadas diretamente pelo seu nome, como blue, red, black, green, yellow, e assim por diante, é mais interessante utilizar sempre um código hexadecimal, pois ele permite a criação de 16 milhões de cores diferentes no CSS.
Para definir uma cor de fonte utilizando código hexadecimal em um elemento HTML, basta adicionar o valor na propriedade color, como mostra o exemplo abaixo.
h1 {
}
A Figura 11 mostra o resultado do código numa página com um elemento <h1>.
Figura 11 – Título colorido com código hexadecimal
3 ESTILOS CSS BÁSICOS
Há diversas propriedades CSS para serem formatadas em todos os elementos. Algumas das mais comuns serão vistas a seguir nesse capítulo, como cores e tamanhos de fontes, alinhamento e decoração de textos, cores e imagens de fundo.
3.1 Fontes
O CSS permite definir muitos estilos para fontes, como a família (tipo), o tamanho, a cor, o estilo, e assim por diante.
3.1.1 Famílias de fonte
A família de uma fonte pode ser especificada utilizando a propriedade font-family. Essa propriedade pode conter diversos nomes de fontes, num sistema de priorização. Se o navegador não suportar a primeira fonte, ele tentará usar a segunda e assim por diante.
O ideal é sempre começar especificando a fonte que se quer utilizar e terminar com uma família genérica, para fazer com que o navegador utilize uma fonte similar da mesma família se as outras não estiverem disponíveis. Os nomes das fontes devem ser separados por vírgulas (,).
p {
font-family: "Trebuchet Ms", Arial, sans-serif; }
Figura 12 – Parágrafo formatado com font-family
Se o nome da fonte contém mais de uma palavra, ele deve ser escrito entre aspas, como "Times New Roman".
3.1.2 Estilos de fonte
A propriedade font-style é amplamente utilizada para especificar um texto itálico, mas ela contém três valores possíveis: normal, italic e oblique.
p.normal { font-style: normal; } p.italic { font-style: italic; } p.oblique { font-style: oblique; }
Figura 13 – Parágrafos formatados com font-style
3.1.3 Tamanhos de fonte
A propriedade font-size especifica o tamanho do texto. Geralmente, o tamanho da fonte é definido utilizando a unidade de medida pt.
p {
font-size: 16pt; }
Exemplos de parágrafos formatados com diferentes tamanhos de fontes são mostrados na Figura 9 da seção 2.5 Unidades de Medida CSS.
3.2 Textos
3.2.1 Cor do texto
A propriedade color é utilizada para especificar a cor do texto. A cor padrão de todos os textos da página pode ser definida no seletor body, por exemplo.
body {
color: #0000FF; }
Um exemplo de utilização da propriedade color pode ser visto na Figura 11 da seção 2.6 Cores CSS.
3.2.2 Alinhamento de texto
A propriedade text-align é utilizada para especificar o alinhamento horizontal de um texto. Os textos podem ser centralizados, alinhados à esquerda ou à direita, ou justificados. h1 { text-align: center; } p.data { text-align: right; } p.artigo { text-align: justify; }
A Figura 14 mostra os estilos acima aplicados aos elementos HTML da página.
Figura 14 – Textos formatados com diferentes alinhamentos
3.2.3 Decoração de texto
A propriedade text-decoration é utilizada para adicionar ou remover decorações de um texto. Ela é amplamente utilizada para remover o sublinhado de links. Mas também é útil caso queira se inserir decoração em outros elementos.
a {
text-decoration: none; /* Remove o sublinhado dos links */
} h1 {
text-decoration: underline; /* Adiciona o sublinhado nos títulos */
A Figura 15 mostra a página HTML com elementos formatados com o CSS acima.
Figura 15 – Elementos formatados com text-decoration
3.2.4 Transformação de texto
A propriedade text-transform é usada para especificar letras maiúsculas e minúsculas em um texto. Ela pode ser utilizada para transformar tudo em letras maiúsculas, ou tornar maiúscula apenas a primeira letra de cada palavra, por exemplo.
p.upper { text-transform: uppercase; } p.cap { text-transform: capitalize; }
A Figura 16 mostra o resultado do estilo acima aplicado na página HTML.
3.2.5 Indentação de texto
A propriedade text-indent é utilizada para especificar a indentação da primeira linha de um texto.
p {
text-indent: 50px; }
O exemplo de parágrafos formatados com o estilo acima é mostrado na Figura 17.
Figura 17 – Parágrafos formatados com text-indent
Há diversas outras formatações de fontes e textos. Para uma lista completa de referências, é válido consultar os links no fim dessa Unidade.
3.3 Fundo (background)
As propriedades de fundo são utilizadas para definir efeitos no plano de fundo de um elemento. Para estilizar o plano de fundo, o CSS possui as seguintes propriedades:
background-color background-image background-repeat background-attachment background-position
3.3.1 Cor de fundo
A propriedade background-color especifica a cor de fundo de um elemento. A cor de fundo de toda a página, por exemplo, pode ser definida no seletor body. Mas qualquer elemento pode ter sua cor de fundo alterada utilizando essa mesma propriedade.
body { background-color: #B0C4DE; } h1 { background-color: #6495ED; }
O resultado do estilo acima é mostrado na Figura 18.
Figura 18 – Elementos formatados com background-color
3.3.2 Imagem de fundo
A propriedade background-image especifica uma imagem para ser usada como plano de fundo de um elemento. Por padrão, a imagem é repetida até cobrir todo o elemento.
body {
background-image: url(paper.gif); }
O nome da imagem paper.gif faz referência a um arquivo que deve estar na mesma pasta do arquivo CSS. Mas também é possível inserir imagens hospedadas na Internet, através da sua URL.
Figura 19 – Página formatada com background-image
As imagens de fundo devem ser utilizadas com cautela, buscando encontrar uma harmonia para a página. Imagens com cores fortes, por exemplo, não são indicadas como plano de fundo.
3.3.3 Imagem de fundo – repetição horizontal e vertical
Por padrão, a propriedade background-image repete uma imagem tanto horizontal como verticalmente. Algumas imagens, porém, deveriam ser repetidas somente horizontal ou verticalmente, ou nunca deveriam repetir, senão ficariam com uma aparência ruim. Para definir o estilo de repetição de imagem de fundo utiliza-se a propriedade background-repeat.
body {
background-image: url(paper.gif);
background-repeat: repeat-x; /* Repetição horizontal */
} h1 {
background-image: url(iron.gif);
background-repeat: repeat-y; /* Repetição vertical */
} p {
background-image: url(water.gif);
background-repeat: no-repeat; /* Sem repetição */
}
Para a lista completa de propriedades de fundo em CSS, podem-se consultar os links no fim dessa Unidade.
REFERÊNCIAS
MAUJOR. Introdução ao CSS.
Disponível em: http://maujor.com/tutorial/intrtut.php. Acesso em: abril/2014.
Treina Web. 10 erros de HTML que você realmente não deve cometer.
Disponível em:
http://www.treinaweb.com.br/ler-artigo/21/10-erros-de-html-que-voce-realmente-nao-deve-cometer.
Acesso em: abril/2014.
W3Schools. Background CSS.
Disponível em: http://www.w3schools.com/css/css_background.asp. Acesso em: abril/2014.
W3Schools. Como utilizar CSS.
Disponível em: http://www.w3schools.com/css/css_howto.asp. Acesso em: abril/2014.
W3Schools. Fontes CSS.
Disponível em: http://www.w3schools.com/css/css_font.asp. Acesso em: abril/2014.
W3Schools. Introdução ao CSS.
Disponível em: http://www.w3schools.com/css/css_intro.asp. Acesso em: abril/2014.
W3Schools. Seletores Id e Class.
Disponível em: http://www.w3schools.com/css/css_id_class.asp. Acesso em: abril/2014.
W3Schools. Sintaxe CSS.
Disponível em: http://www.w3schools.com/css/css_syntax.asp. Acesso em: abril/2014.
W3Schools. Textos CSS.
Disponível em: http://www.w3schools.com/css/css_text.asp. Acesso em: abril/2014.
W3Schools. Tutorial de CSS.
Disponível em: http://www.w3schools.com/css/default.asp. Acesso em: abril/2014.
