颜色的表示方式
-
用颜色名表示 red、pink、yellow
-
六位十六进制的数值表示颜色 0~f 红光 绿光 蓝光
-
00~ff
-
前两位红光,中间表示绿光,最后是蓝光
-
div{ background:#fff000 }
-
-
rgb(red,green,blue)0~255
-
rgba(red,green,blue) a【透明度】0~1
-
透明度:opacity:0(范围是0~1_esc_newline_)
- 和rdba的区别是opacity针对于整个元素,包括背景和文字,而rgba则只针对与其中的背景,不包括文字
-
-
渐变颜色
- linear-gradient(xxdeg(表示渐变角度),red,blue,xx;)
- linear-gradient(xxdeg(表示渐变角度),transparent;)
-
透明色:transparent
-
字体相关样式
-
字体颜色 color
-
front 复合属性
-
字体大小 front-size:30px
-
字体粗细 front-weight:900
- 500变细
- 600加粗
-
字体风格 front-style:
- normal 正常
- italic 斜体
-
-
设置文字是否有修饰线 text-decoration:
- none 无修饰
- underline 下划线
- line-through 中划线
- overline 上划线
-
设置文本的水平对齐方式 text-align
- right右边
- left左边
- center居中
-
设置文本的行高 line-height:60px
背景相关样式 background 复合属性
-
background-color:设置背景颜色
-
background-image: url()设置背景图片url函数指定图片地址绝对地址,相对地址
-
-
background-repeat 设置图片是否平铺
- no-repeat 不平铺
- repeat平铺
- repeat-x x轴平铺
- repeat-y y轴平铺
-
background-size 设置背景图片大小
- cover:把所在的容器铺满
-
background-position:设置背景图片位置
- center居中
-
background-attachment:fixed;设置背景图片不随浏览器的滚动而滚动
列表相关:
list-style:none 去掉列表样式
边框相关
圆角边框
border-radius:30px(设置的是圆的半径_esc_newline_)
border-radius:30px(设置的是圆的半径_esc_newline_),10px,100px,50px
border-top-right-radius:30px(设置的是圆的半径_esc_newline_) 对单个角进行设置
盒子阴影
box-shadow:水平 垂直 模糊度 颜色
box-shadow:2px 6px 5px blue;
图片
width
height
object-fit:cover; 保持图片原有比例,不变性
定位
-
position用于定位模式,其值如下
-
static 代表静态模式,常态模式
-
fixed 代表固定模式 不随浏览器的滚动而滚动,释放自己原来的空间,参考物是整个浏览器
- left:500px
- right
- top
-
relative 相对模式 随浏览器的滚动而滚动,保留自己原来的空间,参考物是自己原来的位置
- left:30px
- right:20px
- top:10px
-
absolute 代表绝对模式,随浏览器的滚动而滚动,释放自己原来的空间,参考物是整个浏览器
-
结合模式
- (父级使用relative,子集元素使用absolute)子集元素随浏览器的滚动而滚动,释放自己的空间,参考物是父级元素
-
-
z-index:设置层级,数字越大越靠上
-
div{ z-index:1 }
-