Aula anterior: Como funcionam os códigos do Blogger?
E não se preocupe, você que não quer apenas usar o simples do CSS, pois também teremos aulas avançadas!
1 - O que é CSS?
Cascading Style Sheets (Folha de Estilo em Cascata) é uma linguagem de estilo usada para personalizar elementos HTML. Sua finalidade é facilitar, melhorar e agilizar a estilização e estruturação da página. Sua principal vantagem é o fato de que com ela, só precisamos atribuir as propriedade uma vez, em um arquivo (ou trecho) , e ela será interpretada em todo site.
2 - Como usamos o CSS?
Para utilizarmos o CSS em nossos sites ou blogs, podemos proceder de três maneiras:
- Linkada ou importada
- Incorporada
- Inline
A linkada é mais recomendável para sites, nela, você cria um arquivo .css e inclui na página do seu site, usando a tag <link>.
A importada também linka um arquivo externo, mas nela você usa @import dentro da tag <style>.
A maneira incorporada é a utilizada pelo Blogger. Nela, você usa a linguagem CSS dentro da própria página HTML, num espaço específico para isto. Como dito anteriormente, no nosso caso, esse espaço é entre <b:skin> e </b:skin>
E, por último, a inline. É quando aplicamos o CSS dentro de um elemento HTML, usando o atributo style.
Como a que nos mais interessa no momento é a incorporada, vou trabalhar mais com ela.
3 - Sintaxe do CSS?
O CSS tem uma sintaxe bem simples e intuitiva, o que a torna fácil e rápida. Basicamente, segue o seguinte padrão:
seletor{Primeiro, especificamos o seletor, que nada mais é do que os elementos que queremos aplicar aquelas seguintes propriedades.
propriedade: valor;
propriedade: valor;
}
Depois do seletor, abrimos chaves ( { ). O que indica que ali começa a definição das propriedades. E fechamos chaves ( } ) para delimitar que ali acabou aquela definição.
Entre essas chaves, vão todas as propriedades com seus devidos valores. Digitamos o nome da propriedade, dois pontos ( : ) , seu valor e - para delimitar - um ponto e vírgula ( ; ).
E fazemos isso para cada propriedade.
Exemplo:
body{Aqui, atribuímos ao elemento body, um plano de fundo vermelho(#f00), um tamanho de fonte de 15px e uma cor de texto branca.
background-color: #f00;
font-size: 15px;
color: #fff;
}
4 - Seletores
São eles que definem a qual ou quais elementos aquelas seguintes propriedades serão atribuídas.
Basicamente, você seleciona as tags HTML que terão aqueles estilos. Há diversas formas de fazer isso, e cada uma tem sua hora correta de se utilizar.
Seletor por tipo:
Usam as tags HTML. Exemplos:
p{ color: red;}Seletor por classe:
body{margin:5px;}
h1{border:1px solid #000;}
span{font-weight: bold;}
Ao criar elementos HTMLs, podemos adicionar classes a eles, usando o atributo class. Exemplo:
<div class="resumo">Esse é um texto com o estilo resumo</div>Todos elementos com uma classe, herdam o mesmo estilo. Independentemente de quantos sejam e qual seja sua ordem.
Para declararmos as propriedades de uma classe, digitamos um ponto, seguido do nome dela. Exemplo:
.resumo{ color: gray; background-color:black; padding:7px;}No nosso exemplo, fazemos com que todos elementos com a classe "resumo" terá o estilo declarado acima.
Seletor por ID:
Também podemos criar um elemento com um ID ao invés de classe. A diferença é que com o ID nós garantimos que aquele estilo será usado apenas UMA vez por UM elemento. Sendo assim, como o próprio nome já diz, é usado como forma identificação.
Para o utilizarmos, usamos o atributo id no HTML e o referenciamos, no CSS, começando com um jogo da velha ao invés de um ponto:
<ul id="menu_principal">
<li>Home</li>
<li>Contato</li>
</ul>
#menu_principal{
font-size:18px;
list-style:none;
color:#00cc99;
}
Hierarquia:
O mais legal do CSS é que você pode trabalhar com a ideia de elementos pais e filhos, a chamada hierarquia.
É bem simples. basta você definir a ordem dos elementos no seletor. Exemplificando, se você quer definir um estilo a todo li dentro de uma ul com o id de "lista" , você digita o seletor na ordem de parentesco: #lista li {...}
Assim, você define um estilo a todo li dentro de #lista, sem precisar atribuir propriedades de um em um.
Esse recurso também pode e deve ser utilizado misturando IDs, classes, tags e tudo que seja possível.
Exemplos:
#noticias .titulo{...}
.postagem img{...}
form .campo input{...}
Isso é muito importante na nossa serie, pois o desafio é justamente descobrir como utilizar os seletores para customizarmos o blog. Recomendo que se aprofunde mais nesse link do site do Maujor.
5 - Principais propriedades
Ah leitor! Por favor me desculpe, mas isso fica pra próxima aula... =/
Por essa já deu né? Fique ligado que logo mais estarei postando a aula das Propriedades CSS!
Enquanto isso, você pode visitar o site da W3School, onde se encontra a documentação oficial do CSS.
Aliás, quanto maior for o interesse que eu perceber nessa postagem aqui, mais rápido saíra a próxima, então por favor, divulguem! :)
Categorias:
0 Comentários
