颜色表示方式
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;(小手样式)等等