Serialización detallada de HTML (5)
- Enlace de columna [enlace] (http://t.csdn.cn/xF0H3)
- comenzar
-
- Altura de línea: establezca el espaciado del texto de varias líneas
- Altura de fila: centro vertical
- Familia tipográfica
- propiedad compuesta de fuente
- guion de texto
- alineación del texto
- línea de decoración de texto
- color del texto color
- Herramienta de depuración - Google Chrome
- selector compuesto
- selector de descendientes
- selector de pseudo clase
enlace de columnaenlace
La siguiente columna presenta
Esta columna es el viaje de aprender el front-end por mí mismo, el código es puramente golpeado a mano, y seguí el curso del caballo oscuro para aprender, y agregué algunos de mis propios conocimientos e hice los cambios apropiados en el código y las notas
. Espero que pueda ser útil para todos y, al mismo tiempo, supervíseme, dé sugerencias sobre el código que escribí y aprendan unos de otros.
comenzar
Altura de línea: establezca el espaciado del texto de varias líneas
Nombre del Atributo
altura de la línea
valor de atributo
Número +
número px (el múltiplo del valor del atributo de tamaño de fuente de la etiqueta actual)
Método de medición de altura de fila
Mida desde la parte superior (inferior) de una línea de texto hasta la parte superior (inferior) de la siguiente línea de texto
Altura de fila: centro vertical
Habilidad
El valor de la propiedad de altura de línea es igual al valor de la propiedad de altura de caja
Familia tipográfica
Nombre del Atributo
Familia tipográfica
valor de atributo
nombre de la fuente
ejemplo
font-family:楷体;
expandir
El valor del atributo de familia de fuentes puede escribir múltiples nombres de fuentes, cada fuente está separada por una coma, la secuencia de ejecución es buscar el
atributo de familia de fuentes de izquierda a derecha y finalmente establecer un nombre de familia de fuentes. Se recomienda usar sans fuentes serif para desarrollo web
propiedad compuesta de fuente
Escenas a utilizar
Establecer el estilo común del texto de la página web
Atributo compuesto
La abreviatura de atributos, un atributo corresponde a múltiples valores, y cada valor de atributo está separado por un
espacio
ejemplo
div {
font:italic 700 30px/2 楷体;
}
Aviso
Se debe escribir el tamaño de fuente y el valor de fuente; de lo contrario, el atributo de fuente no tendrá efecto
guion de texto
Nombre del Atributo
índice de texto
valor de atributo
Número+px
número+em (1em=el tamaño de fuente de la etiqueta actual)
alineación del texto
Rol: Controlar la alineación horizontal del contenido
Nombre del atributo: línea de texto
valor de atributo
alineación izquierda-izquierda (predeterminada) alineación derecha-derecha
centrada en el centro
Alineación horizontal - Imagen
La esencia de text-aline es controlar la alineación del contenido, y el atributo debe establecerse en el padre del contenido.
línea de decoración de texto
Nombre del Atributo
decoración de texto
valor de atributo
Atributos | valor de atributo |
---|---|
ninguno | ninguno |
subrayar | subrayar |
línea directa | tachado |
superposición | subrayar |
color del texto color
Nombre del Atributo
color
valor de atributo
Representación de colores
Color palabras clave-color palabras en inglés
notación rgb - rgb (r, g, b) - valor de tres colores primarios rgb 0-255
notación rgba - rgba (r, g, b, a) a significa valor de transparencia 0-1
Notación hexadecimal - #RRGGBB
pista
Siempre que el valor del atributo sea color, se pueden utilizar los cuatro métodos de representación de color anteriores, por ejemplo: color de fondo.
Herramienta de depuración - Google Chrome
efecto
Verificar y depurar código; ayudar a los programadores a encontrar problemas de código y resolver problemas
Abre el depurador
F12
Detalles de la herramienta de depuración
1. Si es un atributo incorrecto, habrá un signo de exclamación amarillo
2. Hay varias casillas de verificación delante del atributo CSS, si está marcado: el atributo entra en vigor
selector compuesto
definición
Compuesto por dos o más selectores básicos combinados de diferentes maneras
efecto
Selección más precisa y eficiente de los elementos de destino (etiquetas)
selector de descendientes
Seleccionar los descendientes de un elemento
fraseología
Selector padre selector hijo {propiedad CSS}, los selectores padre e hijo están separados por espacios.
selector de niños
Seleccionar un elemento hijo de un elemento (hijo más cercano)
redacción del selector
Selector principal > selector secundario {propiedad CSS}, separe los selectores principal y secundario con >
selector de unión
Seleccione varios conjuntos de etiquetas para establecer el mismo estilo
fraseología
Selector 1, selector 2, ... selector N {atributo CSS}, usados entre selectores, separados
selector de intersección
Seleccionar elementos que cumplan múltiples condiciones al mismo tiempo
fraseología
Selector 1 Selector 2 {Atributo CSS}, los selectores están conectados sin ningún símbolo
Aviso
Si hay un selector de etiquetas en el selector de intersección, el selector de etiquetas debe escribirse en la parte superior
selector de pseudo clase
La pseudoclase representa el estado del elemento, y un cierto estado del elemento seleccionado establece el estilo
estado de mouseover
Selector
hover{CSS属性}
enfatizar
Cualquier etiqueta puede establecer el estado de desplazamiento del mouse
pseudo-clase-hipervínculo
estado
:link 访问前
:visited访问后
:hover 鼠标悬停
:action 点击时(激活)
Aviso
Si desea configurar los cuatro estados anteriores para hipervínculos, debe escribirlos en el orden de LVHA