1.字体样式
font 设置字体样式
font-size 字体大小
font-size: 12px;
font-family 字体
font-family: "微软雅黑";
font-weight 字体粗细
font-weight: bold;
font-weight: 400;
font-style 字体样式
font-style: normal;
字体样式连写
顺序:style weight size family
font: italic 700 20px '宋体';
2.文本缩进
text-indent 设置缩进
(以em为单位,1em表示当前一个字符的大小)
text-indent: 2em;
3.文本对齐方式
text-align 对齐方式
(改变的是内容的对齐方式,包括文字、图片)
text-align: center;
4.文本修饰
text-decoration
none 去除下划线,清除a链接的默认样式
text-decoration: none;
5.大小写转换
转大写
text-transform: uppercase;
转小写
text-transform: lowercase;
6.行高
line-height 设置行高
(本行与上一行和下一行之间的距离)
line-height: 50px;
7.文本溢出
overflow 设置文本溢出
overflow: auto;
overflow: hidden;
overflow: scroll;
将单行多出部分变为省略号
text-overflow: ellipsis;
8.背景相关
background 设置背景
background-color 背景颜色
background-color: pink;
background-image 背景图片
通过url( )指向地址
background-image: url(./背景.jpg);
background-repeat 设置背景图片平铺方式
background-repeat: no-repeat;
background-attachment 设置背景图片随鼠标的滚动方式
background-attachment: fixed;
background-position 定位背景图片
background-position: right bottom;
背景图片与字体样式一样可以连写,顺序要求不高
9.列表样式
list-style 设置列表样式
去除<li>默认样式:
list-style: none;
10.元素显示模式转换
转化为块元素
display: block;
转化为行内块元素
display: inline-block;
11.轮廓线
outline 设置轮廓线
outline-style 设置轮廓线样式
1.none 去除边框
2.dashed 点状轮廓线
......
outline: none;
outline-style: none;
outline-style: dashed;
outline-color 设置轮廓线颜色
outline-color: aqua;
outline-width 设置轮廓线宽度
outline-width: 40px;
outline-width: thick
12.边框
border设置边框
border-style 边框样式
border-style: solid;
border-color 边框颜色
border-color: rgb(33, 29, 29);
border-width 边框宽度
border-width: 3px;
border- - -radius ...... 设置边框角弧度
border-top-left-radius: 50%;
border-top-right-radius: 50px;
13.合并相邻边框
border-collapse 合并边框
(给<table>加)
border-collapse: collapse;
14.颜色
设置颜色
颜色名表示:
color: red;
三原色表示:
color: rgb(33, 106, 178);
设置透明度:
rgba 设置
color: rgba(rgb(33, 106, 178),0.4);
0.4代表透明度
opacity 设置
取值范围: 0 - 1
background-color: rgb(230, 24, 24);
opacity: 0.3;
15.元素隐藏方式
设置透明度隐藏
隐藏后保留原来位置
opacity: 0;
display 隐藏
隐藏后不保留原来位置
display :none;
visibility 隐藏
隐藏后保留原来位置
visibility: hidden;
16.鼠标样式及防拖拽
鼠标样式:
cursor: initial;
防止拖拽:
resize: none;
17.定位
绝对定位
绝对定位会放弃原来的位置,子绝父相(子加绝对定位,父加相对定位)
.father {
position: relative;
}
.son {
position: absolute;
top: 200px;
/* 这里是相对于father顶部距离200px */
}
逐级查找父级元素是否有相对定位,如果有,以父亲为定位参考,如果没有,继续向上查找以有相对定位的那级为定位参考,如果上级都没有,以浏览器为定位参考。(就近参考)
优先显示
z-index 显示的优先级(大的优先显示在上)
z-index: 2;
固定定位
固定定位相对于可视窗口进行定位,不随页面移动而移动,定位后会放弃原来位置
position: fixed;
粘性定位
当页面滑动到一定位置时会停止滑动固定在可视窗口不再随页面滑动而移动
position: sticky;