Nota: El contenido de este artículo se comparte y reproduce de la documentación del sitio web oficial de HarmonyOS Developer.
1. Referencia de sintaxis CSS
CSS es un lenguaje de estilo que describe la estructura de una página HML. Todos los componentes tienen estilos predeterminados del sistema y se pueden personalizar diferentes estilos para componentes y páginas en el archivo de estilo CSS de la página. Consulte Estilos comunes para conocer los estilos de componentes admitidos por el paradigma de desarrollo similar a la Web compatible con JS.
Unidad de medida
● Píxeles lógicos (expresados como <longitud> en el documento):
○ La pantalla predeterminada tiene un ancho lógico de 720 px (consulte la sección de ventana en el archivo de configuración para conocer la configuración ). Cuando realmente se muestra, el diseño de la página se escalará al ancho real de la pantalla, como 100 px. En una pantalla con un ancho real de 1440 píxeles físicos, la representación real es de 200 píxeles físicos (de 720 px a 1440 píxeles físicos, todos los tamaños ampliados 2x).
○ Cuando autoDesignWidth se configura adicionalmente como verdadero (consulte la sección de ventana en el archivo de configuración), el px de píxeles lógicos se escalará de acuerdo con la densidad de la pantalla. Por ejemplo, 100 px en realidad se representan como 300 píxeles físicos en un dispositivo con una densidad de pantalla. de 3 . Este método se recomienda cuando la aplicación necesita adaptarse a múltiples dispositivos.
● Porcentaje (expresado como <porcentaje> en el documento): indica el porcentaje del tamaño del componente principal que ocupa este componente. Por ejemplo, si el ancho de un componente se establece en 50%, significa que su ancho es 50 % del componente principal.
Importación de estilo
Para la gestión modular y la reutilización de código, los archivos de estilo CSS admiten la declaración @import para importar archivos css.
Estilo de declaración
Hay un archivo css con el mismo nombre que el archivo hml de diseño en cada directorio de página, que se utiliza para describir el estilo de los componentes en la página hml y determinar cómo se deben mostrar los componentes.
1. Estilo interno, admite el uso de atributos de estilo y clase para controlar el estilo de los componentes. Por ejemplo:
<!-- index.hml --><div class="container"><text style="color: red">Hello World</text></div>
/* index.css */.container {justify-content: center;}
2. Importar archivos y fusionar archivos de estilo externos. Por ejemplo, defina el archivo de estilo style.css en el directorio común e impórtelo en la primera línea del archivo index.css:
/* style.css */.title {font-size: 50px;}
/* index.css */@import '../../common/style.css';.container {justify-content: center;}
Selector
El selector CSS se utiliza para seleccionar elementos a los que se les debe aplicar estilo. Los selectores admitidos se muestran en la siguiente tabla:
Ejemplo:
<!-- 页面布局xxx.hml --><div id="containerId" class="container"><text id="titleId" class="title">标题</text><div class="content"><text id="contentId">内容</text></div></div>
/* 页面样式xxx.css *//* 对所有div组件设置样式 */div {flex-direction: column;}/* 对class="title"的组件设置样式 */.title {font-size: 30px;}/* 对id="contentId"的组件设置样式 */#contentId {font-size: 20px;}/* 对所有class="title"以及class="content"的组件都设置padding为5px */.title, .content {padding: 5px;}/* 对class="container"的组件下的所有text设置样式 */.container text {color: #007dff;}/* 对class="container"的组件下的直接后代text设置样式 */.container > text {color: #fa2a2d;}
El efecto de operación del estilo anterior es el siguiente:
Donde ".container text" establece el "título" y el "contenido" en azul, mientras que el selector descendiente directo ".container > text" establece el "título" en rojo. Los dos tienen la misma prioridad, pero el orden de declaración del selector descendiente directo es posterior y el estilo anterior se sobrescribe (para el cálculo de prioridad, consulte Prioridad del selector ).
prioridad del selector
Las reglas de cálculo de prioridad de los selectores son consistentes con las reglas de w3c (solo se admiten: estilo en línea, identificación, clase, etiqueta, descendientes y descendientes directos), donde el estilo en línea es el estilo declarado en el atributo de estilo del elemento.
Cuando varias declaraciones de selector coinciden con el mismo elemento, la prioridad de varios selectores de mayor a menor es: estilo en línea > id > clase > etiqueta.
pseudoclase
Las pseudoclases CSS son palabras clave en selectores que especifican el estado especial del elemento a seleccionar. Por ejemplo, el estado :disabled se puede utilizar para aplicar estilo a un elemento cuando su atributo deshabilitado se vuelve verdadero.
Además de una única pseudoclase, también se admite una combinación de pseudoclases. Por ejemplo, el estado :focus:checked se puede utilizar para establecer el estilo cuando el atributo de enfoque y el atributo marcado del elemento son ambos verdaderos. Las pseudoclases individuales admitidas se enumeran en la siguiente tabla, en orden de prioridad descendente:
Ejemplos de pseudoclases son los siguientes: Configurar la pseudoclase activa de un botón puede controlar el estilo cuando el usuario lo presiona:
<!-- index.hml --><div class="container"><input type="button" class="button" value="Button"></input></div>
/* index.css */.button:active {background-color: #888888;/*按钮被激活时，背景颜色变为#888888 */}
ilustrar
Los efectos de pseudoclase no son compatibles con los componentes de ventanas emergentes y sus subelementos, incluidos elementos emergentes, cuadros de diálogo, menús, opciones y selectores.
Precompilación de estilos
La precompilación proporciona un programa que utiliza una sintaxis única para generar CSS. Puede proporcionar variables, operaciones y otras funciones, lo que permite a los desarrolladores definir estilos de componentes de manera más conveniente. Actualmente admite la precompilación de less, sass y scss. Cuando utilice la precompilación de estilos, debe cambiar el sufijo del archivo CSS original a less, sass o scss, por ejemplo, cambie index.css a index.less, index.sass o index.scss.
● El archivo actual utiliza precompilación de estilos; por ejemplo, cambie el index.css original a index.less:
/* index.less *//* 定义变量 */@colorBackground: #000000;.container {background-color: @colorBackground; /* 使用当前less文件中定义的变量 */}
● Consulte archivos precompilados, como el archivo style.scss común, cambie el index.css original a index.scss e importe style.scss:
/* style.scss *//* 定义变量 */$colorBackground: #000000;
Referenciado en index.scss:
/* index.scss *//* 引入外部scss文件 */@import '../../common/style.scss';.container {background-color: $colorBackground; /* 使用style.scss中定义的变量 */}
ilustrar
Se recomienda colocar los archivos precompilados a los que se hace referencia en el directorio común para su administración.
Herencia de estilos CSS 6+
La herencia de estilos CSS proporciona a los nodos secundarios la capacidad de heredar los estilos de los nodos principales. Los estilos heredados tienen la prioridad más baja en el escenario de coincidencia de estilos multiselector. Actualmente, se admite la herencia de los siguientes estilos:
● familia de fuentes
● peso de fuente
● tamaño de fuente
● estilo de fuente
● alineación de texto
● altura de línea
● espaciado entre letras
● color
● visibilidad
2. Animación CSS
1. Animación de estilo de propiedad.
Establezca dinámicamente el ancho y el alto del componente principal en fotogramas clave para agrandar o reducir el componente. El componente secundario establece el atributo de escala para escalar los componentes principal e secundario al mismo tiempo, y luego establece la opacidad para mostrar y ocultar los componentes principal e secundario.
<!-- xxx.hml --><div class="container"><div class="fade"><text>fading away</text></div><div class="bigger"><text>getting bigger</text></div></div>
/* xxx.css */.container {background-color:#F1F3F5;display: flex;justify-content: center;align-items: center;flex-direction: column;width: 100%;height: 100%;}.fade {width: 30%;height: 200px;left: 35%;top: 25%;position: absolute;animation: 2s change infinite friction;}.bigger {width: 20%;height: 100px;background-color: blue;animation: 2s change1 infinite linear-out-slow-in;}text {width: 100%;height: 100%;text-align: center;color: white;font-size: 35px;animation: 2s change2 infinite linear-out-slow-in;}/* 颜色变化 */@keyframes change{from {background-color: #f76160;opacity: 1;}to {background-color: #09ba07;opacity: 0;}}/* 父组件大小变化 */@keyframes change1 {0% {width: 20%;height: 100px;}100% {width: 80%;height: 200px;}}/* 子组件文字缩放 */@keyframes change2 {0% {transform: scale(0);}100% {transform: scale(1.5);}}
ilustrar
● Los valores de la animación no se distinguen en orden: la duración (tiempo de ejecución de la animación)/retraso (tiempo de ejecución del retraso de la animación) se analizan en el orden de aparición.
● Se debe establecer el estilo de duración de la animación; de lo contrario, si la duración es 0, no habrá ningún efecto de animación. Cuando el atributo de modo de relleno de animación se establece en adelante, el componente muestra directamente el estilo del último fotograma.
2. Transformar animación de estilo
Establezca la propiedad de transformación para rotar, escalar, mover e inclinar el componente.
Establecer animación estática
Cree un cuadrado y gírelo 90° para convertirse en un rombo, y use el rectángulo a continuación para cubrir la parte inferior del rombo para formar un techo. Establezca el valor del atributo de traducción rectangular en (150px,-150px) para determinar la posición de las coordenadas forme la puerta y luego use el atributo de posición para hacer las líneas horizontales y verticales. Siga el componente principal (cuadrado) hasta la posición de coordenadas especificada, luego configure el atributo de escala para hacer que los componentes principal y secundario crezcan juntos para formar el tamaño de la ventana. Finalmente, use el atributo skewX para inclinar el componente y establezca las coordenadas traducir(200px,-710px) para obtener la chimenea.
<!-- xxx.hml --><div class="container"><div class="top"></div><div class="content"></div><div class="door"></div><!-- 窗户 --><div class="window"><div class="horizontal"></div><div class="vertical"></div></div><div class="chimney"></div></div>
/* xxx.css */.container {width:100%;height:100%;background-color:#F1F3F5;align-items: center;flex-direction: column;}.top{z-index: -1;position: absolute;width: 428px;height: 428px;background-color: #860303;transform: rotate(45deg);margin-top: 284px;margin-left: 148px;}.content{margin-top: 500px;width: 600px;height: 400px;background-color: white;border: 1px solid black;}.door{width: 100px;height: 135px;background-color: #1033d9;transform: translate(150px,-137px);}.window{z-index: 1;position: relative;width: 100px;height: 100px;background-color: white;border: 1px solid black;transform: translate(-150px,-400px) scale(1.5);}/* 窗户的横轴 */.horizontal{position: absolute;top: 50%;width: 100px;height: 5px;background-color: black;}/* 窗户的纵轴 */.vertical{position: absolute;left: 50%;width: 5px;height: 100px;background-color: black;}.chimney{z-index: -2;width: 40px;height: 100px;border-radius: 15px;background-color: #9a7404;transform: translate(200px,-710px) skewX(-5deg);}
Establecer animación panorámica
La pelota cae animación. Cambie la coordenada del eje Y de la pelota para darse cuenta de que la pelota cae. En el siguiente período de tiempo, reduzca la coordenada del eje Y para realizar el rebote de la pelota. Deje que la altura de cada rebote disminuya gradualmente hasta que el rebote la altura es 0. Se simula la animación de la caída de la pelota.
<!-- xxx.hml --><div class="container"><div class="circle"></div><div class="flower"></div></div>
/* xxx.css */.container {width:100%;height:100%;background-color:#F1F3F5;display: flex;justify-content: center;}.circle{width: 100px;height: 100px;border-radius: 50px;background-color: red;/* forwards停在动画的最后一帧 */animation: down 3s fast-out-linear-in forwards;}.flower{position: fixed;width: 80%;margin-left: 10%;height: 5px;background-color: black;top: 1000px;}@keyframes down {0%{transform: translate(0px,0px);}/* 下落 */15%{transform: translate(10px,900px);}/* 开始回弹 */25%{transform: translate(20px,500px);}/* 下落 */35%{transform: translate(30px,900px);}/* 回弹 */45%{transform: translate(40px,700px);}55%{transform: translate(50px,900px);}65%{transform: translate(60px,800px);}80%{transform: translate(70px,900px);}90%{transform: translate(80px,850px);}/* 停止 */100%{transform: translate(90px,900px);}}
Establecer animación de rotación
Establecer una posición de origen diferente (origen de transformación) cambia el centro de rotación alrededor del cual gira el elemento. Los primeros tres valores de parámetros del atributo turn3d son los vectores de rotación del eje X, el eje Y y el eje Z respectivamente. El cuarto valor es el ángulo de rotación. El ángulo de rotación puede ser un valor negativo. Un valor negativo El valor significa que la dirección de rotación es en sentido antihorario.
<!-- xxx.hml --><div class="container"><div class="rotate"><div class="rect rect1"></div><div class="rect rect2"></div><div class="rect rect3"></div></div><!-- 3d属性 --><div class="rotate3d"><div class="content"><div class="rect4"></div><div class="rect5"> </div></div><div class="mouse"></div></div></div>
/* xxx.css */.container {flex-direction: column;background-color:#F1F3F5;display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;}.rect {width: 100px;height: 100px;animation: rotate 3s infinite;margin-left: 30px;}.rect1 {background-color: #f76160;}.rect2 {background-color: #60f76f;/* 改变原点位置*/transform-origin: 10% 10px;}.rect3 {background-color: #6081f7;/* 改变原点位置*/transform-origin: right bottom;}@keyframes rotate {from {transform: rotate(0deg)}to {transform: rotate(360deg);}}/* 3d示例样式 */.rotate3d {margin-top: 150px;flex-direction: column;background-color:#F1F3F5;display: flex;align-items: center;width: 80%;height: 600px;border-radius: 300px;border: 1px solid #ec0808;}.content {padding-top: 150px;display: flex;align-items: center;justify-content: center;}/* react4 react5 翻转形成眼睛 */.rect4 {width: 100px;height: 100px;animation: rotate3d1 1000ms infinite;background-color: darkmagenta;}.rect5 {width: 100px;height: 100px;animation: rotate3d1 1000ms infinite;margin-left: 100px;background-color: darkmagenta;}.mouse {margin-top: 150px;width: 200px;height: 100px;border-radius: 50px;border: 1px solid #e70303;animation: rotate3d2 1000ms infinite;}/* 眼睛的动效 */@keyframes rotate3d1 {0% {transform:rotate3d(0,0,0,0deg)}50% {transform:rotate3d(20,20,20,360deg);}100% {transform:rotate3d(0,0,0,0deg);}}/* 嘴的动效 */@keyframes rotate3d2 {0% {transform:rotate3d(0,0,0,0deg)}33% {transform:rotate3d(0,0,10,30deg);}66% {transform:rotate3d(0,0,10,-30deg);}100% {transform:rotate3d(0,0,0,0deg);}}
ilustrar
transform-origin transforma la posición de origen del objeto. Si solo se establece un valor, el otro valor es 50%. Si se establecen dos valores, el primer valor representa la posición del eje X y el segundo valor representa la posición del eje Y.
Establecer animación de zoom
Establezca el atributo de estilo de escala para implementar la animación ondulada. Primero use el posicionamiento para determinar la posición del elemento. Después de determinar las coordenadas, cree múltiples componentes para lograr el efecto de superposición. Luego configure el atributo de opacidad para cambiar la opacidad del componente para ocultar y muestre el componente. Al mismo tiempo, establezca el valor de escala para que el componente se pueda ampliar al mismo tiempo. Oculte un lado y finalmente establezca diferentes tiempos de ejecución de animación para los dos componentes para lograr un efecto de difusión.
Configure los parámetros de escala del eje X, el eje Y y el eje Z en sacle3d para implementar la animación.
<!-- xxx.hml --><div class="container"><div class="circle"><text>ripple</text></div><div class="ripple"></div><div class="ripple ripple2"></div><!-- 3d --><div class="content"><text>spring</text></div></div>
/* xxx.css */.container {flex-direction: column;background-color:#F1F3F5;width: 100%;position: relative;}.circle{margin-top: 400px;margin-left: 40%;width: 100px;height: 100px;border-radius: 50px;background-color: mediumpurple;z-index: 1; position: absolute;}.ripple{margin-top: 400px;margin-left: 40%;position: absolute; z-index: 0;width: 100px;height: 100px;border-radius: 50px;background-color: blueviolet;animation: ripple 5s infinite;}/* 设置不同的动画时间 */.ripple2{animation-duration: 2.5s;}@keyframes ripple{0%{transform: scale(1);opacity: 0.5;}50%{transform: scale(3);opacity: 0;}100%{transform: scale(1);opacity: 0.5;}}text{color: white;text-align: center;height: 100%;width: 100%;}.content {margin-top: 700px;margin-left: 33%;width: 200px;height: 100px;animation:rubberBand 1s infinite;background-color: darkmagenta;position: absolute;}@keyframes rubberBand {0% {transform: scale3d(1, 1, 1);}30% {transform: scale3d(1.25, 0.75, 1.1);}40% {transform: scale3d(0.75, 1.25, 1.2);}50% {transform: scale3d(1.15, 0.85, 1.3);}65% {transform: scale3d(.95, 1.05, 1.2);}75% {transform: scale3d(1.05, .95, 1.1);}100%{transform: scale3d(1, 1, 1);}}
ilustrar
Después de establecer el valor del atributo de transformación, el elemento secundario cambiará junto con el elemento principal. Si solo se cambian otros valores de atributo del elemento principal (como alto, ancho), el elemento secundario no cambiará.
Establecer propiedades de matriz
matriz es una matriz con seis parámetros de entrada, cuyos seis valores representan: escalaX, skewY, skewX, escalaY, traducirX, traducirY. En el siguiente ejemplo, la propiedad de la matriz se establece en matriz (1,0,0,1,0,200) para hacer que el componente se mueva e incline.
<!-- xxx.hml --><div class="container"><div class="rect"> </div></div>
/* xxx.css */.container{background-color:#F1F3F5;display: flex;justify-content: center;width: 100%;height: 100%;}.rect{width: 100px;height: 100px;background-color: red;animation: down 3s infinite forwards;}@keyframes down{0%{transform: matrix(1,0,0,1,0,0);}10%{transform: matrix(1,0,0,1,0,200);}60%{transform: matrix(2,1.5,1.5,2,0,700);}100%{transform: matrix(1,0,0,1,0,0);}}
Integrar atributo de transformación
La transformación puede establecer múltiples valores y se pueden establecer múltiples valores al mismo tiempo. El siguiente caso muestra el efecto de animación cuando los atributos de escala, traducción y rotación se configuran al mismo tiempo.
<!-- xxx.hml --><div class="container"><div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div><div class="rect5"></div></div>
/* xxx.css */.container{width: 100%;height: 100%;flex-direction:column;background-color:#F1F3F5;padding:50px;}.rect1{width: 100px;height: 100px;background-color: red;animation: change1 3s infinite forwards;}.rect2{margin-top: 50px;width: 100px;height: 100px;background-color: darkblue;animation: change2 3s infinite forwards;}.rect3{margin-top: 50px;width: 100px;height: 100px;background-color: darkblue;animation: change3 3s infinite;}.rect4{align-self: center;margin-left: 50px;margin-top: 200px;width: 100px;height: 100px;background-color: darkmagenta;animation: change4 3s infinite;}.rect5{margin-top: 300px;width: 100px;height: 100px;background-color: cadetblue;animation: change5 3s infinite;}/* change1 change2 对比 */@keyframes change1{0%{transform: translate(0,0); transform: rotate(0deg)}100%{transform: translate(0,500px);transform: rotate(360deg)}}/* change2 change3 对比属性顺序不同的动画效果 */@keyframes change2{0%{transform:translate(0,0) rotate(0deg) ;}100%{transform: translate(300px,0) rotate(360deg);}}@keyframes change3{0%{transform:rotate(0deg) translate(0,0);}100%{transform:rotate(360deg) translate(300px,0);}}/* 属性值不对应的情况 */@keyframes change4{0%{transform: scale(0.5);}100%{transform:scale(2) rotate(45deg);}}/* 多属性的写法 */@keyframes change5{0%{transform:scale(0) translate(0,0) rotate(0);}100%{transform: scale(1.5) rotate(360deg) translate(200px,0);}}
ilustrar
● Cuando se configuran varias transformaciones, los valores de transformación posteriores sobrescribirán los anteriores. Si desea utilizar varios estilos de animación al mismo tiempo, puede utilizar escritura compuesta, por ejemplo: transformar: escalar(1) rotar(0) traducir(0,0).
● Cuando la transformación se escribe de forma compuesta, se producirán diferentes efectos de animación según el orden de los múltiples valores de estilo en el estilo cambiante.
● Los valores de estilo establecidos por el atributo de transformación deben corresponder uno a uno. Si no hay correspondencia entre el anverso y el reverso, la animación no tendrá efecto. Si se establecen varios valores de estilo, solo se mostrará el efecto de animación del valor correspondiente.