引子
这是最近学习 css 记的笔记，其中有些内容还是很有用的，做个记录，便于以后查询，可能会更新。
引入方式
link@import（放在 CSS 里）style标签内引入- 内联样式，直接通过标签的
style属性设置，不推荐使用
选择器
基础选择器
| 类型 |
作用 |
* |
匹配页面内所有元素 |
id 选择器#ct |
匹配页面对应的某个元素 |
类选择器.p1 |
匹配页面对应的某类元素 |
| 标签选择器 p |
匹配页面对应标签元素 |
组合选择器
| 类型 |
作用 |
| E,F |
E 和 F 都被选中 |
| E F |
匹配 E 下所有后代的 F 元素 |
| E>F |
匹配 E 的字元素的 F 元素 |
| E+F |
匹配 E 相邻的 F 元素 |
| E ～ F |
匹配所有与 E 相邻的 F 元素 |
| .class1.class2 |
匹配同时拥有这两个类型的元素 |
属性选择器
匹配某个元素某个属性是..的选择器，一般不常用，例如div[id]表示匹配所有具有id属性的div。
伪类选择器
表示某个元素的某种状态的选择器
例如
1
2
3
4
5
6
7
8
9
10
11
12
| :link
:visited
:hover
:active
:checked
:focous
:enabled
:disabled
:first-child / :last-child // 匹配一组兄弟元素中第一个或最后一个元素
:first-of-type / :last-of-type // 匹配一组兄弟元素中其类型的第一个或最后一个元素
:nth-child / nth-last-child // 匹配一组兄弟元素中第n个或倒数第n个元素
:nth-of-type/ nth-last-of-type // 匹配一组兄弟元素中其类型的第n个或倒数第n个元素
|
伪元素选择器
1
2
3
4
5
| ::before
::after
::first-letter //选中某块级元素第一行的第一个字母，并且文字所处的行之前没有其他内容
::first-line //选中某块级元素第一行，并且文字所处的行之前没有其他内容
::selection //应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）这里课件有问题，我查阅了MDN这个是伪元素选择器，但是课件把他放在了伪类选择器中，望改正
|
选择器优先级
首先，选择器的优先级如下：
!important标记- 内联 style 样式
- ID 选择器
- Class 选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符
- 浏览器自定义
实际组合中，我们从高优先级规则依次往低优先级开始对比，高优先级的选择器标记多，则高优先级选择器优先级更高，如果两组选择器组合一样，那么后面的属性会覆盖前面的属性例如：
1
2
3
4
5
6
7
8
| #header .a .b p {
color: red;
} // 权重 a=1 b=2 c=1
#header .a .b .c p {
color: red;
} // a=1 b=3 > 2
// ===>下面这个选择器组合优先级更高
|
基本样式
块级元素与行内元素
- 块级元素可以包含块级元素和行内元素，行内元素只能包含文本和行内
- 块级元素占据一整块空间，行内元素只占据自身宽高
- 宽高的设置和内外边距设置也有差距
常见块级元素和行内元素
1
2
| // 块级元素 div h1-h6 p hr form ul dl ol pre table li dd dt tr td th // 行内元素
em strong span a br img button input label select textarea code script
|
边框
1
| border // width color style
|
1
2
3
4
5
6
7
8
9
10
11
12
| // 边框做一个三角形,设置颜色为透明就能实现三角形
.t{
height:0px;
width:0px;
border-top: 30px red solid;
border-right: 30px red solid;
border-bottom: 30px red solid;
border-left: 30px red solid;
}
// 圆角
border-radius
|
边距
1
2
3
| margin //外边距
border // 边框
padding // 内边距
|
display
1
2
3
| display
// inline block list-item
// inline inline-block inline-table
|
font
chrome 的最小字体是 12px
文本
1
2
3
| text-transform 改变文字大小写
word-spacing 改变单词间距
letter-spacing 改变字母间距
|
常见样式
背景 line-height
1
2
3
4
5
6
7
| background
inline-block // 缝隙问题 回车字符会有个缝隙，因为它是行内元素
// 去掉缝隙可以通过设置父元素font-size为0，字元素再设置回来
// inline-block行内元素，会以文字基线对齐，可以通过vertical-align来让它顶部或底部对齐
|
盒模型
1
2
3
4
5
6
| margin border padding content // 标准盒模型width是content
// IE 盒模型 width=border + padding + content
// CSS3样式
box-sizing:content-box 标准盒模型
box-sizing:border-box IE盒模型
|
字体图标
1
2
3
4
5
6
7
| 设计师将图标设计好后转化成unicode码，我们使用unicode放到页面上就形成了字体图标
使用@font-face定义字体库
可以是用font-class方式使用,其实就是把unicode帮我们事先定义好了
使用font-awesome,也是类似的将unicode实现定义好
|
图标有多种实现方式
img标签- CSS Sprite 图，就是将多个小图标拼在一起，减少页面请求
- 字体图标，font-icon
- CSS ICON 单纯使用 CSS 画图标
- SVG Sprite，将多个 svg 合成一个 svg，减少请求
清除浮动
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
.clearfix::after {
content: "";
clear: both;
display: block;
}
.clearfix {
overflow: hidden/auto/scroll;
}
<div
class="father"
> <div
class="child"
> 1</div
> <div
class="child"
> 2</div
> <div
class="child"
> 3</div
> <div
class="lastchild"
> 4</div
> </div
> .child {
float: left;
}
.lastchild {
display: block;
}
|
定位
- 定位方式
static- 绝对定位
absolute
- 相对定位
relative
- 固定定位
fixed
- 实现
static:文档流的正常定位方式。absolute:不为元素预留空间,元素会脱离标准文档流，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。relative:该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。fixed:不为元素预留空间，而是通过指定元素相对于浏览器窗口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
- 参考点
absolute:相对于最近的非static祖先元素定位。relative:元素在标准文档流中未添加定位时的原始位置。fixed:浏览器窗口左上顶点。
- 使用场景
static:默认场景。absolute:创建 BFC，脱离文档流，可以通过 z-index 层叠。relative:不会脱离标准文档流，常用在可以位移的元素上。fixed:浮动在页面上的广告，或者回到顶部/底部等锚点等按钮尝试用该定位方式。
BFC
媒体查询
这个技术常见于响应式布局：
1
2
3
4
5
6
7
8
9
10
11
12
|
@media screen and (max-width: 990px) {
.container {
background: orange;
}
}
@media screen and (min-width: 990px) {
.container {
background: blue;
}
}
|
编码规范
命名技巧
- 语义化标签优先
- 基于功能命名、基于内容命名、基于表现命名
- 简明、无后患
CSS 书写规范
- tab2 个空格
- 颜色用小写，缩写
- 小数不用写前缀
- 尽量使用缩写
结尾
未完待续……