Skip to content

Commit 150dab9

Browse files
s0rayas0raya
committed
Sumando contenido y cambios en css
1 parent 871f634 commit 150dab9

31 files changed

+206
-88
lines changed

‎src/components/Navbar.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ const { posts } = Astro.props;
5555

5656
const contentPosts = data.map(post => ({
5757
title: post.title,
58-
description: '',
58+
description: "",
5959
url: `/astro-proyect/${post.slug}`
6060
}));
6161

‎src/content/bases_de_datos/MongoDB.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: MongoDB
3-
description: "esta es la descripcion de MongoDB"
3+
description: ""
44
pubDate: '01/03/2024'
55
collection: nodejs
66
---

‎src/content/bases_de_datos/SQL.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: SQL
3-
description: "esta es la descripcion de SQL"
3+
description: ""
44
pubDate: '01/03/2024'
55
collection: nodejs
66
---

‎src/content/css/introduccion_css.md‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
---
2+
title: Introducción a CSS
3+
description: ""
4+
pubDate: '01/03/2024'
5+
collection: css
6+
---
7+
8+
El **CSS (Cascading Style Sheets)** es el lenguaje que describe la apariencia visual de un documento HTML.
9+
Permite definir colores, tipografías, márgenes, tamaños y la disposición de los elementos en una página web.
10+
11+
## Objetivo
12+
Separar la **estructura** (HTML) del **diseño** (CSS), facilitando la reutilización del código y el mantenimiento del proyecto.
13+
14+
## Cómo se aplica CSS
15+
16+
Existen tres formas principales de incluir CSS en un documento HTML:
17+
18+
### 1. CSS en línea
19+
Se aplica directamente en el elemento mediante el atributo `style`.
20+
21+
```html
22+
<p style="color: blue;">Texto azul</p>
23+
```
24+
25+
### 2. CSS interno (en el head)
26+
Se escribe dentro de la etiqueta `<style>` del documento HTML.
27+
28+
```html
29+
<head>
30+
<style>
31+
p { color: red; }
32+
</style>
33+
</head>
34+
```
35+
36+
### 3. CSS externo (archivo .css)
37+
Es la forma más recomendada.
38+
Se enlaza mediante la etiqueta `<link>`:
39+
40+
```html
41+
<link rel="stylesheet" href="styles.css">
42+
```
43+
44+
## Cascada y herencia
45+
46+
El nombre **Cascading Style Sheets** proviene de cómo los estilos se aplican:
47+
las reglas más específicas y más cercanas al elemento tienen prioridad.
48+
49+
Por ejemplo:
50+
51+
```html
52+
p { color: blue; }
53+
.highlight { color: red; }
54+
<p class="highlight">Texto rojo</p>
55+
```
56+
57+
El texto será **rojo** porque la clase `.highlight` tiene más **especificidad** que la regla general para `p`.
58+
59+
## Conceptos clave
60+
61+
- **Cascada:** cuando varios estilos se aplican al mismo elemento, el navegador decide cuál tiene prioridad.
62+
- **Especificidad:** mide qué tan “fuerte” es una regla de CSS según su tipo (etiqueta, clase o id).
63+
- **Herencia:** algunas propiedades (como `color` o `font-family`) se heredan de los elementos padres.
64+
65+
## Estructura básica de una regla CSS
66+
67+
```css
68+
selector {
69+
propiedad: valor;
70+
}
71+
```
72+
73+
**Ejemplo:**
74+
75+
```css
76+
h1 {
77+
color: darkblue;
78+
font-size: 32px;
79+
}
80+
```
81+
82+
Cada regla CSS tiene:
83+
1. Un **selector** (qué elemento afecta).
84+
2. Una o varias **propiedades**.
85+
3. Sus **valores** correspondientes.
86+

‎src/content/html/elementos_no_semanticos.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Elementos no semánticos en HTML
3-
description: "esta es la descripcion a elementos no semánticos en HTML"
3+
description: ""
44
pubDate: '01/03/2024'
55
collection: html
66
---

‎src/content/html/elementos_semanticos.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Elementos semánticos en HTML
3-
description: "esta es la descripcion a elementos semánticos en HTML"
3+
description: ""
44
pubDate: '01/02/2024'
55
collection: html
66
---

