# 1.css Selector compuesto #
Para etiquetas de elementos de destino más precisas y refinadas
## 1.1 css 后代 选器 ##
Se usa para seleccionar los descendientes del elemento o grupo de elementos
Escriba la etiqueta externa en el medio del espacio antes de escribir el abuelo padre hijo
{P UL .cc
color: verde;
}
si anidación ocurre etiqueta, la etiqueta se convierte en la progenie etiqueta exterior interior
## 1,2 ## progenie selector
/ * hijos y nietos progenie se seleccionan de los selectores * /
div {fuerte
color: rojo;
}
/ * selector secundario solo seleccione el pro son * /
div> strong {
color: green;
}
## 1.3 Selector de intersección ##
Condición: el
selector de intersección consta de dos selectores, las etiquetas deben cumplirse, ambas Las características de la etiqueta 1 y las características de la etiqueta 2-
gramática
/ * selector de intersección son tanto la relación del selector p como la .red * /
p.red {
color: red;
} ## 1.4并 集 精选
器 ##
Los selectores de unión están separados por comas, las comas se entienden como un significado de paz y generalmente se utilizan para declarar colectivamente
<style>
/ * Requisitos del cliente: los colores en p y span son rojos * /
/ * p {
color: red;
}
span {
color: rojo;
} * /
p, span {
color: rojo;
}
</ style>
<body>
<p> Yo y tú </ p>
<p> Yo y tú </ p>
<p> Yo y tú < / p>
<span> Yo y tú </ span>
<span> Yo y tú </ span>
<span> Yo y tú </ span>
<div> Yo y tú </ div>
<div> Yo y tú < / div>
<div> Yo y tú </ div>
</ body>
## 1.5 Selector de pseudoclase de enlace ##
Sintaxis
-Por ejemplo: enlace {}
-a: enlace / * enlace no visitado * /
-a: visitado / * enlace visitado * /
-a: desplazarse / * pasar el mouse sobre el enlace * /
-a: activo / * enlace seleccionado * /
nota Intente no invertir el orden al escribir, de acuerdo con el orden lvha.
Debido a que un navegador de enlaces tiene un estilo predeterminado, necesitamos especificar el estilo para el enlace por separado en nuestro trabajo real.
El desarrollo real rara vez escribe los cuatro estados
css
a {/ * a es el selector de etiquetas todos los enlaces * /
font-weight: 700;
font-size: 16px;
color: grey;
}
a: hover {/ *: hover is Enlace pseudo-selector pasa el mouse * /
color: rojo; / * Cuando pasa el mouse, el gris original cambia a rojo * /
}
## 2.modo de visualización de etiqueta ##
## 2.1 ¿Cuál es el modo de visualización de etiqueta ##
-¿Cuál es el modo de visualización de etiquetas?
Cómo mostrar etiquetas, como div ocupa una línea, como la línea de extensión puede tener muchas
funciones:
nuestra página web tiene muchas etiquetas, y luego se usarán diferentes tipos de etiquetas en diferentes lugares, para completar mejor nuestra página web.
-Tipos de etiquetas (clasificación) Las
etiquetas HTML generalmente se dividen en dos tipos: etiquetas de bloque y etiquetas en línea, también se denominan elementos de bloque y elementos en línea.
## 2.2 块 级 元素 ##
Los elementos de bloque comunes incluyen <h1> ~ <h6>, <p>, <div>, <ul>, <ol>, <li>, etc., donde la etiqueta <div> es la más típica Elemento de bloque
-Características de los elementos a nivel de bloque
(1) Poseer una línea propia
(2) Se puede controlar la altura, el ancho, el margen exterior y el margen interior.
(3) El ancho es el 100% del contenedor (ancho principal) por defecto.
(4) Es un contenedor y una caja, que puede contener elementos internos o de nivel de bloque.
-Nota:
-Solo el texto puede formar párrafos, por lo que p no puede contener elementos de nivel de bloque, especialmente p no puede poner div
-Similarmente, existen estas etiquetas h1, h2, h3, h4, h5, h6, dt, son todos tipos de texto Etiquetas de nivel de bloque, donde no se pueden colocar otros elementos de nivel de bloque.
## 2.3 行 内 元素 ##
-Ejemplo:
`` `
Los elementos en línea comunes son <a>, <strong>, <b>, <em>, <i>, <del>, <s>, <ins>, <u>, <span>, etc., donde <span> El elemento en línea más típico de la etiqueta.
Algunos lugares a los elementos en línea `
- Características de los elementos de línea:
(1) elementos de la fila adyacente en una línea, líneas múltiples pantallas.
(2) La configuración directa de altura y anchura no es válida.
(3) El ancho predeterminado es el ancho de su propio contenido.
(4) ** Los elementos en línea solo pueden contener texto u otros elementos en línea. **
Nota:
-No se pueden colocar más enlaces en el enlace.
-En casos especiales, los elementos de nivel de bloque se pueden colocar en a, pero es más seguro cambiar el modo de nivel de bloque a a.
## 2.4 行 内 块 元素 ##
-Ejemplo:
`` `
Hay varias etiquetas especiales en los elementos en línea: <img />, <input />, <td>, puede establecer el ancho y la altura y los atributos de alineación en ellos, Algunos datos pueden referirse a ellos como elementos de bloque en línea.
`` -Características
de los elementos de bloque en línea:
(1) Está en la misma línea que el elemento de línea adyacente (bloque en línea), pero habrá un espacio en blanco entre ellos. Una línea puede mostrar múltiples
(2) El ancho predeterminado es el ancho de su propio contenido.
(3) Se puede controlar la altura, la altura de la línea, el margen exterior y el margen interior.
## 2.5 Resumen de tres elementos ##
| Patrón de elementos | Disposición de elementos | Establecer estilo | Ancho predeterminado | Contiene |
| ---------- | -------------- -------- | ---------------------- | ---------------- | - ----------------------- |
| Elementos de nivel de bloque | Solo se puede colocar un elemento de nivel de bloque en una línea | Puede establecer el ancho y la altura | 100% del contenedor | Nivel de contenedor Puede contener cualquier etiqueta |
| Elementos en línea | Puede poner varios elementos en línea en una línea | No puede establecer el ancho y el alto directamente | El ancho de su propio contenido | Para acomodar texto u otros elementos en línea |
| Elemento de bloque en línea | Poner múltiples elementos de bloque en línea en una línea | Puede establecer el ancho y la altura | El ancho de su propio contenido | |
## 2.6 Conversión de modo de visualización de
etiqueta display -block to line: display: inline; -line
to block: display: block;
-Blocks, los elementos en línea se convierten en bloques en línea: display: inline-block; en
esta etapa, solo necesitamos preocuparnos por estos tres, y el resto es nuestro trabajo posterior.
# 3.
Objetivos de altura de línea
-comprender
-puede decir la relación entre la altura y la altura de la línea
-puede entender fácilmente por qué la altura de la línea es igual a la altura del texto de una sola línea estará centrada verticalmente
-aplicación
-utiliza la altura de la línea para lograr el centrado vertical del texto de una sola línea
-Puede medir la altura de la línea
## 3.1 行 高
测 ## 3.2 El texto de una sola línea está centrado verticalmente
Uno de los lugares que más usamos es: Puede hacer que el texto de una sola línea esté verticalmente alineado en el cuadro.
> ** La altura de la línea del texto es igual a la altura del cuadro. **
La situación aquí es un poco complicada. Comencemos a aprender. Podemos comenzar con un lugar simple.
Altura de línea = distancia superior + altura de contenido + distancia inferior
<img src = "media / 1.png" width = "700" /> Las
distancias superior e inferior son siempre iguales, por lo que el texto parece estar centrado verticalmente.
** Tres relaciones entre la altura de la fila y la altura **
- Si la línea de texto se centra verticalmente mayor altura
- Si la altura de la línea a la altura del texto se hará con preferencia a
- Si la altura de la fila es menor que la altura del texto se hará con preferencia
# 4. fondo CSS (fondo)
de destino
- la comprensión de
la función de los antecedentes -
- imágenes de fondo y CSS inserto la diferencia entre la imagen
- aplicaciones
- a través de css fondo propiedad, añadir estilo de fondo a un elemento de página
- puede fijar posición diferente imagen de fondo
## colores 4.1 de fondo (color)
- sintaxis:
`` `
background-color: valor de color; el valor por defecto es transparente
`` `
## 4.2 Imagen de fondo (imagen)
-Sintaxis:
` `` css
background-image: none | url (url)
`` `
| Parámetros | Función |
| ---- |: ---- ------------------------: |
| none | Sin imagen de fondo (predeterminado) |
| url | Usar dirección absoluta o relativa para especificar la imagen de fondo |
` `` css
background-image: url (images / demo.png);
`` ` -Consejo
: Defendemos la dirección detrás de la imagen de fondo, no agregue comillas a la url.
## 4.3
Mosaico de fondo (repetición) -Sintaxis:
`` `css
background-repeat: repeat | no-repeat | repeat-x |
repeat- y` ``
| Parámetros | Función |
| -------- - |: ----------------------------------: |
| repetir | La imagen de fondo es plana en vertical y horizontal
Mosaico (predeterminado) | | no repetir | la imagen de fondo no está en mosaico |
| repetir-x | la imagen de fondo está en mosaico horizontal |
| repetir-y | la imagen de fondo está en mosaico vertical |
## 4.4 posición de fondo (foco)
-Sintaxis:
`` `css
background-position: length || length
background-position: position || position``
`
| Parámetro | Valor |
| -------- |: ---------------------------------- ------------------------: |
| longitud | porcentaje \ | El valor de longitud compuesto por números de coma flotante e identificadores de unidad |
| posición | top \ | center \ | bottom \ | left \ | center \ | right
Nombre de posición | -Nota:
-El atributo de imagen de fondo debe especificarse en primer
lugar, seguido de las coordenadas x e y. Puede usar sustantivos de posición o unidades precisas.
-Si especifica dos valores, los cuales son nombres de posición, el orden de los dos valores es irrelevante, como la parte superior izquierda y la superior izquierda tienen el mismo efecto.
-Si solo se especifica un nombre de posición, el otro valor está alineado al centro de forma predeterminada.
-Si la posición va seguida de coordenadas precisas, entonces la primera debe ser xy la segunda debe ser y
-Si solo se especifica un valor, el valor debe ser la coordenada xy el otro está centrado verticalmente por defecto
-si los dos valores especificados son Si la unidad precisa y los nombres de rumbo se mezclan, el primer valor es la coordenada xy el segundo valor es la coordenada y.
** Lo más utilizado en el trabajo real es que la imagen de fondo está centrada. **
Ejercicio 1:
imagen de fondo grande
Ejercicio 2: la
imagen pequeña está centrada verticalmente en el lado izquierdo del cuadro
## 4.5
Archivo adjunto de fondo -El archivo adjunto de fondo es para explicar si el fondo está desplazado o fijo
-Sintaxis:
`` `】
background-attach: scroll | fixed``
`
| Parámetros | Función |
| ------ |: - --------------------: |
| scroll | La imagen de fondo se desplaza con el contenido del objeto |
| fixed | La imagen de fondo es fija |
## 4.6 Taquigrafía de fondo
-background: atributo No existe un estándar obligatorio para el orden en que se escriben los valores. Para facilitar la lectura, se recomienda que escriba de la siguiente manera
: -fondo: color de fondo, imagen de fondo, dirección, fondo, mosaico, fondo, desplazamiento, posición de fondo;
-sintaxis:
`` `css
fondo: url transparente (imagen.jpg) repetir-y desplazarse arriba del centro;
' ``
Caso:
Barra de navegación Caso
## 4.7 Transparencia de fondo (CSS3)
-Sintaxis:
`` `css
background: rgba (0, 0, 0, 0.3);
` ``
-El último parámetro es el rango de valores de transparencia alfa 0 ~ Entre 1
- se utilizó el 0,3 0 omitido fondo de intercambio de escritura: RGBA (0, 0, 0, 0.3);
- Nota: El fondo se refiere translúcido transparente cuadro de fondo, en el interior el contenido del paquete no se ven afectados
- es como CSS3, Por lo tanto, las versiones inferiores a ie9 no son compatibles.
## 4.8 Resumen de antecedentes
| Propiedades | Rol | Valor |
| --------------------- |: -------------- - |: ----------------------------------------------- ------------ |
| color de fondo | color de fondo | valores de color predefinidos / código hexadecimal / RGB |
| imagen de fondo | imagen de fondo | url (ruta de la imagen) |
| background-repeat | Ya sea para mosaico? repetir / no repetir / repetir-x / repetir-y |
| background-position | background position | length / position son las coordenadas xey respectivamente, recuerde que si hay una unidad numérica precisa, debe seguir primero la X y luego Y |
| background-attach | background fixed o scroll | scroll / fixed
| Abreviatura de fondo | más simple | color de fondo imagen de fondo dirección fondo mosaico fondo desplazamiento posición de fondo; no tienen orden |
| fondo transparente | hacen que el cuadro sea translúcido | fondo: rgba (0,0,0,0.3); debe ir seguido de 4 Valor |
# 5. Tres características CSS
: Objetivos:
* Comprender
* Puede hablar los principios de conflictos de estilo CSS
* Puede hablar esos estilos comunes heredarán
* Aplicación
* Puede escribir algoritmo de prioridad CSS
* Puede calcular común Valor de superposición del selector
## 5.1
Capacidad de apilamiento CSS -Concepto: La
llamada capacidad de apilamiento se refiere a la superposición de múltiples estilos CSS.
Es la capacidad de un navegador para manejar conflictos. Si un atributo se establece en el mismo elemento a través de dos selectores idénticos, en este momento un atributo
apilará otro atributo -principio:
-El conflicto de estilo, el principio a seguir es el ** principio más cercano. ** El estilo está cerca de la estructura y se ejecuta el estilo.
- El estilo no el conflicto, no apilar
`` `
apilamiento CSS de las últimas fórmulas de ejecución: Las olas empujadas olas hacia adelante antes de que las olas mueren en la playa.
`` `
#
# 5.2 Herencia CSS -Concepto:
las etiquetas secundarias heredan ciertos estilos de la etiqueta principal, como el color del texto y el tamaño de la fuente.
Para establecer un atributo heredable, simplemente aplíquelo al elemento padre.
La comprensión simple es: herencia de la paternidad.
- ** Nota **:
-El uso adecuado de la herencia puede simplificar el código y reducir la complejidad de los estilos CSS. Por ejemplo, hay muchos niños que necesitan un cierto estilo. Puede asignar uno al padre. Estos niños lo heredarán.
-Los elementos infantiles pueden heredar el estilo del elemento padre (** texto-, fuente-, línea- Estos elementos se pueden heredar al principio y el atributo de color **)
`` ``
Fórmula de herencia CSS: Longshenglong, Fengshengfeng, mouse Los niños nacidos harán agujeros.
`` `
<img src =" media / shu.gif "/>
## 5.3 Prioridad CSS (énfasis)
<img src =" media / 22% E4% BC% 98% E5% 85% 88% E7% BA% A7.png "> -Concept
: Al
definir estilos CSS, a menudo ocurre que dos o más reglas se aplican al mismo elemento. En este momento,
* los selectores son iguales, entonces la ejecución es en cascada
* los selectores son diferentes y aparecerá la prioridad Problema
#### 1). Fórmula de cálculo de peso
Acerca de los pesos de CSS, necesitamos un conjunto de fórmulas de cálculo para calcular, esto es Especificidad de CSS (especialidad)
| selector de etiquetas | fórmula de peso de cálculo |
| -------- -------------- | ------------ |
| Herencia o * | 0,0,0,0 |
| Cada elemento (selector de etiqueta) | 0,0,0,1 |
| cada clase, pseudoclase | 0,0,1,0 |
| cada ID | 0,1,0,0 | | cada
estilo de estilo en línea = "" | 1, 0,0,0 |
| ¡Cada! Importante es importante | ∞ infinito |
-El valor es de izquierda a derecha, el más grande a la izquierda, un nivel es mayor que un nivel, no hay base entre los dígitos y los niveles no se pueden exceder.
-Sobre los pesos de CSS, necesitamos un conjunto de fórmulas de cálculo para calcular, esto es Especificidad de CSS (especialidad)
-div {
color: pink! Importante;
}
#### 2). La superposición de peso más a
menudo usamos selectores de intersección, descendencia Los selectores, etc., están compuestos por múltiples selectores básicos, luego, en este momento, habrá pesos superpuestos.
Es un simple cálculo de suma
-div ul li ------> 0,0,0,3
-.nav ul li ------> 0,0,1,2
-a: hover -----—> 0,0,1,1
-.nav a ------> 0, 0,1,1
<img src = "media / w.jpg" /> Nota:
1. No hay base entre dígitos, por ejemplo: 0,0,0,5 + 0,0,0,5 = 0,0 , 0,10 en lugar de 0,0, 1, 0, por lo que no habrá situación en la que 10 divs puedan alcanzar a un selector de clase.
#### 3)
No es difícil heredar el peso de 0 , pero es fácil ignorar el halo si se ignora. De hecho, cuando modificamos el estilo, debemos ver si la etiqueta está seleccionada.
1) Si se selecciona, el peso se calcula de acuerdo con la fórmula anterior. Quien escucha a quien.
2) Si no está seleccionado, entonces el peso es 0, porque el peso heredado es 0.
# 6. Comentarios de CSS
** Reglas de anotación CSS: **
`` `
/ * el contenido que debe anotarse * / Si está anotando, necesita anotar Use "/ *" antes del contenido para comenzar el comentario, y use "* /" al final del contenido para finalizar el comentario.
`` ``
Por ejemplo:
p {
/ * Todas las fuentes tienen un tamaño de 14 píxeles * /
tamaño de fuente: 14px;
}