NVU 

 
INTRODUCCIÓN ÁS FOLLAS DE ESTILO  
 
Vamos a ver qué son as follas de estilos e cómo usalas para dotar ós documentos 
que creemos dunha aparencia personalizada. É importante que saibamos que para 
poder sacarlles todo o partido posible ás follas de estilos, temos que ter certos 
coñecementos da linguaxe HTML.  
Unha folla de estilos ou CSS ("Cascade Style Sheet"), é un conxunto de regras e 
características que, aplicadas a unha páxina Web ou a un conxunto delas, poden 
modificar a súa aparencia. Desta forma, podemos separar en certa forma o deseño da 
páxina do seu contido.  
Gracias ás follas de estilos podemos de algunha maneira homoxeneizar e 
automatizar o traballo que supón o deseño dunha Web. Podemos definir un estilo para 
os títulos e outro para o texto, de forma que non teñamos que modificar cada vez o 
texto e os títulos para que teñan a aparencia que queiramos.  
Unha folla de estilos pode estar contida na mesma páxina onde se utiliza ou pode 
estar definida nun arquivo aparte. Da segunda forma, podemos definir estilos para 
todo o sitio Web, mentres que da primeira teremos que escribir o mesmo código en 
cada páxina cada vez que o necesitemos. Por iso a primeira se utiliza cando se quere 
aplicar algún efecto en particular e a segunda cando ese efecto é o mesmo para todas 
as páxinas. Existe unha terceira posibilidade, e é especificar o estilo na propia etiqueta 
HTML onde queiramos usalo, co que o efecto só se producirá nese lugar.  
Isto implica coñecer código HTML e as propiedades que queiramos cambiar. Isto 
teríamos que repetilo para cada elemento do texto cuxo estilo desexamos cambiar. 
Por elo, ó ser pouco eficiente, úsase a primeira forma ou a segunda, antes 
mencionadas.  
Estas formas tamén requiren coñecer HTML. Por elo NVU nos facilita o uso de 
estilos por medio das plantillas, que nos permite usar follas de estilo con poucos 
coñecementos de HTML. 
 
 
 

  1
 NVU 
FOLLAS DE ESTILO  
 
 CREAR FOLLAS DE ESTILO  
 
NVU dispón dun editor de follas de estilo denominado CaScadeS. CaScadeS pode 
ser utilizado para producir tanto follas de estilo internas como externas. A diferenza 
dos estilos incrustados, as follas de estilo internas ou externas axudan a manter 
separadas a información do contido da do estilo. 
Para proporcionar estilo ó documento html que se edita, CaScadeS pode iniciarse 
facendo clic no menú Ferramentas e seleccionando Editor CSS, aparecendo a seguinte 
ventá a continuación. 
 

 
 
CaScadeS permite dous modos de edición de follas de estilo:  
 
1. Modo para principiantes: este modo permite crear regras asociadas a 
selectores de clase ou selectores de tipo de elemento.  
2. Modo avanzado: este modo permite crear regras sen restriccións.  
 
En caso de que no haxa folla de estilo, se creará unha nova automaticamente. Ó 
usar CaScadeS, pódense crear tanto follas de estilo internas como externas. Para crear 
unha folla de estilo interna:  
 

  2
 NVU 
1. Faremos clic no botón de elemento <style>.  
• (Opcional) Rellenaremos a información sobre Lista de medios e Título da 
folla de estilo.  
 
2. Faremos clic en Crear folla de estilo.  
 

 
 
Para crear unha folla de estilo externa:  
 
1. Faremos clic no botón de elemento <link>.  
 
2. Escribiremos a URL da folla de estilo no panel da dereita. Se non existe xa, 
crearase un novo ficheiro no sistema de arquivos local.  
 
• (Opcional) Rellenaremos la información sobre Lista de medios e Título 
da folla de estilo.  
 
3. Activaremos comprobar ó crear unha folla de estilo alternativa se esta é unha 
alternativa.  
 
Consello: gardaremos sempre o documento html antes de agregar unha folla de 
estilo local. Gardaremos tamén o documento inmediatamente antes de pechar o 
editor CSS.  

  3
 NVU 