‎src/content/html/formularios.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Formularios en HTML
3-
description: "esta es la descripcion a formularios en HTML"
3+
description: ""
44
pubDate: '01/04/2024'
55
collection: html
66
---

‎src/content/html/introduccion-a-html.md‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
---
22
title: Introducción a HTML
3-
description: "esta es la descripcion a HTML"
3+
description: ""
44
pubDate: '01/01/2024'
55
collection: html
66
---
77

88
HTML (HyperText Markup Language) es el lenguaje estándar para crear sitios web. Proporciona la estructura básica del contenido que se muestra en el navegador, permitiendo definir textos, imágenes, enlaces, tablas, formularios, entre otros elementos visuales.
99

10-
## Estructura básica de un documento HTML
10+
### Estructura básica de un documento HTML
1111

1212
Un archivo HTML tiene una estructura básica que sigue el siguiente formato:
1313

@@ -36,24 +36,24 @@ Un archivo HTML tiene una estructura básica que sigue el siguiente formato:
3636
5. `<title>`: Define el título que aparecerá en la pestaña del navegador.
3737
6. `<body>`: Contiene todo el contenido visible de la página, como texto, imágenes y otros elementos.
3838

39-
## Etiquetas comunes en HTML
39+
### Etiquetas comunes en HTML
4040

41-
### 1. Encabezados
41+
## 1. Encabezados
4242
Los encabezados se utilizan para definir títulos en la página y van desde **`<h1>`** (el más importante) hasta **`<h6>`** (el menos importante).
4343
```html
4444
<h1>Este es un encabezado de nivel 1</h1>
4545
<h2>Este es un encabezado de nivel 2</h2>
4646
```
4747

48-
### 2. Párrafos
48+
## 2. Párrafos
4949
La etiqueta **`<p>`** se usa para crear párrafos de texto.
5050
```html
5151

5252
<p>Este es un párrafo de ejemplo.</p>
5353

5454
```
5555

56-
### 3. Enlaces
56+
## 3. Enlaces
5757
Para agregar un enlace a otra página, utilizamos la etiqueta **`<a>`** con el atributo *href*:
5858

5959
```html
@@ -62,34 +62,36 @@ Para agregar un enlace a otra página, utilizamos la etiqueta **`<a>`** con el a
6262

6363
```
6464

65-
### 4. Imágenes
65+
## 4. Imágenes
6666
Para insertar una imagen, usamos la etiqueta **`<img>`** con el atributo *src* (fuente) y opcionalmente *alt* (texto alternativo):
6767
```html
6868

6969
<img src="imagen.jpg" alt="Descripción de la imagen">
7070

7171
```
7272

73-
### 5. Listas
73+
## 5. Listas
7474
Existen dos tipos principales de listas en HTML: ordenadas y desordenadas.
7575

7676
- **Lista desordenada**:
77-
```html
78-
<ul>
79-
<li>Elemento 1</li>
80-
<li>Elemento 2</li>
81-
</ul>
82-
```
77+
78+
```html
79+
<ul>
80+
<li>Elemento 1</li>
81+
<li>Elemento 2</li>
82+
</ul>
83+
```
8384

8485
- **Lista ordenada**:
85-
```html
86-
<ol>
87-
<li>Primer elemento</li>
88-
<li>Segundo elemento</li>
89-
</ol>
90-
```
9186

92-
## Comentarios en HTML
87+
```html
88+
<ol>
89+
<li>Primer elemento</li>
90+
<li>Segundo elemento</li>
91+
</ol>
92+
```
93+
94+
### Comentarios en HTML
9395
Para agregar un comentario que no será visible en el navegador, utilizamos la siguiente sintaxis:
9496
```html
9597

‎src/content/html/tablas.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Tablas en HTML
3-
description: "esta es la descripcion a tablas en HTML"
3+
description: ""
44
pubDate: '01/12/2024'
55
collection: html
66
---

‎src/content/javascript/addeventlistener.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: addEventListener
3-
description: "esta es la descripcion de addeventlistener"
3+
description: ""
44
pubDate: '01/03/2024'
55
collection: javascript
66
---

0 commit comments

Comments
 (0)