Home-theater-designers
Una vez que haya comenzado a incursionar en HTML, probablemente le interese agregar más impacto visual a sus páginas web. CSS es la mejor forma de hacerlo. CSS le permite aplicar cambios en toda su página sin depender del estilo en línea.
Aquí hay varios ejemplos sencillos de CSS para mostrarle cómo realizar algunos cambios de estilo básicos en su página web.
1. Código CSS básico para un formato de párrafo sencillo
Diseñar con CSS significa que no tiene que especificar un estilo cada vez que crea un elemento. Simplemente puede decir 'todos los párrafos deben tener este estilo en particular' y listo.
Digamos que quieres cada párrafo (
, una de las etiquetas HTML que todo el mundo debería conocer) sea un poco más grande de lo habitual. Y con texto gris oscuro, en lugar de negro.
Relacionado: La hoja de trucos HTML
El código CSS para esto es:
|_+_|¡Sencillo! Ahora, siempre que el navegador muestre 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 este Lista de colores CSS de Mozilla.
2. Ejemplo de CSS para cambiar mayúsculas y minúsculas
¿Quiere crear una designación para los párrafos que deben estar en versalitas? Una muestra de CSS para eso sería:
|_+_|
Para hacer un párrafo que esté completamente en versalitas, use una etiqueta HTML ligeramente diferente. Así es como se ve:
|_+_|Agregar un punto y un nombre de clase a un elemento 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 un conjunto de texto a un caso específico, use estos ejemplos de código CSS:
|_+_|El último pone en mayúscula la primera letra de cada oración.
3. CSS fácil para cambiar los colores de los enlaces
Los cambios de estilo no se limitan a los párrafos. 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 mientras hace clic en él). Utilice este código CSS de muestra:
|_+_|Con los enlaces, cada 'a' va seguida de dos puntos, no de 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.
4. Elimine los subrayados de los enlaces con este CSS de muestra
Si bien el texto subrayado indica claramente un enlace, a veces parece mejor eliminar ese subrayado. Esto se logra con el atributo 'text-decoration'. Este ejemplo de CSS muestra cómo eliminar subrayados en enlaces:
|_+_|Todo lo que tenga la etiqueta de enlace ('a') permanecerá sin subrayar. ¿Quiere subrayarlo cuando el usuario pasa el mouse sobre él? Simplemente agregue:
|_+_|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.Crear un botón de enlace con código CSS
¿Quieres atraer más atención a tu enlace? Un botón de enlace es una excelente manera de hacerlo. Este requiere algunas líneas más:
|_+_|Expliquemos este código de muestra CSS.
La inclusión de los cuatro estados de enlace garantiza que el botón no desaparezca cuando un usuario se desplaza o hace clic en él. También puede establecer diferentes parámetros para los enlaces activos y de desplazamiento, por ejemplo, cambiar el botón o el color del texto.
El color de fondo se establece con color de fondo y el color del texto con color. El relleno define el tamaño del cuadro: el texto se rellena con 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 a un lado. Text-decoration, como en el último ejemplo, elimina el subrayado.
El código CSS 'display: inline-block' es un poco más complicado. En resumen, le permite establecer la altura y el ancho del objeto. También asegura que comienza una nueva línea cuando se inserta.
6. Código de ejemplo CSS para crear un cuadro de texto
Un párrafo sencillo no es muy emocionante. Si desea resaltar un elemento en su página, es posible que desee agregar un borde. A continuación, le mostramos cómo hacerlo con una cadena de código CSS simple:
|_+_|Este es sencillo. Crea un borde púrpura sólido, de cinco píxeles de ancho, alrededor de cualquier párrafo de clase importante. Para hacer que un párrafo herede estas propiedades, simplemente declárelo así:
|_+_|Esto funcionará independientemente de lo grande que sea el párrafo.
Hay muchos estilos de borde diferentes que puede aplicar; en lugar de 'sólido', pruebe con 'punteado' o 'doble'. Mientras tanto, el ancho puede ser 'delgado', 'medio' o 'grueso'. El código CSS puede incluso definir el grosor de cada borde individualmente, así:
|_+_|Eso da como resultado un borde superior de cinco píxeles, un borde derecho de ocho, un borde inferior de tres y un tamaño de borde izquierdo de nueve píxeles.
7. Elementos de alineación central con código CSS básico
Para una tarea común, centrar elementos con código CSS es sorprendentemente poco intuitivo. Sin embargo, una vez que lo hayas hecho varias veces, será mucho más fácil. Tienes un par de formas diferentes de centrar las cosas.
Para un elemento de bloque (generalmente una imagen), use el atributo margin:
|_+_|Esto asegura que el elemento se muestre como un bloque y que el margen en cada lado se establezca automáticamente. Si desea centrar todas las imágenes en una página determinada, incluso puede agregar 'margin: auto' a la etiqueta img:
|_+_|Para saber por qué funciona de esta manera, consulte el Explicación del modelo de caja CSS en W3C .
Pero, ¿y si desea centrar el texto con CSS? Utilice este CSS de muestra:
|_+_|¿Quiere usar la clase 'centertext' para centrar el texto en un párrafo? Simplemente agregue esa clase a la
etiqueta:
|_+_|8. Ejemplos de CSS para ajustar el 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, no solo imágenes.
Supongamos 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. La ejecución de código CSS más básica para esto es:
|_+_|Sin embargo, hay una instrucción CSS más corta que presenta toda esta información en una sola línea:
|_+_|Esto establece los rellenos superior, derecho, inferior e izquierdo en el número correcto. Gracias a que solo se utilizan dos valores (40 y 25), puede acortarlo aún más:
|_+_|Cuando usa solo dos valores, el primer valor se establece para la parte superior e inferior, mientras que el segundo será el izquierdo y el derecho.
9. Resalte las filas de la tabla con codificación CSS
El código CSS hace que las tablas se vean mucho mejor que las cuadrículas predeterminadas. Agregar colores, ajustar los bordes y hacer que su mesa responda a las pantallas de los dispositivos móviles es fácil. Este sencillo ejemplo de CSS le muestra cómo resaltar las filas de la tabla cuando pasa el mouse sobre ellas.
|_+_|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 el Página del W3C en elegantes tablas CSS .
10. Ejemplo de CSS para cambiar imágenes entre transparentes y opacas
El código CSS también puede ayudarte a hacer cosas interesantes con las imágenes. A continuación, se muestra un ejemplo de CSS para mostrar imágenes con una opacidad inferior a la total, por lo que aparecen un poco 'blanqueadas'. Cuando pasas el mouse sobre las imágenes, se muestran completamente opacas:
|_+_|El atributo 'filtro' hace lo mismo que 'opacidad', pero Internet Explorer 8 y versiones anteriores no reconocen la medición de opacidad. Para los navegadores más antiguos, es una buena idea incluirlo.
Ahora que las imágenes son ligeramente transparentes, puede hacerlas completamente opacas con un mouseover:
|_+_|10 ejemplos de CSS con código fuente
Con estos ejemplos de código CSS, debería tener una idea mucho mejor de cómo funciona CSS. Plantillas CSS puede ayudar, pero comprender los elementos en bruto es vital.
¿Cómo sabes si alguien te bloqueó en Instagram?
Esos 10 sencillos ejemplos de código CSS resumidos:
- Formato de párrafo sencillo
- Cambiar mayúsculas y minúsculas
- Cambiar los colores de los enlaces
- Eliminar los subrayados de los enlaces
- Hacer un botón de enlace
- Crea un cuadro de texto
- Elementos de alineación central
- Ajustar el acolchado
- Resaltar filas de la tabla
- Haz que las imágenes sean opacas
Al revisarlos nuevamente, notará varios patrones que puede aplicar al código futuro. Y ahí es cuando sabes que realmente has comenzado a convertirte en un maestro de CSS. Pero recordarlo puede ser difícil. Es posible que desee agregar esta página a marcadores para referencia futura.
Cuota Cuota Pío Correo electrónico La hoja de trucos de las propiedades esenciales de CSS3Domina la sintaxis CSS esencial con nuestra hoja de trucos de propiedades CSS3.
Leer siguiente Temas relacionados- Programación
- Web Design
- CSS
- Scripting
Editor adjunto de seguridad, Linux, bricolaje, programación y explicación técnica, y productor de podcasts realmente útil, con amplia experiencia en soporte de escritorio y software. Un colaborador de la revista Linux Format, Christian es un manipulador de Raspberry Pi, amante de Lego y fanático de los juegos retro.
Más de Christian CawleySuscríbete a nuestro boletín
¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse