Mi informacion de contacto
Correo[email protected]
2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Introducción a CSS
CSS esHojas de estilo en cascada(La abreviatura de Cascading Style Sheets) se utiliza para controlar con precisión el estilo de las páginas HTML para mostrar mejor la información gráfica o producir una experiencia interactiva interesante y amigable.
没有必要让所有浏览器都显示得一模一样的，好的浏览器有更好的显示，糟糕的浏览器就只有普通的显示，这才是对用户更负责任的做法。
El sufijo del archivo CSS es .css
/* 注释的内容 */
Tres formas de agregar estilos
<span style="color: red">红色文字</span>
https://blog.csdn.net/weixin_41192489/article/details/140226382
Los elementos dentro del contenedor obtendrán los estilos agregados en el contenedor.
<div style="color: red">
<p>我是容器内的元素，并没有直接添加样式，但也会变红！</p>
</div>
¿Quién decide el estilo final?
Debido a que existen muchas fuentes de estilos en los elementos, incluidos los estilos predeterminados del navegador, los estilos en línea, los estilos agregados por varios selectores de CSS y los estilos heredados de los elementos principales, el estilo final será el que tenga la mayor prioridad entre muchos estilos. estilo.
https://blog.csdn.net/weixin_41192489/article/details/139720467
Conceptos básicos esenciales del estilo.
https://blog.csdn.net/weixin_41192489/article/details/140236423
https://blog.csdn.net/weixin_41192489/article/details/140318834
https://blog.csdn.net/weixin_41192489/article/details/102411612
Los elementos en línea solo pueden mostrar márgenes internos y externos al principio y al final, y deben evitarse tanto como sea posible, por lo tanto, no establezca márgenes internos y externos para elementos en línea.
Después de ajustar los elementos en línea, la visualización de los bordes se apilará y desordenará, ¡así que no establezca bordes para los elementos en línea!
Cuando necesite agregar bordes/márgenes internos y externos a un elemento en línea, conviértalo en un cuadro en línea
display：inline-block
¿Qué estilos se pueden agregar?
Se pueden agregar estilos a casi todos los elementos html.
A través del siguiente estilo, puede cambiar el modelo de caja estándar predeterminado del elemento al modelo de caja IE.
box-sizing:border-box;
en este momento
padding: 10px;
Relleno: 10px para arriba, abajo, izquierda y derecha
padding:10px 5px;
El relleno superior e inferior es de 10 px.
El relleno derecho e izquierdo es de 5px
padding:10px 5px 15px;
El relleno superior es de 10px
El relleno derecho e izquierdo es de 5px
El relleno inferior es de 15px
padding:10px 5px 15px 20px;
El relleno superior es de 10px
El relleno derecho es de 5px
El relleno inferior es de 15px
El relleno izquierdo es de 20px.
Los estilos relacionados también son
Ver detalles https://blog.csdn.net/weixin_41192489/article/details/140325106
https://blog.csdn.net/weixin_41192489/article/details/115140348
Los contenedores con valores de desbordamiento de auto y desplazamiento son contenedores rodantes (contenedores con barras de desplazamiento). Debido a problemas de compatibilidad, solo se puede usar el margen inferior de los elementos secundarios para lograrlo. el relleno inferior del contenedor de desplazamiento es blanco.
El valor del atributo varía de 0,0 (completamente transparente) a 1,0 (completamente opaco). Si excede el límite de rango de 0 a 1, el valor calculado final es el valor límite.
opacity: -1; /* 解析为 0, 完全透明 */
opacity: 2; /* 解析为 1, 完全不透明 */
https://blog.csdn.net/weixin_41192489/article/details/140301618
La sombra no cambiará el tamaño del cuadro y no afectará el diseño de sus elementos hermanos. También puede configurar múltiples sombras de borde para lograr mejores efectos y mejorar el efecto tridimensional.
box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色（默认值为color的颜色值） 内/外阴影
box-shadow: 15px 21px 48px -2px #666;
Sombras de uso común
box-shadow: 0 2px 6px 0 rgba(0,0,0,.4);
Ver más uso
https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow
[Práctico] Sobrescribir el color de fondo del relleno automático del cuadro de entrada
input:-webkit-autofill {
-webkit-box-shadow: inset 0 0 0 1000px #fff;
background-color: transparent;
}
[Práctico] Modificar los colores de pulsación de botones en lotes
button:active {
box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .1);
}
【Combate real】Guía para principiantes sobre el efecto de enmascaramiento
.guide {
box-shadow: 0 0 0 9999px rgba(0, 0, 0, .75);
border-radius: 50%;
}
https://blog.csdn.net/weixin_41192489/article/details/121341551
https://blog.csdn.net/weixin_41192489/article/details/140314866
El navegador Firefox no lo admite. Puede tener los siguientes valores de atributos.
zoom:50%, lo que indica una reducción a la mitad del tamaño original.zoom:0.5, lo que indica una reducción a la mitad del tamaño original.normalPalabras clave.zoom:normalEquivalente azoom:1, es el valor predeterminado.resetPalabras clave.zoom:reset , lo que indica que cuando el usuario presiona Ctrl y − o Ctrl y + para hacer zoom en el documento, los elementos no se reducirán ni ampliarán en consecuencia. Sin embargo, esta palabra clave tiene poca compatibilidad y sólo es compatible con el navegador Safari.Comparación entre funciones de zoom y escala()
zoomLa coordenada central de la escala del atributo es relativa a la esquina superior izquierda del elemento y no se puede modificar.transformtransformandoscale()La coordenada central predeterminada de la escala de función es el punto central del elemento.https://blog.csdn.net/weixin_41192489/article/details/121158821
https://blog.csdn.net/weixin_41192489/article/details/140316024
https://blog.csdn.net/weixin_41192489/article/details/140264311
Estilos de pseudoclase: deben escribirse en el siguiente orden fijo:
/*让超链接点击之前是红色*/
a:link{
color:red;
}
/*让超链接点击之后是绿色*/
a:visited{
color:orange;
}
/*鼠标悬停，放到标签上的时候*/
a:hover{
color:green;
}
/*鼠标点击链接，但是不松手的时候*/
a:active{
color:black;
}
https://www.runoob.com/cssref/filtro-css3-pr.html
Implementar íconos responsivos con peso de fuente
Cuando el tamaño de fuente es mayor, la fuente del icono es más detallada y cuando el tamaño de fuente es más pequeño, la fuente del icono es más simple.
https://demo.cssworld.cn/8/5-1.php
Fusión de iconos CSS - Tecnología ClipPath Sprites
https://blog.csdn.net/weixin_41192489/article/details/121242735
/*鼠标悬停时，让当前行显示#868686这种灰色*/
table tr:hover{
background: #868686;
}
La alternancia de colores entre filas de datos puede reducir la fatiga de lectura del usuario.
table tr:nth-child(odd){
background:#fff
}
table tr:nth-child(even){
background:blue
}
| valor | describir |
|---|---|
| dirección URL | URL del cursor personalizado. |
| por defecto | Cursor predeterminado (normalmente una flecha) |
| auto | por defecto. El cursor establecido por el navegador. |
| punto de mira | El cursor aparece como una cruz. |
| puntero [uso común] | El cursor se representa como un puntero que indica el enlace (una mano) |
| mover | Este cursor indica que un objeto se puede mover. |
| redimensionar electrónicamente | Este cursor indica que el borde del cuadro rectangular se puede mover hacia la derecha (este). |
| cambiar el tamaño | Este cursor indica que el borde del cuadro rectangular se puede mover hacia arriba y hacia la derecha (Norte/Este). |
| nw-cambiar tamaño | Este cursor indica que el borde del cuadro rectangular se puede mover hacia arriba y hacia la izquierda (Norte/Oeste). |
| n-cambiar el tamaño | Este cursor indica que el borde del cuadro rectangular se puede mover hacia arriba (norte). |
| se-cambiar el tamaño | Este cursor indica que el borde del cuadro rectangular se puede mover hacia abajo y hacia la derecha (sur/este). |
| cambio de tamaño de sw | Este cursor indica que el borde del rectángulo se puede mover hacia abajo y hacia la izquierda (sur/oeste). |
| s-cambiar el tamaño | Este cursor indica que el borde del cuadro rectangular se puede mover hacia abajo (sur). |
| w-cambiar tamaño | Este cursor indica que el borde del cuadro rectangular se puede mover hacia la izquierda (oeste). |
| texto | Este cursor indica texto. |
| esperar | Este cursor indica que el programa está ocupado (normalmente un reloj de arena). |
| ayuda | Este cursor indica ayuda disponible (normalmente un signo de interrogación o un globo). |
Color del cursor color de intercalación
Establezca el color del cursor de inserción del cuadro de entrada (aún no es compatible con los navegadores IE y Edge)
input {
caret-color: red;
}
Cuando no hay los siguientes estilos que puedan ocultar elementos, los elementos se muestran (algunos no son visibles simplemente porque la cascada está cubierta):
display: none [Uso común] Elementos ocultos, no ocupan espacio, cargarán recursos y se puede acceder al DOM (agregar oculto a la etiqueta html cambiará la visualización de la etiqueta a ninguna)visibility: hidden Los elementos ocultos ocupan posición, los recursos se cargarán y el DOM será accesibleopacity: 0 El elemento es invisible, ocupa una posición y se puede hacer clic o seleccionarlo.clip: rect(0 0 0 0) El elemento es invisible, no se puede hacer clic en él, no ocupa espacio, pero se puede acceder al teclado.lower {
position: relative;
z-index: -1;
}
La posición de un elemento en la página está determinada por muchos estilos, incluidos posicionamiento, visualización, flotación, margen, etc.
Cuando la posición, la visualización y la flotación existen al mismo tiempo, el efecto de visualización final del elemento se determinará de acuerdo con la lógica descrita en el enlace a continuación.
https://blog.csdn.net/weixin_41192489/article/details/119009647
https://blog.csdn.net/weixin_41192489/article/details/140242430
https://blog.csdn.net/weixin_41192489/article/details/140250775
https://blog.csdn.net/weixin_41192489/article/details/115140348
https://blog.csdn.net/weixin_41192489/article/details/140255028
https://blog.csdn.net/weixin_41192489/article/details/140297366
https://blog.csdn.net/weixin_41192489/article/details/121365831
https://blog.csdn.net/weixin_41192489/article/details/121396794
https://blog.csdn.net/weixin_41192489/article/details/126028971
https://blog.csdn.net/weixin_41192489/article/details/120999355
https://blog.csdn.net/weixin_41192489/article/details/140317369
Mejorar la eficiencia de la escritura CSS.
El preprocesador CSS es un lenguaje de programación especializado que se utiliza para agregar algunas funciones de programación a CSS (CSS en sí no es un lenguaje de programación). No es necesario considerar los problemas de compatibilidad del navegador porque, en última instancia, el preprocesador de CSS compila y genera estilos CSS estándar. Puede utilizar habilidades básicas de programación, como variables, juicios lógicos simples y funciones en el preprocesador CSS.
Los preprocesadores CSS convencionales incluyen Sass (Scss), Less y Stylus.
(SASS ha pasado a llamarse SCSS desde la versión 3.0)
Convenciones de codificación CSS
/* 给左侧的盒子定义的样式 */
.leftBox{
}
/* 给内部为菜单的盒子定义的样式 */
.menuBox{
}
/* 将子元素排列为一行的样式 */
.row{
display:flex
}
/* 设置颜色为红色 */
.red{
color:red
}
Los tres elementos de la animación CSS de alto rendimiento se refieren al posicionamiento absoluto, el atributo de opacidad y el atributo de transformación. Por lo tanto, el mismo efecto de animación se logra primero utilizando el atributo de transformación. Por ejemplo, las animaciones de movimiento de elementos deben usar el atributo de transformación en lugar del atributo de margen.
Se ha dedicado a la investigación de tecnología durante más de treinta años, domina varios lenguajes como java, linux, javascript, php, css, etc., y ha realizado muchas contribuciones en el campo del código abierto. una estación de documentación para desarrolladores para compartir algunos problemas en el desarrollo de tecnología para referencia futura.
Correo[email protected]