Los últimos tutoriales de desarrollo web
×

CSS Tutorial

CSS CASA CSS Introducción CSS Sintaxis CSS Cómo CSS Colores CSS Antecedentes CSS Fronteras CSS márgenes CSS Relleno CSS Anchura altura CSS Texto CSS Fuentes CSS Campo de golf CSS lista CSS mesa CSS Modelo de cuadro esquema CSS CSS visualización CSS Anchura máxima Posición CSS CSS Flotador CSS Inline-block CSS Alinear CSS combinadores CSS Pseudo-clase CSS Pseudo-elemento CSS Barra de navegación CSS Menús desplegables CSS La información sobre herramientas CSS galería de imágenes CSS Opacidad imagen CSS Sprites de imagen CSS Attr selectores Formas CSS CSS contadores

CSS3

CSS3 Introducción CSS3 Esquinas redondeadas CSS3 Imágenes de frontera CSS3 Antecedentes CSS3 Colores CSS3 gradientes CSS3 Oscuridad CSS3 Texto CSS3 Fuentes CSS3 Transformaciones 2D CSS3 Transformaciones 3D CSS3 transiciones CSS3 animaciones CSS3 imágenes CSS3 Botones CSS3 Paginación CSS3 varias columnas CSS3 Interfaz de usuario CSS3 caja de medición CSS3 Flexbox CSS3 consultas de medios CSS3 Ejemplos MQ

CSS Diseño web adaptable

Diseño web adaptable Introducción Diseño web adaptable ventana Diseño web adaptable Vista en cuadrícula Diseño web adaptable consultas de medios Diseño web adaptable imágenes Diseño web adaptable vídeos Diseño web adaptable marcos

CSS Examples

CSS Ejemplos CSS Examen CSS Certificado

CSS References

CSS Referencia CSS selectores CSS funciones CSS referencia Aural CSS Web Safe Fuentes CSS animatable CSS Unidades CSS PX-EM Convertidor CSS Colores CSS Los valores de color CSS Los nombres de color CSS3 Soporte para el navegador

 

CSS Campo de golf


Con CSS, enlaces pueden ser de estilo de diferentes maneras.

Texto del enlace de texto Enlace Enlace Botón Botón de Enlace

Enlaces de estilo

Los enlaces pueden ser de estilo con cualquier propiedad CSS (por ejemplo, color , font-family , background , etc.).

Ejemplo

a {
    color: hotpink;
}
Inténtalo tú mismo "

Además, los enlaces pueden ser de estilo diferente dependiendo del estado en que se encuentran.

Los cuatro estados son enlaces:

  • a:link - un enlace sin visitar la normalidad
  • a:visited - un vínculo que el usuario ha visitado
  • a:hover - un enlace cuando los usuario se desplaza sobre ella
  • a:active - un enlace el momento en que se hace clic

Ejemplo

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}
Inténtalo tú mismo "

Al configurar el estilo de varios estados de enlace, hay algunas reglas de orden:

  • a:hover debe venir después a:link y a:visited
  • a:active debe venir después a:hover

Decoración de texto

El text-decoration propiedad se ha utilizado para eliminar los subrayados de enlaces:

Ejemplo

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}
Inténtalo tú mismo "

Color de fondo

El background-color propiedad se puede utilizar para especificar un color de fondo para los enlaces:

Ejemplo

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
Inténtalo tú mismo "

Avanzadas - Botones de Enlace

Este ejemplo demuestra un ejemplo más avanzado, donde combinamos varias propiedades CSS para mostrar enlaces como cajas / botones:

Ejemplo

a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: red;
}
Inténtalo tú mismo "

Ejemplos

Más ejemplos

Añadir a diferentes estilos de hipervínculos
Este ejemplo muestra cómo agregar otros estilos de hipervínculos.

Avanzada - Crear un botón de enlace con las fronteras
Otro ejemplo de cómo crear cajas de enlace / botones.


Ponte a prueba con los ejercicios!

Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4»