颜色
颜色表示方式
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.opacity 透明度 针对于整个元素
6.background: linear-gradient(90deg,red,green,blue);渐变
7.透明色 transparent
字体表示方式
1.color:设置字体颜色
2.font 复合属性
font-size 字体大小
font-weight 字体的粗细
font-style 设置字体风格 normal 正常 italic 斜体
text-decoration 控制文字是否有修饰线,none五修饰,underline下划线,line-through中划线 overline 上划线
text-align 规定文本的水平对齐方式 center居中 left左边 right右边
line-height 设置字体行高
背景表示方式
background 符合属性
background-color 背景颜色
background-image 设置背景图片 使用url()函数指定图片的地址 如果同时设置了背景颜色和背景图片,背景颜色被覆盖
background-repeat 设置背景图片平铺 no-repeat不平铺 repeat-x只横向 repeat-y只纵向
background-size 控制背景图片大小 cover 把所在容器铺满
background-position center图片位置居中
background-attachement fixed 控制背景图片不随浏览器的滚动而滚动
列表相关
list-style:none 没有格式
边框
边框相关
border:3px solid red 边框大小,形状。还有颜色
border-radius:圆角边框 指定边跨圆角的半径,半径越大圆角的程度越大
以左上角开始顺时针旋转
可以结合上下左右单纯对某一个角使用 border-top-left-right-radius 50px;
阴影
盒子的阴影:box-shadow :水平位置 垂直位置 模糊度 阴影颜色 [insert内阴影]
文字的阴影:text-shadow 水平位置 垂直位置 模糊度 阴影颜色
图片
object-fit:cover;控制图片不变形
鼠标样式
鼠标样式 cursor:pointer 小手