CSS desmistificado

[b]CSS[/b] Para que serve? O css é uma linguagem para estilos, sendo assim já que o HTML como no curso passado disse que era uma linguagem estrutural, é o css que vai dar o “estilo” para essa estrutura. Mas como o inserir? A forma que vou mostrar aqui é a com um arquivo css externo que é o modo mais indicado, então você tem o seguinte cod: [code] [/code] Outro modo é através do “import”, como o seguinte cod: [code] [/code] O arquivo referente ao css deve ser um aparte com o extensão .css Bom agora que já aprendemos como inserir, vamos aprender os tipos de estilo, para esse existem duas formas, classe e ids, mas antes vamos ver os valores de uma aplicação para uma sintaxe própria, vamos definir que todos os parágrafos do site terão fonte 11px e cor vermelha, vai ser o seguinte cod: [code] P {font-size: 11px; color: #ff0000;} [/code] Explicação O “P” no inicio define qual vai ser a tag que irá receber o estilo no caso “P” que é referente ao parágrafo, “{,}” é onde fica os atributos, define o inicio e o fim de um estilo, “font-size” é o atributo que define o tamanho da fonte, e “color” o que define a cor. O atributo é descrito da seguinte maneira Atributo: valor; Para definir o mesmo estilo para mais de uma tag use assim [code] h2, h4 {font-size: 11px;} [/code] [b]Por que você define px?[/b] Definimos px pois existem pt, px, cm, mm, pc e in o padrão de maioria dos browsers é px porem pode haver algum que é PT por exemplo, sendo assim seu site ira ficar desfigurado, e por esse motivo a w3c não reconhece estilos não definidos, e como estamos aprendendo da maneira correta, vamos fazer certo. Utilizando estilos próprios, usando class e id Para definir um estilo via class utilize da seguinte maneira .novoparagrafo {font-size: 12px;} Explicação, “.” O ponto define que estamos definindo um estilo de uma class, “novoparagrafo” é o nome da class o resto vocês já conhecem. [b]Mas como usar?[/b] Bom imagine que um parágrafo será diferente como a fonte 12, igual o exemplo. [code]

texto texto texto

[/code] Explicação, “class” é referente ao tipo do estilo, “novoparagrafo” o nome do estilo, sendo assim esse parágrafo, apenas esse parágrafo terá, o estilo diferente dos outros Utilizando o id, vai ter a seguinte sintaxe: [code] #novoparagrafo {font-size: 12px;} [/code] Explicação, “#” O ponto define que estamos definindo um estilo de um id, “novoparagrafo” é o nome da class o resto vocês já conhecem. No HTML fica assim [code]

texto texto texto

[/code] Mas qual a diferença? O id define apenas para um objeto, já o class você pode usar para mais de um objeto. Ou seja [navy]Certo:[/navy] [code]

texto texto texto

texto texto texto

texto texto texto

[/code] [red]Errado[/red] [code]

texto texto texto

texto texto texto

texto texto texto

[/code] Agora que você já sabe usar, vou postar uma lista dos principais atributos, ah! Fique calmo, apenas após aprender a utilizar vamos “meter a mão na massa”. Okays color: valor RGB ou nome da cor font-size: Serve para indicar o tamanho das fontes de forma mais rígida e com maior exatidão. E pode ser: xx-small | x-small | small | medium | large | x-large | xx-large, ou então o valor em si. font-family: Com este atributo indicamos a familia de tipografia do texto. Pode ser: serif | sans-serif | cursive | fantasy | monospace font-weight: Serve para definir a largura dos caracteres, ou com outras palavras, para colocar negritas com total liberdade. pode ser: normal | bold | bolder | lighter font-weight: 200; Serve para definir a largura dos caracteres, ou com outras palavras, para colocar negritas com total liberdade. Pode ser: Normal e 400 são o mesmo valor, assim como bold e 700. font-style: É o estilo da fonte, que pode ser normal, itálico ou oblíquo. pode ser: normal | italic | obliqúe line-height: A altura de uma linha, e portanto, o espaçamento entre linhas. text-decoration: Para estabelecer a decoração de um texto, ou seja, se está sublinhado, tachado, etc. pode ser: none || underline || overline || line-through text-align: Serve para indicar o alinhamento do texto. Usa-se: left | right | center | justify text-indent: Um atributo que serve para fazer recuos ou margens nas páginas. Use assim: valores do css text-transform: Permite-nos transformar o texto, fazendo com que tenha a primeira letra em maiúsculas de todas as palavras, tudo em maiúsculas ou minúsculas. Use: capitalize | uppercase | lowercase | none Background-color: Serve para indicar a cor de fundo de um elemento da página ou de algum lugar. Use: valor para cores normal Background-image: o mesmo que o de cima porem para imagens Use assim: url(url da imagem) Margin indicamos com este atributo o tamanho da margem externa Pode ser definido de quatro modos Com o valor geral ex: margin: 5px Como o valor para cima e baixo, esquerda direita ex: margin: 5px 10px; Ou para com cada valor seguindo top, direita, baixo e esquerda ex: margin: 5px 10px 5px 12px; Ou então uma definição para cada Que pode ser left, right, top ou bottom, ficando do seguinte modo margin-left, margin-top... Padding: é definido do mesmo modo que o margin porem para margens internas Border: define a borda de um objeto; Sitaxe: border: tamanho tipo cor; Exemplo: border: 2px solid #000; Os tipos podem ser: none | dotted | solid | double | groove | ridge | inset | outset Float: Serve para alinhar um elemento à esquerda ou à direita fazendo com que o texto se agrupe ao redor de tal elemento. Igual que o atributo align em imagens em seus valores right e left. Clear: Se este elemento tem a sua altura imagens ou outros elementos alinhados à direita ou à esquerda, com o atributo clear fazemos com que se coloque em um lugar onde já não tenha estes elementos ao lado que indicamos. Pode-ser: none | right | left Bom agora é como vocês, no próximo capitulo vou colocar em pratica as coisas que aprendemos e vou ensinar alguns truques, como o css, espero que estejam gostando. [quote] Link da parte 1 (xhtml) http://www.newsmade.com.br/index.php?postId=227 [/quote] [quote]Escrito e projetado por Jeison Frasson[/quote]