Curso de web parte 2 - css

O Jeison Frasson escreveu (ou copiou) isso no dia 31/05/2009, e alterou 11/04/2016 Voltar
css

Uma breve introdução ao estilo em cascata, se você tiver um tempo sobrando se aprofunde, ira descobrir inúmeras possibilidades com essa incrivel linguagem de marcação

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:

<head>
<link rel=stylesheet href=”css/principal.css” type=”text/css” />
</head>

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

<style type="text/css">
@import "css/menu.css";
</style>

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:

P {font-size: 11px; color: #ff0000;}


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:

h2, h4 {font-size: 11px;}

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.

<p class="novoparagrafo">Lorem ipsum dolor</p>

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:

#novoparagrafo {font-size: 12px;}

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

<p id="novoparagrafo">Lorem ipsum dolor</p>

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:

<p class="novoparagrafo">Lorem ipsum dolor</p>
<p class="novoparagrafo">Lorem ipsum dolor</p>
<p class="novoparagrafo">Lorem ipsum dolor</p>

Errado

 

<p id="novoparagrafo">Lorem ipsum dolor</p>
<p id="novoparagrafo">Lorem ipsum dolor</p>
<p id="novoparagrafo">Lorem ipsum dolor</p>

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.
Pode-ser: none | right | 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.
Use: clear: both;

Comentar

Quase todos direitos reservados a Newsmade
Curso de web parte 2 - css | Newsmade