1.什么是css
层叠样式表(cascading style sheets)
控制html的显示方式。(样式,页面布局)
2.Css的引入方式
1)内联样式(行间样式): 不建议用
aaaa
- 复用性不好;
- 优先级最高;
- 内容和样式没有分离;
2)内部样式表
选择器{
声明1;(属性名:属性值)
声明2;
}
<style>
p{
color: red;
font-size: 12px;
}
</style>
3)外部样式表(外链样式)
- 编写样式文件(.css)
4)优先级
行间样式优先级最高
3.书写规范(非行间样式)
1)颜色
- 简单的英文单词 red
- 使用16进制数据表示 #000000 rgb三原色
每两位一致可以简写: #f00
Rgb(0,0,0) 0-255
2)属性值
由多个单词构成必须有双引号。
4.Css的选择器
1)基本选择器
a)Id选择器:根据元素的id值选择元素,id值唯一
#p1{
color: red;
}
b)标签选择器:通过标签名称选择元素
p{
color: red;
}
c)类选择器:根据class属性值选择元素,class值允许重复
.red{
color: red;
}
d)优先级
Id选择器 > 类选择器 >标签选择器
2)属性选择器:属性选择元素
[name]{
border: 1px solid red;
}
[type="text"]{
border: 1px solid red;
}
3)其他选择器
后代选择器
P span{
}
并集选择器:
#p1,span,h1{
color: red;
}
交集选择器
p.red{
color: red;
}
通配选择器
*{}
5.Css的基本样式
1)文本样式
- Color:文本颜色
- Text-align:元素中内容水平对齐方式 left/right/center
- Line-height:设置行高
- text-decoration:文本修饰
2)文字样式
- Font-size:设置文字尺寸
- font-family:”arial narrow”,”华文行楷”;
- font-style: italic; 风格(倾斜)
- font-weight: 900; 粗细: light,normal,bold 100-900
- font:简写
- font-style
- font-variant
- font-weight
- font-size/line-height
- font-family
- font: italic 900 20px/300px “arial narrow”,”华文行楷”;
3)背景样式
- background-color: red;
- background-image: url(img/p1.jpg);
- background-repeat: no-repeat;
- background-position: 20px 20px;
- background: red url(img/p1.jpg) no-repeat 20px 20px;
4)宽高样式
Width height
5)列表样式
list-style-type: none;
6)其他样式
display: 控制元素的显示
block none
6.“盒子”模型
1)边框:
- border-width: 1px;
- border-style: dashed;
- border-color: black;
- border: 1px dashed black;
2)内边距: padding
真实内容距离边框之间的距离
- padding-left: 10px;
- padding-top: 10px;
- padding-bottom: 10px;
- padding-right: 10px;
- padding: 10px 20px 30px 10px; 上右下左
3)外边距:边框距离父级组件或者其他兄弟组件边框的距离 margin
- margin-left: 10px;
- margin-right: 10px;
- margin-bottom: 10px;
- margin-top: 10px;
- margin: 10px;
margin: 10px 20px 30px 30px;
盒子宽度=内容宽度+2(padding+border+margin)
7.浮动和定位
1)浮动
Float:left/right
脱离文档流,遇到父级组件左边框或者已经浮动的兄弟组件右边框就停止浮动。
2)清除浮动
Clear: left / right /both
3)定位
确定位置
Position: 定位方式
Relative: 相对定位
没有脱离文档流,通过top/left设置相对于父级容器的位置
Absolute: 绝对定位
脱离文档流,如果父级组件未设置定位方式,此时将会继续向上级寻找,直到找到window为止。