Olá, eu estou começando esta seção sobre lições de CSS,
Primeiramente, explicarei os principais assuntos referente a linguagem,
e também mostrarei alguns exemplos do mesmo.
Sumário:
- Oque significa a tag CSS
- Quando e como deve aplicar CSS
- Como testo os códigos CSS
- Manipulação de unidades em CSS
- Criando folhas de estilo em CSS
♦ Oque significa a tag "CSS" ?
Há tag CSS, significa "Cascading Style Sheets" é uma linguagem de estilo,
ou seja, que dá estilo as coisas, ela é mais utilizada em páginas HTML , PHP etc..
♦ Quando e Como devo aplicar "CSS" ?
O Cascading Style Sheets ou CSS, deve ser usado quando você está criando
uma página e deseja criar um bom design, ele deve ser aplicado entre as seguintes tags:
<style>
/* seu código css */
</style> Caso você queira colocar algo em comentário, basta você colocar /* e para fechar */
oque você colocar entre /* e */ serão ignorados pelo servidor, assim você pode nomear
partes de seu código para você poder entende-lo depois.
♦ Como testo códigos "CSS" ?
Os códigos CSS podem ser testados em seu computador por uma página Html.
vou mostrar um exemplo de código muito fácil em CSS:
<html>
<head><title>Exemplo utilização CSS(Aula #1)</title></head>
<style>
body
{
background-color: #000000;
color: #FFFFFF;
}
</style>
Olá, notem que a função "background-color: #000000" coloca a cor do background(fundo) na cor preta, <br />
e a função "color: #FFFFFF" coloca o texto na cor branca.
</html>Para visualizar o exemplo acima, basta você abrir o bloco de notas do seu computadore salvar com a extensão .html, e depois abra o mesmo.
♦ Manipulação de unidades em CSS
No CSS cada valor tem sua especificação, por exemplo pixels, pontuação,
abaixo irei mostrar na tabela abaixo os mais usados:
| Unidade: | Descrição: |
| % | Porcentagem |
| in | Polegada |
| cm | Centímetro |
| mm | Milímetro |
| em | Significa "Igual", exemplo:"font-size: 1em;", será interpretado, "o tamanho da fonte será o tamanho atual multiplicado por 1" |
| mm | Milímetro |
| ex | é a altura de uma fonte(a altura x é normalmente a metade do tamanho dela. |
| pt | Ponto(um ponto é o mesmo que 1/172 polegadas). |
| pc | Pica(um pc é o mesmo que 12 pontos) |
| px | Pixel(Um ponto na tela do computador |
A maioria dos dados desta tabela foi escrita por min, algumas foram retiradas do W3Schools.
cada valor acima pode ser usado da seguinte maneira:
<html>
<head><title>Exemplo utilização CSS(Aula #1)</title></head>
<style>
body
{
font-size: 10px; /* 10 pixels */
}
</style>
Aqui se coloca-se um texto para testarmos o nosso código.
</html>O código acima coloca todo o texto que está na página ficar em 10 pixels.
notem-se que se utiliza assim:
font-size: 10px;
| | |________|> Unidade, no caso pixels
| |
| |__________|> Número/valor
|___________________|> função que irá ser usadaAcima você irá conseguir entender melhor,lembrando que as unidades acima se aplicam somente em tamanho, largura, altura, posições.
As unidades não se aplicam em cores!
♦ Criando folhas de estilo em CSS..
Para criar funções em CSS, você pode colocar:
.nome_da_sua_funcao
{
// oque fazer
}
Para utiliza-las, é simples, basta:
<div class='nome_da_sua_funcao'>
Oi, este é um texto como exemplo.
</div> Vou mostrar um estilo que coloca o background da frase em rosa, muito legal:
<style>
.pinkground
{
background: #FF0FFF;
}
</style>
<br />
<div class="pinkground">
Aqui se coloca-se um texto para testarmos o nosso código.</div>
O código funcionaria desta maneira:
Aqui se coloca-se um texto para testarmos o nosso código.
e fica por hoje nossa primeira aula sobre css,
por enquanto eu expliquei a lógica e ensino que é bem necessário
para aprender. logo postarei a segunda aula, abraços.
Postar um comentário
0 comentários
Obrigado pelo seu comentário. Não publicamos neste blog comentários com palavras de baixo calão, denúncias levianas e troca de ofensas entre leitores.