CSS/Funcionamento
CSS | ||
Funcionamento |
Sintaxe fundamental
editarA linguaxe CSS funciona a base de regras, é dicir, declaracións sobre o estilo dun ou máis elementos. As follas de estilo están compostas por unha ou máis destas regras aplicadas a un documento HTML ou XML. A regra consta de dúas partes: o selector e a definición. Ao mesmo tempo, a definición está composta por parellas de propiedade e valor.
Un exemplo moi sinxelo de regra en CSS podería ser o seguinte:
h1 {color: red;}
Onde:
h1
sería o selector, e{color: red;}
sería a definición.
O selector funciona como ligazón entre o documento e o estilo, indicando os elementos que van verse afectados por esa definición. A definición é a parte da regra que establece cal será o efecto. No exemplo anterior, o selector h1
indica que todos os elementos h1
se verán afectados pola definición, onde se indica que a propiedade color
vai ter o valor red
(vermello).
Formas de uso
editarExisten tres formas de dar estilo a un documento mediante regras CSS:
- Empregando un documento CSS externo ligado ao documento a través dun elemento
link
, que debe ir na cabeceira do documento. Véxase o seguinte exemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Título</title>
<link rel="stylesheet" type="text/css" href="http://www.w3.org/css/officeFloats.css" />
</head>
<body>
<!-- [...] -->
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Título</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman", serif;
color: red;
background-color: #d8da3d;
}
h1 {
font-family: Helvetica, Geneva, Arial, sans-serif;
}
</style>
</head>
<body>
<!-- [...] -->
</body>
</html>
- Empregando estilos directamente sobre aqueles elementos que o permiten a través do atributo
style
. Porén, o uso desta técnica supón perder unha das principais vantaxes do CSS: a separación de contido e presentación.
Algunhas cuestións básicas
editarAlgunhas cuestións básicas á hora de empregar CSS son as seguintes:
- No seguinte exemplo,
h1{color: red;}
, o selectorh1
dille ao navegador a parte do ao documento que se verá afectada. Os selectores poden aparecer individualmente ou agrupados, separándoos con comas:
h1, h2, h3 {
color: red;
}
Ou o que sería o mesmo:
h1 {color: red;}
h2 {color: red;}
h3 {color: red;}
- A propiedade, que neste caso sería
color
, indica que aspecto se vai cambiar. Neste exemplo, a propiedade que cambiará será a cor do texto. As propiedades a modificar mediante CSS para un mismo selector poden agruparse, pero será necesario separar cada unha delas cun punto e coma («;»).
p {text-align:center;color:red}
Normalmente defínese unha propiedade por liña, como pode verse no seguinte exemplo:
h1 {
padding-left: 11em;
font-family: Georgia, "Times New Roman",Times, serif;
color: red;
background-color: #d8da3d;
}
- O valor da propiedade vai representado á dereita dos dous puntos («:») que seguen ao nome desta. É importante lembrar que se o valor están formado por máis dunha palabra (é dicir, leva espazos en branco) hai que poñelo entre comas simples («'») ou dobres («"»).
p {font-family: "sans serif";}
CSS | ||
Funcionamento |