CSS/Funcionamento

CSS
	Funcionamento

Sintaxe fundamental

A 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

Existen 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>

Empregando o elemento style no interior do documento, xeralmente na cabeceira. Por exemplo:

<!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

Algunhas cuestións básicas á hora de empregar CSS son as seguintes:

No seguinte exemplo, h1{color: red;}, o selector h1 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