Sintaxe CSS
Sintaxe CSS - A sintaxe CSS é composta por 3 partes: um seletor, uma propriedade e um valor. Experimente você mesmo os exemplos de sintaxe CSS! Aprenda com a W3docs!
A sintaxe CSS é composta por 3 partes: um seletor, uma propriedade e um valor
Código da sintaxe CSS
selector {
property: value;
}O seletor é um elemento HTML ao qual pretende aplicar estilo. Pode ser qualquer tag, como <h1>, <p>, etc. Cada seletor pode ter uma ou mais propriedades.
A propriedade é o atributo de estilo de uma tag HTML. As propriedades CSS são semelhantes aos atributos HTML, mas são utilizadas especificamente para estilização (color, border, etc.). Cada propriedade tem o seu valor.
O valor é atribuído à propriedade. Por exemplo, o valor da propriedade color pode ser red ou #F1F1F1.
Exemplo de sintaxe CSS:
Exemplo de sintaxe CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a {
color: #1c87c9;
}
</style>
</head>
<body>
<a>The color of this link is #1c87c9.</a>
</body>
</html>Resultado
No exemplo acima, a tag <a> é o seletor, color é a propriedade e #1c87c9 é o valor da propriedade.
Como pode ver, a propriedade e o seu valor são escritos dentro das chavetas e separados por dois-pontos. Nota: o CSS ignora os espaços em branco adicionais entre seletores, propriedades e valores.
Um seletor também pode ter mais do que uma propriedade, separadas por ponto e vírgula.
Comentários CSS
Pode utilizar comentários CSS para adicionar explicações ao código. Não são apresentados porque os browsers ignoram-nos.
O início e o fim de um comentário CSS são indicados, respetivamente, por /* e */:
Exemplo de comentários em CSS
/*This is some comment*/Como pode ver, o texto dentro de /* e */ não é apresentado nos browsers. Utilize estes delimitadores para ocultar informações da página renderizada.
Exemplo de comentários CSS:
Exemplos de comentários CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
padding-left: 10px;
font-size: 26px;
line-height: 30px;
/*color:red;*/
}
p {
color: #1c87c9;
/*font-size:25px;
border:1px solid red;
*/
padding: 10px;
line-height: 30px;
}
</style>
</head>
<body>
<h1>CSS Comments</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</body>
</html>