Continuación Tema Clase 19 de Abril:
TUTORIAL CSS:
Lección 6: Enlaces
Los enlaces en CSS permiten definir estas propiedades de forma diferente dependiendo del estado del mismo, es decir, si el enlace se ha visitado, no se ha visitado, si es el enlace activo o si el cursor está sobre dicho enlace. Esto permite añadir efectos. Para controlar estos efectos se usan lo que se ha denominado como pseudo-clases.
¿Qué es una pseudo-clase?
tiene en cuenta diferentes condiciones o eventos al definir una propiedad para una etiqueta HTML.
los enlaces se especifican en HTML con la etiqueta <a>.
Todo enlace tiene diferentes estados. Ejemplo, visitado o no visitado, enlaces activos y cuando el cursor se coloca o pasa sobre el enlace.
Puedes usar una pseudo-clase para asignar diferentes estados:
a:link (No visitados)
a:visited (visitados)
a:active (Enlaces Activos)
a:hover (Cursor sobre el enlace o cuando este pasa sobre el)
a:link {
color: blue;
}
a:visited {
color: red;
}
Pseudo-clase a:link
Enlaces que dirigen a páginas que el usuario no ha visitado.
a:link {
color: #6699CC;
}
Pseudo-clase a:visited
Enlaces que dirigen a páginas que el usuario ya ha visitado.
a:visited {
color: #660099;
}
Pseudo-clase a:active:
Enlaces que están activos.
a:active {
background-color: #FFFF00;
}
Pseudo-clase a:hover
Cuando el puntero del ratón pasa por encima de un enlace.
Por ejemplo, si queremos que nuestros enlaces sean de color naranja y estén en cursiva cuando el cursor pase sobre ellos, el código CSS que utilizaremos será el siguiente:
a:hover {
color: orange;
font-style: italic;
}
Propiedades que se pueden aplicar a los enlaces:
- letter-spacing
- text-transform
Quitar el Subrayado de los Enlaces: Con la propiedad text-decoration:none;
a {
text-decoration:none;
}
Agrupación de elementos con el atributo class
IMPORTANTE: Se pueden definir las propiedades para los elementos que pertenecen a una clase usando .nombredelaclase (antes se coloca el selector-etiqueta HTML) en la hoja de estilo del documento.
Digamos que tenemos dos listas de enlaces con los diferentes tipos de uva usados para el vino tinto y el blanco. El código HTML sería el siguiente:
<p>Uvas para el vino blanco:</p>
<ul>
<li><a href="ri.htm">Riesling</a></li>
<li><a href="ch.htm">Chardonnay</a></li>
<li><a href="pb.htm">Pinot Blanc</a></li>
</ul>
<p>Uvas para el vino tinto:</p>
<ul>
<li><a href="cs.htm">Cabernet Sauvignon</a></li>
<li><a href="me.htm">Merlot</a></li>
<li><a href="pn.htm">Pinot Noir</a></li>
</ul>
Los enlaces relativos al vino blanco sean amarillos, los enlaces relacionados con el vino tinto sean rojos, y el resto de enlaces de la página web sigan siendo azules.
Se asigna una clase para cada tipo de enlace, usando el atributo class.
<p>Uvas para el vino blanco:</p>
<ul>
<li><a href="ri.htm" class="whitewine">Riesling</a></li>
<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
</ul>
<p>Uvas para el vino tinto:</p>
<ul>
<li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
<li><a href="me.htm" class="redwine">Merlot</a></li>
<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
</ul>
A partir de aquí, podemos definir propiedades especiales para los enlaces que hacen referencia al vino tinto y al vino blanco, respectivamente.
a {
color: blue;
}
a.whitewine {
color: #FFBB00;
}
a.redwine {
color: #800000;
}
Identificación de un elemento usando el atributo id
Identificar un elemento único. Esto se hace con el atributo id.
Con un atributo id no pueden existir dos elementos dentro del mismo documento con el mismo id. Cada id tiene que ser único.
IMPORTANTE: Como se muestra en el ejemplo anterior, se pueden definir las propiedades de un elemento específico usando #nombredelidentificador en la hoja de estilo del documento.
Sería normal asignar un id a cada capítulo de la siguiente manera:
<h1 id="c1">Capítulo 1</h1>
...
<h2 id="c1-1">Capítulo 1.1</h2>
...
<h2 id="c1-2">Capítulo 1.2</h2>
...
<h1 id="c2">Capítulo 2</h1>
...
<h2 id="c2-1">Capítulo 2.1</h2>
...
<h3 id="c2-1-2">Capítulo 2.1.2</h3>
...
Digamos que el título del capítulo 1.2 tiene que estar en rojo. Usando el código CSS necesario, se podría hacer así:
Agrupación de elementos (span y div)
Los elementos <span> y <div> se usan para agrupar y estructurar un documento, y se usarán, a menudo, junto con los atributos class e id.
Agrupación con <span>
El elemento <span>: Elemento neutro que no añade nada al documento en sí.
Pero con CSS <span> : Se usa para añadir características visuales distintivas a partes específicas de texto en los documentos.
Ej: podemos marcar dichas ventajas con el elemento <span>. A cada elemento span se le añade el atributo class, que podemos definir así en nuestra hoja de estilo:
<p>El que pronto se acuesta y pronto se levanta,
es hombre <span class="ventaja">saludable</span>,
<span class="ventaja">rico</span>
y <span class="ventaja">sabio</span>.</p>
El código CSS necesario para producir este efecto es el siguiente:
span.benefit {
color:red;
}
Agrupación con el elemento <div>
<div>: se usa para agrupar uno o más elementos a nivel de bloque.
Veamos un ejemplo:
<div id="democrats">
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>
<div id="republicans">
<ul>
<li>Dwight D. Eisenhower</li>
<li>Richard Nixon</li>
<li>Gerald Ford</li>
<li>Ronald Reagan</li>
<li>George Bush</li>
<li>George W. Bush</li>
</ul>
</div>
En nuestra hoja de estilo podemos utilizar la agrupación del mismo modo que antes:
#democrats {
background:blue;
}
#republicans {
background:red;
}
