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