11.07.2015 Views

el tutorial de Dreamweaver

el tutorial de Dreamweaver

el tutorial de Dreamweaver

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Unidad 17. Estilos CSS Avanzado (IV)17.4Pseudo-clases y Pseudo<strong>el</strong>ementosCSSPor último, y para terminar con los s<strong>el</strong>ectores veremos las pseudo-clases, <strong>el</strong>ementos queañadiremos a los s<strong>el</strong>ectores para evi<strong>de</strong>nciar algún estado.Y los pseudo-<strong>el</strong>ementos, que aplicaremos sobre los s<strong>el</strong>ectores en dos casos muy sencillos.Primero veremos 4 tipos diferentes <strong>de</strong> pseudo-clases, que hasta ahora sólo pue<strong>de</strong>n aplicarse sinningún problema sobre la etiqueta A (que utilizamos para crear vínculos). Son: :link, :visited, :hovery :active.Incluyendo estas pseudo-clases en nuestros estilos CSS podremos modificar <strong>el</strong> modo en <strong>el</strong> que sevisualizarán los enlaces.Veamos <strong>el</strong> siguiente ejemplo:a:link { color: red; }a:visited { color: blue; }a:hover { color: green; }a:active { color: y<strong>el</strong>low; }Esto hará que los enlaces se muesten <strong>de</strong> color rojo (red) en nuestra página. Es <strong>el</strong> estado link.Cuando ya hayan sido visitados por <strong>el</strong> usuario se quedarán <strong>de</strong> color azul (blue). Es <strong>el</strong> estadovisited. Este estado se renovará <strong>de</strong>pendiendo d<strong>el</strong> navegador utilizado y se mostrará durante untiempo <strong>de</strong>terminado (una sesión, etc...).En <strong>el</strong> momento en que coloques <strong>el</strong> ratón sobre él se mostrará <strong>de</strong> color ver<strong>de</strong> (green). Es <strong>el</strong> estadohover.Y finalmente en <strong>el</strong> momento que se haga clic sobre él, y mientras se mantenga pulsado <strong>el</strong> botón severá <strong>de</strong> color amarillo (y<strong>el</strong>low). Es <strong>el</strong> estado active.Prueba este enlacePue<strong>de</strong>s aplicar estas pseudo-clases <strong>de</strong> cualquier forma <strong>de</strong> las anteriores.a.menu:hover { text-<strong>de</strong>coration: none; }Esta línea hará que los <strong>el</strong>ementos A <strong>de</strong> la clase menu no muestren subrayado (ni ningún tipo <strong>de</strong><strong>de</strong>coración) cuando se coloque <strong>el</strong> ratón sobre él.

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!