Swift

Aprendendo CSS & HTML

Para aqueles que pretendem ou gostam de personalizar seus templates, querendo ou não, é necessário ter um mínimo de conhecimento em HTML e CSS.
Ao instalar um recurso, ou fazer alguma personalização no seu blog, com certeza alguns se deparam com determinados códigos que, muitas vezes sequer sabem o significado ou sabem para que servem, por isso, é fundamental saber e conhecer pelo menos o básico para entender o que se trata cada código e saber reconhecê-los.
Pensando nisso, eu já publiquei um artigo com explicações básicas sobre as Variáveis CSS e os Elementos do Blogger, onde trata a respeito dos elementos básicos do Blogger e sobre os Elementos de página.
Vou dar continuidade a publicação de alguns artigos sobre CSS e HTML, e tentarei repassar a vocês um pouco de conhecimento básico no assunto, afim de auxiliá-los nas personalização de seus templates no blogger.
De antemão, já esclareço que não tenho pretensão alguma em dar aulas sobre HTML e CSS, apenas tentarei repassar algum conhecimento básico da maneira mais simples e acessível possível, pelo menos para que vocês possam entender um pouquinho melhor sobre o assunto, facilitando a aplicação de hacks e para conseguirem modificar o layout do seu blog, ou quem sabe até, começar a criar templates.
Para aqueles que pretendem se aprofundar melhor no assunto, recomendo a leitura em alguns sites, como o do Maujor, ou o apostilando, verdadeiros mestres no assunto.
Para iniciar, vamos identificar alguns elementos no seu template.
Quando clicamos em “editar HTML” no blogger, nos deparamos com várias tags.
O início do nosso documento é HTML iniciado pela tag <html>, e se você rolar a página até o final verá que existe uma tag de fechamento, que é </html>.
Ao entrarmos na edição HTML no Blogger, visualizamos qual a linguagem que está sendo utilizada na página (XHTML), representadas por estas tags:(você não deverá mexer e nem modificar nada nesta parte)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

1. Estrutura Básica do HTML:

No Blogger, o documento HTML se compõe da seguinte estrutura básica:
<html>
<head>
É entre estas tags que está contido o estilo da página – CSS.
É aqui que determinamos a aparência dos elementos

<head/>
<body>
É entre estas tags que está contida a estrutura da página (seus elementos) – HTML.
É o corpo do documento.É aqui que criamos os blocos que serão mostrados na página, como colunas, menus etc. 

</body>
</html>

2. HTML e CSS:

Com certeza você já ouviu falar em CSS e em HTML, mas talvez não saiba o que significa exatamente.
CSS é a abreviatura para Cascading Style Sheets = Folha de Estilos em Cascata.
É uma linguagem para estilos que define o layout de documentos HTML.
O CSS é um mecanismo para adicionar estilo, é onde controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos etc.
HTML é a abreviatura de HyperText Markup Language, é a linguagem que possibilita apresentar informações de uma página, é tudo aquilo que está contido na página.
Resumidamente, HTML é usado para estruturar conteúdos, enquanto que o CSS é usado para formatar conteúdos estruturados.

3. CSS no Blogger:

Já vimos que o código CSS que dá estilo à página,é onde determinamos a aparência dos elementos. No Blogger, começa com :
<b:skin><![CDATA[/*
e sua tag de fechamento é ]]></b:skin>.
E sempre que quisermos adicionar estilos aos elementos devemos acrescentar os códigos referentes antes de sua tag de fechamento ]]></b:skin> .
A Regra CSS segue uma linguagem própria, formando uma folha de estilos, definindo como será aplicado estilo a um ou mais elementos HTML, compondo-se de 3(três) partes:
a) Seletor
b) Propriedade
c) Valor
Na regra CSS, escreve-se o seletor e a seguir a propriedade e o valor, separados por dois pontos e entre chaves { }.
Quando tivermos que definir mais de uma propriedade, por regra, deve-se usar ponto-e-vírgula para separá-las.
Veja exemplo:
body{
background-color: $bgcolor;
}
(Referência:Maujor)
Estas são as explicações básicas iniciais.

You Might Also Like

0 comentários

Facebook 2018

Visitas

Flickr Images