Attributs communs dans les styles CSS (résumé)

Ce chapitre présente les attributs communs dans les styles CSS (résumé) et résume certains attributs qui peuvent souvent être utilisés pour définir les styles CSS dans le processus de développement front-end habituel. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. Attributs de texte CSS :

color : #999999; /*文字颜色*/
font-family : 宋体,sans-serif; /*文字字体*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜体*/
font-variant:small-caps; /*小字体*/
letter-spacing : 1pt; /*字间距离*/
line-height : 200%; /*设置行高*/
font-weight:bold; /*文字粗体*/
vertical-align:sub; /*下标字*/
vertical-align:super; /*上标字*/
text-decoration:line-through; /*加删除线*/
text-decoration: overline; /*加顶线*/
text-decoration:underline; /*加下划线*/
text-decoration:none; /*删除链接下划线*/
text-indent：30px；/*段落首行缩进*/
text-transform : capitalize; /*首字大写*/
text-transform : uppercase; /*英文大写*/
text-transform : lowercase; /*英文小写*/
text-align:right; /*文字右对齐*/ 
text-align:left; /*文字左对齐*/
text-align:center; /*文字居中对齐*/
text-align:justify; /*文字分散对齐*/
vertical-align属性    vertical-align:top; /*垂直向上对齐*/
vertical-align:bottom; /*垂直向下对齐*/
vertical-align:middle; /*垂直居中对齐*/
vertical-align:text-top; /*文字垂直向上对齐*/
vertical-align:text-bottom; /*文字垂直向下对齐*/

2. vide

padding-top:10px; /*上边框留空白*/
padding-right:10px; /*右边框留空白*/
padding-bottom:10px; /*下边框留空白*/
padding-left:10px; /*左边框留空白

3. Propriétés des symboles CSS

list-style-type:none; /*不编号*/
list-style-type:decimal; /*阿拉伯数字*/
list-style-type:lower-roman; /*小写罗马数字*/
list-style-type:upper-roman; /*大写罗马数字*/
list-style-type:lower-alpha; /*小写英文字母*/
list-style-type:upper-alpha; /*大写英文字母*/
list-style-type:disc; /*实心圆形符号*/
list-style-type:circle; /*空心圆形符号*/
list-style-type:square; /*实心方形符号*/
list-style-image:url(/dot.gif); /*图片式符号*/
list-style-position: outside; /*凸排*/
list-style-position:inside; /*缩进*/

4. Style d'arrière-plan CSS

background-color:#F5E2EC; /*背景颜色*/ 
background:transparent; /*透视背景*/
background-image : url(/image/bg.gif); /*背景图片*/
background-attachment : fixed; /*浮水印固定背景*/
background-repeat : repeat; /*重复排列-网页默认*/
background-repeat : no-repeat; /*不重复排列*/
background-repeat : repeat-x; /*在x轴重复排列*/
background-repeat : repeat-y; /*在y轴重复排列*/ 指定背景位置
background-position : 90% 90%; /*背景图片x与y轴的位置*/
background-position : top; /*向上对齐*/
background-position : buttom; /*向下对齐*/
background-position : left; /*向左对齐*/
background-position : right; /*向右对齐*/
background-position : center; /*居中对齐*/

5. Propriétés de connexion CSS

a /*所有超链接*/ a:link /*超链接文字格式*/ 
a:visited /*浏览过的链接文字格式*/ a:active /*按下链接的格式*/
a:hover /*鼠标转到链接*/ 鼠标光标样式：
链接手指 cursor: hand;（十字体） cursor:crosshair;（箭头朝下） cursor:s-resize;(十字箭头) cursor:move;(箭头朝右) cursor:move;(加一问号) cursor:help;(箭头朝左) cursor:w-resize;(箭头朝上) cursor:n-resize;(箭头朝右上) cursor:ne-resize;(箭头朝左上) cursor:nw-resize;(文字I型) cursor:text;(箭头斜右下) cursor:se-resize;(箭头斜左下) cursor:sw-resize;(漏斗) cursor:wait;(光标图案(IE6))  
p {cursor:url(“光标文件名.cur”),text;}

6 , liste de bordures CSS

border-top : 1px solid #6699cc; /*上框线*/
border-bottom : 1px solid #6699cc; /*下框线*/
border-left : 1px solid #6699cc; /*左框线*/ 
border-right : 1px solid #6699cc; /*右框线*/

Ce qui précède est la méthode d'écriture recommandée, mais vous pouvez également utiliser la méthode conventionnelle comme suit :

border-top-color : #369 /*设置上框线top颜色*/
border-top-width :1px /*设置上框线top宽度*/
border-top-style : solid/*设置上框线top样式*/

Autre bordure styles : plein /*cadre de ligne continue*/, pointillé /*cadre de ligne pointillée*/, double /*cadre de ligne double*/, rainure /*cadre convexe intérieur tridimensionnel*/, crête /*cadre en relief tridimensionnel* /, en médaillon /*cadre concave* /, en retrait /*cadre convexe*/.

7. Application de formulaire CSS

Bouton de zone de texte Case à cocher Bouton de sélection Zone de texte multiligne Menu déroulant Option 1 Option 2

