Tabla de contenido
I. Introducción
CSS (Cascading Style Sheets), como una de las tecnologías centrales del desarrollo front-end, dota a las páginas web de belleza e interactividad. Este artículo analizará en profundidad el selector compuesto, el modo de visualización de elementos, los atributos de fondo y sus tres características de CSS para ayudar a los lectores a comprender y aplicar CSS mejor.
Dos, selector compuesto CSS
1. Selector de descendientes
El selector descendiente también se conoce como selector de contención . Puede seleccionar los elementos secundarios dentro del elemento principal. Se escribe escribiendo la etiqueta exterior al frente y la etiqueta interna detrás, separadas por un espacio en el medio. Cuando las etiquetas están anidadas, la etiqueta interna se convierte en descendiente de la etiqueta externa.
① Gramática
Sintaxis: elemento1 elemento2 {declaración de estilo}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
<!-- 元素1 元素2 {
样式声明} -->
ol li{
color:pink
}
</style>
</head>
<body>
<ol>
<li>hhh</li>
<li>hhh</li>
<li>hhh</li>
</ol>
<ul>
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ul>
</body>
</html>
② Precauciones
- El elemento 1 y el elemento 2 están separados por un espacio.
- El elemento 1 es el padre, el elemento 2 es el hijo y la selección final es <font color="red" elemento 2
- El elemento 2 puede ser hijo o nieto, siempre que sea descendiente del elemento 1
- elemento1 y elemento2 pueden ser cualquier selector base
2. Subselector
Un selector de elementos secundarios (selector secundario) solo se puede seleccionar como el elemento secundario más cercano de un elemento
① Gramática
Sintaxis: elemento1>elemento2 {declaración de estilo}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.nav>a {
color: red;
}
/* .nav p>a {
color: red;
} */
</style>
</head>
<body>
<div class="nav">
<a href="#">我是儿子</a>
<p>
<a href="#">我是孙子</a>
</p>
</div>
</body>
</html>
Modifica "soy nieto" a rojo
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* .nav>a {
color: red;
} */
.nav p>a {
color: red;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">我是儿子</a>
<p>
<a href="#">我是孙子</a>
</p>
</div>
</body>
</html>
② Precauciones
- El elemento 1 y el elemento 2 están separados por un signo mayor que
- El elemento 1 es el padre, el elemento 2 es el hijo y finalmente se selecciona el elemento 2.
- El elemento 2 debe ser un hijo biológico, y sus nietos, bisnietos, etc. no están bajo su control, y también se le puede llamar selector de hijos biológicos.
3. Selector sindical
Un selector de unión puede seleccionar varios conjuntos de etiquetas y al mismo tiempo definir el mismo estilo para ellas. Por lo general, se usa para declarar colectivamente que
el selector sindical está compuesto por selectores conectados por comas inglesas (,) y cualquier forma de selector se puede usar como parte del selector sindical.
① Gramática
Sintaxis: elemento1, elemento2 {declaración de estilo}
<!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>
div,
p {
color: red;
}
</style>
</head>
<body>
<div>
并集选择器1
</div>
<p>
并集选择器2
</p>
</body>
</html>
② Precauciones
- El elemento 1 y el elemento 2 están separados por una coma.
- La coma puede entenderse como el significado de y
- Los selectores sindicales se suelen utilizar para decisiones colectivas.
4. Selector de pseudoclase de enlace
① Gramática
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 1.未访问的链接a:link 把没有访问过的（点击过的）链接选出来 */
a:link{
color: black;
/* 取消下划线 */
text-decoration: none;
}
/* 2.选择点击过的（访问过的）链接 */
a:visited{
color: burlywood;
}
/* 3.选择鼠标经过的那个链接 */
a:hover{
color:pink
}
/* 4.选择的是我们鼠标正在按下还没有谈起鼠标的那个链接 */
a:active{
color: blueviolet;
}
</style>
</head>
<body>
<a href="#">小猪佩奇</a>
</body>
</html>
② Precauciones
- Para garantizar que entre en vigor, siga el orden de LVHA para declarar: enlace - :visitado - :hover - :activo
- Debido a que un enlace tiene un estilo predeterminado en el navegador, es necesario crear un estilo separado para el enlace.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 设置链接为黑色，并取消下划线 */
a{
color: black;
text-decoration: none;
}
/* 3.选择鼠标经过的链接，并显示下划线 */
a:hover{
color:pink;
text-decoration:underline;
}
</style>
</head>
<body>
<a href="#">小猪佩奇</a>
<a href="www">小点读猪佩奇</a>
</body>
Tres, conversión del modo de visualización de elementos CSS
1. Convertir a visualización de elemento de bloque:bloque
<head>
<style>
a{
width: 240px;
height: 30px;
background-color: palegoldenrod;
/* 把行内元素a转换为块级元素 */
display: block;
}
</style>
</head>
<body>
<a href="#">百度</a>
<a href="#">谷歌</a>
</body>
</html>
2. Convertir a visualización de elementos en línea: en línea
<head>
<style>
div{
/* width: 240px; */
/* height: 30px; */
background-color: aquamarine;
/* 把div 块级元素转换为行内元素 */
display: inline;
}
</style>
</head>
<body>
<div>小猪佩奇</div>
<div>苹果</div>
</body>
</html>
Si se utiliza display: inline, el ancho y el alto no tendrán efecto
3. Convertir a una pantalla de elemento de bloque en línea: bloque en línea
<head>
<style>
span{
width: 300px;
height: 30px;
background-color: coral;
display: inline-block;
}
</style>
</head>
<body>
<span>行内元素转换为行内块元素</span>
<span>行内元素转换为行内块元素</span>
</body>
</html>
Si se utiliza display: inline-block, el ancho y el alto tendrán efecto
4. Propiedades de fondo CSS
1. Mosaico de fondo
background-image: url(image/0001.png);
/* 1.背景图片不平铺 */
background-repeat: no-repeat;
/* 2.默认的情况下，背景图片时平铺的 */
background-repeat: repeat;
/* 3.沿着x轴平铺 */
background-repeat: repeat-x;
/* 4.沿着y轴平铺 */
background-repeat: repeat-y;
2. Posición de la imagen de fondo
/* 背景图片位置
* 如果指定的两个值都是方位名词，则两个值前后顺序无关
* 如果只指定了一个方位名词，另一个值省略，则第二个值默认
* 居中对齐*/
background-position: center top;
background-position: right center;
background-position: 20px center;
3. Imagen de fondo fija (archivo adjunto)
- La propiedad background-attachment establece si la imagen de fondo es fija o se desplaza con el resto de la página.
- El efecto de desplazamiento de paralaje se puede producir en la etapa posterior de la conexión de fondo.
#背景图像是随对象内容滚动(默认的是scroll滚动的)
background-attachment: scroll
#背景图像固定
background-attachment: fixed
4. Color de fondo translúcido
background: rgba(0,0,0,0.3)
Cinco, una de las tres características principales de CSS: herencia
1. Herencia de la altura de la línea.
gramática
body{
font: 12px/1.5 Microsoft YaHei;
}
- La altura de la fila puede ser con unidad o no con unidad.
- Si el elemento secundario no tiene una altura de línea establecida, heredará la altura de línea del elemento principal como 1,5
- En este momento, la altura de la línea del elemento secundario es: el tamaño del texto del elemento secundario actual * 1,5
- La mayor ventaja de esta forma de escribir la altura de la línea del cuerpo es 1,5 es que los elementos secundarios internos pueden ajustar automáticamente la altura de la línea de acuerdo con su propio tamaño de texto.
6. Resumen
El selector compuesto de CSS, el modo de visualización de elementos, el atributo de fondo y sus tres características principales constituyen la parte central de CSS. Al obtener una comprensión sólida de estos conceptos, los desarrolladores pueden controlar de manera más flexible el estilo y la apariencia de los elementos, lo que resulta en páginas web más pulidas e interactivas.