1.选择器
1.1基础选择器
- 标签选择器（元素）
h1{
font-weight:bold;
}
- ID选择器
#id名称{
color：gray;
}
通常用于is中
- 类选择器（class）
.class名称{
font-size:20px !important; //优先级最高
line-height:; /行高，p中自动有设置
}
在css中应用广泛
1.2.选择器优先值
！important>id>class>元素>浏览器默认样式
1.3.层次选择器
- 后代选择器（子孙） 有div中的所有p标签才满足
div p{
fnt-size：30px;
}
- 子选择器（儿子） eg div > p 离div最近的一层p 只选择第一代元素
div >p{
fnt-size：30px;
}
- 群组选择器（分组） 多个内容都选择
div,h1,p{
color:red;
}
1.4.统一设置页面
*{
margin:0；
padding:0;//去掉边距
font-size:20px;
}
2.基础属性
2.1背景
- backgroud-color: //背景颜色
red;
#ffbb55(可简写为#fb5)
rgb(255,0,0)
rgba(255,0,0,5)
HSL(色调，饱和度，明度)
- backgroud-image: //背景图片路径
url('png/img/bg')
注：背景图片和颜色只能选择其一
-
backgroud-repeat: //背景图片是否平铺以及平铺样式
repeat; //default
no-repeat; //不平铺
repeat-x; //水平平铺
-
bckgroud-position: //背景图片位置
left bottom; //左里部
right top; //右上角
x%y%; //左上角是0%0%，右下角是100%100%
xpos ypos //像素（不是响应式布局，是一种绝对位置，有可能超出背景)
- backgroud-attachment: //背景图片滚动
scroll; //
2.2文本
-
color： 同上背景颜色定义
-
text-align:
left; default
right;
center;
-
text-decoration:
none; fault
underline; //下划线
line-through; //穿过文本的一条线
- line-height: //行高，直接设置值即可
%
倍数
- text-shadow: //阴影，设置艺术字
水平位置偏移量 垂直位置偏移量 模糊半径 阴影颜色
- direction: //垂直方向排列
ltr; //default
rtl; //从左到右
2.3字体
- font-size:
16px；
1.5em;
150%
em 单位，1em=16px 使用px较少，因为px大小为绝对值，em可以自动缩放，是一种响应式布局
- font-family： //字体
"宋体"
"微软雅黑" 谷歌浏览器默认值
"Times New Roman"
"黑体"
-
font-style:
italic; //斜体，等价于<em>
-
font-weight:
normal; //default
bold; //700
2.4链接(以下适用于所有selector)
-
a:link 未访问
-
a:visited 已访问
-
a:hover（必须在前两个之后）鼠标悬停
-
a:active（必须在上一个之后） 鼠标点击
2.5列表
- 属性 list-style-type
none 文字前无任何样式标记
disc 无序默认 实心圆点
decimal 有序默认 数字
- list-style-image:
url('logo.png') 根据项目文字或内容大小，先处理图片大小
2.6display: //显示 块元素和内联元素
- 隐藏元素：
h1.hidden{visibilty：hidden;}
h1.hidden{display:none;}
-
none
-
inline
-
inline-block
-
block
-
flex(弹性盒子模型)
-
visibility：hidden
2.8 表格
border-collaspse: collapse;
border: 1px solid black;
2.9盒子模型
- margin
left
top
right
bottom
- border
border-
border-
none
dotted
dashed
double
border-
- padding
left
top
right
bottom
2.10定位（位置的四个属性如果没有position属性声明，是无用的）
- position
static 静态定位，默认无定位
absolute 绝对定位
relative 相对定位
fixed
- left
px/em/vh.vw/%/vmin/vmax
-
top
-
right
-
bottom