8. Style de bordure CSS

margin-top:10px; /*上边界*/ 
margin-right:10px; /*右边界值*/ 
margin-bottom:10px; /*下边界值*/ 
margin-left:10px; /*左边界值*/

9. Attribut de filtre CSS Filtre : Ajouter un filtre au style Effets miroir. . Étant donné que cet attribut a beaucoup de contenu, nous présenterons les filtres séparément dans le chapitre suivant.

1. Transparence

Alpha : Définir la transparence Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY =?, FinX=?, FinY=?)
Opacité : niveau de transparence, la plage est de 0 à 100, 0 représente complètement transparent, 100 représente complètement opaque.
FinishOpacity : lors de la définition de l'effet de transparence du dégradé, il est utilisé pour spécifier la transparence à la fin, et la plage est également de 0 à 100.
Style : définissez le style de dégradé transparent. Une valeur de 0 représente une forme uniforme, 1 représente une forme linéaire, 2 représente une forme radiale et 3 représente un rectangle.
StartX et StartY : représentent les coordonnées X et Y de départ de l'effet de transparence dégradé. FinishX et FinishY : représentent les coordonnées X et Y de la fin de l'effet de transparence dégradé.

2.BlendTrans : effet de fondu entrant et sortant entre les images

BlendTrans(Duration=?)

Durée : fondu entrant ou temps de fondu.

Remarque : Ce filtre doit être utilisé avec JS pour créer une séquence d'images afin de créer des effets entre les images.

3. Définir l'effet de flou

Blru : Créer un effet de flou Flou (Ajouter=?, Direction=?, Force=?) Ajouter : S'il faut flouter une direction, ce Le paramètre est une valeur booléenne, vraie (différente de zéro) ou fausse (zéro).
Direction : définissez la direction du flou, où 0 degré représente la verticale vers le haut, puis tous les 45 degrés correspond à une unité. Force : représente la valeur du pixel flou.

4.Chroma : définir la couleur spécifiée sur transparent

Chroma(Color=?)

Color : fait référence à la couleur à définir comme couleur transparente.

5. Créer un effet d'ombre

DropShadow(Color=?, OffX=?, OffY=?, Positive=?)

Couleur : Spécifiez la couleur de l'ombre.
OffX : Spécifie le décalage horizontal de l'ombre par rapport à l'élément, un nombre entier.
OffY : Spécifie le décalage vertical de l'ombre par rapport à l'élément, un nombre entier.
Positif : C'est une valeur booléenne. Lorsque la valeur est vraie (et non 0), cela signifie établir une ombre extérieure ; lorsqu'elle est fausse (0), cela signifie établir une ombre intérieure.

6.FlipH : Retourner l'élément horizontalement

7.FlipV : Retourner l'élément verticalement

8 . Créez un effet de lueur extérieure

Glow(Color=?, Strength=?)

Couleur : spécifie la couleur de la lumière.
Force : L'intensité de la lumière, qui peut être n'importe quel nombre entier compris entre 1 et 255. Plus le nombre est grand, plus la portée de la lumière est grande.

9.Gray : Supprimez la couleur de l'image et affichez-la sous forme d'image en noir et blanc

10.Inverser : Inverser la couleur de l'image , produisant un effet d'image semblable à celui d'un film

11.Lumière : L'effet de placer une source de lumière , qui peut être utilisée pour simuler l'effet de projection de la source de lumière sur le objet Remarque : Cet effet nécessite que JS définisse la position et l'intensité de la lumière.

12.Mask : Créez un masque transparent

Mask(Color=?)

Color : Définissez la couleur d'arrière-plan pour que l'objet recouvre le couleur de fond Partiellement transparent

13.RevealTrans : Créer un effet de commutation

RevealTrans(Duration=?, Transition=?)

Durée : est le temps de commutation, en secondes. Transition : C'est la méthode de commutation, qui peut être réglée de 0 à 23.

Remarque : Si vous souhaitez basculer entre les pages, vous pouvez ajouter une ligne de code dans la zone  : . Si les éléments sont utilisés dans la page, ils doivent être utilisés avec JS.

14.Ombre : Créer un autre effet d'ombre

Shadow(Color=?, Direction=?)

Couleur : fait référence à la couleur de l'ombre.

Direction : définit la direction de la projection, 0 degré signifie verticalement vers le haut, puis tous les 45 degrés sont une unité.

15.Wave：波纹效果

Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)

Add：表示是否显示原对象，0表示不显示，非0表示要显示原对象。

Freq：设置波动的个数。LightStrength：设置波浪效果的光照强度，从0到100。0表示最弱，100表示最强。 

Phase：波浪的起始相角。从0到100的百分数值。（例如：25相当于90度，而50相当于180度。） 

Strength：设置波浪摇摆的幅度。

16.Xray：显现图片的轮廓，X光片效果 注意：在使用CSS滤镜时，必须使用在有区域的元素，比如表格，图片等。而文本，段落这样没有区域的元素不能使用CSS滤镜，对这样的元素我们可以设置元素的Height和Width样式或坐标来实现。"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!