Curso de html parte 2 - css

CSS
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:



Outro modo é através do “import”, como o seguinte cod:


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:



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


Por que você define px?
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.

Mas como usar?
Bom imagine que um parágrafo será diferente como a fonte 12, igual o exemplo.

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:

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

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

Certo:


Errado

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.