#博学谷IT学习技术支持#
一、引入方式
内嵌
外链：工作中写项目: link
行内:配合js: style="CSS属性"
二、选择器写法
标签
类
id
通配符 *
后代: 空格
子代: >
交集:div.box
并集: 逗号
伪类::hover
伪元素:::after ::before 特点:显示模式是行内, 必须写的属性是content
结构伪类
:nth-child()
:first-child
:last-child
三、选择器优先级
如果一个标签用了多个选择器, 样式还冲突，那么继承 < * < 标签 < 类 < id < 行内 < !important
(行内个数, id个数, 类个数, 标签个数)
不能进位
四、控制文字的属性(都可以继承)
font-size: 字号
font-weight: 粗细
font-style: 倾斜
normal (不倾斜)
italic(倾斜)
color
font-family: 字体
text-align: 水平对齐方式
left
center
right
line-hight: 行高
行高取值等于高度值可以实现单行文字居中
text-indent: 2em
首行缩进
text-decoration
none : 无
underline: 下划线
五、控制盒子属性(不能继承)
盒子模型
margin : 外边距
多值写法
方向英文
margin-top
margin-right
margin-bottom
margin-left
border: 边框线
padding: 内边距
width
height
background
背景色
background-color
背景图
background-image
背景图平铺
background-repeat
背景图位置
background-position
背景图缩放
background-size
浮动
float
left
right
定位
1, position
static : 静态定位
不定位, 标准流
relative: 相对定位
1. 参考自己改变位置
2. 保留标签原有的显示模式
3. 不脱标, 占位
absolute : 绝对定位
1. 参考已经定位的父级改变位置, 如果没有这样的父级则以浏览器窗口改变位置
2. 标签会具备行内块特点
3. 脱标
fixed : 固定定位
1. 参考浏览器窗口改变位置(可以让标签不随着网页的滚动而变化)
2. 标签具备行内块特点
3. 脱标
2. 方向英文属性, 调节位置
left
right
top
bottom
注意: 如果left和right同时设置会left生效, top和bottom同时设置会top生效