Remarque : le contenu de cet article est partagé et reproduit à partir de la documentation du site officiel du développeur HarmonyOS.
1. Référence de syntaxe CSS
CSS est un langage de style qui décrit la structure des pages HML. Tous les composants ont des styles système par défaut et différents styles peuvent être personnalisés pour les composants et les pages dans le fichier de style CSS de la page. Veuillez vous référer aux styles communs pour connaître les styles de composants pris en charge par le paradigme de développement de type Web compatible JS.
unité de mesure
● Pixel logique px (exprimé en <longueur> dans le document) :
○ L'écran par défaut a une largeur logique de 720 px (voir la section fenêtre dans le fichier de configuration pour la configuration ). Lorsqu'elle est réellement affichée, la mise en page sera mise à l'échelle à la largeur réelle de l'écran, par exemple 100 px. Sur un écran avec un largeur réelle de 1440 pixels physiques, le rendu réel est de 200 pixels physiques (de 720px à 1440 pixels physiques, toutes tailles agrandies 2x).
○ Lorsque la configuration supplémentaire autoDesignWidth est vraie (voir la section fenêtre dans le fichier de configuration pour la configuration), le pixel logique px sera mis à l'échelle en fonction de la densité de l'écran. Par exemple, sur un appareil avec une densité d'écran de 3, 100 px sera en fait être rendu sous forme de 300 pixels physiques . Cette méthode est recommandée lorsque l’application doit s’adapter à plusieurs appareils.
● Pourcentage (exprimé en <pourcentage> dans le document) : Indique le pourcentage de la taille du composant parent qu'occupe ce composant. Par exemple, si la largeur d'un composant est définie sur 50%, cela signifie que sa largeur est de 50 % du composant parent.
Importation de styles
Pour la gestion modulaire et la réutilisation du code, les fichiers de style CSS prennent en charge l'instruction @import pour importer des fichiers CSS.
Style de déclaration
Il existe un fichier CSS portant le même nom que le fichier hml de mise en page dans chaque répertoire de page, qui est utilisé pour décrire le style des composants dans la page hml et déterminer comment les composants doivent être affichés.
1. Style interne, prend en charge l'utilisation d'attributs de style et de classe pour contrôler le style des composants. Par exemple:
<!-- index.hml --><div class="container"><text style="color: red">Hello World</text></div>
/* index.css */.container {justify-content: center;}
2. Importez des fichiers et fusionnez des fichiers de style externes. Par exemple, définissez le fichier de style style.css dans le répertoire commun et importez-le dans la première ligne du fichier index.css :
/* style.css */.title {font-size: 50px;}
/* index.css */@import '../../common/style.css';.container {justify-content: center;}
Sélecteur
Le sélecteur CSS est utilisé pour sélectionner les éléments qui doivent être stylisés. Les sélecteurs pris en charge sont présentés dans le tableau suivant :
Exemple:
<!-- 页面布局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;}
L'effet du style ci-dessus est le suivant :
Où ".container text" définit le "titre" et le "contenu" en bleu, tandis que le sélecteur de descendant direct ".container > text" définit le "titre" en rouge. Les deux ont la même priorité, mais l'ordre de déclaration du sélecteur descendant direct est ultérieur et l'ancien style est écrasé (pour le calcul de la priorité, voir priorité du sélecteur ).
priorité du sélecteur
Les règles de calcul de priorité des sélecteurs sont cohérentes avec les règles du w3c (uniquement prises en charge : style en ligne, identifiant, classe, balise, descendants et descendants directs), où le style en ligne est le style déclaré dans l'attribut style de l'élément.
Lorsque plusieurs déclarations de sélecteur correspondent au même élément, la priorité des différents sélecteurs de haut en bas est : style en ligne > id > classe > balise.
Pseudo-classe
Les pseudo-classes CSS sont des mots-clés dans les sélecteurs qui spécifient l'état spécial de l'élément à sélectionner. Par exemple, l'état :disabled peut être utilisé pour styliser un élément lorsque son attribut désactivé devient vrai.
En plus d'une seule pseudo-classe, une combinaison de pseudo-classes est également prise en charge. Par exemple, l'état :focus:checked peut être utilisé pour définir le style lorsque l'attribut focus et l'attribut vérifié de l'élément sont tous deux vrais. Les pseudo-classes individuelles prises en charge sont répertoriées dans le tableau suivant, par ordre décroissant de priorité :
Des exemples de pseudo-classes sont les suivants. La définition de la pseudo-classe :active d'un bouton peut contrôler le style lorsque l'utilisateur appuie dessus :
<!-- index.hml --><div class="container"><input type="button" class="button" value="Button"></input></div>
/* index.css */.button:active {background-color: #888888;/*按钮被激活时，背景颜色变为#888888 */}
illustrer
Les effets de pseudo-classe ne sont pas pris en charge pour les composants de fenêtres contextuelles et leurs sous-éléments, notamment les fenêtres contextuelles, les boîtes de dialogue, les menus, les options et les sélecteurs.
Précompilation de styles
La précompilation fournit un programme qui utilise une syntaxe unique pour générer du CSS. Il peut fournir des variables, des opérations et d'autres fonctions, permettant aux développeurs de définir plus facilement les styles de composants. Il prend actuellement en charge la précompilation de less, sass et scss. Lorsque vous utilisez la précompilation de style, vous devez modifier le suffixe du fichier CSS d'origine en less, sass ou scss, par exemple, remplacer index.css par index.less, index.sass ou index.scss.
● Le fichier actuel est précompilé à l'aide de styles. Par exemple, remplacez le fichier index.css d'origine par index.less :
/* index.less *//* 定义变量 */@colorBackground: #000000;.container {background-color: @colorBackground; /* 使用当前less文件中定义的变量 */}
● Référencez le fichier précompilé, par exemple, le fichier style.scss existe en commun, remplacez le fichier index.css d'origine par index.scss et introduisez style.scss :
/* style.scss *//* 定义变量 */$colorBackground: #000000;
Cité dans index.scss :
/* index.scss *//* 引入外部scss文件 */@import '../../common/style.scss';.container {background-color: $colorBackground; /* 使用style.scss中定义的变量 */}
illustrer
Il est recommandé que les fichiers précompilés référencés soient placés dans le répertoire commun pour la gestion.
Héritage de style CSS 6+
L'héritage de style CSS permet aux nœuds enfants d'hériter des styles des nœuds parents. Les styles hérités ont la priorité la plus basse dans le scénario de correspondance de style multi-sélecteur. Actuellement, l'héritage des styles suivants est pris en charge :
● famille de polices
● poids de la police
● taille de police
● style de police
● aligner le texte
● hauteur de ligne
● espacement des lettres
● couleur
● visibilité
2.Animations CSS
1. Animation de style d'attribut
Définissez dynamiquement la largeur et la hauteur du composant parent dans les images clés pour agrandir ou réduire le composant. Le composant enfant définit l'attribut scale pour mettre à l'échelle les composants parent et enfant en même temps, puis définit l'opacité pour afficher et masquer les composants parent et enfant.
<!-- 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);}}
illustrer
● Les valeurs d'animation ne sont pas distinguées dans l'ordre. La durée (temps d'exécution de l'animation)/le délai (temps d'exécution du retard de l'animation) sont analysés dans l'ordre d'apparition.
● Le style de durée d'animation doit être défini, sinon si la durée est 0, il n'y aura pas d'effet d'animation. Lorsque l'attribut animation-fill-mode est défini sur forwards, le composant affiche directement le style de la dernière image.
2. transformer l'animation de style
Définissez la propriété transform pour faire pivoter, redimensionner, déplacer et incliner le composant.
Définir une animation statique
Créez un carré et faites-le pivoter de 90° pour devenir un losange, et utilisez le rectangle ci-dessous pour couvrir la partie inférieure du losange afin de former un toit. Définissez la valeur de l'attribut de translation rectangulaire sur (150px, -150px) pour déterminer la position des coordonnées sur formez la porte, puis utilisez l'attribut position pour faire en sorte que les lignes horizontales et verticales suivent le composant parent (carré) jusqu'à la position de coordonnées spécifiée, puis définissez l'attribut d'échelle pour que les composants parent et enfant grandissent ensemble pour former la taille de la fenêtre. Enfin, utilisez l'attribut skewX pour incliner le composant et définir les coordonnées translation(200px,-710px) pour obtenir la cheminée.
<!-- 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);}
Définir l'animation panoramique
Animation de chute de balle. Modifiez les coordonnées de l'axe Y de la balle pour réaliser la chute de la balle. Dans la période suivante, réduisez la coordonnée de l'axe Y pour réaliser le rebond de la balle. Laissez la hauteur de chaque rebond diminuer progressivement jusqu'au rebond. la hauteur est de 0. L'animation de la chute de la balle est simulée.
<!-- 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);}}
Définir l'animation de rotation
La définition de différentes positions d'origine (transformation-origine) modifie le centre de rotation autour de l'élément. Les trois premières valeurs de paramètre de l'attribut rotate3d sont respectivement les vecteurs de rotation des axes X, Y et Z. La quatrième valeur est l'angle de rotation. L'angle de rotation peut être une valeur négative. La valeur signifie que le sens de rotation est dans le sens inverse des aiguilles d'une montre.
<!-- 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);}}
illustrer
transform-origin transforme la position d'origine de l'objet. Si une seule valeur est définie, l'autre valeur est de 50 %. Si deux valeurs sont définies, la première valeur représente la position de l'axe X et la deuxième valeur représente la position de l'axe Y.
Définir l'animation du zoom
Définissez l'attribut de style d'échelle pour implémenter l'animation d'ondulation. Utilisez d'abord le positionnement pour déterminer la position de l'élément. Après avoir déterminé les coordonnées, créez plusieurs composants pour obtenir l'effet de chevauchement. Définissez ensuite l'attribut d'opacité pour modifier l'opacité du composant à masquer et afficher le composant. En même temps, définissez la valeur d'échelle pour que le composant puisse être agrandi en même temps. Cachez un côté et enfin définissez des temps d'exécution d'animation différents pour les deux composants afin d'obtenir un effet de diffusion.
Définissez les paramètres de mise à l'échelle des axes X, Y et Z dans sacle3d pour implémenter l'animation.
<!-- 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);}}
illustrer
Après avoir défini la valeur de l'attribut de transformation, l'élément enfant changera avec l'élément parent. Si seules les autres valeurs d'attribut de l'élément parent sont modifiées (telles que la hauteur, la largeur), l'élément enfant ne changera pas.
Définir les propriétés de la matrice
Matrix est une matrice avec six paramètres d'entrée. Les six valeurs représentent : scaleX, skewY, skewX, scaleY, translateX, translateY. Dans l'exemple suivant, la propriété Matrix est définie sur Matrix(1,0,0,1,0,200) pour faire bouger et incliner le composant.
<!-- 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);}}
Intégrer l'attribut de transformation
La transformation peut définir plusieurs valeurs et plusieurs valeurs peuvent être définies en même temps. Le cas suivant montre l'effet d'animation lorsque les attributs d'échelle, de translation et de rotation sont définis en même temps.
<!-- 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);}}
illustrer
● Lorsque plusieurs transformations sont définies, les valeurs de transformation suivantes écraseront les précédentes. Si vous souhaitez utiliser plusieurs styles d'animation en même temps, vous pouvez utiliser l'écriture composée, par exemple : transform: scale(1) rotate(0) translation(0,0).
● Lorsque la transformation est écrite de manière composite, différents effets d'animation se produiront en fonction de l'ordre de plusieurs valeurs de style dans le style changeant.
● Les valeurs de style définies par l'attribut transform doivent correspondre une à une. Si le recto et le verso ne correspondent pas, l'animation ne prendra pas effet. Si plusieurs valeurs de style sont définies, seul l'effet d'animation de la valeur correspondante sera affiché.