CSS:
CSS
Formas de utilização: externo, embutido e inline.
O CSS pode ser incorporado no HTML de três formas: externo, embutido e
inline, usados com metas diferenciadas. A linguagem em cascata é interpretada pelos navegadores de acordo com a hierarquia, tendo como prioridade o css inline, depois o embutido e por
último o externo.
Pensando no estilo embutido, os códigos em CSS ficam dentro da tag
<style> pois o estilo sera aplicado em paginas definidas. Exemplo:
O QUE É CSS?
CSS ( Cascading Style Sheets) é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.
Em vez de colocar a formatação dentro do documento, o desenvolvedor cria um link(ligação) para uma página que contém os estilos, procedendo de forma idêntica para todas as páginas de um portal. Quando quiser alterar a aparência do portal basta portanto modificar apenas um arquivo.
BENEFÍCIOS DO USO DO CSS
Controle do layout de vários documentos a partir de uma folha de estilos;
Padronização e facilidade da manutenção do código;
Aplicação de diferentes layouts para diversos tipos de mídia como (tela, impressão, etc).
SINTAXE
Uma regra CSS é uma declaração que segue uma sintaxe própria e que define como será aplicado estilo a um ou mais elementos HTML. Um conjunto de regras CSS formam uma folha de Estilos. Uma regra CSS, na sua forma mais elementar, compõe-se de três partes: um seletor, uma propriedade e um valor e tem a sintaxe conforme mostrando abaixo:
seletor { propriedade: valor; }
Seletor:genericamente, é o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, ou etc., e para o qual a regra será válida (por exemplo: <p>, <h1>, <form>,.minhaclasse, etc…);
Propriedade:é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background, etc.)
Valor:é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo verdana, cor vermelho, fundo branco, etc.)
FORMAS DE UTILIZAÇÃO
Inline: O código CSS é inserido diretamente nas tags HTML porém, essa forma não é recomendada pela a dificuldade na visualização e localização do conteúdo (HTML) com a folha de estilos (CSS), dificultando a manutenção da página.
Embutido: O CSS é colocado dentro do <head> da página html. Dentro do <head>, é criado um bloco de código CSS e dentro dele é colocado a formatação para a página e neste caso o CSS só terá efeito apenas na página HTML em que ele foi colocado.
Externo: Este tipo de inserção do CSS é a forma mais recomendada sendo que o CSS fica em arquivo externo separado do conteúdo HTML da página. Para isso é necessário criar um arquivo .css e depois “linkar” na sua página HTML. Este modo de utilização externo facilita na hora da manutenção do site.
TIPOS DE SELETORES
Seletores são os elementos que irão receber o estilo (CSS).
Elemento HTML: é usado para especificar um estilo para um elemento HTML, o mesmo estilo serve para as tags iguais, usando apenas o nome da tag como seletor:
p{ font-family: Arial, Times New Roman, sans-serif; font-size: 12px; color:#FFFF}
Elemento ID: é usado para especificar um estilo para um elemento único e exclusivo, o atributo id do elemento HTML e é definido por um “#”.
#idname{ font-family: Arial, Times New Roman, sans-serif; font-size: 12px; color:#FFFF}
Elemento Classe: é usado para especificar um modelo para um grupo de elementos, o seletor de classe usa o atributo da classe HTML, e é definido por um “.”
#classname{ font-family: Arial, Times New Roman, sans-serif; font-size: 12px; color:#FFFF}
PROPRIEDADES DE CORES E FUNDOS
São utilizados para definir os efeitos de um elemento de fundo.
PROPRIEDADES DE FORMATAÇÃO VISUAL
PROPRIEDADES DE BORDA
Permitem especificar o estilo e a cor da borda de um elemento.
EXEMPLO:
PROPRIEDADES DE MARGENS E ESPAÇAMENTO
PROPRIEDADES DE FONTES TIPOGRÁFICAS
Define a família da fonte, tamanho e estilo dos textos.
PROPRIEDADES DE TEXTOS
Define as propriedades dos textos.
PROPRIEDADES DE LISTAS
Essas propriedades define diferentes marcadores de item de lista e listas ordenadas, diferentes marcadores de item de listas não ordenadas e imagem como marcador de item da lista.
Nenhum comentário:
Postar um comentário