O que é CSS
CSS
CSS é um arquivo com extensão .css utilizado para dar estilo a aquivos HTML, com ele conseguimos colocar cores, efeitos, fundos backgrounds, tamanho de fontes, e muito mais. CSS ou Cascading Style Sheets em inglês anda em conjunto com HTML para criar paginas web.
CSS tem uma sintaxe muito simples que usa palavras em inglês para dar nomes as propriedades de determinadas tags HTML. Uma folha de estilo tem uma serie de regras, como a que separa um uma propriedade de um atributo que são os (:) e também a que indica o fim que são (;), alem disso você tem as pseudo-classe que são outras formas de especificação alem de ID’s e Classes, assim como :hover que vai executar o estilo ao passar o mouse em sima do determinado elemento, temos tambem o :first, que ele ira pegar o primeiro elemento, o :last que pega o segundo, o :before que indica antes do conteudo da tag e muitas outras.
O CSS é chamado na tag head do arquivo html, desta forma:
<link rel="stylesheet" type="text/css" href="style.css" />Ou também podemos chamar ele diretamente no head (não muito apropriado por motivos de otimização).
<head>
<style>
#id {
color: #FFF;
}
</style>
</head>
<body>
...
</body>O rel=”” é o que indica que aquilo é uma folha de estilo, o type=”” indica que é do tipo texto css, e como todas as tags HTML o href=”” é o caminho do arquivo.
Seletores CSS
O CSS reconhece as tags do html pelo seu nome mas caso você necessite alterar apenas uma das tags você pode usar os seguintes dois termos nas tags sendo eles, id=”” (o id deve ser unico para cada tag, não se pode repetir um id com o mesmo nome na mesma página), e o class=”” (o class pode-se repetir quantas vezes necessário na mesma página e com o mesmo nome, como no caso se varias divs que serão iguais). Veja o exemplo abaixo:
<div id="topo">
conteúdo da div
</div>
<div class="box">
conteúdo da div
</div>
<div class="box">
conteúdo da div
</div>Para chamar as divs com id ou classe utilizamos para id (#) antes do nome do id, e (.) antes do nome da classe. Assim.
#topo {
width: 50px;
height: 50px;
}
.box {
width: 50px;
height: 50px;
}
font-family: Define a família da fonte utilizada.
#id {
font-family: 'Arial', 'Verdana', sans-serif;
}font-style: Define a propriedades de estilos que podem ser: normal, italic ou oblique
#id {
font-style: italic;
}font-weight : Define a propriedade de intensidade de uma fonte na sequência de valores de ‘100’ a ‘900’, cada número indica uma fonte mais intensa (escura) que o valor anterior
#id {
font-weight: 200;
}font-size: Define o tamanho da fonte.
#id {
font-size: 12px;
}color: Define a cor do texto de um texto
#id {
color: black;
color: #000000;
}letter-spacing: Controla o espaçamento entre as letras de um texto.
#id {
letter-spacing: 2px;
}word-spacing: Controla o espaçamento entre as palavras de um texto.
#id {
font-family: 'Arial', 'Verdana', sans-serif;
}word-spacing: Controla o espaçamento entre as palavras de um texto.
#id {
word-spacing: 10px;
}text-align: Controla o posicionamento horizontal do conteúdo de um elemento. Os valores possíveis são: left, right, center e justify.
#id {
text-align: center;
}text-decoration: Define um efeito decorativo no texto. Podendo entre eles ser: none (sem decoração); underline (sublinhado); line-through(linha cortando o texto); e blink (efeito piscante).
#id {
text-decoration: undeline;
}text-transform: Controla os efeitos de capitalização do texto. Com ela, podemos definir a caixa das letras (minúsculas e maiusculas).
#id {
text-transform: uppercase;
}width: Define o comprimento (largura) de um elemento.
#id {
width: 200px;
}height: Define a altura de um elemento.
#id {
height: '150px;
}border: Define bordas para um elemento.
#id {
border: 1px solid #000;
border-top: 1px solid #000;
}background: Define as propriedades relacionadas ao fundo de exibição.
#id {
background: url("caminho/imagem.png") no-repeat center top;
}margin: Controla as margens de um elementos. Se forem indicados quatro valores, eles dizem respeito, respectivamente, às margens superior, direita, inferior e esquerda. Se for fornecido apenas um valor, ele é aplicado às quatro margens.
#id {
margin: 10px;
}Acima temos o mesmo que
#id {
margin: 10px 10px 10px;
}
#id {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}padding: Controla os espaçamentos de um elementos. Se forem indicados quatro valores, eles dizem respeito, respectivamente, aos espaçamentos superior, direito, inferior e esquerdo. Se for fornecido apenas um valor, ele é aplicado aos quatro espaçamentos.
#id {
padding: 10px 10px 10px;
}
#id {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}float: Esta regra faz com que o box seja retirado de sua posição no fluxo do documento e flutuado para a direita ou esquerda. O espaço original ocupado pelo box não será deixado livre, mas preenchido pelo elemento que segue no fluxo do documento.
#id {
float: left;
}clear: Esta regra faz com que o box que aplicado ignore o efeito do float, ou seja ele ira ficar abaixo do elemento anterior aplicado float, podendo usar as propriedades clear: both(todos), left(direita) e right(esquerda).
#id {
clear: both;
}Você pode conferir as outras milhares de propriedades css clicando aqui.
Bom, por em quanto é isso, espero que tenham gostado, qualquer dúvida, mande-me um e-mail ou deixe um comentário, terei o maior prazer em lhe ajudar
