CSS
Css é uma linguagem para estilos que define
o layout para o documento HTML.
Você pode usá-lo de 3 formas no documento
HTML
Da maneira inline, nela você coloca o
código css em cada linha do documento é
recomendado nunca se usar o css dessa maneira pois torna o código extenso e difícil
de ser editado e dificulta a criação de um padrão, exemplo:
<!DOCTYPE>
<html
lang "en">
<head>
<meta charset="utf-8">
</head>
<body>
<!--Exemplo de estilo inline NUNCA USAR-->
<h1 style="font-size:14px;color:blue;">
A
tocha
</h1>
<h2
style="font-size:12px;color:red;">
Grande
</h2>
<p style="font-size:10px;"> A
tocha é grande e brilha</p>
<h2 style="font-size:12px;color:red;">
vermelha
</h2>
<p style="font-size:10px;">Seu brilho alaranjado é lindo</p>
</body>
</html>
Estilo embutido esse aparece por meio da
tag style é recomendado ser usado apenas no tempo de projeto pois, facilita o
teste do código. Exemplo :
<!DOCTYPE>
<html
lang "en">
<head>
<meta charset="utf-8">
<Style type="text/css">
.titulo1{font-size:14px;color:blue;}
.titulo2{font-size:12px;color:red;}
.texto{font-size:10px; }
</style>
</head>
<body>
<h1 class="titulo1">
A
tocha
</h1>
<h2 class="titulo2">
Grande
</h2>
<p class="texto"> A tocha é
grande e brilha</p>
<h2 class="titulo2">
vermelha
</h2>
<p class="texto"> Seu brilho
alaranjado é lindo</p>
</body>
</html>
Estilo externo nessa forma de utilização é
criado um arquivo que contem as especificações
em css cada uma com sua respectiva class.O arquivo é salvo como .css e é
importado através DA TAG link. Esse estilo é o mais indicado para uso em um web
site. Exemplo:
<!DOCTYPE>
<html
lang "en">
<head>
<meta charset="utf-8">
<link rel="stylesheet"
type="text/css" href="estilo.css" >
</head>
<body>
<h1 class="titulo1">
A
tocha
</h1>
<h2 class="titulo2">
Grande
</h2>
<p class="texto"> A tocha é
grande e brilha </p>
<h2 class="titulo2">
vermelha
</h2>
<p class="texto"> Seu brilho
alaranjado é lindo</p>
</body>
</html>
Tipos de seletores
Existem diversos tipos de seletores css que
são usados para indicar o que receberá determinada formatação
·
Seletor do tipo elemento
seleciona qualquer elemento :
P{
font-family: sans-serif;}
Ou seja,
qualquer elemento <p> receberá essa formatação.
·
Seletor id seleciona o elemento
identificado com um id, exemplo:
H1#titulo{text-align: center;}
Todo elemento <h1> com o
atributo id titulo receberá essa formatação.
·
Seletor class seleciona os
elementos que se aplicou a classe.
.classe{color: green;}
Todos os elementos que conterem o
atributo class=classe receberão essa formatação.
·
Pseudo-classe seleciona o primeiro
elemento descendente do elemento principal. Ele consiste de um ou mais
seletores simples separados por um sinal de > O elemento principal “pai”
fica a esquerda do sinal.
div>strong{color: #ff0000.}
essa regra se aplica a todo
elemento strong filho de um elemento div
·
seletor descendente é uma
combinação de dois ou mais seletores simples separados por um espaço em branco.
Funciona com elementos que sejam descendentes do primeiro elemento simples
declarado no seletor:
div p { color:#f00; }
Esse seletor funciona com todos os
elementos p que sejam descendentes do elemento div.
Propriedades de cores e fundo
Color indica a cor do texto presente no
elemento
Ex: <!DOCTYPE>
<html lang
"en">
<head>
<meta charset="utf-8">
<Style type="text/css">
h1 {color: red; }
</style>
</head>
<body>
<h1>
o corvo
</h1>
</body>
</html>
background-color
define a cor de fundo do elemento.
Ex: <!DOCTYPE>
<html
lang "en">
<head>
<meta charset="utf-8">
<Style type="text/css">
h1 {color: red;
background-color: blue;}
</style>
</head>
<body>
<h1>
o corvo
</h1>
</body>
</html>
Imagem de fundo:
background-image
define uma imagem de fundo para o elemento
<!DOCTYPE>
<html lang "en">
<head>
<meta charset="utf-8">
<Style type="text/css">
h1 {color: red;
background-color: blue;
background-image:url(matt.jpg);}
</style>
</head>
<body>
<h1>
o corvo
<br>
branco
<br>
lilas
<br>
</h1>
</body>
</html>
background-repeat
define como a imagem de fundo se repetira possui os valores:
repeat a
imagem é repetida em ambas as direções vertical e horizontal.
repeat-x a
imagem é repetida somente horizontalmente.
repeat-y a
imagem é repetida somente verticalmente.
No-repeat a
imagem não se repetirá.
<!DOCTYPE>
<html
lang "en">
<head>
<meta charset="utf-8">
<Style type="text/css">
*{color: red;
background-color: blue;
background-image:url(matt1.jpg);
background-repeat: repeat;}
</style>
</head>
<body>
<h1>
o corvo
<br>
branco
<br>
lilas
<br>
</h1>
</body>
</html>
background-attachment, define se a imagem de
fundo utilizada será fixa ou com rolagem possui os valores scroll indica que a
imagem acompanhará a rolagem da página e fixed ela será fixa.
Propriedades de formatação visual
Width defina a largura do elemento que pode ser
indicada em porcentagem “%” ou pixel “px”.
Height define
a altura do elemento que também pode ser indicada em “%” ou “px”.
<!DOCTYPE>
<html lang "en">
<head>
<meta charset="utf-8">
<Style type="text/css">
h1{color: red;
background-color: blue;
background-image:url(matt1.jpg);
background-repeat: repeat-x;
width: 500px;
height: 300px;}
</style>
</head>
<body>
<h1>
o corvo
<br>
branco
<br>
lilas
<br>
</h1>
</body>
</html>
·
Position define um esquema de posicionamento recebe os valores:
static, que é o posicionamento
normal de acordo com o fluxo normal dos elementos na página
relative: posicionamento é calculado
de acordo com o fluxo normal.
Absolute: posicionamento e talvez o
tamanho, é especificado com as propriedades top, right, Button, left.
Fixed: : posicionamento e talvez
o tamanho, é especificado com as propriedades top, right, Button, left, porém é fixo
mesmo que se utilize a barra de rolagem.
·
Float indica o posicionamento a direita ou a esquerda do elemento e
possui os valores:
Left:o elemento será posicionado flutuando á esquerda.O fluxo do
conteúdo não integrante do elemento será posicionado á direita a partir do top
do elemento que recebe a propriedade “float”.
Right: similar à “left”, mas com o elemento flutuando à direita.
None: o elemento não flutua.
·
Clear é responsável pelo controle dos posicionamentos e recebem os valores:
None: nenhum
controle de limpeza de flutuação será executado
Left: limpeza
de flutuação á esquerda: elemento será
posicionado abaixo da borda inferior do elemento flutuante à esquerda
Right: limpeza
de flutuação à direita: o elemento será posicionado abaixo da borda inferior do
elemento flutuante á direita.
Both: o
elemento será posicionado abaixo da borda inferior de qualquer elemento
flutuante, seja á direita ou a esquerda.
Propriedades da borda
Largura
da borda
Border-top-width é usado para indicar a largura
superior da borda. Border-right-width é usado para indicar a largura do lado
direito da borda. Border-bottom-width é usado para indicar a largura inferior
da borda. Border-left-width é usado para indicar a largura do lado esquerdo da
borda, eles recebem os valores thin indica espessura fina,médium para media
espessura e thick para uma espessura grossa.para definir todos os lados de uma
vez é utilizado apenas border-width
Cor da
borda
border-top-color é usado para indicar a cor da
borda superior. Border-right-color indica a cor do lado direito da borda. Border-bottom-color
é usado para indicar a cor inferior da
borda. border-left-color indica a cor do lado esquerdo da borda.Border-color é
usado quando se quer a mesma cor para todos os lados da borda.ele recebe os
valores transparent ou seja incolor, a cor em inglês ou no formato rgb.
Estilo da
borda
Border-top-style, Border-right-style,
Border-left-style, Border-bottom-style, são usados respectivamente para indicar
o estilo da borda, superior, direita, esquerda e inferior, para atalho basta
apenas utilizar border-style. Os valores recebidos por ela são:
None, ou seja nenhuma borda.
Hidden: idêntico a none exceto na resolução de
conflito de bordas nos elementos de uma tabela.
Dotted: forma um segmento de reta com uma série
de pontos.
Deshed uma série de segmentos de pequenas
linhas.
Solid: segmento de linha simples e continua.
Double: duas linhas solidas.
Groove: efeito 3d entalhado.
Ridge: efeito 3d ressaltado
Inset: efeito 3d de baixo relevo
Outset: efeito 3d de alto relevo
Exemplo:
<!DOCTYPE>
<html lang "en">
<head>
<meta charset="utf-8">
<Style type="text/css">
h1{color: red;
background-color: pink;
width: 500px;
height: 300px;
border-width: thick;
border-color: blue;
border-style: outset;}
</style>
</head>
<body>
<h1>
o corvo
<br>
branco
<br>
lilas
<br>
</h1>
</body>
Propriedades de margem.
Margin-top, Margin-right, Margin-left,
Margin-bottom, são usados respectivamente para indicar o tamanho
da margem, superior, direita, esquerda e inferior.margin é usado como atalho
para definir a todos.Os valores podem ser expressos em porcentagem, qualquer
unidade suportada pelo css,ou auto que é o valor do default.
Propriedades do espaçamento
Padding-top, padding-right, padding-left, padding-bottom,
indicam respectivamente a distancia utilizada para espaço em cada um dos 4
lados, superior, direito, esquerdo, inferior, padding é usado como atalho para definir tudo de uma
vez.
Propriedades de fontes tipográficas.
Font-family indica a família a
qual a fonte do documento pertence, existem os seguintes tipos de famílias:
serif, sans-serife, cursive, fantasy, monospace. Você ainda define nessa
especificação qual a fonte a ser usada veja abaixo um exemplo de síntese.
{font-family:” times new roman”, serif; }
Por ordem de importância
o navegador ia entender para renderizar a fonte times new roman, porém
se os usuários não tivessem essa fonte instalada seria usada qualquer fonte da família
serif.
Font-style indica o estilo da fonte e rcebe
os valores normal a fonte é normal, italic a fonte fica em itálico, oblique a
fonte fica com efeito obliquo.
Font-variant exibe o texto em pequena caixa
alta ou normal, através dos valores normal e small-caps.
Font-weight expressa o peso da fonte, que
pode ser: normal com efeito padrão de peso, bold a fonte aparece em
negrito, bolder fonte do elemento com
valor de peso imediatamente superior ao valor herdado,lighter fonte com valor de
peso imediatamente inferior ao herdado.
Font-size expressa o tamanho da fonte, com
os valores medium fonte com valor padrão de tamanho, large-smaller aumenta ou
diminui o tamanho do valor herdado,valores que variam de 1 a 9 ou em
porcentagem.
Exemplo:
<!DOCTYPE>
<html lang "en">
<head>
<meta charset="utf-8">
<Style type="text/css">
h1 { font-family:” times new roman”,
serif;
font-style:italic;
font-variant: small-caps;
font-weight: bold;
Font-size:medium }
</style>
</head>
<body>
<h1>
o corvo
<br>
branco
<br>
lilas
<br>
</h1>
</body>
</html>
Propriedades de texto
Text-indent recuo a esquerda da primeira linha de um bloco de
texto.o tamanho pode ser em px ou em %.
Text-align alinhamento do texto pode ser left alinhado a
esquerda, Center alinhado no centro, justify texto justificado, right texto
alinhado a direita.
Text-decoration indica a decoração do texto que pode aparecer
como none,nenhum, underline texto sublinhado, overline cada linha de texto do
elemento terá uma linha acima, line-through uma linha corta o texto ao meio,blink
o texto fica piscando.
Text-transform
transforma o texto entre maiúsculas e minúsculas, capitalize coloca a
primeira letra do elemento em maiúscula. Uppercase coloca todos os caracteres
em maiúscula. Lowercase coloca todos os caracteres do elemento em minúscula.
None não aplica nenhum efeito.
Line-height Este
atributo é usado para controlar o espaço que existe antes e depois de uma linha
de texto. O espaço simples equivale geralmente a line-height: Uma line-height menor que o
tamanho da fonte produzirá sobreposição de texto.
Exemplo:
<!DOCTYPE>
<html lang "pt-br">
<head>
<meta charset="utf-8">
<Style type="text/css">
h1 { text-align:
center;
text-decoration: underline;
text-transform:
none;
line-height: 3;
}
</style>
</head>
<body>
<h1>
o corvo
<br>
branco
<br>
lilas
<br>
</h1>
</body>
</html>
propriedades de listas
list-style-image utiliza uma imagem como marcador de lista.
List-style-type tipo de marcador de lista e recebe os valores
None: sem marcador, disc: círculo (bolinha cheia), circle:
circunferência (bolinha vazia),square: quadrado cheio, decimal: números, decimal-leading-zero,
lower-roman: romano minúsculo, upper-roman: romano maiúsculo, lower-alpha:
letra minúscula, upper-alpha: letra maiúscula. lower-greek, lower-latin, upper-latin,
hebrew, armenian, georgian, hiragana, katakana,
hiragana-iroha, katakana-iroha.
