O
que é CSS – Benefícios da utilização:
As folhas CSS (cascading style sheet), também conhecidas como
“folhas estilo cascata”, são responsáveis por dar características visuais às
páginas web.
Criada à parte do HTML, uma única folha CSS controla o estilo
de todo um site, facilitando assim a sua manutenção e padronizando todas as suas
páginas, em pouco tempo e o melhor de tudo é que como é separado do HTML você
pode mexer no layout do seu site sem ter medo que isso interfira no conteúdo do
mesmo.
Antes da concepção do CSS, os estilos que definiam as
características de um site, por exemplo, eram feitos diretamente nas páginas
html, uma a uma e isso era extremamente desgastante para o desenvolvedor. Para
atualizar o site inteiro, haveria de abrir página por página e alterar algum
atributo de estilo que estivesse dentro de alguma tag específica, isso dava
muito trabalho e as vezes era mais fácil começar um outro site do zero, pois as
chances de se perder em meio aos códigos era grande.
Felizmente temos o CSS que veio para modificar completamente
o conceito de que páginas web poderiam ser apenas textos e imagens, a partir do
momento em que o CSS passou a existir, os desenvolvedores web puderam se aventurar
nos mares de sua criatividade e criar verdadeiras obras de arte (ou não) com
essa ferramenta maravilhosa. O web design passava a ter suas raízes.
Em suma, algumas das inúmeras facilidades que temos são:
- Facilidade na manutenção do website, todas as páginas
se alteram de uma só vez;
- Liberdade para criar layouts mais inventivos;
- O visual é alterado, mas o conteúdo permanece o
mesmo.
Formas de utilização:
Existem 3 formas de se utilizar o CSS, as formas são as
seguintes: inline, embutida e externa (esta última por sua
vez é a mais recomendada) e eu explicarei cada uma delas.
Forma
inline: A forma inline é
a utilização de regras de estilização aplicadas no próprio código HTML. Essa
forma entrou em desuso desde a concepção do CSS, entretanto ainda pode ser
utilizada para garantir uma rápida visualização do efeito desejado na página,
após isso a maior recomendação é que essas regras sejam passadas para os
controles CSS.
Exemplo:
<elemento
style=”atributo CSS”>
Forma
embutida: Muito
semelhante à forma inline, a única diferença é que ao invés de integrar atributos
CSS dentro das tags html, a codificação no formato CSS fica dentro do
<head> </head> da página. O lado negativo dessa forma é que para
cada página feita precisa-se copiar o css e colá-lo no <head> e com isso,
para alterar alguma coisa no layout seria necessário alterar página por página.
Exemplo:
<head>
<style type=”text/css”>
Tag ou elemento a ser
alterado{
Propriedades:atributos;
}
</style>
</head>
Forma
externa: A forma externa
é a melhor opção a se utilizar. Todo o CSS é feito em um arquivo externo que é
linkado à todas as páginas html do site. Dessa forma, ao atualizar esse
arquivo, todos os arquivos que estão vinculados a ele, mudarão simultaneamente.
Exemplo:
<head>
<link
rel=”stylesheet” type=”text/css” href=”arquivo.css”>
</head>
Tipos de seletores: elemento html, id e class
Seletores:
Existem 3 formas de se utilizar elementos do html como seletores css, isso significa que esses seletores serão usados como parâmetro para edições visuais em partes específicas do site.
1- elemento HTML: A partir do elemento html, no caso a própria tag, podemos especificar seu estilo, modificando-o da forma que o mesmo se adeque ao layout do seu site. Lembrando que se altera a tag, todos os elementos que estiverem dentro dela se adequarão às regras que lhe foram aplicadas.
Exemplo:
body{
background-color:#FFF;
}
body{
background-color:#FFF;
}
2- id: Podemos
modificar a padronização de determinado ID de algum elemento. Nesse caso,
usamos o # antes do ID.
Exemplo:
#id_do_elemento{
propriedade:atributo;
}
3- classe: as
classes são muito usadas para criar vários padrões ao mesmo elemento, por
exemplo, mais de um tipo de sessão. Quando se trata de classe, utilizamos um ‘.’ antes
do seu nome.
Exemplo:
.elemento_da_classe{
propriedade:atributo;
}
Sintaxe:
Assim como qualquer linguagem de desenvolvimento, o CSS
também tem sua própria sintaxe, para que os comandos funcionem, ela deve ser estritamente
seguida.
Comentários:
Os comentários CSS são escritos de forma diferente do HTML,
esses por sua vez são entre /* */
Exemplo:
/* Comentário */
Regras CSS:
As regras CSS são sempre escritas da seguinte forma:
Seletor{
Propriedade:atributo;
}
Unidades de medida:
No CSS temos 3 tipos de unidades de medidas, que são:
Relativas (px, em, ex):
px = Tamanho em pixels
(relativo à tela do dispositivo);
em = Tamanho relativo à
fonte utilizada em determinado elemento;
ex = Corresponde à
altura da fonte utilizada.
Absolutas (in, cm, mm, pt, pc)
in = Polegadas (
1polegada = 2.54 cm);
cm = Centímetros;
mm = Milímetros;
pt = Pontos (1 pt =
1/72 polegadas);
pc = Paicas (1 paica =
12 pontos);
Porcentagem
% = Porcentagem (se
adequa a uma porcentagem do tamanho da tela);
0 comentários:
Postar um comentário