1, CSS
(1) Características
- Se sobrescribirá el mismo atributo y se superpondrán diferentes atributos
(2) método de introducción
- Estilo externo: use la etiqueta de enlace en la etiqueta principal para importar el archivo css
- Estilo incrustado: use la etiqueta de estilo en la etiqueta principal para escribir
- Estilo en línea: agregue un atributo de estilo a la etiqueta correspondiente
1) estilos externos
- Documento de W3C School: https://www.w3school.com.cn/tags/tag_link.asp
| atributos comunes | describir |
|---|---|
| atributo de tipo | Definir tipos de documentos vinculados |
| atributo real | Definir la relación entre el documento actual y el documento vinculado |
| atributo href | Definir la ubicación del documento vinculado |
① código css
- Cree un archivo separado que termine en .css y escriba el siguiente contenido (nombre de archivo personalizado)
/* 给div标签添加黑色实线线条和粉色背景颜色 */
div {
border:1px solid black;
background-color:pink;
}
/* 给p标签内容变为蓝色 */
p {
color:blue;
}
/* 给strong标签内容变为绿色 */
strong {
color:green;
}
② código html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link href="./css/link.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<p>这是一个p标签</p>
<strong>这是一个strong标签</strong>
</div>
</body>
</html>
③ Efecto de operación
2) estilos en línea
① Código
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<!-- css代码 -->
<style>
/* 给div标签添加黑色实线线条和粉色背景颜色 */
div {
border:1px solid black;
background-color:pink;
}
/* 给p标签内容变为蓝色 */
p {
color:blue;
}
/* 给strong标签内容变为绿色 */
strong {
color:green;
}
</style>
</head>
<body>
<div>
<p>这是一个p标签</p>
<strong>这是一个strong标签</strong>
</div>
</body>
</html>
② Efecto de operación
3) estilos en línea
① Código
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<div style="border:1px solid black;background-color:pink;">
<p style="color:blue;">这是一个p标签</p>
<strong style="color:green;">这是一个strong标签</strong>
</div>
</body>
</html>
② Efecto de operación
2. Selector sencillo
Aviso
- Para facilitar la visualización del código, el estilo incrustado se usa uniformemente para escribir y el estilo externo se recomienda en el trabajo de desarrollo real.
(1) Selector de elementos (selector de etiquetas)
① Formato de gramática
标签名 {
属性1:属性值;
属性2:属性值;
}
② Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
div {
border:1px solid black;
background-color:pink;
}
p {
color:blue;
}
</style>
</head>
<body>
<div>
<p>这是一个p标签</p>
</div>
</body>
</html>
③ Efecto de operación
(2) selector de clase (selector de clase)
- Según el tipo, se puede reutilizar. Por ejemplo, el color del texto de las etiquetas p y las etiquetas fuertes se establece uniformemente en azul, simplemente cree un selector de clase
① Formato de sintaxis:
.类名 {
属性1:属性值;
属性2:属性值;
}
② Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
.box {
border:1px solid black;
background-color:pink;
}
.content {
color:blue;
}
</style>
</head>
<body>
<div class="box">
<p class="content">这是一个p标签</p>
<strong class="content">这是一个strong标签</strong>
</div>
</body>
</html>
③ Efecto de operación
(3) Selector de identificación
- selector de id, el valor es único y no se puede reutilizar
① Formato de gramática
#id名 {
属性1:属性值;
属性2:属性值;
}
② Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
#box {
border:1px solid black;
background-color:pink;
}
#content {
color:blue;
}
</style>
</head>
<body>
<div id="box">
<p id="content">这是一个p标签</p>
</div>
</body>
</html>
③ Efecto de operación
(4) Selector comodín
- Verifique todas las etiquetas, todas las etiquetas se verán afectadas, pero el peso es el más bajo
① Formato de sintaxis:
* {
属性1:属性值;
属性2:属性值;
}
② Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
*{
color:blue;
font-size:25px;
}
</style>
</head>
<body>
<div>
<p>这是一个p标签</p>
<strong>这是一个strong标签</strong>
</div>
</body>
</html>
③ Efecto de operación
(5) Peso del selector
| nombre | Pesos |
|---|---|
| !importante | infinidad |
| estilo en línea | 1000 |
| selector de identificación | 100 |
| seleccionador de clase | 10 |
| seleccionador de elementos | 1 |
| selector comodín | 0 |
(1) Reglas de nomenclatura del selector (aplicable a selectores con nombres personalizados)
- No puede comenzar con números y caracteres especiales;
- Debe comenzar con inglés (o pinyin);
- ver el nombre y conocer el significado;
- Usar CamelCase (Little CamelCase/Large CamelCase)
(2) Prioridad y peso del selector
- Prioridad del selector: !importante > estilo en línea > selector de ID > selector de clase > selector de elementos > selector comodín
- Cuando los pesos son iguales, primero mira la secuencia
- Cuando los pesos son diferentes, mira el peso.
- Los pesos se pueden apilar
3. Selector combinado
(1) selector de descendientes
- Selecciona todas las etiquetas secundarias especificadas dentro de una etiqueta principal
① Formato de gramática
父级 子级 {
属性1:属性值;
属性2:属性值;
}
② Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
div strong{
color:blue;
}
</style>
</head>
<body>
<div>
<strong>这是第一个strong标签</strong>
<p>这是第一个<strong>p</strong>标签</p>
<span>这是一个<strong>span标签</strong></span>
<p>这是第二个p标签</p>
<strong>这是第二个strong标签</strong>
</div>
</body>
</html>
③ Efecto de operación
(2) Selector de niños
- Solo seleccione la próxima generación del selector y no seleccione entre generaciones
① Formato de sintaxis:
父级>子级 {
属性1:属性值;
属性2:属性值;
}
② Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
div>strong{
color:blue;
}
div>strong{
color:green;
}
</style>
</head>
<body>
<div>
<strong>这是第一个strong标签</strong>
<p>这是第一个<strong>p</strong>标签</p>
<span>这是一个<strong>span标签</strong></span>
<p>这是第二个p标签</p>
<strong>这是第二个strong标签</strong>
</div>
</body>
</html>
③ Efecto de operación
(3) Selector de hermanos
- Seleccionados en el mismo nivel, solo se seleccionan los elementos que aparecen después, y los elementos anteriores no se seleccionan
① Formato de sintaxis:
元素~元素 {
属性1:属性值;
属性2:属性值;
}
② Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
strong~p{
color:blue;
}
</style>
</head>
<body>
<div>
<p>这是第一个p标签</p>
<p>这是第二个p标签</p>
<strong>这是第一个strong标签</strong>
<p>这是第三个p标签</p>
<span>这是一个span标签</span>
<p>这是第第四个p标签</p>
<span>这是一个span标签</span>
<p>这是第五个p标签</p>
</div>
</body>
</html>
③ Efecto de operación
(4) Selector adyacente
- Seleccione el siguiente elemento en el mismo nivel
① Formato de sintaxis:
元素+元素 {
属性1:属性值;
属性2:属性值;
}
② Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
p+strong{
color:blue;
}
</style>
</head>
<body>
<div>
<p>这是第一个p标签</p>
<p>这是第二个p标签</p>
<strong>这是第一个strong标签</strong>
<strong>这是第二个strong标签</strong>
<strong>这是第三个strong标签</strong>
</div>
</body>
</html>
③ Efecto de operación
(5) Selector de intersección
- Por ejemplo: en el div seleccionado, hay elementos p y .one
① Formato de sintaxis:
div span.one {
属性1:属性值;
属性2:属性值;
}
② Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
div p.one{
color:blue;
}
</style>
</head>
<body>
<div>
<p>这是第一个p标签</p>
<p class="one">这是第二个p标签</p>
<p>这是第三个p标签</p>
<p class="one">这是第四个p标签</p>
<p>这是第五个p标签</p>
</div>
</body>
</html>
③ Efecto de operación
(6) Selector de pseudo clase
- Cuando el mouse se mueve, el elemento actual seleccionado se establece en un estado determinado
① Formato de sintaxis:
选择器:hover {
属性1:属性值;
属性2:属性值;
}
② Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
div {
width:300px;
height:300px;
background-color:aqua;
}
div:hover{
background-color:pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
③ Efecto de operación
color cuando está abierto
Color al pasar el mouse
(7) Selector de pseudoelemento
Características de los pseudoelementos:
- Puede ser seleccionado y modificado por CSS, pero no tiene estructura html
- Nace como un 'elemento en línea', seleccionado y modificado por CSS
- Las características son consistentes con el 'elemento en línea'
(1) antes
- Agregar contenido antes del elemento seleccionado
① Formato de sintaxis:
选择器:before {
content:"内容"
属性1:属性值;
属性2:属性值;
}
② Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
p:before{
content:"这是before添加的内容";
color:blue;
}
</style>
</head>
<body>
<p>这是一个p标签</p>
</body>
</html>
③ Efecto de operación
(2) después
- Agregar contenido después del elemento seleccionado
① Formato de sintaxis:
选择器:after {
content:"内容"
属性1:属性值;
属性2:属性值;
}
② Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
p:after{
content:"这是after添加的内容";
color:blue;
}
</style>
</head>
<body>
<p>这是一个p标签</p>
</body>
</html>
③ Efecto de operación
Para obtener más información sobre el selector, consulte la documentación oficial
https://www.apiref.com/css-zh/index.htm