1 Introducción a CSS

CSS (hojas de estilo en cascada), comúnmente conocidas como hojas de estilo CSS

Especificación de gramática:

Todos los estilos están incluidos en la etiqueta <style></style>. <style> generalmente se escribe en <head> </head>
Comentarios: /* ... */
En forma de pares clave-valor, entre varios elementos; separados
letras minusculas

2 Método de importación CSS

hoja de estilo	fraseología	ventaja	Rango de control
hoja de estilo en línea	<div style="color: rojo; tamaño de fuente: 12px;"> </div>	Fácil de escribir, alto peso	una etiqueta (menos)
hoja de estilo interna	<estilo> div { color: rojo; tamaño de fuente: 12px; } </estilo>	Separación de estructura parcial y estilo.	una página (medio)
hoja de estilo externa	<enlace rel="hoja de estilo" href="ruta del archivo css">	Realice completamente la separación de estructura y estilo.	todo el sitio (múltiple)

Nota:

rel define la relación entre el documento actual y el documento vinculado, aquí debe especificarse como "hoja de estilo", lo que indica que el documento vinculado es un archivo de hoja de estilo

3 selectores básicos de CSS

Clasificación del selector: selector básico, compuesto

selector de base	efecto	características	Uso	gramática
selector de etiquetas	Se pueden seleccionar todas las mismas etiquetas, como p	No puedo elegir diferente	muchos	p {color: rojo;}
seleccionador de clase	Puede seleccionar 1 o la misma etiqueta que el nombre de la clase	Se puede seleccionar según las necesidades.	mucho	.nav {color: rojo;}
selector de identificación	Solo se puede seleccionar 1 pestaña a la vez	solo se puede usar una vez	generalmente	#nav {color: rojo;}
selector comodín	seleccionar todas las pestañas	Demasiadas opciones, algunas no necesitan	pocos	* {color rojo;}

4 propiedades de fuente CSS

Atributos	expresar	valor de atributo	ilustrar
tamaño de fuente	tamaño de fuente	10px	Unidad: px píxel (requerido)
Familia tipográfica	fuente	"Microsoft Yahei"	por acuerdo de equipo
peso de fuente	peso de fuente	negrita，normal，100-900	Negrita es 700 o negrita No negrita es normal o 400, el número no sigue a la unidad
Estilo de fuente	Estilo de fuente	normal, cursiva	Inclinado es cursiva, no inclinado es normal (uso común)
fuente	forma literal		Escriba en el orden prescrito, el tamaño de fuente es obligatorio

<style>
        /* 想要div 文字变倾斜 加粗 字号设置为16像素 并且是微软雅黑 */
        
        div {
            font-style: italic;
            font-weight: 700;
            font-size: 16px;
            font-family: 'Microsoft yahe';
            /* 复合属性：简写的方式  节约代码*/
            /* 顺序：font-style font-weight  font-size/line-height  font-family */
            font: italic 700 16px 'Microsoft yahe';
        }
</style>

font-size Los atributos y deben conservarse font-family, de lo contrario, el atributo de fuente no tendrá efecto

5 Propiedades de texto CSS

Las propiedades de texto CSS pueden establecer la apariencia del texto, como el color del texto, el texto de alineación, el texto de decoración, la sangría del texto, el espacio entre líneas, etc.

Atributos	expresar	valor de atributo	ilustrar
color	color de texto	rojo, #ccc, rgb (100%, 0%, 0%)	El hexadecimal es el más utilizado.
texto alineado	alineación del texto	izquierda, derecha, centro	Establece la alineación horizontal del texto.
guion de texto	guion de texto	2em, em es un tamaño de palabra	Sangría de la primera línea del párrafo
ext-decoración	decoración de texto	ninguno, subrayado, sobrerayado	Añadir subrayado subrayado cancelar subrayado ninguno
altura de la línea	altura de la línea	30 píxeles	Controla la distancia entre líneas, el texto se centra verticalmente

6 selectores compuestos CSS

Los selectores compuestos de uso común incluyen: selectores de descendientes, selectores de niños, selectores de unión, selectores de pseudoclase

6.1 Selectores de descendientes

Puede seleccionar elementos secundarios dentro de un elemento principal

.class h3 {
	color:red;
	font-size:16px;
}

.class y h3 están separados por espacios
.class es el nivel principal, h2 es el nivel secundario y la selección final es h3

6.2 Subselectores

Un entendimiento simple es elegir el elemento padre-hijo

.class>h3 {
	color:red;
	font-size:14px;
}

h3 debe ser hijo de .class , y sus nietos y bisnietos no están bajo su control