Consello: utilizaremos o botón Recargar do panel da esquerda se a folla de estilo 
non se descarga inmediatamente.  
 
 CREAR REGRAS DE ESTILO  
 
Despois de crear unha ou máis follas de estilo para o documento html, pódense 
crear regras para cada folla de estilo de forma individual. Para usar unha folla de 
estilos concreta ó crear ou modificar regras, selecciónaa no panel da esquerda facendo 
clic sobre ela co botón esquerdo do rato. O panel da dereita mostrará entonces os 
detalles da folla de estilo na pestana Xeral. Para crear regras novas:  
 
1. Faremos clic no botón Regra do panel da esquerda.  

 
 
2. O panel da dereita mostrará opcións para especificar o tipo de regra a crear. 
Elixiremos unha entre as seguintes:  
• estilo con nome (introduza abaixo o nome da clase)  
• estilo aplicado a todos os elementos do tipo (introduza o tipo abaixo)  
• estilo aplicado a todos os elementos coincidentes con este selector  

  4
 NVU 
 
3. Rellenaremos o nome da regra.  
4. Faremos clic en Crear regra de estilo: As regras poden ser definidas usando as 
pestanas de estilo (Texto, Fondo, Bordes, Caixa, Aural) do panel da dereita. 
Para ver todas as definicións dunha regra de estilo, seleccionaremos no panel 
da esquerda e faremos clic na pestana Xeral do panel da dereita. A pestana 
Xeral mostrará todas as definicións aplicadas á regra. 

 
 
APLICAR ESTILOS 
 
Para aplicar un estilo seleccione o obxecto ó cal se lle quere aplicar o estilo e 
seleccionar na barra de formato o estilo que se quere aplicar como se amosa na imaxe 
a continuación. 

  5
 NVU 

 
 
 
EXERCICIO:  
 
Vamos a asignar a continuación unha folla de estilos a unha páxina Web que 
vamos a crear a modo de exemplo. 
 

 
 
En primeiro lugar creamos unha páxina Web calquera como a do exemplo que se 
amosa na parte superior, a continuación a gardamos na nosa carpeta “webtic”, co 
nome “index.html”.  
A continuación crearemos a nosa folla de estilos, para elo despregaremos o 
menú Ferramentas >> Editor CSS nun documento baleiro. Faremos clic no botón 
<Style> e lle damos nome ó Título por exemplo “regla” e logo pulsaremos no botón 
Crear folla de estilo (así crease unha folla de estilo interna).  

  6
 NVU 
Agora podemos poñer os estilos que queiramos utilizando o botón Regra (lle 
damos o nome regra1). Lle asignamos os estilos propios, lle cambiamos a cor ó fondo... 
(elixiremos a letra persoal batavia, de color vermello e cun fondo amarelo, tal e como 
se amosa na imaxe seguinte. 
 

 
 
Unha vez seleccionadas as opcións elixidas, marcamos co rato na ventá da 
esquerda “hoja de estilos interna” e faremos clic no botón Exportar folla de estilo e 
cambiar a versión exportada. Lle asignaremos o nome ó arquivo “hojaestilo.css” 
(¡¡¡Ollo!!!, hai que poñerlle a extensión css ó arquivo). 

  7
 NVU 

 
 
Agora o único que nos queda é enlazar a páxina “index.html” coa folla de estilos 
que acabamos de crear “hojaestilo.css”, para elo abriremos en NVU o index.html e 
despregaremos do menú Ferramentas >> Editor CSS e na ventá que se abre faremos 
clic en <link> e eliximos o arquivo que queremos enlazar, no noso caso a fola de 
estilos.  
Neste caso, en NVU aparece a ruta absoluta 
file:///C:/Documents%20and%20Settings/Equipo/Mis%20documentos/webtic/hojaesti
lo.css. Para que se quede hojaestilo.css no proceso de carga do arquivo lle teremos 
que borrar a ruta e quedarnos co nome do arquivo unicamente. Por último faremos 
clic en Crear folla de estilo. 
 

  8
 NVU 

 
 
Pois xa temos feito case todo o traballo, para aplicar a nosa folla de estilo, 
seleccionamos o texto da Web ó que llo queiramos aplicar e elixir a regra1 a asignar. 
 

 
 
Quedándonos a Web como observamos a continuación. 
 

 
 
 

  9