Esquema de aprendizaje de CSS

CSS (Hojas de estilo en cascada) es un lenguaje utilizado para diseñar documentos HTML. Con CSS, puedes controlar el diseño de la página, los colores, las fuentes y otros elementos visuales. Aquí hay algunos puntos de conocimiento de CSS básicos pero importantes:

Selectores y atributos :
- Los selectores se utilizan para seleccionar los elementos HTML a los que desea aplicar estilo. Los atributos y valores definen cómo aplicar estilo a los elementos seleccionados.
```
/* 选择器 {属性: 值;} */
p {
      
      color: red;}
```

Selectores de ID y Clase :

El selector de ID #tiene un prefijo y el selector de clase .tiene un prefijo.

#myid {
      
      background-color: lightblue;}
.myclass {
      
      font-size: 16px;}

Selector de combinación :
- Se pueden seleccionar varios elementos simultáneamente y aplicar el mismo estilo.
```
h1, h2, h3 {
      
      text-align: center;}
```
Selector de descendientes :
- Selecciona un elemento anidado dentro de otro elemento.
```
article p {
      
      color: blue;}
```

Selectores de pseudoclase y pseudoelemento :

Se utiliza para seleccionar un estado específico o parte de un elemento.

a:hover {
      
      color: green;}  /* 鼠标悬停 */
p::first-line {
      
      font-weight: bold;}  /* 第一行文本 */

Modelo de caja :

Incluye cuatro partes: margen, borde, relleno y contenido, que controlan el diseño y el tamaño de los elementos.

div {
      
      
  margin: 10px;
  border: 2px solid black;
  padding: 20px;
  width: 300px;
}

Modelo de diseño :

Como flexbox y grid, se utilizan para crear diseños complejos.

.flex-container {
      
      
  display: flex;
}
.grid-container {
      
      
  display: grid;
}

Consultas de los medios :
- Se utiliza para crear diseños responsivos que aplican diferentes estilos según diferentes dispositivos y tamaños de pantalla.
```
@media (max-width: 600px) {
      
      
  body {
      
      font-size: 14px;}
}
```

Animaciones y transiciones :

Crea animaciones y transiciones.

.transition {
      
      
  transition: all 0.3s ease-in-out;
}
@keyframes myanimation {
      
      
  from {
      
      opacity: 0;}
  to {
      
      opacity: 1;}
}
.animation {
      
      
  animation: myanimation 2s infinite;
}

Colores y unidades :
- Hay muchos métodos de representación de color en CSS, como nombre, hexadecimal, rgb, rgba, hsl y hsla, etc.
- Las unidades de tamaño incluyen píxeles (px), em, rem, porcentaje (%), unidad de ventana (vw/vh), etc.
```
color: red;
color: #ff0000;
color: rgb(255, 0, 0);
font-size: 16px;
padding: 2em;
margin: 5%;
width: 80vw;
```
Variables (propiedades personalizadas) :
las variables CSS, también llamadas propiedades personalizadas, le permiten crear valores reutilizables.
```
:root {
      
      
  --main-color: blue;
}
body {
      
      
  color: var(--main-color);
}
```

Funciones CSS :
como calc(), clamp(), min(), max()etc., brindan la capacidad de calcular valores dinámicamente.

.element {
      
      
  width: calc(100% - 20px);
  font-size: clamp(1rem, 2vw, 1.5rem);
}

Módulo CSS :
al igual que @importlas reglas, le permite dividir CSS en varios archivos.
```
@import url('styles.css');
```

Reglas condicionales de CSS :
por ejemplo @supports, comprueba si el navegador admite una función CSS específica.

@supports (display: grid) {
      
      
  .grid-container {
      
      
    display: grid;
  }
}

índice z :
controla el orden de apilamiento de los elementos.

.element {
      
      
  z-index: 1;
}

Filtros :
aplique efectos gráficos como desenfoque o transformación de color a los elementos.
```
.element {
      
      
  filter: blur(5px);
}
```

Diseño de cuadrícula CSS :
cree diseños de cuadrícula complejos.

.grid-container {
      
      
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

Flexbox :
crea diseños elegantes para elementos de página.

.flex-container {
      
      
  display: flex;
  justify-content: space-between;
}

Otras características relacionadas con el diseño responsivo :
```
aspect-ratio, contain-intrinsic-size 等
```
Interfaces de JavaScript para CSS :
como el modelo de objetos CSS (CSSOM) y el modelo de objetos tipo CSS, que brindan la capacidad de acceder y manipular CSS mediante programación.
CSS Houdini :
es un nuevo conjunto de API y métodos de trabajo que permiten a los desarrolladores acceder al proceso de renderizado de CSS en un nivel inferior y crear nuevos diseños, animaciones y otras funciones. Puede cambiar completamente la forma en que funciona CSS en el futuro.

El contenido anterior es solo la punta del iceberg en el campo de CSS. A medida que los estándares web continúen evolucionando, CSS continuará introduciendo nuevas características y tecnologías. No solo aprenda a aplicar estos conocimientos, sino que también comprenda cómo afectan el diseño y la disposición de las páginas, y cómo trabajar con HTML y JavaScript para crear páginas web interactivas y dinámicas.

Esquema de aprendizaje de CSS

Supongo que te gusta