mirror of
https://github.com/SrIzan10/edicion-en-html.git
synced 2026-06-06 00:56:54 +00:00
826 lines
27 KiB
HTML
826 lines
27 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
<html lang="es-es">
|
|
<head>
|
|
|
|
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
|
|
<title>CSS - Primeros pasos</title>
|
|
|
|
|
|
<link rel="stylesheet" href="../nvu2005.css" type="text/css">
|
|
|
|
<!-- compliance patch for microsoft browsers --><!--[if lt IE 7]> <script src="../ie7/ie7-standard-p.js" type="text/javascript"></script> <![endif]-->
|
|
<link rel="stylesheet" href="css3.css" type="text/css">
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
<div id="localizador">
|
|
<p>Estilos>>Primeros pasos</p>
|
|
|
|
</div>
|
|
|
|
<div id="flechadcha">
|
|
<a href="css3.html" title="avanzar"><img src="../Images/flechadcha.gif" border="0"></a>
|
|
</div>
|
|
<div id="flechaizq">
|
|
<a href="css1.html" title="retroceder"><img src="../Images/flechaizq.gif" border="0"></a>
|
|
</div>
|
|
|
|
|
|
<div id="contenido">
|
|
|
|
<p>Para introducirnos en el mundo de las CSS iremos presentando
|
|
la información en pequeños bloques,
|
|
acompañados de un ejemplo que muestre el resultado. En
|
|
muchos casos les seguirá una práctica muy simple
|
|
que permita aplicar lo expuesto. La recomendación
|
|
es que vayas paso a paso y que, en cuanto tengas cierta seguridad,
|
|
experimentes ampliando el ejercicio propuesto con elementos similares
|
|
intentando prever los resultados que vas a obtener. Si lo haces
|
|
así es posible que en algún momento te encuentres
|
|
con que no todo sale como pretentes, pero no te preocupes porque lo
|
|
más probable es que algo más adelante encuentres
|
|
la respuesta al problema que se te ha planteado. </p>
|
|
|
|
<h2>Sintaxis básica </h2>
|
|
|
|
<p>La sintaxis general de cualquier declaración de
|
|
estilo, va a
|
|
estar compuesta por tres elementos:</p>
|
|
|
|
<p class="resaltadocentro">selector
|
|
{propiedad:valor} </p>
|
|
|
|
<p>donde selector va a ser, básicamente, el elemento
|
|
html que deseamos definir, la propiedad el atributo que queremos
|
|
modificar, apareciendo por último el valor que deseamos
|
|
asignarle al atributo. La propiedad se separa del atributo mediante dos
|
|
puntos y ambos se encierran entre llaves. Aunque no es imprescindible
|
|
cuando sólo hay una propiedad es conveniente
|
|
añadir un punto y coma al final de cada par
|
|
propiedad / valor (nos será muy útil para
|
|
facilitar la
|
|
lectura cuando se vayan complicando algo más las
|
|
especificaciones ya que entonces sí que es necesario
|
|
utilizar el punto y coma como separador)</p>
|
|
|
|
<div>
|
|
<p class="avisos">Cuando los
|
|
valores requieren especificar un tipo de unidad, esta se indica a
|
|
continuación del valor numérico, sin espacio de
|
|
separación: 1cm sería una notación
|
|
correcta, mientras que 1 cm no lo sería.</p>
|
|
|
|
</div>
|
|
|
|
<h2>El editor CSS de N|VU</h2>
|
|
|
|
<p>Verás que constantemente se hará
|
|
referencia a los códigos con los que se obtiene un
|
|
determinado efecto. Es conveniente que te vayas familiarizando con
|
|
ellos, pero al principio te resultará de gran ayuda la
|
|
utilización del editor de estilos que integra N|VU, al que
|
|
puedes acceder desde la opción de menú <span class="refmenu">herramientas <img src="../imagenes/flechamenu.png" height="13" width="14">
|
|
editor css</span></p>
|
|
|
|
<p><a href="javascript:void(0)" onclick="window.open('presentaciondeleditordecss.swf','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=880,height=443')">Ver vídeo de ejemplo</a> </p>
|
|
<p>
|
|
</p>
|
|
Aunque posteriormente veremos otras formas más eficientes
|
|
vamos a empezar a familiarizarnos con el editor mediante la
|
|
creación de hojas de estilo internas para lo que seguiremos
|
|
estos pasos </p>
|
|
<ol>
|
|
|
|
<li>Pulsar el botón style</li>
|
|
|
|
<li>Crear hoja de estilo</li>
|
|
|
|
<li>Pulsar <span class="refmenu">regla</span></li>
|
|
|
|
<li>Indicar la clase, tipo o identificador. Para que la regla
|
|
afecte a un elemento html habrá que poner su nombre, sin los
|
|
ángulos.</li>
|
|
|
|
<li>Pulsar <span class="refmenu">crear regla de
|
|
estilo</span></li>
|
|
|
|
<li>Utilizar las pestañas para indicar los atributos
|
|
y valores aplicables.</li>
|
|
|
|
</ol>
|
|
|
|
<div class="practicas">
|
|
<img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 76" title="Actividad 76" src="../imagenes/numeracion/setentayseis.gif">
|
|
<ul>
|
|
|
|
<li>Carga en el
|
|
editor la página <a href="quijote1.html" target="_blank">quijote1.html</a></li>
|
|
|
|
<li>Utliza el Editor CSS para crear una nueva hoja de
|
|
estilo.</li>
|
|
|
|
<li>Pasa a la vista <img style="width: 99px; height: 21px;" alt="Código fuente" src="../imagenes/pestanacodigofuente.png"> para comprobar
|
|
cómo se han creado en la sección
|
|
<head> un par de selectores para englobar las reglas de
|
|
estilos que iremos creando. Guárdalo como <strong>actividad76.html</strong></li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<h2>Selectores de tipos</h2>
|
|
|
|
<p>El selector más sencillo es el que denominamos de
|
|
tipo. Se refiere a una etiqueta definida en el lenguaje HTML. Su gran
|
|
ventaja será que con una única
|
|
modificación en una hoja de estilos podremos modificar la
|
|
apariencia de todos las páginas de un sitio al variar la
|
|
presentación de un determinado tipo.</p>
|
|
|
|
<p class="ejempcss">Ej: body {color:white}</p>
|
|
|
|
<p>Para cada selector podremos establecer más de una
|
|
propiedad. Para
|
|
separarlas utilizaremos el punto y coma, siendo habitual para favorecer
|
|
la legibilidad, que cada propiedad se escriba en un renglón.</p>
|
|
|
|
<p><a href="javascript:void(0)" onclick="window.open('muestra1.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=680,height=200')">Ver
|
|
ejemplo </a></p>
|
|
|
|
<div class="practicas">
|
|
<img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 77" title="Actividad 77" src="../imagenes/numeracion/setentaysiete.gif">
|
|
<ul>
|
|
|
|
<li>Si lo habías cerrado vuelve a abrir el
|
|
archivo <strong>actividad76.html</strong></li>
|
|
|
|
<li>Crea una
|
|
regla para que los párrafos se presenten
|
|
en color azul marino.</li>
|
|
|
|
<li>Cierra el editor CSS y comprueba el resultado.</li>
|
|
|
|
<li>Aprovecha la visualización para hacer que el
|
|
texto
|
|
Primera Parte se convierta
|
|
en un título de tipo <code>h1</code> y el
|
|
título del
|
|
Capítulo 1 en un <code>h2</code>.</li>
|
|
|
|
<li>Mira en la pestaña <img style="width: 99px; height: 21px;" alt="Código fuente" src="../imagenes/pestanacodigofuente.png">
|
|
cómo se ha definido la regla para los párrafos</li>
|
|
|
|
<li>Vuelve al editor de estilos y haz que el párrafo
|
|
esté justificado y con letra de la familia sans-serif
|
|
(tendrás que hacer doble clic sobre la hoja de
|
|
estilo para que se desplieguen los selectores y poder elegir el que
|
|
hemos creado ).</li>
|
|
|
|
<li>Crea una regla para que los títulos <code>h1</code>
|
|
se presenten
|
|
en fuente sans-serif y color granate y otra para que los <code>h2</code>
|
|
sean
|
|
también sans-serif pero en color gris de intensidad media.</li>
|
|
|
|
<li>Comprueba en la pestaña <img style="width: 99px; height: 21px;" alt="Código fuente" src="../imagenes/pestanacodigofuente.png">
|
|
cómo han quedado definidos los estilos</li>
|
|
|
|
<li>Guarda el trabajo como <strong>actividad77.html</strong></li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<h2>Selector universal</h2>
|
|
|
|
<p>Se representa mediante el asterisco (*) y se refiere a
|
|
cualquier elemento del documento HTML. Su
|
|
utilización está muy relacionada con las clases y
|
|
selectores ID, pero suele omitirse.</p>
|
|
|
|
<h2>Agrupando selectores </h2>
|
|
|
|
<p>Si queremos aplicar una propiedad común a varios
|
|
selectores sin
|
|
necesidad de tener que definirla en cada caso podemos agruparlos
|
|
listándolos separados por comas y haciendo una
|
|
definición común para
|
|
todos ellos.</p>
|
|
|
|
<p class="ejempcss">Ej.: h1,h2,h3 {color:blue}</p>
|
|
|
|
<p><a href="javascript:void(0)" onclick="window.open('muestra2.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=680,height=290')">Ver
|
|
ejemplo</a></p>
|
|
|
|
<div class="practicas"><img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 78" title="Actividad 78" src="../imagenes/numeracion/setentayocho.gif">
|
|
<ul>
|
|
|
|
<li>Vuelve al archivo <strong>actividad77.html</strong>
|
|
que recoge los últimos pasos que hemos dado.</li>
|
|
|
|
<li>Crea una regla que agrupe <code>h1</code>
|
|
y <code>h2</code> para especificar que deben
|
|
llevar el tipo de letra de la familia sans-serif.</li>
|
|
|
|
<li>Borra este atributo en cada una de las reglas individuales
|
|
para <code>h1</code> y <code>h2</code></li>
|
|
|
|
<li>Comprueba que ambos títulos siguen
|
|
presentándose con la fuente que hemos
|
|
seleccionado. </li>
|
|
|
|
<li>Guarda este nuevo paso como <strong>actividad77.html</strong></li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<h2>Selectores contextuales</h2>
|
|
|
|
<p><img class="flotizq" style="width: 500px; height: 443px;" alt="Ejemplo esquemático de relaciones de herencia en una pagina html" title="Ejemplo esquemático de relaciones de herencia en una pagina html" src="documentohtml.png"></p>
|
|
|
|
<p>La imagen que aparece a la izquierda corresponde a un ejemplo
|
|
esquemático de la organización de los elementos
|
|
en una
|
|
página html.</p>
|
|
|
|
<p>Se puede observar cómo determinados elementos se
|
|
encuentran "anidados" dentro de otros.</p>
|
|
|
|
<p>Esta situación genera unas relaciones que pueden
|
|
calificarse
|
|
de familiares (de hecho, la nomenclatura para indicarlas
|
|
utilizará los términos padre, hijo, ascendiente y
|
|
descendiente entre otros).</p>
|
|
|
|
<p>Vamos a ver a continuación algunos ejemplos de lo
|
|
que
|
|
significa esta jerarquía en la organización de
|
|
los
|
|
elementos de una página html para lo que
|
|
podremos guiarnos
|
|
por el
|
|
siguiente
|
|
esquema de relaciones:</p>
|
|
|
|
<p> <br clear="all">
|
|
|
|
</p>
|
|
|
|
<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
|
|
|
<th>Relación</th>
|
|
|
|
<th>Descripción</th>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Un elemento es <strong>padre</strong> de
|
|
otro si...</td>
|
|
|
|
<td>El segundo elemento se encuentra directamente entre la
|
|
apertura y el cierre de las etiquetas del elemento padre.<br>
|
|
|
|
Ej: <code><p>Los
|
|
<strong>rumiantes</strong> son
|
|
<em>mamíferos</em></code><br>
|
|
|
|
El elemento <code><p></code> es padre de <code><strong></code>
|
|
y de <code><em></code></td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Un elemento es <strong>hijo</strong> de
|
|
otro si...</td>
|
|
|
|
<td>La relación anterior es
|
|
recíproca, por lo que
|
|
los elementos <code><strong></code>
|
|
y <code><em></code>> del
|
|
ejemplo
|
|
son hijos del
|
|
elemento <code><p></code></td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Un elemento es <strong>ascendiente</strong>
|
|
de otro si...</td>
|
|
|
|
<td>Si el segundo se encuentra entre las etiquetas de
|
|
apertura y cierre del primero (aunque sea de forma indirecta). <br>
|
|
|
|
Ej: <code><div><br>
|
|
|
|
<p>Los
|
|
<strong>rumiantes</strong> son
|
|
<em>mamíferos</em><br>
|
|
|
|
</div></code><br>
|
|
|
|
El elemento <code><div></code> es
|
|
ascendiente de <code><p></code>
|
|
de <code><strong></code> y de<code>
|
|
<em></code></td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Un elemento es <strong>descendiente</strong>
|
|
de otro si...</td>
|
|
|
|
<td>Está incluido, directa o indirectamente,
|
|
dentro de
|
|
otro elemento. En el ejemplo anterior <code><em></code>
|
|
es
|
|
desdendiente de <code><p></code> y
|
|
también de <code><div></code></td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Un elemento es <strong>adyacente</strong>
|
|
a otro si ... </td>
|
|
|
|
<td>Comparte el mismo padre y, además se
|
|
encuentra inmediatamente consecutivo al anterior.<br>
|
|
|
|
Ej: <code><p>Los
|
|
<strong>ungulados</strong> son
|
|
<em>mamíferos</em> con
|
|
<em>pezuñas</em</code>><br>
|
|
|
|
En este ejemplo sólo el primer <code><em></code>
|
|
sería adyacente a <code><strong></code>
|
|
ya que el segundo,
|
|
aunque tiene el mismo padre ya no es inmediatamente posterior.</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
<p>Los patrones para indicar estas relaciones para elaborar los
|
|
selectores serían los siguientes:</p>
|
|
|
|
<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
|
|
|
<th>Patrón</th>
|
|
|
|
<th>Utilización</th>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<th>x y</th>
|
|
|
|
<td>Para apuntar hacia cualquier elemento del tipo
|
|
y que sea <strong>descendiente</strong> de un
|
|
elemento del tipo x </td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<th>x > y</th>
|
|
|
|
<td>Para referirnos a cualquier elemento
|
|
del tipo y que sea <strong>hijo</strong> de un
|
|
elemento del tipo x </td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<th>x + y </th>
|
|
|
|
<td>Para identificar cualquier elemento del tipo y
|
|
que sea <strong>adyacente</strong> a un elemento
|
|
del tipo x</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
<p>Teniendo en cuenta estas relaciones podemos realizar una
|
|
selección muy específica de elementos del
|
|
documento para
|
|
aplicarles un determinado estilo. Podríamos, por ejemplo,
|
|
querer que
|
|
los fragmentos que estuvieran enfatizados mediante la etiqueta
|
|
<em> aparecieran en color verde. Pero
|
|
podríamos ser incluso más
|
|
específicos indicando que sólo queremos que
|
|
aparezcan en color verde
|
|
los fragmentos enfatizados que formen parte de una lista. Esto lo
|
|
haríamos colocando primero el selector li y, a
|
|
continuación separado
|
|
por un espacio, el selector em para luego especificar las propiedades</p>
|
|
|
|
<p class="ejempcss"> Ej.:<code> li em {color: green}</code></p>
|
|
|
|
<p><a href="javascript:void(0)" onclick="window.open('muestra4.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=750,height=465')">Ver
|
|
ejemplo </a></p>
|
|
|
|
<div class="avisos"><strong>Advertencia importante:</strong>
|
|
La versión 6 de Internet Explorer sólo
|
|
es capaz de interpretar correctamente el selector
|
|
contextual que utilizamos para apuntar hacia un
|
|
descendiente. Aunque posteriormente veremos alguna forma de corregir
|
|
este error tenlo en cuenta si intentas crear algún selector
|
|
para elementos hijos o adyacentes, que sí
|
|
funcionarán correctamente en los navegadores Mozilla,
|
|
Firefox u Opera.</div>
|
|
|
|
<div class="practicas">
|
|
<img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 79" title="Actividad 79" src="../imagenes/numeracion/setentaynueve.gif">
|
|
<ul>
|
|
|
|
<li>Abre en NlVU
|
|
archivo <a href="licenciacc.html" target="_blank">licenciacc.html</a></li>
|
|
|
|
<li><span style="color: rgb(255, 0, 0); font-weight: bold;"></span>Crea
|
|
una regla para que todas los términos enfatizados
|
|
con <em> aparezcan en color azul </li>
|
|
|
|
<li>Crea otra regla para que los elementos <em>
|
|
que se encuentren dentro de un item de una lista se muestren en
|
|
negrita. </li>
|
|
|
|
<li>¿Te animas a crear una regla para que los
|
|
elementos <em> adyacentes a otro elemento
|
|
<em> se muestren de color rojo</li>
|
|
|
|
<li>Guarda el trabajo como <strong>actividad79.html</strong></li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<h2>Selectores basados en atributos</h2>
|
|
|
|
<p>Si la posibilidad de utilizar selectores contextuales aporta
|
|
una gran flexibilidad, todavía es mucho mayor la que nos
|
|
brinda la posibilidad de decidir que un estilo se aplicará a
|
|
aquellos elementos que cumplan determinados atributos.</p>
|
|
|
|
<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
|
|
|
<th>Patrón</th>
|
|
|
|
<th>Utilización</th>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<th>x[atributo]</th>
|
|
|
|
<td>Para apuntar hacia cualquier elemento del tipo
|
|
x que cuente con un determinado atributo (independientemente del valor
|
|
que tenga el atributo) </td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<th>x[atributo="valor"]</th>
|
|
|
|
<td>Para referirse a cualquier elemento del tipo x
|
|
que cuente con un
|
|
determinado atributo cuyo valor sea el especificado </td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<th>x[atributo~="valor"] </th>
|
|
|
|
<td>Algunos elementos pueden admitir varios valores
|
|
separados por espacios para un atributo. Este patrón nos
|
|
sirve para identificar a cualquier elemento
|
|
del tipo x que cuente con un
|
|
determinado atributo alguno de cuyos valores sea el especificado.</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="avisos">Al igual que ocurría en el
|
|
caso de los selectores
|
|
contextuales no existe soporte para este tipo de selectores en las
|
|
versiones iguales o inferiores a la 6 de Internet Explorer.<br>
|
|
|
|
</div>
|
|
|
|
<div class="practicas">
|
|
<img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 80" title="Actividad 80" src="../imagenes/numeracion/ochenta.gif">
|
|
<ul>
|
|
|
|
<li>Abre el archivo <a href="selectoresporatributo.html" target="_blank">selectoresporatributo.html</a></li>
|
|
|
|
<li><span style="color: rgb(255, 0, 0); font-weight: bold;"></span>Crear
|
|
una hoja de estilo con una regla para que todos los elementos
|
|
que
|
|
incluyan el atributo <code>face</code> en la etiqueta <code>font</code>
|
|
se muestren en negrita.</li>
|
|
|
|
<li>Añade una regla para que aquellos elementos que
|
|
tengan el valor <code>Courier</code> como atributo
|
|
único de <code>face</code> se
|
|
muestren en itálica.</li>
|
|
|
|
<li>Por fin una tercera regla que haga que los que tengan,
|
|
entre
|
|
otros,
|
|
el valor <code>serif</code> en el atributo <code>face</code>
|
|
se muestren en color verde.<br>
|
|
|
|
</li>
|
|
|
|
<li>Comprueba visualmente los resultados. Recuerda que,
|
|
mientras
|
|
no
|
|
apliquemos un parche, Internet Explorer será incapaz de
|
|
aplicar
|
|
estos selectores.</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<h2>Clases </h2>
|
|
|
|
<p>El selector class nos permite definir diferentes estilos para
|
|
el mismo elemento HTML. El ejemplo siguiente supondría la
|
|
posibilidad de tener dos tipos de párrafo en el documento:
|
|
uno en azul y otro en rojo, en función de la clase que cada
|
|
uno lleve indicada. Para establecer la clase añadimos un
|
|
punto y el nombre que le adjudicamos a la clase a
|
|
continuación del selector y antes de iniciar las propiedades.</p>
|
|
|
|
<p class="ejempcss">Ej.:<code> p.azul {color: blue}
|
|
p.rojo
|
|
{color: red}</code></p>
|
|
|
|
<p><a href="javascript:void(0)" onclick="window.open('muestra3.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=780,height=370')">Ver
|
|
ejemplo </a></p>
|
|
|
|
<div class="avisos">
|
|
<p>Se puede aplicar más de una
|
|
clase a un elemento html. Al aplicar las clases lo haremos
|
|
separándolas por un espacio.</p>
|
|
|
|
<p class="ejempcss">Ej.: <p class="azul
|
|
centrado">Texto</p></p>
|
|
|
|
</div>
|
|
|
|
<p>Es muy frecuente que la definición de las clases se
|
|
haga sin
|
|
ligarlas a una etiqueta concreta. En el ejemplo anterior
|
|
podría
|
|
omitirse la referencia al elemento p y eso haría que las
|
|
características de la clase se aplicaran a cualquier
|
|
elemento al que se
|
|
le aplicara. En este caso el selector empieza con un punto seguido del
|
|
nombre de la clase. </p>
|
|
|
|
<p class="ejempcss">Ej.: <code>.azul {color: blue}
|
|
.rojo {color:
|
|
red}</code></p>
|
|
|
|
<p class="ejempcss"><code>El efecto será
|
|
equivalente
|
|
si se utiliza el selector universal: *.azul {color: blue} *.rojo
|
|
{color:
|
|
red}</code> </p>
|
|
|
|
<p><a href="javascript:void(0)" onclick="window.open('muestra5.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=780,height=428')">Ver
|
|
ejemplo</a></p>
|
|
|
|
<p>Para crear una regla de tipo clase en el editor de CSS
|
|
utilizaremos la opción <span class="refmenu">estilo
|
|
con nombre </span>y escribiremos el nombre sin precederlo con el
|
|
punto (el programa se encargará de ello).</p>
|
|
|
|
<p class="centrado"><img style="width: 491px; height: 135px;" alt="Crear una clase con el editor de CSS" title="Crear una clase con el editor de CSS" src="imagenes/crearclase.png"></p>
|
|
|
|
<p>Una vez definidas las clases, la aplicación de las
|
|
mismas en N|VU se limita a marcar el fragmento que deseamos
|
|
modificar arrastrando con el ratón y elegir la clase
|
|
correspondiente en el listado que aparece en la segunda barra de
|
|
formato. Con el procedimiento de pinchar arrastrar definiremos zonas
|
|
del documento que no tienen que coincidir con un elemento completo,
|
|
como podía ser un párrafo, lo cual hace que el
|
|
programa genere una etiqueta <code>span</code> que englobe
|
|
los fragmentos seleccionados. </p>
|
|
|
|
<p>Si lo que realmente queremos es aplicar una clase a un
|
|
elemento, por ejemplo un párrafo, una lista ordenada
|
|
completa, un contenedor genérico, etc, es preferible que lo
|
|
seleccionemos situándonos sobre cualquier punto del mismo y
|
|
marcando la etiqueta que lo identifica en la barra de estado (la que
|
|
aparezca en último lugar corresponderá al punto
|
|
en que nos encontramos). Una vez hecha esta marca podemos aplicar la
|
|
clase:</p>
|
|
|
|
<ul>
|
|
|
|
<li>eligiéndola en el desplegable de la 2ª
|
|
barra de formato </li>
|
|
|
|
<li>pulsando con el botón derecho sobre el elemento
|
|
señalado en la barra de estado y desplegando <span class="refmenu">clases</span> para elegir la adecuada </li>
|
|
|
|
</ul>
|
|
|
|
<h2>Pseudoclases</h2>
|
|
|
|
<p>Las pseudoclases se utilizan para particularizar algunos
|
|
efectos de determinados selectores en algunas situaciones especiales.
|
|
Uno de los grupos que se aplica más frecuentemente es el que
|
|
tiene que ver con la etiqueta <a> para marcar diferentes
|
|
presentaciones de los enlaces.</p>
|
|
|
|
<p>La sintaxis es ligeramente diferente de la general: <strong>selector:pseudoclase
|
|
{propiedad : valor}</strong></p>
|
|
|
|
<h3><strong>Pseudoclases
|
|
relacionadas con los vínculos</strong></h3>
|
|
|
|
<p>Su función es cambiar la apariencia
|
|
según el estado del vínculo. Existen cuatro
|
|
tipos: </p>
|
|
|
|
<ul>
|
|
|
|
<li><code>a:link</code> sirve
|
|
para establecer
|
|
las propiedades de un enlace no visitado</li>
|
|
|
|
<li><code>a:visited</code> indica las
|
|
propiedades que adoptará un enlace visitado</li>
|
|
|
|
<li><code>a:hover</code> especifica
|
|
la
|
|
apariencia que adoptará un enlace en el momento en que el
|
|
botón se sitúa sobre él.</li>
|
|
|
|
<li><code>a:active</code>
|
|
fija las propiedades
|
|
que tomará un enlace en el momento en que se pulsa sobre
|
|
él para activarlo. </li>
|
|
|
|
</ul>
|
|
|
|
<p><a href="javascript:void(0)" onclick="window.open('muestra21.htm','','statusbar=0,menubar=0,toolbar=1,directionbar=0,top=0,left=0,width=780,height=290')">Ver
|
|
ejemplo </a></p>
|
|
|
|
<div class="avisos">
|
|
<p>El orden en el que se deben especificar estas pseudoclases en
|
|
las hojas de
|
|
estilos para que tengan efecto es el que se ha utilizado para
|
|
describirlas. Esto tiene su lógica debido a que, en caso de
|
|
haber alguna contradicción entre dos selectores siempre se
|
|
aplica el enumerado en último lugar: por ello el que se
|
|
refiere al enlace activo debe ser el último para que se
|
|
eviten variaciones en la presentación mostrándose
|
|
las propiedades del enlace visitado(visited) o con el ratón
|
|
encima (hover). Por el mismo motivo la pseudoclase hover debe aparecer
|
|
detras de visited para que la apariencia del enlace pueda modificarse
|
|
al pasar el ratón sobre el mismo, independientemente de que
|
|
se haya visitado o no el enlace. Por último, visited
|
|
tendrá que ir después de link puesto que de lo
|
|
contrario se aplicaría la apariencia del enlace no visitado
|
|
aunque ya se hubiera estado en la página de destino.</p>
|
|
|
|
</div>
|
|
|
|
<p>Existen también los llamados pseudoelementos que
|
|
verás en la sección dedicada al texto pero
|
|
todavía podemos considerar la pseudoclase que se refiere al
|
|
primer elemento hijo <code>first-child</code><strong>
|
|
</strong>que nos
|
|
permitiría obtener, por ejemplo un efecto similar al que
|
|
presentan algunas ediciones impresas cuando el primer
|
|
párrafo de un capítulo se muestra en un
|
|
tamaño más grande o en itálica.</p>
|
|
|
|
<p><a href="javascript:void(0)" onclick="window.open('muestra22.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=780,height=290')">Ver
|
|
ejemplo </a></p>
|
|
|
|
<div class="practicas">
|
|
<img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 80" title="Actividad 81" src="../imagenes/numeracion/ochentayuno.gif">
|
|
<ul>
|
|
<li>Crea un documento
|
|
que contenga un enlace a una
|
|
página en la red (o
|
|
bien hazlo con un enlace a un documento local y crea también
|
|
este
|
|
último)</li>
|
|
<li>Crea una hoja de estilo en la que incluyas
|
|
características que te apetezcan para definir las
|
|
pseudoclases en el
|
|
orden especificado.</li>
|
|
<li>Comprueba las variaciones que se producen al pasar el
|
|
ratón sobre el enlace o al visitarlo y volver nuevamente a
|
|
la página.</li>
|
|
<li>Modifica el orden subiendo la pseudoclase <code>a:visited</code> al primer
|
|
lugar y comprueba lo que ocurre.</li>
|
|
<li>Introduce otras variaciones en el orden para comprobar los
|
|
efectos.</li>
|
|
<li>Guarda el trabajo como <strong>actividad81.html</strong></li>
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<h2>El selector id </h2>
|
|
|
|
<p>Mientras que el selector clase puede aplicarse a varios
|
|
elementos
|
|
del mismo o diferente tipo en una página podemos crear
|
|
también un
|
|
selector id para diferenciar elementos específicos que
|
|
añadirán alguna
|
|
característica diferente de las que tienen los elementos de
|
|
su clase.
|
|
El nombre del selector se inicia con el signo # seguido del nombre del
|
|
identificador.</p>
|
|
|
|
<p class="ejempcss">Ej: <code>#rojo {color: red}</code></p>
|
|
|
|
<p><a href="javascript:void(0)" onclick="window.open('muestra6.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=780,height=440')">Ver
|
|
ejemplo</a></p>
|
|
|
|
<p>Para crear una regla de tipo id en el editor de CSS
|
|
utilizaremos la opción <span class="refmenu">estilo
|
|
aplcado a todos los elementos coincidentes con el siguiente selector </span>y
|
|
escribiremos el nombre empezando por el signo #</p>
|
|
|
|
<p class="centrado"><img style="width: 552px; height: 139px;" alt="Crear un selector ID con el editor de CSS" title="Crear un selector ID con el editor de CSS" src="imagenes/crearid.png"></p>
|
|
|
|
Una vez definidos los selectores <code>ID</code> , la
|
|
aplicación de los
|
|
mismos habrá que realizarla seleccionando la etiqueta
|
|
correspondiente al elemento en la barra de estado y pulsando el
|
|
botón derecho para elegir entre las posibilidades que se
|
|
muestren en la opción <span class="refmenu">id</span>
|
|
del menú desplegable.
|
|
<p><a href="javascript:void(0)" onclick="window.open('muestra6.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=780,height=440')">
|
|
</a></p>
|
|
|
|
<h2>Comentarios</h2>
|
|
|
|
<p>Puede venir muy bien incluir comentarios que nos sirvan para
|
|
aclarar
|
|
o recordar algún aspecto de las especificaciones que
|
|
escribimos en una
|
|
hoja de estilo. Para hacerlo lo iniciaremos con <code>/*</code>
|
|
y lo finalizaremos
|
|
con <code>*/</code></p>
|
|
|
|
<p class="ejempcss">Ej:</p>
|
|
|
|
<p style="font-weight: normal;" class="ejempcss"><code>
|
|
/* pongo la primera línea
|
|
del párrafo con ID=muestra en versales de color azul*/</code></p>
|
|
|
|
<p style="font-weight: normal;" class="ejempcss"><code>
|
|
p#muestra:first-line {color: #0000FF;
|
|
font-variant: small-caps}</code></p>
|
|
|
|
<p style="font-weight: normal;" class="ejempcss"><code></code></p>
|
|
</div>
|
|
</body>
|
|
</html>
|