Una vez que haya comenzado a incursionar en HTML 17 Ejemplos de código HTML simple que puede aprender en 10 minutos 17 Ejemplos de código HTML simple que puede aprender en 10 minutos Si conoce las siguientes 17 etiquetas HTML (y las pocas que van con ellas), Podrás crear una página web básica desde cero o modificar el código creado por una aplicación como ... Leer más, probablemente te interese agregar más potencia a tus páginas web. CSS es la mejor manera de hacerlo. CSS le permite aplicar cambios en toda la página sin tener que usar muchos estilos HTML en línea 9 Errores que no debe realizar al crear una página web Errores que no debe cometer cuando construye una página web Los siguientes errores de codificación HTML son fáciles de make, pero si los aleja más temprano que tarde, su página se verá mejor, será más fácil de mantener y funcionará como usted lo desee. Lee mas .
Veremos cómo crear una hoja de estilo en línea para que pueda practicar sus habilidades de CSS, y luego pasaremos a 10 ejemplos simples que le mostrarán cómo hacer algunas cosas básicas. A partir de ahí, tu imaginación es el límite!
Si quieres una introducción un poco más técnica, asegúrate de ver 5 pasos de bebé para aprender CSS y convertirte en un hechicero de CSS Kick-Ass 5 pasos de bebé para aprender CSS y convertirte en un hechicero de CSS Kick-Ass 5 pasos de bebé para aprender CSS y convertirse Kick-Ass CSS Sorcerer CSS es el cambio más importante que las páginas web han visto en la última década, y allanó el camino para la separación de estilo y contenido. En la forma moderna, XHTML define la estructura semántica ... Leer más.
Hoja de estilo en línea
Cada documento HTML contiene una etiqueta. Esa sección de encabezado es donde va tu hoja de estilo de CSS en línea. Esto es lo que se verá:
All of your CSS declarations.Ponlo en la parte superior de tu documento, llénalo con tu CSS y listo.
1. Formateo fácil de párrafos
Lo bueno del estilo con CSS es que no tienes que especificar un estilo cada vez que creas un elemento. Simplemente puede decir "todos los párrafos deben tener este estilo particular" y está listo para comenzar. Aquí hay un ejemplo de cómo puedes hacer eso.
Digamos que quieres cada párrafo (eso es todo con un
Etiqueta HTML Las 11 principales etiquetas HTML Todo bloguero y propietario de un sitio web debe conocer las 11 principales etiquetas HTML Todo bloguero y propietario de un sitio web debe saber La red mundial conoce muchos idiomas y está codificada en varios diferentes. El único idioma, sin embargo, que se puede encontrar en todas partes y ha existido desde la invención de las páginas web, es el ... Leer más) en su página para ser un poco más grande de lo habitual. Y gris oscuro, en lugar de negro. Así es como lo harías con CSS:
p { font-size: 120%; color: dimgray; } Eso es todo al respecto. Ahora, cada vez que el navegador representa un
párrafo, el texto heredará el tamaño (120 por ciento de lo normal) y el color ("dimgray").
Si tiene curiosidad sobre qué colores de texto sin formato puede usar, consulte esta lista de colores CSS de Mozilla.
2. Cambiar el caso de la carta
Bueno, ahora que hemos visto cómo hacer un cambio en cada párrafo, veamos cómo podemos ser un poco más selectivos. Vamos a crear una designación para los párrafos que deben estar en mayúsculas. Así es como lo haríamos:
p.smallcaps { font-variant: small-caps; } Para hacer un párrafo totalmente en mayúsculas, usaremos una etiqueta HTML ligeramente diferente. Esto es lo que parece:
Tu párrafo aquí.
Como puede ver, agregar un punto y un nombre de clase a cualquier elemento específico en CSS especifica un subtipo de ese elemento definido por una clase. Puede hacer esto con texto, imágenes, enlaces y casi cualquier otra cosa.
Si desea cambiar el caso de un conjunto de texto a un caso específico, puede usar estas líneas de CSS:
text-transform: uppercase; text-transform: lowercase; text-transform: capitalize; El último escribe en mayúscula la primera letra de cada oración.
3. Cambiar los colores del enlace
Probemos cambiando el estilo de algo que no sea un párrafo completo. Hay cuatro colores diferentes que se pueden asignar a un enlace: su color estándar, su color visitado, su color de desplazamiento y su color activo (que se muestra al hacer clic en él). Así es como podemos cambiar esos:
a:link { color: gray; } a:visited { color: green; } a:hover { color: rebeccapurple; } a:active { color: teal; } Tenga en cuenta que a cada "a" le siguen dos puntos, no un punto.
Cada una de esas declaraciones cambia el color de un enlace en un contexto específico. No es necesario cambiar la clase de un enlace para que cambie de color. Todo será determinado por el usuario y el estado del enlace.
4. Eliminar enlaces subrayados
Si bien el texto subrayado indica claramente un enlace, a veces parece más atractivo descartar ese subrayado. Esto se logra con el atributo "text-decoration". Así es como nos deshacemos de los subrayados en los enlaces:
a { text-decoration: none; } Cualquier cosa con la etiqueta de enlace ("a") permanecerá sin subrayar. ¿Desea subrayarlo cuando el usuario pasa sobre él? Solo agrega esto a continuación:
a:hover { text-decoration: underline; } También puede agregar esta decoración de texto a los enlaces activos para asegurarse de que el subrayado no desaparezca cuando se hace clic en el enlace.
5. Haz un botón de enlace
Si desea atraer más atención a su enlace, usar un botón de enlace es una excelente manera de hacerlo. Este requiere algunas líneas más, pero las revisaremos individualmente:
a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; } Al incluir los cuatro estados de enlace, nos aseguramos de que el botón no desaparezca cuando un usuario se desplace o haga clic en él. También puede establecer diferentes parámetros para los enlaces activos y emergentes, como cambiar el botón o el color del texto, para agregar un poco de pop.
El color de fondo se establece con color de fondo y color de texto con color. El acolchado define el tamaño de la caja: el texto está rellenado por 10 píxeles verticalmente y 25 píxeles horizontalmente. Text-align asegura que el texto se muestre en el centro del botón, en lugar de hacia un lado. La decoración de texto, como vimos en el último ejemplo, elimina el subrayado.
"Display: inline-block" es un poco más complicado. En resumen, le permite establecer el alto y el ancho del objeto, y se asegura de que comience una nueva línea cuando se inserta.
6. Crea un cuadro de texto
Un párrafo simple no es muy emocionante. Si desea resaltar su llamada a la acción u otro elemento en su página, es posible que desee rodearlo con un borde. A continuación, le mostramos cómo hacerlo con una cadena de texto:
p.important { border-style: solid; border-width: 5px; border-color: purple; } Este es bastante sencillo. Crea un borde púrpura sólido, de 5 píxeles de ancho, alrededor de cualquier párrafo de clase importante. Para hacer que un párrafo herede estas propiedades, solo debes declararlo así:
Tu párrafo importante aquí.
Esto funcionará independientemente del tamaño de su párrafo; una sola línea tendrá un borde del ancho de la página, una línea alta, y un párrafo más largo estará rodeado por un borde más grande.
Hay muchos estilos de bordes diferentes que puede aplicar; en lugar de "sólido", pruebe "punteado" o "doble". Y el ancho puede ser "delgado", "mediano" o "grueso". Incluso puede definir el grosor de cada borde individualmente, de esta manera:
border-width: 5px 8px 3px 9px; Esto da como resultado un borde superior de 5 píxeles, un borde derecho de 8, un fondo de 3 y un borde izquierdo de 9 píxeles.
7. Elementos de alineación central
Para una tarea muy común, esta es una cosa sorprendentemente poco intuitiva que hacer con CSS. Sin embargo, una vez que lo ha hecho algunas veces, se vuelve mucho más fácil. Hay un par de maneras diferentes de centrar las cosas.
Para un elemento de bloque (generalmente una imagen), usaremos el atributo de margen:
.center { display: block; margin: auto; } Esto asegura que el elemento se muestra como un bloque, y que el margen en cada lado se establece automáticamente (lo que los hace iguales). Si desea centrar todas las imágenes en una página determinada, puede incluso agregar "margen: automático" a la etiqueta img:
img { margin: auto; } Para saber por qué funciona de esta manera, consulte la explicación del modelo de caja de CSS en W3C. Aquí hay una breve versión gráfica:
Pero, ¿y si queremos centrar el texto? CSS tiene un método específico de hacerlo:
.centertext { text-align: center; } Si queremos usar la clase "centertexto" para centrar el texto en un párrafo dado, todo lo que tenemos que hacer es agregar esa clase al
etiqueta:
Este texto estará centrado.
Recordar esos diferentes pasos, sin embargo, es otro asunto. Es posible que desee marcar esta página.
8. Ajuste de relleno
El relleno de un elemento especifica cuánto espacio debe haber en cada lado. Por ejemplo, si agrega 25 píxeles de relleno a la parte inferior de una imagen, el siguiente texto se desplazará 25 píxeles hacia abajo. Muchos elementos pueden tener relleno, pero usaremos una imagen para un ejemplo aquí.
Digamos que desea que cada imagen tenga 20 píxeles de relleno en los lados izquierdo y derecho, y 40 píxeles en la parte superior e inferior. Hay varias formas en que puede hacer esto. El más básico:
img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; } Hay una mano corta que podemos usar para presentar toda esta información:
img { padding: 40px 25px 40px 25px; } Esto establece los rellenos superior, derecho, inferior e izquierdo en el número correcto. Pero podemos hacerlo aún más corto:
img { padding: 40px 25px } Cuando usa solo dos valores, el primer valor se establece para la parte superior e inferior, mientras que el segundo se mostrará a la izquierda y a la derecha.
9. Resalta las filas de la tabla
CSS puede hacer mucho para que sus tablas se vean realmente bien. Agregar colores, ajustar bordes y hacer que su tabla responda a pantallas móviles es todo fácil. Veremos un solo efecto interesante aquí: resaltar las filas de la tabla cuando pasa el mouse sobre ellas.
Aquí está el código que necesitará para eso:
tr:hover { background-color: #ddd; } Ahora cada vez que pase el mouse sobre una celda de la tabla, esa fila cambiará de color. Para ver algunas de las otras cosas interesantes que puede hacer, consulte la página W3C en elegantes tablas CSS.
10. Cambio de imágenes entre transparente y opaco
CSS también puede ayudarte a hacer cosas geniales con las imágenes. Por ejemplo, puede mostrar imágenes a una opacidad menor que completa (aparecen ligeramente "blanqueadas") y llevarlas a una opacidad total al pasar el mouse sobre ellas. Así es como lo haremos:
img { opacity: 0.5; filter: alpha(opacity=50); } El atributo "filtro" hace lo mismo que "opacidad", pero Internet Explorer 8 y anteriores no reconocen la medición de opacidad, por lo que es una buena idea incluirlo.
Ahora que las imágenes son ligeramente transparentes, las pondremos completamente opacas en un mouseover:
img:hover { opacity: 1.0; filter: alpha(opacity=100); } Convertirse en un maestro
Con estos ejemplos de código CSS, debe tener una idea mucho mejor de cómo funciona CSS. Una vez que haya examinado todos ellos, notará una serie de patrones que puede aplicar a un código CSS adicional. Aprender HTML y CSS con estos tutoriales paso a paso. Aprender HTML y CSS con estos tutoriales paso a paso. Curioso sobre HTML. CSS y JavaScript? Si crees que tienes una habilidad especial para aprender a crear sitios web desde cero, aquí hay algunos tutoriales paso a paso que vale la pena probar. Lee mas . Y es entonces cuando sabes que realmente has comenzado a convertirte en un maestro de CSS.
Y si todo esto suena demasiado complicado, recuerde que solo puede obtener algunas plantillas CSS. 11 Sitios de plantillas de CSS: ¡No empiece desde cero! 11 Sitios de plantillas de CSS: ¡No empieces desde cero! Hay miles de plantillas CSS gratuitas disponibles en línea, que abarcan todas las tendencias y tecnologías del diseño moderno. Puede usarlos en su forma original o personalizarlos para que sean suyos. Lea más y modifíquelos.
¿Qué haces con CSS? ¿Qué ejemplos te gustaría ver en el futuro? ¡Comparte tus pensamientos en los comentarios a continuación!