目录
  1. 1. 前言
  2. 2. CSS简介
    1. 2.1. 概述
    2. 2.2. 多重样式将层叠为一个
    3. 2.3. 层叠次序
  3. 3. CSS基础语法
    1. 3.1. 值的不同写法和单位
  4. 4. CSS高级语法
    1. 4.1. 选择器的分组
    2. 4.2. 继承及其问题
  5. 5. CSS派生选择器
  6. 6. CSS id选择器
    1. 6.1. id选择器
    2. 6.2. id选择器和派生选择器
    3. 6.3. 一个选择器,多种用法
  7. 7. 参考链接
前端三剑客速查笔记之CSS3

前言

本文是css及css3速查表,用于快速查询常用用法。
REF: w3school.com.cn

CSS简介

概述

  • CSS指层叠样式表(cascading style sheets)
  • 样式定义如何显示HTML元素
  • 样式通常存储在样式表中
  • 把样式添加到HTML4.0中,是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在CSS文件中
  • 多个样式定义可层叠为一

多重样式将层叠为一个

  • 样式可以规定在单个HTML元素中、在HTML页的头元素中、或在一个外部的CSS文件中。
  • 样式可以在同一个HTML文档内部引用多个外部样式表。

层叠次序

当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢?
以下是规则,其中数字4拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表(位于head标签内部)
  4. 内联样式(在HTML元素内部)

CSS基础语法

CSS规则由两个主要部分组成:选择器、一条或多条声明。

1
selector {declaration1; declaration2;...N}

每条声明由一个属性和一个值组成。

1
2
3
selector {property: value}

h1 {color:red; font-size:14px;}

值的不同写法和单位

以颜色为例:

  • 英文单词red
  • 十六进制颜色值 #ff0000,或缩写形式#f00
  • RGB rgb(255,0,0)或rgb(100%,0%,0%),注意,0也要写百分号

CSS高级语法

选择器的分组

用逗号将需要分组的选择器分开。

1
2
3
h1,h2,h3,h4,h5,h6{
color: green;
}

继承及其问题

根据CSS,子元素从父元素继承属性。

1
2
3
body {
font-family: Verdana, sans-serif;
}

根据上面的规则,站点的body元素将使用Verdana字体(假如访问者系统中存在该字体的话
)。通过CSS继承,子元素将继承最高级元素(在此例中是body)所拥有的元素(这些子元
素诸如p, td, ul, ol, li, dl, dt, dd等)。不需要另外的规则,所有body的子元素都应
该显示Verdana字体,子元素的子元素也一样。在大部分现代浏览器中确实是这样,但是在
以前,如Netscape不支持。

如果不想被所有子元素继承,如希望段落的字体是Times,那么创建一个针对p的特殊规则
,这样它就会摆脱父元素的规则。

1
2
3
4
5
6
7
8
9
10
11
body {
font-family: Verdana, sans-serif;
}

td, ul, ol, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}

p {
font-family: Times, "Times New Roman", serif;
}

CSS派生选择器

通过依据元素在其位置的上下文关系来定义样式,可以使标记更加简洁。
派生选择器允许我们根据文档的上下文关系来确定某个标签的样式,使HTML代码变得更加
整洁。

比如,希望列表中的strong元素变为斜体字,而不是通常的粗体字,可以定义这样一个派
生选择器:

1
2
3
4
li strong{
font-size: italic;
font-weight: normal;
}

注意strong的上下文关系。

1
2
3
4
5
6
7
<p><strong>我是粗体字,不是斜体字,因为我不在列表中,所以这个规则对我不起作用
</strong></p>

<ol>
<li><strong>我是斜体字,这是因为strong元素位于li元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

上面的例子中,只有li元素中的strong元素的样式为斜体字,无需为strong元素定义特别
的class或id,代码更加简洁。

1
2
3
4
5
6
7
8
9
10
11
12
13
strong {
color: red;
}
h2 {
color: green;
}
h2 strong {
color: blue
}

<p>red</p>
<h2>green</h2>
<h2>green <strong>blue</strong></h2>

CSS id选择器

id选择器

<++>

  • id选择器为特定id的HTML元素指定特定的样式。
  • id选择器以#来定义。
  • id属性只能在每个HTML文档中出现一次。
1
2
#red {color:red;}
#green {color:green;}
1
2
<p id="red">这个段落是红色的。</p>
<p id="green">这个段落是绿色的。</p>

id选择器和派生选择器

在现代布局中,id选择器常用于建立派生选择器。

1
2
3
4
5
#sidebar p{
font-style: italic;
text-allign: right;
margin-top: 0.5em;
}

上面的样式只会应用于出现在id是sidebar的元素内的段落中。这个元素很可能是div或者
是表格单元,尽管它也可能是一个表格或者其他块级元素。它甚至可以是一个内联元素,
比如em或者span,不过这样的用法是非法的,因为不可以在内联元素span中嵌入p。

一个选择器,多种用法

即便标注为sidebar的元素只能在文档中出现一次,这个id选择器作为派生选择器也可以被
使用很多次:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5rm;
}

#sidebar h2{
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}

在这里,与页面中的其他p元素明显不同的是,sidebar内的p元素得到了特殊处理,同时,
与页面中其他所有h2元素明显不同的是,sidebar的h2元素也得到了不同的特殊处理。

参考链接

to be continued…

本文历史

  • 2019年12月25日 完成初稿,整理笔记花时约1小时。
文章作者: Ajioy张品茗
文章链接: https://ajioy.cn/frontend/css3-cheat-sheet/
版权声明: 本站所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Ajioy's World
打赏
  • 微信
  • 支付宝

评论