![\"o](\"http:\/\/drcode.com.br\/blog\/wp-content\/uploads\/2015\/01\/css.jpg\")
<\/h2>\n<\/h2>\nCSS \u00e9 um arquivo com extens\u00e3o .css utilizado para dar estilo a aquivos HTML, com ele conseguimos colocar cores, efeitos, fundos backgrounds, tamanho de fontes, e muito mais. CSS ou\u00a0Cascading Style Sheets\u00a0<\/i>\u00a0em ingl\u00eas anda em conjunto com HTML para criar paginas web.<\/p>\n
CSS tem uma sintaxe muito simples que usa palavras em ingl\u00eas 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\u00e3o os (:) e tamb\u00e9m a que indica o fim que s\u00e3o (;), alem disso voc\u00ea tem as pseudo-classe que s\u00e3o outras formas de especifica\u00e7\u00e3o 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.<\/p>\n
O CSS \u00e9 chamado na tag head do arquivo html, desta forma:<\/p>\n
<link rel=\"stylesheet\" type=\"text\/css\" href=\"style.css\" \/><\/code><\/pre>\nOu tamb\u00e9m podemos chamar ele diretamente no head (n\u00e3o muito apropriado por motivos de otimiza\u00e7\u00e3o).<\/p>\n
<head>\r\n <style>\r\n #id {\r\n color: #FFF;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n ...\r\n<\/body><\/code><\/pre>\nO rel=”” \u00e9 o que indica que aquilo \u00e9 uma folha de estilo, o type=”” indica que \u00e9 do tipo texto css, e como todas as tags HTML o href=”” \u00e9 o caminho do arquivo.<\/p>\n
Seletores CSS<\/h2>\n
O CSS reconhece as tags do html pelo seu nome mas caso voc\u00ea necessite alterar apenas uma das tags voc\u00ea pode usar os seguintes dois termos nas tags sendo eles, id=”” (o id deve ser unico para cada tag, n\u00e3o se pode repetir um id com o mesmo nome na mesma p\u00e1gina), e o class=”” (o class pode-se repetir quantas vezes necess\u00e1rio na mesma p\u00e1gina e com o mesmo nome, como no caso se varias divs que ser\u00e3o iguais). Veja o exemplo abaixo:<\/p>\n
<div id=\"topo\">\r\n conte\u00fado da div\r\n<\/div>\r\n\r\n<div class=\"box\">\r\n conte\u00fado da div\r\n<\/div>\r\n\r\n<div class=\"box\">\r\n conte\u00fado da div\r\n<\/div><\/code><\/pre>\nPara chamar as divs com id ou classe utilizamos para id (#) antes do nome do id, e (.) antes do nome da classe. Assim.<\/p>\n
#topo {\r\n width: 50px;\r\n height: 50px;\r\n}\r\n\r\n.box {\r\n width: 50px;\r\n height: 50px;\r\n}<\/code><\/pre>\n <\/p>\n
font-family: Define a fam\u00edlia da fonte utilizada.<\/p>\n
#id {\r\n font-family: 'Arial', 'Verdana', sans-serif;\r\n}<\/code><\/pre>\nfont-style: Define a propriedades de estilos que podem ser: normal, italic ou oblique<\/p>\n
#id {\r\n font-style: italic;\r\n}<\/code><\/pre>\nfont-weight : Define a propriedade de intensidade de uma fonte na sequ\u00eancia de valores de \u2018100\u2019 a \u2018900\u2019, cada n\u00famero indica uma fonte mais intensa (escura) que o valor anterior<\/p>\n
#id {\r\n font-weight: 200;\r\n}<\/code><\/pre>\nfont-size: Define o tamanho da fonte.<\/p>\n
#id {\r\n font-size: 12px;\r\n}<\/code><\/pre>\ncolor: Define a cor do texto de um texto<\/p>\n
#id {\r\n color: black;\r\n color: #000000;\r\n}<\/code><\/pre>\nletter-spacing: Controla o espa\u00e7amento entre as letras de um texto.<\/p>\n
#id {\r\n letter-spacing: 2px;\r\n}<\/code><\/pre>\nword-spacing: Controla o espa\u00e7amento entre as palavras de um texto.<\/p>\n
#id {\r\n font-family: 'Arial', 'Verdana', sans-serif;\r\n}<\/code><\/pre>\nword-spacing: Controla o espa\u00e7amento entre as palavras de um texto.<\/p>\n
#id {\r\n word-spacing: 10px;\r\n}<\/code><\/pre>\ntext-align: Controla o posicionamento horizontal do conte\u00fado de um elemento. Os valores poss\u00edveis s\u00e3o: left, right, center e justify.<\/p>\n
#id {\r\n text-align: center;\r\n}<\/code><\/pre>\ntext-decoration: Define um efeito decorativo no texto. Podendo entre eles ser: none (sem decora\u00e7\u00e3o); underline (sublinhado); line-through(linha cortando o texto); e blink (efeito piscante).<\/p>\n
#id {\r\n text-decoration: undeline;\r\n}<\/code><\/pre>\ntext-transform: Controla os efeitos de capitaliza\u00e7\u00e3o do texto. Com ela, podemos definir a caixa das letras (min\u00fasculas e maiusculas).<\/p>\n
#id {\r\n text-transform: uppercase;\r\n}<\/code><\/pre>\nwidth: Define o comprimento (largura) de um elemento.<\/p>\n
#id {\r\n width: 200px;\r\n}<\/code><\/pre>\nheight: Define a altura de um elemento.<\/p>\n
#id {\r\n height: '150px;\r\n}<\/code><\/pre>\nborder: Define bordas para um elemento.<\/p>\n
#id {\r\n border: 1px solid #000;\r\n border-top: 1px solid #000;\r\n}<\/code><\/pre>\nbackground: Define as propriedades relacionadas ao fundo de exibi\u00e7\u00e3o.<\/p>\n
#id {\r\n background: url(\"caminho\/imagem.png\") no-repeat center top;\r\n}<\/code><\/pre>\nmargin: Controla as margens de um elementos. Se forem indicados quatro valores, eles dizem respeito, respectivamente, \u00e0s margens superior, direita, inferior e esquerda. Se for fornecido apenas um valor, ele \u00e9 aplicado \u00e0s quatro margens.<\/p>\n
#id {\r\n margin: 10px;\r\n}<\/code><\/pre>\nAcima temos o mesmo que<\/p>\n
#id {\r\n margin: 10px 10px 10px;\r\n}\r\n\r\n#id {\r\n margin-top: 10px;\r\n margin-right: 10px;\r\n margin-bottom: 10px;\r\n margin-left: 10px;\r\n}<\/code><\/pre>\npadding: Controla os espa\u00e7amentos de um elementos. Se forem indicados quatro valores, eles dizem respeito, respectivamente, aos espa\u00e7amentos superior, direito, inferior e esquerdo. Se for fornecido apenas um valor, ele \u00e9 aplicado aos quatro espa\u00e7amentos.<\/p>\n
#id {\r\n padding: 10px 10px 10px;\r\n}\r\n\r\n#id {\r\n padding-top: 10px;\r\n padding-right: 10px;\r\n padding-bottom: 10px;\r\n padding-left: 10px;\r\n}<\/code><\/pre>\nfloat: Esta regra faz com que o box seja retirado de sua posi\u00e7\u00e3o no fluxo do documento e flutuado para a direita ou esquerda. O espa\u00e7o original ocupado pelo box n\u00e3o ser\u00e1 deixado livre, mas preenchido pelo elemento que segue no fluxo do documento.<\/p>\n
#id {\r\n float: left;\r\n}<\/code><\/pre>\nclear: 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).<\/p>\n
#id {\r\n clear: both;\r\n}<\/code><\/pre>\n