Common attributes in css styles (summary)

This chapter introduces common attributes in css styles (summary), and summarizes some attributes that can often be used to define css styles in the usual front-end development process. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. CSS text properties:

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. CSS border properties --- leave the border blank

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

3. CSS symbol attributes

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. CSS background style

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. CSS connection properties

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. CSS frame list

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

The above is the recommended writing method, but you can also use the conventional method as follows:

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

Other frame styles: solid /*solid frame*/, dotted /*dashed frame* /, double /*double line frame*/, groove /*three-dimensional inner convex frame*/, ridge /*three-dimensional relief frame*/, inset /*concave frame*/, outset /*convex frame*/.

7. CSS form application

Text box button Check box Select button Multi-line text box Drop-down menu option 1 option 2

8. CSS border style

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

##9. CSS filter attribute Filter: Add filter effects to the style . Since this attribute has a lot of content, we will introduce filters separately in the next chapter.

1. Transparency

Alpha: Set transparency Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY =?, FinishX=?, FinishY=?)

Opacity: Transparency level, range is 0-100, 0 represents completely transparent, 100 represents completely opaque.
FinishOpacity: When setting the transparency effect of the gradient, it is used to specify the transparency at the end, and the range is also 0 to 100.
Style: Set the gradient transparent style. A value of 0 represents a uniform shape, 1 represents a linear shape, 2 represents a radial shape, and 3 represents a rectangle.
StartX and StartY: represent the starting X and Y coordinates of the gradient transparency effect. FinishX and FinishY: represent the X and Y coordinates of the end of the gradient transparency effect.

2.BlendTrans: The fade-in and fade-out effect between images

BlendTrans(Duration=?)

Duration: The fade-in or fade-out time .

Note: This filter must be used with JS to create a picture sequence in order to create effects between pictures.

3. Set the blur effect

Blru: Create a blur effect Blur(Add=?, Direction=?, Strength=?) Add: Whether to blur in one direction, this The parameter is a boolean value, true (not 0) or false (0).

Direction: Set the direction of the blur, where 0 degrees represents vertical upward, and then every 45 degrees is a unit. Strength: represents the blurred pixel value.

4.Chroma: Set the specified color to transparent

Chroma(Color=?)

Color: Refers to the color to be set to transparent color.

5. Create a shadow effect

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

Color: Specify the color of the shadow.

OffX: Specifies the horizontal offset of the shadow relative to the element, an integer.
OffY: Specifies the vertical offset of the shadow relative to the element, an integer.
Positive: It is a Boolean value. When the value is true (not 0), it means establishing an outer shadow; when it is false (0), it means establishing an inner shadow.

6.FlipH: Flip the element horizontally

7.FlipV: Flip the element vertically

8. Create an outer glow effect

Glow(Color=?, Strength=?)

Color: specifies the color of the glow.

Strength: The intensity of the light, which can be any integer between 1 and 255. The larger the number, the greater the range of the light.

9.Gray: Remove the color of the image and display it as a black and white image

##10.Invert: Invert the color of the image to produce a film-like image Effect

11.Light: The effect of placing the light source

, which can be used to simulate the projection effect of the light source on the object. Note: This effect requires using JS to set the position and intensity of the light.

12.Mask: Create a transparent mask

Mask(Color=?)

Color: Set the background color so that the object covers the background color Partially transparent

13.RevealTrans: Create switching effect

RevealTrans(Duration=?, Transition=?)

Duration: is the switching time, in seconds. Transition: It is the switching method, which can be set from 0 to 23.

Note: If you want to switch between pages, you can add a line of code in the area: . If the element is used in the page, it must be used with JS.

14.Shadow: Create another shadow effect

Shadow(Color=?, Direction=?)

Color: refers to the color of the shadow.

Direction: Sets the direction of the projection. 0 degrees means vertically upward, and every 45 degrees is a 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样式或坐标来实现。"

The above is the detailed content of Common attributes in css styles (summary). For more information, please follow other related articles on the PHP Chinese website!