CSS
Directorio de artículos
Prefacio
Luego, la revisión de front-end anterior 01 continuó revisando el conocimiento relevante de css.
Sugerencia: El siguiente es el contenido de este artículo, los siguientes casos son para referencia
Uno, CSS
CSS es una "hoja de estilo en cascada", que es un lenguaje de marcado utilizado para (mejorar) controlar el estilo de una página web y permitir que la información de estilo se separe del contenido de la página web.
1. Reglas gramaticales CSS
Por ejemplo: p{ color:blue; font-size:50px; }
p:
selector : el navegador determina los elementos HTML (etiquetas) afectados por el estilo CSS de acuerdo con el "selector".
color, font-size:
property (propiedad) es el nombre del estilo que desea cambiar y cada propiedad tiene un valor. Los atributos y valores están separados por dos puntos y rodeados por llaves, formando así una declaración de estilo completa (declaración), por ejemplo: p {color: azul}
Declaraciones múltiples : si desea definir más de una declaración, debe use un punto y coma Separe cada enunciado. Aunque no es necesario agregar un punto y coma al final de la última declaración (pero intente agregar un punto y coma al final de cada declaración).
Comentario CSS : / * contenido del comentario * /
2. La combinación de CSS y HTML (3 tipos)
2.1 Establecer directamente en el atributo de estilo de la etiqueta
<span style="border: 2px solid lightblue;">span标签1</span>
<span style="border: 2px solid lightblue;">span标签2</span>
<span style="border: 2px solid lightblue;">span标签3</span>
efecto:
2.2 En la etiqueta de la cabeza, use la etiqueta de estilo
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
span{
border: 2px solid lightgreen;
}
</style>
</head>
<body>
<span style="border: 2px solid lightblue;">span标签1</span>
<span>span标签2</span>
<span>span标签3</span>
</body>
efecto:
2.3 Escriba el archivo css por separado (el más utilizado)
Escriba el estilo css como un archivo css separado y luego impórtelo a través de la etiqueta de enlace para reutilizarlo. Uso de <link rel="stylesheet" type="text/css" href="./styles.css">etiquetas html en archivos de estilo CSS.
archivo css (nueva hoja de estilo, seleccione css):
span{
border: 2px solid brown;
}
html:
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<span style="border: 2px solid lightblue;">span标签1</span>
<span>span标签2</span>
<span>span标签3</span>
Efecto:
Resumen: El efecto final está relacionado con la secuencia de efectos, cuyo método es el efecto final al final.
3.selector CSS
3.1 Selector de nombre de etiqueta
Usar estilos por nombre de etiqueta
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
span{
border: 3px dashed skyblue;
color: darkblue;
font-size: 10px;
}
</style>
</head>
<body>
<span>span标签1</span>
<span>span标签2</span>
<span>span标签3</span>
</body>
</html>
efecto:
3.2 selector de id
Use el estilo de forma selectiva a través del atributo id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style type="text/css">
#id01{
color: darkblue;
font-size: 20px;
border: 2px burlywood dashed;
}
#id02{
color: yellowgreen;
font-size: 30px;
border: 3px red solid;
}
</style>
</head>
<body>
<span id="id01">span标签1</span>
<span id="id02">span标签2</span>
</body>
</html>
efecto:
3.3 selector de clase (selector de clase)
Uso selectivo de estilos a través del atributo de clase.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class选择器</title>
<style type="text/css">
.class01{
color: darkblue;
font-size: 20px;
border: 2px burlywood dashed;
}
.class02{
color: yellowgreen;
font-size: 30px;
border: 3px red solid;
}
</style>
</head>
<body>
<span class="class02">span标签1</span>
<span class="class01">span标签2</span>
</body>
</html>
efecto:
3.4 Selector de combinación
Separe por comas para permitir que varios selectores compartan el mismo estilo CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class选择器</title>
<style type="text/css">
.class01,#id01{
color: darkblue;
font-size: 20px;
border: 2px burlywood dashed;
}
</style>
</head>
<body>
<span id="id01">span标签1</span>
<span class="class01">span标签2</span>
</body>
</html>
efecto:
4. Estilos comunes
4.1 Color de fuente
color: azul; el
color se puede escribir con nombres de color como negro, azul, rojo, verde, etc. Los
colores también se pueden escribir con valor rgb y valor de representación hexadecimal: como rgb (255,0,0), # 00F6DE, si escribe dieciséis El valor hexadecimal debe sumar #
4.2 Ancho
ancho: 20px;
ancho puede escribir valor de píxel: 20px;
también puede escribir valor porcentual: 20%;
4.3 Altura
altura: 20 px; la
altura puede escribir valor de píxel: 20 px;
también puede escribir valor porcentual: 20%;
4.4 Color de fondo
color de fondo: # 0F2D4C
4.5 Estilo de fuente
color: # FF0000; color de
fuente rojo tamaño de fuente: 20px; tamaño de fuente
4.6 Borde de línea sólida roja de 2 píxeles
borde: 2px rojo sólido;
4.7 centrado en DIV
margen izquierdo: automático;
margen derecho: automático;
4.8 Centrado del texto:
alineación de texto: centro;
4.9 Hipervínculos para subrayar
decoración de texto: ninguna;
4.10 Líneas finas en la tabla
table { border: 1px solid black; / * establecer borde * / border-collapse: collapse; / * fusionar bordes * / } td, th { border: 1px solid black; / * establecer borde * / }
4.11 Modificación de eliminación de lista
ul { estilo de lista: ninguno; }
para resumir
Hoy revisé el CSS del front-end y mañana revisaré JavaScript.