CSS
Definición
CSS (Cascading Style Sheets) es un lenguaje de diseño utilizado para describir la presentación de un documento escrito en un lenguaje de marcado como HTML. CSS define cómo se muestran los elementos HTML en pantalla, en papel o en otros medios.
Aquí hay algunos puntos clave sobre CSS:
Separación de Contenidos y Presentación: CSS permite separar el contenido de un documento (escrito en HTML) de su presentación, facilitando el mantenimiento y la actualización del estilo.
Selectores y Propiedades: En CSS, se utilizan selectores para aplicar estilos a elementos específicos de un documento. Los selectores pueden basarse en etiquetas HTML, clases, IDs, atributos y otros. Las propiedades de CSS definen el aspecto de los elementos seleccionados, como el color, el tamaño de la fuente, los márgenes, los bordes, etc.
Hojas de Estilo en Cascada: El término "cascada" se refiere a la forma en que se aplican los estilos. Las reglas pueden venir de diferentes hojas de estilo y fuentes (como estilos incorporados en línea, estilos en la cabecera del documento o estilos externos en archivos .css). El navegador determina cuál regla aplicar basándose en la especificidad y el orden de las reglas.
Compatibilidad: CSS es compatible con todos los navegadores web modernos, aunque puede haber algunas diferencias en la interpretación y el soporte de ciertas propiedades en navegadores más antiguos.
Responsive Design: CSS permite crear diseños responsivos que se adaptan a diferentes tamaños de pantalla y dispositivos, utilizando técnicas como media queries, unidades relativas, y flexbox o grid layout.
Selector en CSS
En CSS, los selectores se utilizan para seleccionar los elementos HTML a los que se les aplicarán los estilos, mientras que las propiedades definen cómo se estilizarán esos elementos. A continuación se describen algunos de los selectores y propiedades más comunes:
1.-Selector de Tipo: Selecciona todos los elementos de un tipo específico.
p {
color: blue;
}
Selecciona todos los párrafos (<p>) y los hace azules.
2.-Selector de Clase: Selecciona elementos con una clase específica. Las clases se definen en el HTML con el atributo class.
.miClase {
font-size: 20px;
}
Selecciona todos los elementos con la clase miClase y les asigna un tamaño de fuente de 20 píxeles.
3.-Selector de ID: Selecciona un elemento con un ID específico. Los IDs se definen en el HTML con el atributo id.
#miID {
background-color: yellow;
}
Selecciona el elemento con el ID miID y le asigna un color de fondo amarillo.
4.-Selector Universal: Selecciona todos los elementos.
* {
margin: 0;
padding: 0;
}
Elimina los márgenes y el relleno de todos los elementos.
5.-Selectores de Descendientes: Selecciona elementos que son descendientes de un elemento específico.
div p {
color: green;
}
Selecciona todos los párrafos (<p>) que están dentro de un <div> y los hace verdes.
6.- Selectores de Hijo Directo: Selecciona elementos que son hijos directos de un elemento específico.
div > p {
color: purple;
}
Selecciona todos los párrafos (<p>) que son hijos directos de un <div> y los hace morados.
7.-Selectores de Grupo: Selecciona múltiples elementos y les aplica los mismos estilos.
h1, h2, h3 {
font-family: Arial, sans-serif;
}
Aplica la fuente Arial a todos los encabezados de nivel 1, 2 y 3.
Propiedades en CSS
Color y Fondo:
color: red; /* Color del texto */
background-color: yellow; /* Color de fondo */
background-image: url('imagen.jpg'); /* Imagen de fondo */
Tipografía:
font-family: 'Arial', sans-serif; /* Familia de fuentes */
font-size: 16px; /* Tamaño de la fuente */
font-weight: bold; /* Peso de la fuente */
text-align: center; /* Alineación del texto */
Espaciado:
margin: 10px; /* Margen exterior */
padding: 20px; /* Relleno interior */
Bordes y Sombras:
border: 1px solid black; /* Borde */
border-radius: 5px; /* Bordes redondeados */
box-shadow: 2px 2px 5px gray; /* Sombra del elemento */
Dimensiones:
width: 100px; /* Ancho */
height: 200px; /* Alto */
Posicionamiento:
position: relative; /* Posición relativa */
top: 10px; /* Desplazamiento desde la parte superior */
left: 20px; /* Desplazamiento desde la izquierda */
Visualización y Visibilidad:
display: block; /* Tipo de caja */
visibility: hidden; /* Visibilidad */
Llamar a CSS
<link rel="stylesheet" href="estilonuevo.css">
Archivo CSS
header {
background-color: blue;
color: white;
}
main {
color: black;
}
footer {
background-color: gray;
color: white;
}
Comentario en CSS
/* Comentario */