1、CSS概述
CSS(Cascading Style Sheets)层叠样式表:用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)。
2、CSS的引入方式
CSS不能单独使用,必须与HTML或XML一起协同工作,为HTML或XML起装饰作用。
① 外部样式:通过link标签引入一个外部的css文件
<link rel="stylesheet" type="text/css" href="test.css">
② 内部样式:直接在style标签内编写CSS代码
<style type="text/css">
</style>
③ 行内样式:直接在标签中添加一个style属性, 编写CSS样式
<p>
<span style="color: red">
这是一个行内样式
</span>
</p>
3、CSS选择器
① 元素选择器
标签名 {
属性名称:属性的值;
属性名称:属性的值;
}
② ID选择器
#ID名 {
属性名称:属性的值;
属性名称:属性的值;
}
③ 类选择器
.类的名称 {
属性名称:属性的值;
属性名称:属性的值;
}
④ 属性选择器
标签名[属性名][属性名=“属性值”] {
属性名称:属性的值;
属性名称:属性的值;
}
⑤ 后代选择器
标签名 子标签名 {
属性名称:属性的值;
属性名称:属性的值;
}
⑥ 子元素选择器
标签名 > 子标签名 {
属性名称:属性的值;
属性名称:属性的值;
}
⑦ 伪类选择器
标签名:特殊的伪类选择 {
属性名称:属性的值;
属性名称:属性的值;
}
4、CSS浮动
浮动的元素会脱离正常的文档流,形成流式布局,在正常的文档流中不占空间
float属性:
left 向左浮动
right 向右浮动
clear属性: 清除浮动
left: 不允许左边浮动
right: 不允许右边浮动
both: 不允许两边浮动
5、一些CSS属性
line-height:60px; <!-- 设置行高 -->
border: 1px solid red; <!-- 设置边宽 -->
text-decoration: none; <!-- 清除a标签中文字的下划线 -->
text-align: center; <!-- 设置文字的对齐方式 -->
6、CSS选择器的优先级
① 按照选择器的搜索精确度
行内样式 > ID选择器 > 类选择器 > 元素选择器
② 按照就近原则
在同一级中,谁的样式离得近就使用谁的样式
7、CSS盒子模型
① 内边距
padding-top:
padding-right:
padding-bottom:
padding-left:
padding: padding-top, padding-right, padding-bottom, padding-left
② 外边距
margin-top:
margin-right:
margin-bottom:
margin-left
8、CSS绝对定位
position:absolute;
top:控制距离顶部的距离
left:控制距离左边的距离