El estilo css se usa especialmente para "embellecer" la etiqueta.
1. Entender CSS rápidamente
<img src="..." style="height:100px" />
<div style="color:red">hello</div>Aquí estilo = "altura: 100 px" y estilo = "color: rojo" son css
2. La forma común de css
2.1 En la etiqueta
<img src="..." style="height:100px" />
<div style="color:red">hello</div>2.2 en la cabeza
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登陆</title>
<style>
.c1{
color=red;
}
</style>
</head>
<body>
<h1 class='c1'>登陆</h1>
<h1 class='c1'>登陆</h1>
<h1 class='c1'>登陆</h1>
</body>
</html>2.3 En el expediente
común.css
.c1{
height:100px;
}
.c2{
color:red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登陆</title>
<link rel="styleheet" href="common.css" />
</head>
<body>
<h1 class='c1'>登陆</h1>
<h1 class='c1'>登陆</h1>
<h1 class='c1'>登陆</h1>
</body>
</html>Aplicable a situaciones en las que varios archivos requieren este estilo
El archivo .css se puede colocar en el directorio estático como la imagen de referencia
Caso: aplicación en matraz
Interfaz de inicio de sesión: escriba css en la cabeza
Interfaz de registro: escribir css en el archivo .css
Problema: No es conveniente desarrollar usando el framework Flask
Requiere reiniciar cada vez
Especifica que algunos archivos deben colocarse en carpetas específicas
Para crear una nueva interfaz, debe reescribir una
función
archivo HTML
PyCharm proporciona una herramienta muy conveniente para desarrollar front-end
Si desea observar los cambios de la página en tiempo real, abra la configuración y modifique como se muestra en la siguiente figura:
De esta manera, la interfaz de vista previa cambiará a medida que cambie el archivo html.
3. Selectividad CSS
3.1 Selectores de clase
.c1{
}
<div class="c1"></div>3.2 Selector de identificación
#c1{
}
<div id="c1"></div>3.3 Selector de etiquetas
li{
}
<li>xxx</li>
div{
}
<div>xxx<div>3.4 Selectores de atributos
input[type='text']{
border: 1px solid red;
}
.v1[xx='456']{
color:gold;
}
<input type="text">
<input type="password">
<div class="v1" xx="123">a</div>
<div class="v1" xx="789">b</div>
<div class="v1" xx="456">c</div>3.5 Selectores de descendientes
.yy li{
color: pink;
}
.yy > a{
color: orange;
}No agregar nada significa encontrar a todos sus descendientes en la clase llamada yy; agregar paréntesis angulares significa solo encontrar a los hijos de la clase yy.
<div class="yy">
<a href="https://www.baidu.com">百度</a>
<div>
<a href="https://www.sogou.com">搜狗</a>
</div>
<ul>
<li>city</li>
<li>country</li>
<li>world</li>
</ul>
</div>Acerca de los selectores:
Muchos usos: selector de clases, selector de etiquetas, selector de descendientes
Menos utilizado: selector de ID, selector de atributos
3.6 Cuando se utilizan selectores múltiples
.c3{
color:blue;
border: 1px solid red;
}
.c4{
color:green;
font-size: 28px;
}<!--使用多个样式时，重复的样式会被后定义的样式所覆盖，类似于就近原则-->
<div class="c3 c4">
<ul>
<li>abc</li>
<li>def</li>
<li>ghj</li>
</ul>
</div>Si no desea estar cubierto por el estilo definido más adelante, el estilo css se puede definir así:
.c3{
color:blue !important;
border: 1px solid red;
}4. Estilos CSS
4.1 Alto y Ancho
.c1{
height: 300px;
width: 50%;
}El ancho admite porcentajes, la altura no, ya que las páginas pueden ser infinitamente largas.
Para las etiquetas en línea, la configuración de alto y ancho no es válida
Para las etiquetas a nivel de bloque, está habilitado de forma predeterminada
4.2 Etiquetas a nivel de bloque y en línea
display:inline-block permite que la etiqueta tenga características tanto de nivel de bloque como de etiqueta en línea
.c2{
display: inline-block;
height: 100px;
width: 300px;
border: 1px solid red;
}<!--块级和行内标签-->
<div>
<span class="c2">chinese</span>
<span class="c2">chinese</span>
<span class="c2">chinese</span>
</div>El efecto es el siguiente:
El nivel de bloque se convierte en etiqueta en línea y la etiqueta en línea se convierte en etiqueta de nivel de bloque
<div style="display: inline">中国</div>
<span class="c2" style="display: block">外国</span>4.3 Color de fuente, tamaño, negrita, formato de fuente
.c3{
color: gold;
font-size: 20px;
font-weight: 100;
font-family: "Apple Color Emoji", serif;
}4.4 Flotante
flotante: izquierda \ derecha
.c4{
float:left;
width: 200px;
height: 150px;
border: 1px solid red;
}<!--浮动-->
<div>
<span>左边</span>
<span style="float: right">右边</span>
</div>
<div style="background-color: lightblue">
<div class="c4"></div>
<div class="c4"></div>
<div class="c4"></div>
<!--如果不添加下面一行，就会脱离文档流-->
<div style="clear: both"></div>
</div>4.5 relleno
relleno-izquierda
acolchado-derecho
acolchado superior
botón de relleno
relleno
.c5{
border: 1px solid red;
height: 400px;
width: 200px;
padding: 20px;
}<!--内边距-->
<div class="c5">
<div style="background-color: gold">听妈妈的话</div>
<div>才是好孩子</div>
</div>4.6 Márgenes
margen
margen izquierdo
margin-right
margin-top
margin-button
<!--外边距-->
<div style="background-color: gold; height:100px"></div>
<div style="background-color: lightblue; height:100px; margin: 20px"></div>4.7区域居中
margin: 0 auto其中0表示无上边距，auto表示区域自动居中
.c6{
width: 500px;
background-color: pink;
height: 1000px;
margin: 0 auto;
}<!--区域居中-->
<div class="c6"></div>