"Notas de estudio personal 13"
heredar
- Herencia de estilo, el estilo que establezcamos para un elemento también se aplicará a los elementos descendientes.
- La herencia se produce entre generaciones sucesivas de antepasados.
- El diseño heredado es para facilitar nuestro desarrollo.
- Usando la herencia, podemos establecer de manera uniforme algunos estilos comunes para elementos de ancestros comunes. Esto solo debe configurarse una vez, para que todos los elementos tengan este estilo.
- Nota: No se heredarán todos los estilos, como los relacionados con el fondo y el diseño, etc. Estos estilos no se heredarán.
Peso del selector
Conflictos de estilo
Cuando seleccionamos el mismo elemento a través de diferentes selectores y establecemos diferentes valores para el mismo estilo, se produce un conflicto de estilo.
Cuando se produce un conflicto de estilo, el estilo que se aplica está determinado por el peso (prioridad) del selector.
Peso del selector
| Selector | prioridad |
|---|---|
| Estilo en línea | 1,0,0,0 |
| selector de id | 0,1,0,0 |
| Selector de clases y pseudoclases | 0,0,1,0 |
| Selector de elementos | 0,0,0,1 |
| Selector de comodines | 0,0,0,0 |
| Estilo heredado | Sin prioridad |
- Al comparar prioridades, es necesario sumar las prioridades de todos los selectores. Finalmente, cuanto mayor sea la prioridad, más prioridad se mostrará (el selector de grupo se calcula pero no se calcula), y la acumulación de selectores no excederá su máximo En orden de magnitud, el selector de clase no será más alto que el selector de id.
- Si agrega! Important después de un estilo, este tendrá la máxima prioridad, incluso superando el estilo en línea. (Nota: durante el desarrollo, utilícelo con precaución, no es conveniente modificarlo)
Pixeles y porcentajes
Unidad de longitud:
- Pixel
La pantalla se compone de pequeños puntos. El
tamaño de píxel de las diferentes pantallas es diferente. Cuanto más pequeño es el píxel, más claro es el efecto de visualización de la pantalla.
Por lo tanto, el mismo efecto de visualización de 200 píxeles es diferente en diferentes dispositivos.
- porcentaje
También puede establecer el valor del atributo como un porcentaje relativo al atributo de su elemento principal.
Establecer el porcentaje puede hacer que el elemento secundario siga el cambio del elemento principal.
ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
height: 200px;
width: 200px;
background-color: blue;
}
.box2 {
height: 50%;
/* 宽和高为box1的一半 */
width: 50%;
background-color: darkseagreen;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
Mostrar resultado:
em y rem
Estos dos también son unidades de longitud.
- en
El em se calcula en relación con el tamaño de fuente del elemento.
1em = 1 tamaño de
fuente em cambiará según el tamaño de fuente.
- movimiento rápido del ojo
Rem se calcula en relación con el tamaño de fuente del elemento raíz.
Ejemplo 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
font-size: 2px;
height: 200em;
width: 200em;
background-color: blue;
}
.box2 {
font-size: 1px;
height: 200em;
width: 200em;
background-color: firebrick;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
</html>
Mostrar el resultado:
Ejemplo 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
font-size: 1px;
}
.box1 {
height: 200rem;
width: 200rem;
background-color: blue;
}
.box2 {
height: 100rem;
width: 100rem;
background-color: firebrick;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
</html>
Mostrar resultado:
Valor RGB
Unidad de color:
- Puede usar directamente el nombre del color para configurar varios colores en CSS.
- Por ejemplo: rojo, naranja, amarillo, azul, verde, rosa, etc.
- Pero es muy inconveniente usar nombres de colores directamente en CSS.
Valor RGB:
- RGB es mezclar diferentes colores R rojo, G verde, B azul a través de diferentes concentraciones de tres colores
- El rango de cada color está entre 0-255 (0% -100%).
- Sintaxis: RGB (rojo, verde, azul)
RGBA:
- Es agregar una a para indicar opacidad sobre la base del valor RGA.
- Se requieren cuatro valores, los primeros tres son iguales a rgb y el cuarto representa la opacidad.
- 1 significa completamente opaco 0 significa completamente transparente 0.5 significa semitransparente.
Valor RGB en hexadecimal
- Sintaxis: #red green blue
- Rango de densidad de color 00-ff
- Si el color se repite con dos
dígitos, se puede abreviar #aabbcc abreviado #abc
ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
height: 100px;
width: 100px;
background-color: red;
}
.box2 {
height: 100px;
width: 100px;
background-color: rgb(0, 255, 0);
}
.box3 {
height: 50px;
width: 100px;
background-color: rgba(0, 255, 0, .5);
}
.box4 {
height: 100px;
width: 100px;
background-color: #0000ff;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
Los resultados muestran que:
Valor HSL Valor HSLA
- Tono H (0-360)
- S saturación, la densidad del color 0% -100%
- L brillo, brillo de color 0% -100%
Código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
height: 100px;
width: 100px;
background-color: hsl(88, 40%, 50%);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
La explicación es la siguiente:
