Estilos básicos, clases e ID
2025-11-28
Contenido
stylestyle<meta>Hasta el momento hemos trabajado con HTML, que a pesar de ser muy práctico para la creación de la estructura interna de la web, presenta ciertas limitaciones a la hora de modificar el formato de la web, para ello se introduce CSS, una herramienta que nos va a permitir modificar el formato cómodamente.
styleSupongamos que tenemos el siguiente elemento
<p> Hola Mundo<p>. Por ahora el texto se mostrará en color negro, el color predeterminado de HTML para las etiquetas <p>
Hola mundo
Si se desea modificar el formato intrínseco de esta etiqueta <p> debemos incluir la propiedad style que, como su nombre indica nos permitirá modificar su estilo. Dentro de este atributo se ha de insertar propiedad CSS (no confundir con los atributos html). La propiedad CSS especifica que aspecto visual del contenido de la etiqueta. Por ejemplo, si se desea modificar el color de la letra se debe de utilizar la propiedad color (nótese que no lleva u).
Hola Mundo
Sí deseamos modificar más de una propiedad CSS deberemos de serparalas dentro de la etiqueta con un punto y coma
Hola Mundo
styleEl atributo style resulta útil para formatear una etiqueta individualmente, pero resulta tedioso y repetitivo para más de una etiqueta. Observe el siguiente ejemplo
<p>Autores del culteranismo marcados en rojo<p>
<ul>
<li>Francisco de Quevedo</li>
<li style="color:red; text-decoration: underline; font-size:30px;">Luis de Góngora</li>
<li>Baltasar Gracián</li>
<li style="color:red; text-decoration: underline; font-size:30px;">Pedro Soto de Rojas</li>
<li>Tirso de Molina</li>
<li>Calderón de la Barca</li>
</ul>Autores del culteranismo marcados en rojo
- Francisco de Quevedo
- Luis de Góngora
- Baltasar Gracián
- Pedro Soto de Rojas
- Tirso de Molina
- Calderón de la Barca
Problemas:
La solución a este problema son las clases que nos permiten identificar aquellos componentes con características de formato similares. Se agregan como atributos a cada etiqueta
<p>Autores del culteranismo marcados en rojo<p> <!--En este caso no se marcan en rojo-->
<ul>
<li>Francisco de Quevedo</li>
<li class="culteranista">Luis de Góngora</li>
<li>Baltasar Gracián</li>
<li class="culteranista">Pedro Soto de Rojas</li>
<li>Tirso de Molina</li>
<li>Calderón de la Barca</li>
</ul><style>Ahora para marcar en rojo los culterantistas se ha de indicar el formato de todos en la class culteranista, para ello nos definiremos una hoja de estilo que será común para todo el documento. La hoja de estilos se define en el <head> de la siguiente forma:
<head>
<!-- Fragemento HTML -->
<style>
/*Fragmento CSS*/
.culteranistas{ /*Nótese el punto*/
color: red;
text-size: 40px;
background-color: blue;
text-decoration: underline; /*Este último ';' no es obligatorio como tal, pero es recomendable, en HTML3 y CSS2 daba error si se incluía*/
}
</style>
<!--Fin de la etiqueta Style, seguimos con html-->
</head>Ahora se visualizará correctamente, además se añadirá el fondo azul
Suponga que tenemos dos clases, una primera clase que modifica el tipo de letra a monospace que aplicaremos a los autores culteranistas y una segunda que modifica el grosor de la letra que se aplicará sobre los autores de lírica.
<head><style>
.culteranista {
font-family: monospace;
}
.lirica {
font-weight: bold;
}
.autores {
list-style: square;
}
</style></head>
<body>
<ul class="autores">
<li class="lirica">Fray Luis de León</li>
<li class="culteranista">Hortensio Félix de Paravicino</li>
<li class="culteranista lirica">Lope de Vega</li>
<li class="lirica">San Juan de la Cruz</li>
</ul>
</body>
- Fray Luis de León
- Hortensio Félix de Paravicino
- Lope de Vega
- San Juan de la Cruz
Los ID son como las clases pero solo se pueden utlizar una vez por sitio web. Es útil para cosas que no se deben repetir más de una vez por sitio web.
<style>
#principal{
text-align: center
color:blue
}
</style>
<!--[...]-->
<div id="principal">
<h4>Teatro Romántico></h4>
<p>El retablo romántico se caracteriza por exaltar la libertad creadora,
la expresión intensa de los sentimientos individuales, el gusto por lo
misterioso y lo sublime, y la reivindicación de la imaginación frente a
las reglas clásicas.</p>
</div>Teatro Romántico
El retablo romántico se caracteriza por exaltar la libertad creadora, la expresión intensa de los sentimientos individuales, el gusto por lo misterioso y lo sublime, y la reivindicación de la imaginación frente a las reglas clásicas.
border y border-radiusLa propiedad border es una propiedad abreviada (shorthand) que en realidad combina tres propiedades más pequeñas:
border-width → grosor del bordeborder-style → estilo del borde (solid, dashed, dotted, etc.)border-color → color del bordePor ejemplo, estas dos definiciones son equivalentes:
Lope de Vega
border-top, border-right, border-bottom, border-leftCSS permite aplicar bordes distintos en cada lado. Cada uno funciona igual que border pero aplicado a un solo lado:
border-top
border-right
border-bottom
border-left
También pueden desdoblarse:
margin y paddingLas propiedades margin y padding controlan el espacio alrededor de los elementos, pero cada una actúa en una zona distinta:
margin → espacio externo, fuera del borde del elementopadding → espacio interno, entre el contenido y el bordeVisualmente:
CONTENT
<div style="background:#f0f0f0; padding:20px;">
<!-- MARGIN (gris claro alrededor del borde) -->
<!-- BORDER -->
<div style="border:3px solid black">
<!-- PADDING (espacio interno) -->
<div style="background:#d0ffd0; padding:15px;">
<!-- CONTENT -->
<span style="background-color:white">CONTENT</span>
</div>
</div>
</div>Cuando margin o padding usan 4 valores, el orden siempre es el mismo:
top, right, bottom, left
Para recordarlo fácilmente se utiliza la regla mnemotécnica Trouble:
Es decir:
Truco para los ingenieros: La regla de la mano derecha
El orden de los margin y de los padding siempre es en sentido horario.
Por lo que podemos utilizar la regla de la mano derecha de la inducción electro magnética asumiendo que el vector intensidad apunta hacia la pantalla
Incluir en la cabecerá el CSS presenta ventajas como tener la página web en un único archivo. Sin embargo en la práctica normalmente trabajaremos con más de 2 archivos por lo que incluir uno más o uno menos no marca la diferencia. Por lo que podemos separar el css en un archivo externo .css. De esta forma podremos reutilizar las hojas de estilos.
<meta>Las etiquetas <meta> en HTML sirven para proporcionar metadatos sobre la página web. Estos metadatos no se muestran al usuario, pero son importantes para navegadores, buscadores, redes sociales y dispositivos.
Los comandos de git nos permiten utilizar la cli para gestionar nuestro repositorio
git init # Incializa repositorio (= crear repo con GitHub)
git clone <url-repo>
git add <files> # Añade los archivos a la stagging area
git commit -m "<mensaje de commit>" # commit
git push # push
git pull # pull
git status # estado actual del repo
git log # historia reciente del log con poco detalle de profundidad
git diff <file> # muestra la diferencia entre la versión modificada ente un archivo y otro