1. Introducción a CSS
¿Qué es CSS? CSS, o "Hoja de estilo en cascada ( hoja de estilo en cascada )", es una tecnología que se utiliza para controlar la apariencia de las páginas web. HTML, CSS y JavaScript son los tres elementos centrales de la tecnología front-end. Entre ellos:
HTML controla la estructura del marco de la página web,
CSS controla la apariencia de la página web,
JavaScript controla el comportamiento de la página web.
2. Método de introducción de CSS
Hay cuatro formas de introducir CSS:
1. Estilo en línea
<html>
<head>
<meta charset="utf-8">
<title></title>
<body>
<p style="color: #CC0000;">这个是红色字体</p>
</body>
</html>
2. Estilo incrustado
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.big{
font-size: 30px;}
</style>
</head>
<body>
<p class="big">css样式内容写在style标签内</p>
</body>
</html>
3. Estilo de enlace externo
Primero cree un archivo css 1.css en el directorio css
p{
font-size:48px;
}
contenido del archivo html:
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/1.css" />
</head>
<body>
<p>我的大小是48px。</p>
</body>
</html>
4. Importar La
ubicación de importación puede estar en el archivo css o en la etiqueta de estilo. La sintaxis de importación es @import url ('./ xxx.css') o @import './ xxx.css'
@import url("css/1.css");
o
@import './xxx.css';
Tres. Relación en cascada
1. Cuando los atributos son los mismos, cuanto mayor es la prioridad detrás del html, la prioridad del estilo en línea es la más alta, porque el estilo en línea es el más cercano al elemento.
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/css02.css"/>
<style type="text/css">
.red{
color: #006400;
}
</style>
</head>
<body>
<P>css优先级</P>
<p class="red" style="color: pink;">宁静致远</p>
</body>
</html>
El resultado que se muestra aquí es rosa porque el estilo en línea es el más cercano al elemento p.
2. Cuando los atributos son inconsistentes, se agregan los atributos.
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/css02.css"/>
<style type="text/css">
.red{
color: #006400;
font-size: 48px;
font-family: "simsun";
}
</style>
</head>
<body>
<P>css优先级</P>
<p class="red" style="color: pink;">宁静致远</p>
</body>
</html>
Mostrar resultado:
3. Plus! Important significa que el peso es el más grande y no se puede sobrescribir.
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/css02.css"/>
<style type="text/css">
.red{
color: red !important;
color: #006400;
color: #DBCBE6;
font-size: 48px;
font-family: "simsun";
}
</style>
</head>
<body>
<p class="red" style="color: pink;">宁静致远</p>
</body>
</html>
Mostrar resultado:
Selector de cuatro. CSS
Primero, hay 7 tipos de selectores:
| Tipo de selector | Pesos |
|---|---|
| Selector de comodines | 0,5 |
| Selector de etiquetas | 1 |
| selector de clases | 10 |
| selector de id | 100 |
| Incluir selector | |
| Selector de grupo | |
| Selector de subconjunto directo |
Prioridad del selector
Cuanto mayor sea el peso en la tabla, mayor será la prioridad, y los pesos de los selectores y los selectores de subconjuntos directos se suman. Cuanto mayor sea el peso, mayor será la prioridad. Aquí están los 7 selectores:
1. Selector de comodines, agregue * {color: red;} directamente al estilo, lo que significa que todos los colores del texto son rojos.
2. Selector de etiquetas, escriba etiquetas directamente y agregue atributos con estilo
p{ font-size:40px;}
span{ color:red;}
Significa que el tamaño de fuente de todas las etiquetas p en la página html es 40px, y el color de fuente en todas las etiquetas span es rojo.
3. Selector de clases, agregue clases y sus atributos en el estilo principal y agregue clases en el cuerpo.
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.red{
color: red;
font-size: 48px;
font-family: "simsun";
}
</style>
</head>
<body>
<p class="red">宁静致远</p>
</body>
</html>
4. selector de id, agregar clase y sus atributos en el estilo de la cabeza, agregar clase en el cuerpo.
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.red{
color: #DBCBE6;
font-size: 48px;
font-family: "simsun";
}
</style>
</head>
<body>
<p id="red" >宁静致远</p>
</body>
</html>
5. Contiene el selector, nombre de clase 1 nombre de clase 2 {atributo}, donde el nombre de clase 2 debe ser un descendiente del nombre de clase 1. (Separado por un espacio.)
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
ul li{
background-color: #125AA2;}
/* 选择的li标签是ul的后代 */
/* 尽量在包含选择器中父辈选择类名或者id */
/* 一般选择器层级不超过三层 */
</style>
</head>
<body>
<h1>包含选择器</h1>
<ul>
<li>ul中的li1</li>
<li>ul中的li2</li>
<li>ul中的li3</li>
</ul>
</body>
</html>
6. Selector de grupo, nombre de clase 1, nombre de clase 2, nombre de clase 3 {atributo}, nombre de clase 1, nombre de clase 2, nombre de clase 3 comparten los atributos siguientes. (Se usa en el medio para separar).
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
h1,p,leiming{
color:red;
}
</style>
</head>
<body>
<h1>css选择器</h1>
<p>选择到html元素，应用css样式</p>
<div class="leiming">宁静致远</div>
</body>
</html>
7. Selector de subconjunto directo, nombre de clase 1> nombre de clase 2> nombre de clase 3, donde el nombre de clase 3 debe ser un subconjunto del nombre de clase 2 y el nombre de clase 2 debe ser un subconjunto del nombre de clase 1, para que la clase se controle directamente El atributo del nombre 3. (Separado por> en el medio).
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
ul>li>p{
color: #125AA2;}
</style>
</head>
<body>
<h1>css选择器</h1>
<p>选择到html元素，应用css样式</p>
<ul>
<li id="myid">id选择器</li>
<li class="odd">class类选择器</li>
<li>包含选择器</li>
<li><p>标签选择器</p></li>
<li>通配符选择器</li>
</body>
</html>
Aquí solo el color del texto del selector de etiquetas p se volverá rojo.
Prioridad de Five.css
1. ¡Sí! El modificador importante es el más alto.
2. Cuanto más cerca esté el CSS del elemento, mayor será la prioridad
. 3. Cuando los selectores son consistentes, el estilo en la línea de estilo tiene una prioridad más alta. Para el mismo CSS, este último anulará al anterior.