自学前端笔记——（二）CSS

该笔记实际完成于2019/7/30

CSS样式：

Style标签要在head里
上面只对当前页面的所有p有效

一、 选择器：

1.标签选择器（与标签同名）

2.类别选择器：.开头，后面可以自己定义；html中 用class属性，没有.

3.ID选择器：#开头，后面可以自己定义；html中 用id属性，没有#（与类别选择器不同的是，ID选择器有唯一性）

二、 选择器的声明

1. 选择器的声明

P span（空格）

2. 集体声明（，隔开）

3. 全局声明（*）

4. 混合

三、CSS样式（I）文字样式：

垂直居中：行高和文本高度相同


属性为：none 则没有装饰线 （常用于去掉文字超链接的下划线）

Font-family:取值可以为多个，按先后顺序如果第一个有则设置，否则设置下一个，以此类推，如果取值中有空格，则用””,没有则不用，多个取值用，隔开

四、CSS样式（II）背景和超链接样式：

Repeat：背景图片的填充方式
Link：单击前
Visited：单击后
Hover：鼠标悬停
Active：超链接作用中（如果超链接是下载一个文件，则文件下载过程中即为active）
：伪类选择器

（1） 如果对一个空元素（只用了标签没有内容）设置背景颜色和图片，设置前，需要先设置元素的高度和宽度

（2） 如果同时设置了背景颜色和背景图片，如果图片可以加载，则图片覆盖颜色，否则显示背景颜色

（3） Repeat：填充满整个区域，一块一块地
Repeat-x：横向填充
Repeat-y：纵向填充
No-repeat：一个图片铺满

1.超链接样式设置的顺序

2.常用的超链接样式：（通常用于动画的制作）

五、CSS样式（III）列表与表格的样式：

Solid：实线 #eee：灰色 (每个属性中间用空格隔开)

Collapse：重叠表格边框和单元格边框

Odd:奇行，even：偶行

1.CSS布局与定位：

（1）盒子模型（I）：

Thin：细 medium：中 thick：粗

实际是做了一个盒子，只不过高度为一

（2）盒子模型（II）padding和margin属性：

Div标签做盒子，一个div做的盒子占一行


0可以为任意像素值，重点在于第二个是：auto

2.CSS定位机制概述：

默认定位：文档流定位

浮动定位：用float属性设定
层定位：用position属性设定

3.CSS定位机制（I）文档流定位：

4.CSS定位机制（II）浮动定位：

清除浮动不是清除元素，而是排列的方式改变

5.CSS定位机制（III）层定位：

应用：广告栏等相对网页固定的盒子

相对定位和绝对定位