Fundamentos de Hojas de Estilo CSS para Diseño Web y Maquetación Digital
Estructura y Reglas Básicas de CSS en Diseño y Maquetación Web
A continuación se detallan las principales propiedades de hojas de estilo en cascada (CSS) empleadas en la composición, maquetación y diseño visual de páginas web.
1. Estilos Generales del Cuerpo (body)
body { Cuerpo
- margin: 0em; Margen exterior
- padding: 0em; Espacio al principio de la página (relleno interno)
- font-family: verdana, arial, sans-serif; Estilo o familia de letra
- font-weight: normal; Peso o grosor de la letra
- font-size: 1em; Tamaño de letra
- text-decoration: none; Decoración del texto
- box-sizing: border-box; Borde y cálculo de caja del elemento
- -webkit-box-sizing: border-box; Compatibilidad para navegadores basados en WebKit (como Safari)
- -moz-box-sizing: border-box; Compatibilidad para navegadores Mozilla Firefox
}
2. Jerarquía Tipográfica y Encabezados (h1 - h6)
h1 {
- font-size: 2em;
- color: red;
- padding: 0.2em;
}
h2 {
- font-size: 1.75em;
- color: rgb(0,0,255);
- padding: 0.2em;
}
h3 {
- font-size: 1.5em;
- color: purple;
- padding: 0.2em;
}
h4 {
- font-size: 1.25em;
- color: black;
- padding: 0.2em;
}
h5 {
- font-size: 1em;
- color: green;
- padding: 0.2em;
}
h6 {
- font-size: 0.75em;
- color: orange;
- padding: 0.2em;
}
3. Párrafos y Formato de Texto (p)
p { Párrafo
- margin: 0em; Margen
- font-size: 1.0em;
- font-weight: normal;
- text-decoration: none; Para poner subrayado, negrita o cursiva
- padding-top: 0.1em; Relleno superior
- padding-bottom: 0.2em; Relleno inferior
- padding-left: 0.25em; Relleno izquierdo
- padding-right: 0.25em; Relleno derecho
- text-align: justify; Alineamiento del texto justificado
}
4. Elementos Gráficos e Imágenes (img)
img, img.fill { Quitar borde de imagen
- border: none;
}
img.fill { Para que ocupe todo el ancho del contenedor
- width: 100%;
}
5. Enlaces e Interacción (a, :hover, :visited)
a { Enlace o hipervínculo (link)
- text-decoration: underline;
- font-weight: bold;
- color: cyan;
- text-shadow: -2px 2px 3px orange; Sombra del texto
}
a:hover { Enlace al pasar el cursor por encima (sin que haya sido visitado)
- color: purple;
- font-weight: bold;
}
a:visited { Enlace previamente visitado
- color: brown;
}
6. Maquetación de Tablas (table, tr, th, td)
table { Tabla
- display: table; Forma y visualización de la tabla
- border-collapse: collapse; Colapso de bordes para que ocupen el menor espacio posible y no se dupliquen
}
tr.thead { Encabezado de la fila de la tabla
- height: 2em;
- vertical-align: middle; Posicionamiento vertical centrado
- background-color: rgb(192,192,192); Color de fondo
}
tr.impar { Filas impares
- background-color: white;
}
tr.par { Filas pares
- background-color: silver;
}
th { Celda de encabezado de tabla
- font-weight: bold;
- text-align: center;
}
td.left {
- text-align: left; Alineación a la izquierda
}
td.center {
- text-align: center; Alineación centrada
}
td.right {
- text-align: right; Alineación a la derecha
}
td { Celda estándar de tabla
- padding: 0.2em;
}
7. Listas Ordenadas y Desordenadas (ol, ul)
ol { Lista ordenada
- list-style-type: decimal; Cómo se enumera numéricamente
- list-style-position: inside; Posición de la numeración, dentro del bloque
}
ul { Tipo de lista no ordenada
- list-style-type: circle; Tipo de viñeta (círculo)
- list-style-position: inside; Estilo de viñeta dentro de la caja de contenido
}
ul.i { Lista personalizada
- list-style-position: outside; Posición de la viñeta hacia afuera
- list-style-image: url('12.jpeg'); Para cambiar el icono de la viñeta por la imagen deseada
}
8. Elementos Semánticos de Citas y Código (cite, code)
cite { Texto citado
- font-style: italic; Estilo cursivo
- font-family: arial;
- font-weight: normal;
}
code { Bloques o fragmentos de código fuente
- font-style: normal; Estilo de fuente normal
- font-family: courier; Tipografía monoespaciada
- font-size: 1em;
- font-weight: normal;
}