6.3 Selectores de unión

Es posible seleccionar múltiples conjuntos de etiquetas y definir el mismo estilo para ellas al mismo tiempo

/*选择  ul  和  div 标签元素 */
ul,div {
    样式声明
}

Los selectores de unión se utilizan a menudo en declaraciones colectivas

6.4 Selectores de pseudoclase

Se utiliza para agregar efectos especiales a algunos selectores, como agregar efectos especiales a los enlaces o seleccionar los elementos 1 y n.
La característica más importante de la escritura del selector de pseudoclase es que se representa con dos puntos, por ejemplo :hover,:first-child
Hay muchos selectores de pseudoclase, como pseudoclases de enlace y pseudoclases estructurales.Aquí primero registramos los selectores de pseudoclase de enlace comúnmente utilizados

a:link      /* 未访问的链接 */
a:visited   /* 已访问的链接 */
a:hover     /* 鼠标移动到链接上 */
a:active    /* 选定的链接 */
记忆法
love   hate     爱上了讨厌  

a :hover {
    /*鼠标经过的时候，变成了红色*/
   color:red; 
}

:focusselector de pseudo clase

Se utiliza para seleccionar el elemento de formulario enfocado

input : focus {
    background-color:yellow;
}

6.5 Resumen de selectores compuestos

Selector	efecto	característica	Uso	uso
selector de descendientes	Se utiliza para seleccionar elementos descendientes	puede ser para las generaciones futuras	muchos	El símbolo es un espacio.nav a
selector de niños	Seleccione el elemento de nivel más cercano	Solo elige a tu propio hijo	pocos	El símbolo es > .nav>p
selector de unión	Seleccionar algunos elementos con el mismo estilo	Se puede utilizar para la declaración colectiva	muchos	El símbolo es coma .nav, .header
Selector de pseudoclase de enlace	Elija un enlace con un estado diferente	enlace relacionado	pocos	Centrarse en recordar un {} y un: pasar el cursor
:selector de enfoque	Seleccione el formulario que obtiene el cursor	formulario relacionado	pocos	entrada: foco

6.6 Cálculo del peso

selector de etiquetas	Fórmula de peso de cálculo
heredado o *	0,0,0,0
por elemento (selector de etiquetas)	0,0,0,1
por clase, pseudoclase	0,0,1,0
por identificación	0,1,0,0
Cada estilo en línea style=""	1,0,0,0
Cada !importante importante	∞ Infinito

Modo de visualización de 7 elementos CSS

patrón de elemento	elementos comunes	Arreglo de elementos	establecer ancho y alto	ancho predeterminado	Incluir	Aviso
elementos de nivel de bloque	etiqueta h, div, pag, ul, li	partido del monopolio	Poder	100% del contenedor principal	puede contener cualquier etiqueta	Los elementos a nivel de bloque no se pueden colocar dentro de las etiquetas p y h
elemento en línea	<a>, <em>, <i>, <span>	más de una línea	No poder	ancho de contenido	Contiene texto u otros elementos en línea	una etiqueta puede contener elementos a nivel de bloque
elemento de bloque en línea	<img/>、<entrada/>、<td>	más de una línea	Poder	ancho de contenido

Conversión de modo:

Convertir a un elemento de bloque: mostrar: bloque
Convertir a elementos en línea: mostrar: en línea
转换为行内块：display: inline-block

一个小技巧：单行文字垂直居中的代码

让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中

8 CSS背景

给页面元素添加背景样式

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

属性	作用	属性值	说明
background-color	背景颜色	16进制	默认值 transparent
background-image	背景图片	none或url	url不需要加引号
background-repeat	是否平铺	repeat/ no-repeat /repeat-x/repeat-y	默认平铺repeat
background-position	背景位置	方位名词或者精确单位	全写，写一个值
background-attachment	背景附着	scroll(背景滚动) /fixed(背景固定)
背景色半透明	颜色透明	background : rgba(0,0,0,.3);后面必须是四个值

特别注意：background-position

参数都是方位名词，则两个值前后顺序无关，只指定一个方位名词，则第二个值默认居中对齐
参数是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标，只指定一个数值，是 x 坐标，另一个默认垂直居中
参数是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

背景简写：

background: transparent url(image.jpg) repeat-y scroll center top

body {
    height: 3000px;
    background-color: #ccc;
    background-image: url(images/sms.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background : rgba(0,0,0,0.3);
    /*background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;*/
    background: #ccc url(images/sms.jpg) no-repeat fixed center top;
		}

Notas CSS: muy detalladas, base cero, sucintas y fáciles de entender (1)