CSS常用样式

颜色表示方式

1.颜色名表示 黄色yellow 红色red

2.#+用六位十六进制的数据表示颜色（#000000-#ffffff）三原色混合原理

3.rgb(red,green,blue) 三原色混合原理 取值范围 0-255

4.rgba(red,green,blue,alpha) 三原色混合原理 取值范围 0-255 alpha表示透明度0-1（值越小透明度越高）

5.opactiy: 取值（0-1），值越小透明度越高

alpha只针对背景颜色透明，opactiy针对整个元素透明

6.渐变颜色

background:linear-gradient(0deg,red,blue);

0deg是颜色渐变的方向（与y轴的夹角），后面为变化的颜色

7.透明色

background:linear-gradient(90deg,pink,transparent);

 

字体相关样式

1.color 设置字体颜色

color: green;

2.font符合属性

font-size: 100px;

设置字体大小

font-weight: 900;

设置字体粗细（100-900）值越大越粗

font-style: italic;

设置字体风格（斜体）normal表示正常

3.修饰线

text-decoration: none;

控制文字是否有修饰线

none  无修饰线

underline 下划线

line-through 中划线

overline 上划线

4.文字位置

text-align: center;

（right/left）

5.字体行高

line-height: 100px;//与元素高度一致，位置居中

背景相关

1.背景颜色

background-color: pink;

2.背景图片

background-image: url(图片.jpg);

PS：如果二者同时设定，则显示背景图片

3.背景图片平铺

background-repeat: reapt;//no-reapt

(reapt-x 只平铺横向，reapt-y 只平铺纵向)

 

4.背景图片大小

background-size: 200px;

cover把所在的容器铺满

5.背景图片位置

background-position: center;

居中为center,也可以写背景图片的位置数值

6.背景图片不随浏览器上的滚动面而滚动

background-attachment: fixed;

边框相关

border-radius: 10px 20px 30px 40px;

指定边跨圆角的半径，半径越大圆角程度越大

以左上角开始顺时针旋转

只设定左上角

border-top-left-radius: 60px;

阴影

（水平位置，垂直位置，模糊度，阴影颜色）

盒子外阴影

box-shadow: 5px 5px 5px red;

盒子内阴影

box-shadow: 5px 5px 5px inset;

文字阴影

text-shadow: 10px 5px 5px black;

列表相关

无样式则写none

list-style:armenian;

list-style: circle;

图片相关

控制图片不因长宽大小而变形

object-fit: cover;

鼠标相关

控制鼠标悬浮于图片上时鼠标的样式

cursor: pointer;（小手样式）等等