¿Cómo se pueden definir estilos?
¿Cómo se pueden definir estilos?
¿Cómo se pueden definir estilos? es una lección gratuita de HTML for Kids en CoddyKit. Esta es la lección 1 de 1. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML for Kids, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML for Kids incluye 1 lecciones en total.
Introducción
Hola:
Ya lo explicamos parcialmente en la lección anterior. Ahora vamos a repetirlo.
En CSS, los estilos se pueden definir de 3 formas:
- Estilo en línea
- Entre las etiquetas <style>
- Utilizando un archivo CSS externo
Estilo en línea
1. Estilo en línea
Como podemos deducir de su nombre, se refiere a los estilos que definimos pasando el atributo style en línea a cada elemento.
Este uso no se recomienda porque reduce la reutilización de cada estilo y su legibilidad es muy baja.
En el ejemplo siguiente, el estilo letter-spacing ha creado un espacio de 15px entre cada letra del texto.
<p style="letter-spacing:15px">
Inline Style
</p>con la etiqueta style
2. Entre las etiquetas <style>
Se puede definir entre las etiquetas style. Esta definición tampoco se recomienda, salvo en algunas excepciones (como el área de contenido visible sin desplazarse).
Seguiremos utilizando las etiquetas style para mantener organizados nuestros ejemplos. Sin embargo, no recomiendo utilizarlas en sus aplicaciones (excepto en los casos excepcionales que he mencionado).
<html>
<head>
<style>
.root {
color:red;
}
</style>
</head>
<body class>
<div class="root">Test</div>
</body>
</html>Archivo CSS externo
3. Archivo CSS externo
Ahora aprendamos a utilizar archivos CSS externos.
Esta es la definición de estilo que utilizaremos con mayor frecuencia. En primer lugar, se crea un archivo que contiene únicamente selectores CSS.
A continuación, el archivo CSS correspondiente se puede definir para el elemento link situado entre las etiquetas head.
En el ejemplo siguiente, el archivo style.css se asigna al elemento link mediante el atributo href.
<link rel = "stylesheet" href = "styles.css">
Esta característica es la mejor solución para que muchos archivos invoquen el mismo archivo CSS y para aumentar la reutilización.
En el ejemplo siguiente, se ha creado una definición de estilo que selecciona la clase externa.
.external{
color:red;
font-size:30px;
letter-spacing:10px;
}
En el ejemplo siguiente, se ha creado una definición de estilo que selecciona la clase externa.
Guardemos esta declaración en el archivo llamado test 1.css y asignémoslo al elemento link.
<html>
<head>
<link rel="stylesheet"
href="https://coddy.s3.amazonaws.com/css/test_1.css">
</head>
<body>
<div class="external">Hello</div>
</body>
</html>Enhorabuena
Enhorabuena 🎉
En esta sección, hemos aprendido los tipos de definición de estilos en CSS.
En la siguiente sección, aprenderemos el selector de id.
Preguntas frecuentes
¿La lección «¿Cómo se pueden definir estilos?» es gratis?
Sí — el texto completo de «¿Cómo se pueden definir estilos?» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML for Kids, actualiza a CoddyKit PRO. El curso de HTML for Kids incluye 1 lecciones en total.
¿Qué aprenderé en «¿Cómo se pueden definir estilos?»?
¿Cómo se pueden definir estilos? Practicas HTML for Kids con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML for Kids?
No se requiere experiencia previa. HTML for Kids en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 1.
¿Cuánto tiempo toma la lección «¿Cómo se pueden definir estilos?»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML for Kids?
Sí. Cada lección de HTML for Kids incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.