Posted by : Philipe Monteiro in (Curso CSS, Tutoriais)
CSS parte 1 – Sintaxe e regras
Tagged Under : Curso CSS
E ae pessoal, sou o Juan Santos, irei postar artigos referentes a CSS aqui no Zoom Digital.
Bom vamos lá, vou começar do começo falando sobre a utilização do CSS, sua sintaxe e algumas regras.
Primeiramente dentro de seu arquivo HTML, mais precisamente entre as tags <HEAD> e </HEAD> poderá ser inserida a seguinte linha para vincular o arquivo CSS ao seu documento:
<link href=”estilo.css” rel=”stylesheet” type=”text/css”>
O browser lerá as regras de estilo do arquivo estilo.css, e formatará a página de acordo com elas.
Uma folha de estilo não deve conter nenhuma tag HTML. Devem ser sempre “salvas” com uma extensão .css
A sintaxe CSS é formada por seletor, propriedade e valor da seguinte forma:
seletor { propriedade:valor; }
Seletor: Trata-se do elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID. (por exemplo: <p>, <h1>, <form>, .minhaclasse, #meuid …);
Propriedade: É o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background, …).
Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, …)
Abaixo um exemplo para alterar do fundo da página toda, onde o seletor é o BODY, a propriedade é o fundo (BACKGROUND) e o valor é a cor azul (BLUE):
body {
background: blue;
}
Agrupando seletores
É possível também agrupar seletores, caso deseje definir uma mesma cor para um parágrafo e para um link ao invés de digitar duas vezes a mesma coisa, poderá agrupá-los desde que sejam separados por vírgula:
p, a{
font-color: blue;
}
Seletor Classe
As classes podem ser aplicadas para quaisquer elementos HTML, e na folha de estilo serão definidas as regras CSS.
Elas são inseridas nos elementos HTML da seguinte forma:
<div class=”teste”>TEXTO</div>
E no CSS ficam (Observem que deverá ser inserido sempre um ponto “.” antes do nome da classe definida):
.teste{
propriedade: valor;
}
Seletor ID
O seletor ID funciona de forma semelhante ao seletor classe, porém só podem ser definidos uma única vez dentro da página para um único elemento, enquanto as classes podem ser definidas para ilimitados elementos dentro da página.
Eles são inseridas nos elementos HTML da seguinte forma:
<div id=”teste”>TEXTO</div>
E no CSS ficam (Observem que deverá ser inserido sempre uma tralha “#” antes do nome do ID definido):
#teste{
propriedade: valor;
}
Por enquanto é isso, lembrando que os arquivos .css podem ser editados através de qualquer editor de texto, recomendo o Top Style Lite pois além de facilitar a criação, também mostra uma pré-visualização da edição e esta versão é gratuita.
Até a próxima !
