Propiedades CSS más utilizadas
Propiedades CSS más utilizadas
Propiedades CSS más utilizadas 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:
En esta sección, aprenderemos las propiedades CSS más comunes.
Hasta ahora, normalmente hemos hecho ejemplos con propiedades sencillas, como color y font-size.
Ancho y alto
Alto - Ancho
Utilizaremos las propiedades width y height para establecer los valores de ancho y alto de nuestros elementos.
Hay dos aspectos que debe tener en cuenta.
- No podemos asignar width ni height a los elementos de tipo inline.
- De forma predeterminada, las propiedades width y height que asignamos son independientes de otras propiedades, como margin, padding y border. Solo se utilizan para el área interior del elemento.
Más adelante proporcionaremos información adicional sobre las excepciones anteriores.
<!DOCTYPE html>
<html>
<head>
<style>
.my-box {
width: 100px;
height: 100px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div class="my-box">My Box</div>
</body>
</html>
Ancho y alto 2
En el ejemplo anterior, asignamos valores estáticos a width y height. Sin embargo, los valores que se pueden asignar no se limitan a números fijos.
Ahora veamos cómo asignar el ancho mediante un porcentaje en nuestro ejemplo.
<style>
.box1 {
height: 200px;
width: 200px;
background-color: #1cac84;
}
.box2 {
height: 200px;
width: 70%;
background-color: powderblue;
}
.box3 {
background-color: #c974af;
}
</style>
<div class="box1">First Box</div>
<div class="box2">Second Box</div>
<div class="box3">This box takes
the auto value for the width and height
properties by default.</div>
Content-box frente a Border-box
La propiedad box-sizing toma el valor content-box de forma predeterminada.
Además, de forma predeterminada, los valores de width y height hacen referencia al contenido.
Los valores de border y padding se añaden a los valores de width y height.
Supongamos que el ancho de un cuadro es de 100px.
Si añadimos 10px de padding y un valor de 20px para border a este cuadro, el ancho total del elemento será de 100px + 10px + 20px = 130px.
Max-width
Con la propiedad max-width, podemos asignar el ancho máximo que puede tener un elemento.
En el ejemplo siguiente, como el valor de max-width se establece en 100px, aunque el valor predeterminado de width es auto (el elemento debería ocupar el 100 % de su elemento padre), ocupa 100px y el contenido desborda el cuadro.
<style>
.box {
height: 200px;
max-width: 100px;
background-color: #1cac84;
}
</style>
<div class="box">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Morbi lacinia ut felis
et sagittis
</div>
Decoración del texto
Podemos definir la decoración de los textos con la propiedad text-decoration.
Creo que será más práctico examinar esta propiedad en el ejemplo. Observe el resultado de nuestro código de ejemplo en la vista previa.
<style>
.head1 {
text-decoration: overline;
}
.head2 {
text-decoration: line-through;
}
.head3 {
text-decoration: underline;
}
.head4 {
text-decoration: underline overline;
}
</style>
<h1 class="head1">
Text-decoration is overline
</h1>
<h1 class="head2">
Text-decoration is line-through
</h1>
<h1 class="head3">
Text-decoration is underline
</h1>
<h1 class="head4">
Text-decoration is both underline
and overline
</h1>text-indent
Es posible que queramos incluir un espacio al principio de un texto. Para ello usamos la propiedad text-indent.
<style>
.indent-txt{
text-indent: 20px;
}
</style>
<p class="indent-txt">Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat
</p>text-align
Controlamos la alineación horizontal de un texto con la propiedad text-align.
Definamos un ejemplo de HTML.
<style>
.h1-center {
text-align: center;
}
.h1-left {
text-align: left;
}
.h1-right {
text-align: right;
}
</style>
<h1 class="h1-center">
Lorem ipsum (center)
</h1>
<h1 class="h1-left">
Lorem ipsum (left)
</h1>
<h1 class="h1-right">
Lorem ipsum (right)
</h1>font-family
Definimos el estilo font-family para usar el tipo de fuente que queremos en los textos.
Hay algunos puntos importantes que debemos conocer.
- La fuente que he definido debe estar instalada en el sistema del usuario. Para ello, debemos usar una de las fuentes conocidas como fuente segura para la Web.
- Si vamos a usar una fuente personalizada, tendremos que añadir la fuente que usemos como dependencia de terceros entre las etiquetas head. Al añadir font-family, debemos establecer nuestras preferencias de fuente principal y secundaria.
- Si el navegador no encuentra nuestra preferencia principal en su sistema, muestra al usuario la preferencia secundaria.
font-family 2
En el ejemplo siguiente, se ha asignado el tipo de fuente Times New Roman a la clase principal.
Times y las fuentes serif se asignan como secundaria y terciaria, respectivamente.
El navegador intenta utilizar primero el tipo de fuente Times New Roman; si no encuentra este tipo en el sistema, utiliza nuestras otras preferencias.
Si las fuentes que hemos asignado no están disponibles, el navegador utiliza la fuente predeterminada.
<style>
.header {
font-family: "Times New Roman", Times, serif;
}
</style>
<h1 class="header">
Hello Font Family
</h1>font-style
Como podemos deducir de su nombre, especifica el estilo de fuente del texto que utilizamos.
Ahora veamos la propiedad font-style con un ejemplo.
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
<p class="normal">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit
</p>
<p class="italic">Lorem ipsum dolor sit amet,
consectetur adipiscing elit
</p>
<p class="oblique">Lorem ipsum
dolor sit amet. consectetur
adipiscing elit
</p>Enhorabuena
Enhorabuena 🎉
En esta sección, hemos aprendido las propiedades de CSS más utilizadas.
En la siguiente sección, aprenderemos CSS Margin.
Preguntas frecuentes
¿La lección «Propiedades CSS más utilizadas» es gratis?
Sí — el texto completo de «Propiedades CSS más utilizadas» 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 «Propiedades CSS más utilizadas»?
Propiedades CSS más utilizadas 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 «Propiedades CSS más utilizadas»?
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.