引子
这是最近学习 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 个空格
- 颜色用小写,缩写
- 小数不用写前缀
- 尽量使用缩写
结尾
未完待续……