Linguagem CSS
CSS
O CSS (Cascading Style Sheets) é uma
linguagem de estilo na qual será definido todas as formatações dos textos e
elementos postados no código HTML. Escrito num arquivo simples de texto, a
vantagem de usar esse sistema é deixar a página mais leve e organizada.
Formas
de utilização
Os
elementos CSS podem ser usados de três formas: externo, embutido e inline.
Atualmente é aconselhável usar a forma externa por causa da sua praticidade e
fácil manutenção, caso precise fazer alterações.
CSS
inline:
<!DOCTYPE
html>
<html
lang="pt-br">
<head>
<title>CSS
inline</title>
<meta
charset="utf-8">
</head>
<body>
<h1
style="font-size:16px; color:#3366FF;">Título</h1>
<p
style="font-size:12px;"> CSS inline. Não recomendo.</p>
</body>
</html>
<html lang="pt-br">
<head>
<title>CSS embutido</title>
<meta charset="utf-8">
<style type="text/css">
h1{font-size:14px; color:#335FF;}
p{font-size:12px;}
</style>
</head>
<body>
<h1>CSS embutido</h1>
<p>CSS embutido usado em sites.</p>
</body>
</html>
<html lang="pt-br">
<head>
<title>Exemplo de CSS externo</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
<link href="../CSS/folha estilo externo.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Exemplo de CSS externo</h1>
<p>A forma de CSS externo é o mais recomendável.</p>
</body>
</html>
Arquivo CSS @charset "utf-8";
h1 {
color: #F00;
Tipos
de seletores
Podemos usar os seletores com elementos HTML, ID e Classe para definir
quais os grupos de elementos serão formatados. Usando elementos HTML como
seletores, todos os elementos da página serão formatos. Podemos definir todos
os elementos que possuem um determinado ID ou Classe para definir uma
formatação. No exemplo abaixo, foi definido que os elementos <p>, <a> e<h1>, tivesse a formatação das cores. No ID "lista" foi definida o estilo de lista para "circle". Já nas classes foram definidos os tamanhos dos
textos.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Exemplo de seletores</title>
<meta charset="utf-8">
<style>
/* Exemplo de CSS por elemento HTML */
h1 {
color: #0000CC;
}
p {
color: #00FF00;
}
a {
color: #FFFF00;
}
/* Exemplo de ID */
#lista {
list-style-type: circle;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
/* Exemplo de classes */
.class1 {font-size:20px;}
.class2 {font-size:30px;}
.class3 {font-size:40px;}
.class1 {
color: #CC0000;
}
</style>
</head>
<body>
<!-- Exemplo de CSS com elementos HTML -->
<h1>Título com a cor Azul</h1>
<p>Parágrafo com a cor verde limao</p>
<p><a href="www.google.com">Esse link com a cor amarelo claro</a></p>
<!-- Exemplo de CSS com ID -->
<ul id="lista">
<li>Texto1</li>
<li>Texto2</li>
<li>Texto3</li>
</ul>
<!-- Exemplo de CSS com classe -->
<p class="class1"><span class="class1">Texto1</span></p>
<p class="class2"><span class="class1">Texto2</span></p>
<p class="class3"><span class="class1">Texto3</span></p>
</body>
</html>
}
Alguns elementos possuem pseudo-classe que definem algumas
características especificas.
Exemplos:
- a:link - Definir o estilo dos links não visitados;
- a:visited - Definir o estilo dos links visitados;
- x:first-letter - Definir o estilo da primeira letra do elemento X;
- x:hover - Definir o estilo quando o mouse estiver sobre o elemento X;
Os seletores podem ter vários elementos, porém seguindo a ordem
descendente. Sempre o primeiro elemento será o seletor principal.
No exemplo a seguir, apenas o elemento <p> que é descendente do elemento <div> será
formatado:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Exemplo de seletores
descendentes</title>
<meta charset="utf-8">
<style>
div p {font-size:20px; color:#339933;}
</style>
</head>
<body>
<p>Exemplo de seletor descendentes.</p>
<div><p>Exemplo de seletor
descendentes.</p></div>
<p>Exemplo de seletor descendentes.</p>
</body>
</html>
Propriedades de cores e fundo
No CSS é usada a notação em hexadecimal para definir
as cores. Pode ser usado também em código RGB ou nominal, porém é recomendável
usar em hexadecimal. Lembrando que todos os códigos hexadecimais são iniciados
pelo símbolo jogo da velha "#".
Alguns exemplos de cores:
- Preto - #000000
- Vermelho - #FF0000
- Verde - #00FF00
- Azul - #0000FF
- Amarelo - #FFFF00
3.3.1 Cor do primeiro plano
Para definir a cor de primeiro plano em CSS é usada a
propriedade "color". Exemplo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Exemplo de cor de primeiro plano</title>
<meta charset="utf-8">
<style>
h1 {
color: #00FF00;
}
h2 {
color: #FFCC00;
}
h3 {
color: #00FFFF;
}
p {color:#000000;}
</style>
</head>
<body>
<h1>Título 1</h1>
<h2>Título 1</h2>
<h3>Título 1</h3>
<p>Exemplo de cor de primeiro plano.</p>
</body>
</html>
Cor do segundo plano
Para definir a cor de segundo plano é usada a propriedade "background-color".
Exemplo:
<!DOCTYPE
html>
<html
lang="pt-br">
<head>
<title>Exemplo
de seletores descendentes</title>
<meta
charset="utf-8">
<style>
h1
{background-color:#0000FF;}
h2
{background-color:#FF0000;}
h3
{background-color:#00FF00;}
p
{background-color:#C0C0C0;}
</style>
</head>
<body>
<h1>Título
1</h1>
<h2>Título
1</h2>
<h3>Título
1</h3>
<p>Exemplo
de cor de segundo plano.</p>
</body>
</html>
Imagem de fundo
A propriedade "background-image" define uma imagem no fundo do elemento. Na
propriedade"background-repeat" vai definir se a imagem vai se repetir em horizontal,
vertical ou ambos. Já a propriedade "background-attachment" define se a imagem será fixa ou vai rolar de
acordo com o movimento da página.
<html lang="pt-br">
<head>
<title>Exemplo de posicionamento</title>
<meta charset="utf-8">
<style>
td {width:400px;height:150px;}
</style>
</head>
<body>
<p><img src="bichinhos de pelucia 6.jpg" width="107" height="81">
<img src="bichinhos de pelucia 6.jpg" alt="" width="107" height="81"><img src="bichinhos de pelucia 6.jpg" alt="" width="107" height="81"><img src="bichinhos de pelucia 6.jpg" alt="" width="107" height="81">
</p>
<p><img src="bichinhos de pelucia 6.jpg" alt="" width="107" height="81"></p>
<p><img src="bichinhos de pelucia 6.jpg" alt="" width="107" height="81"></p>
<p><img src="bichinhos de pelucia 6.jpg" alt="" width="107" height="81"></p>
</body>
</html>
Propriedades de formatação visual
Tamanho
A propriedade "width" define a largura do elemento. Já o "height" vai definir a altura do elemento.
Exemplo:
<html lang="pt-br">
<head>
<title>Exemplo de larguda e altura</title>
<meta charset="utf-8">
<style>
tr {height:100px;}
td {width:300px;text-align:center;}
td.linha1 {background-color:#66CC99}
td.linha2 {background-color:#33CCFF;}
.linha1 {
color: #FF0080;
}
</style>
</head>
<body>
<table width="1230" height="118" border="0">
<tr>
<td width="361" height="42" class="linha1"><span class="linha1"></span></td>
</tr>
<tr>
<td height="37" class="linha2"> </td>
</tr>
</table>
</body>
</html>
A propriedade
"position" vai definir o posicionamento do elemento. A
propriedade "float" vai definir o posicionamento flutuante do
elemento. Já a propriedade "clear" vai definir os destalhes da
propriedade "float" como limpar a formatação à direita, esquerda ou
ambos os lados do elemento.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Exemplo de posicionamento</title>
<meta charset="utf-8">
<style>
#img1 {position:fixed;left:50px;}
#img2 {float:right;}
</style>
</head>
<body>
<p>exemplo de posicionamento
exemplo de posicionamento
exemplo de posicionamento
exemplo de posicionamento
exemplo de posicionamento
exemplo de posicionamento
exemplo de posicionamento
exemplo de posicionamento
exemplo de posicionamento
exemplo de posicionamento
exemplo de posicionamento
exemplo de posicionamento
exemplo de posicionamento
exemplo de posicionamento
exemplo de posicionamento
exemplo de posicionamento
exemplo de posicionamento
exemplo de posicionamento
exemplo de posicionamento
exemplo de posicionamento
exemplo de posicionamento
exemplo de posicionamento
exemplo de posicionamento exemplo de posicionamentoexemplo de posicionamentoexemplo de posicionamentoexemplo de posicionamentoexempl<img src="bichinhos de pelucia 6.jpg" alt="" width="105" height="70">o de posicionamentoexemplo de posicionamentoexemplo de posicionamentoexemplo de posicionamentoexemplo de posicionamentoexemplo de posicionamentoexemplo de posicionamentoexemplo de posicionamentoexemplo de posicionamentoexemplo de posicionamentoexemplo de posicionamentoexemplo de posicionamentoexemplo de posicionamentoexemplo de posicionamentoexemplo de posicionamentoexemplo de posicionamentoexemplo de posicionamentoexemplo de posicionamentoexemplo de posicionamentoexemplo de posicionamentoexemplo de posicionamentoexemplo de posicionamentoexemplo de posicionamentoexemplo de posicionamentoexemplo de posicionamentoexemplo de posicionamento</p>
Propriedades
de borda
Largura da borda
Para definir a espessura das bordas usamos a propriedade "border-width". Podemos definir individualmente cada lado, usando
as propriedades "border-top-width", "border-right-width", "border-bottom-width" e "border-left-width".
Os valores das espessuras podem ser: "thin", "medium", "thick" ou um valor de tamanho específico.
Cor da borda
Para definir as cores das bordas, usamos a propriedade "border-color". Podemos definir as cores individualmente de cada
lado, usando as propriedades "border-top-color", "border-right-color", "border-bottom-color" e "border-left-color".
Estilo da borda
Para definir o estilo das bordas, usamos a propriedade "border-style". Podemos definir os estilos das bordas de cada lado
individualmente, usando as propriedades "border-top-style","border-right-style", "border-bottom-style" e "border-left-style".
Os valores para os estilos são: none, hidden, dotted, dashed, solid, double, groove,ridge, inset e outset.
Segue o Exemplo
Propriedade de margens
Tamanho da margem
Para definir o tamanho das margens usamos a propriedade "margin". Podemos definir individualmente cada lado das
margens usando as propriedades "margin-top", "margin-right", "margin-bottom" e "margin-left".
Podemos usar a propriedade "margin" de forma abreviada. No exemplo a seguir foi
definido que a margem superior é de 50px, a margem da direita em 40px, a margem
inferior em 30px e a margem da esquerda em 20px.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Exemplo de margem</title>
<meta charset="utf-8">
<style>
table {border-style:solid;margin: 50px 40px 30px 20px;}
</style>
</head>
<body>
<table>
<tr>
<td>aqui vai o texto aqui vai o textoaqui vai o textoaqui vai o textoaqui vai o textoaqui vai o textoaqui vai o textoaqui vai o texto.</td>
</tr>
</table>
</body>
</html>
Espaçamento
Para definir o tamanho de espaçamento usamos a propriedade "padding". Podemos definir o espaçamento individualmente de cada lado usando as propriedades "padding-top", "padding-right", "padding-bottom" e "padding-left".
No exemplo a seguir foi usada a forma abreviado, onde foi definido que o espaçamento superior é de 10px, da direita em 20px, inferior em 30px e da esquerda em 40px.
<html lang="pt-br">
<head>
<title>Exemplo de espaçamento</title>
<meta charset="utf-8">
<style>
table {border-style:solid;padding: 10px 20px 30px 40px;}
</style>
</head>
<body>
<table>
<tr>
<td>Texto texto texto texto texto texto texto texto texto texto texto.</td>
</tr>
</table>
</body>
</html>
]
Propriedades de fontes tipográficas
As principais propriedades de estilo de fontes são:
- font-family - Definir o tipo de fonte, por exemplo, Arial, Times New Roman, Tahoma, etc. Podemos definir um grupo de família-genéricas, como serif, sans-serif, cursive, etc.
- font-style - Vai definir o estilo da fonte, se ela será normal, itálico ou oblíquo. É usado os seguintes valores: normal, italic e oblique.
- font-variant - Definir o texto no estilo caixa alta. Valores aceitos: normal esmall-caps.
- font-weight - Definir a largura e negrito da fonte. São aceitos os valores: normal,bold, bolder e lighter.
- font-size - Definir o tamanho da fonte. São aceitos os valores: medium, larger,smaller, tamanho especifico e porcentagem.
Exemplo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Exemplo de fonte</title>
<meta charset="utf-8">
<style>
.t1 {font-family:Times New Roman;}
.t2 {font-style:italic;}
.t3 {font-variant:small-caps;}
.t4 {font-weight:bolder;}
.t5 {font-size:30px;}
</style>
</head>
<body>
<p class="t1">Times New Roman</p>
<p class="t2">Itálico</p>
<p class="t3">Caixa alta</p>
<p class="t4">Negrito</p>
<p class="t5">Tamanho</p>
</body>
</html>
Propriedades de fontes tipográficas
As principais propriedades de estilo de fontes são:
- font-family - Definir o tipo de fonte, por exemplo, Arial, Times New Roman, Tahoma, etc. Podemos definir um grupo de família-genéricas, como serif, sans-serif, cursive, etc.
- font-style - Vai definir o estilo da fonte, se ela será normal, itálico ou oblíquo. É usado os seguintes valores: normal, italic e oblique.
- font-variant - Definir o texto no estilo caixa alta. Valores aceitos: normal esmall-caps.
- font-weight - Definir a largura e negrito da fonte. São aceitos os valores: normal,bold, bolder e lighter.
- font-size - Definir o tamanho da fonte. São aceitos os valores: medium, larger,smaller, tamanho especifico e porcentagem.
Exemplo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Exemplo de fonte</title>
<meta charset="utf-8">
<style>
.t1 {font-family:Times New Roman;}
.t2 {font-style:italic;}
.t3 {font-variant:small-caps;}
.t4 {font-weight:bolder;}
.t5 {font-size:30px;}
</style>
</head>
<body>
<p class="t1">Times New Roman</p>
<p class="t2">Itálico</p>
<p class="t3">Caixa alta</p>
<p class="t4">Negrito</p>
<p class="t5">Tamanho</p>
</body>
</html>
Estilo de marcadores
Podemos definir em CSS os tipos de marcadores das listas. Algumas
propriedades usadas são:list-style-type - Define o estilo visual
dos marcadores da lista. Alguns valores aceitos: disc, circle, square,
decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek,
lower-latin, upper-latin, armenian, georgian, lower-alpha e upper-alpha;list-style-image - Define uma imagem como
marcador de uma lista.
Exemplo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Exemplo de listas</title>
<meta charset="utf-8">
<style>
.t1 {list-style-type:disc;}
.t2 {list-style-type:circle;}
.t3 {list-style-type:square;}
.t4 {list-style-type:decimal-leading-zero;}
.t5 {list-style-type:upper-latin;}
.t6 {list-style-image: url("smile.jpg");}
</style>
</head>
<body>
<ul>
<li class="t1">Ponto sólido</li>
<li class="t2">Círculo</li>
<li class="t3">Quadrado</li>
<li class="t4">Decimal com zero</li>
<li class="t5">Letra maiúscula</li>
<li class="t6">Imagem como
marcador</li>
</ul>
</body>
</html>
Comentários
Postar um comentário