前端学习笔记之——初探CSS
发布于2021-05-30 12:12 阅读(653) 评论(0) 点赞(27) 收藏(3)
初探 CSS
1、定义和应用样式
CSS 样式由一条或多条以分号隔开的样式声明组成。每条声明包含着一个 CSS 属性和该属性的值，二者以冒号分隔。
background-color:grey; color:white;
1.1、了解本章所用的 CSS 属性
| 属性 | 说明 |
|---|---|
| background-color | 设置元素的背景颜色 |
| border | 设定围绕元素的边框 |
| color | 设置元素的前景颜色 |
| font-size | 设置元素文字的字号 |
| height | 设置元素高度 |
| padding | 设定元素内容与边框之间的间距 |
| text-decoration | 设置元素文字的装饰效果，如文章用到的下划线 |
| width | 设置元素宽度 |
1.2、使用元素内嵌样式
样式不是定义了就了事了，它还需要被应用，也即告诉浏览器它影响哪些元素。把样式应用到元素身上的各种方式中，最直接的是使用全局属性 style。如下：
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<a href="http://apress.com" style="background-color:grey; color:white">
Visit the Apress website
</a>
<p>I like <span>apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
这个 HTML 文档中有 4 个内容元素：两个超链接（用 a 元素生成），一个 p 元素以及包含在其中的一个 span 元素。例子中使用全局属性 style 将样式应用到第一个 a 元素。style 属性只影响它所属的元素。
1.3、使用文档内嵌样式
使用 style 属性很缺乏效率，我们换种方法，用 style 元素（而不是 style 属性）定义文档内嵌样式，通过 CSS 选择器指示浏览器应用样式。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
a {
background-color:grey;
color:white
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
如何在 style 元素中定义样式：
本例中的选择器为 a，它指示浏览器将样式应用到文档中的每一个 a 元素。
一个 style 元素中可以定义多条样式，为此只需要不断重复定义一个选择器和一套样式声明的过程即可：
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
a {
background-color:grey;
color:white;
}
span {
border: thin black solid;
padding: 10px;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
border 属性设置的是围绕目标元素的边框，padding 属性控制的则是目标元素与边框之间的间距。
1.4、使用外部样式表
这种文件按惯例以 .css 为文件扩展名，其中包含着用户的样式定义。
/*文件style.css*/
a{
background-color:grey;
color:white;
}
span{
border: thin black solid;
padding: 10px;
}
样式表中用不到 style 元素，需要什么样式，只需要设计好选择器，后面跟上一套样式声明即可。然后 HTML 文档就可以用 link 元素将这些样式导入其中。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="styles.css"></link>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
文档想要链接多少样式表都行，为每个样式表使用一个 link 元素即可。如果不同样式表中的样式使用了相同的选择器，那么这些样式表的导入顺序很重要，在此情况下得以应用的是后导入的样式。
-
从其他样式表中导入样式
可以用 @import 语句将样式表从一个样式表导入另一个样式表。
/*combined.css*/ @import "styles.css"; span{ border: medium black dashed; padding: 10px; }<!DOCTYPE HTML> <html> <head> <title>Example</title> <link rel="stylesheet" type="text/css" href="combined.css"/> </head> <body> <a href="http://apress.com">Visit the Apress website</a> <p>I like <span>apples</span> and oranges.</p> <a href="http://w3c.org">Visit the W3C website</a> </body> </html>
-
声明样式表的字符编码
语句：@charset
2、样式的层叠和继承
浏览器根据层叠和继承规则确定显示一个元素时各种样式属性采用的值。每个元素都有一套浏览器呈现页面时要用到的 CSS 属性。对于每一个这种属性，浏览器都需要查看一下其所有的样式来源。前面已经讲过三种定义样式的方式（元素内嵌、文档内嵌和外部样式表），但是要知道，样式还有另外两个来源。
2.1、浏览器样式
浏览器样式（用户代理样式）是元素尚未设置样式时浏览器应用到它身上的默认样式。这些样式因浏览器而略有不同，不过大体一致。以 a 元素为例，想想没有特别为它定义样式时浏览器会怎么样显示。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
链接的文字内容被显示为蓝色，而且带有下划线。据此推测，浏览器相当于应用了类似如下的代码：
a{
color:blue;
text-decoration:underline;
}
2.2、用户样式
大多数浏览器都允许用户定义自己的样式表，这类样式表中包含的样式称为用户样式。
2.3、样式如何层叠
浏览器要显示元素时求索一个 CSS 属性值的次序：
- 元素内嵌样式（用元素的全局属性 style 定义的样式）；
- 文档内嵌样式（定义在 style 元素中的样式）；
- 外部样式（用 link 元素导入的样式）；
- 用户样式（用户定义的样式）；
- 浏览器样式（浏览器应用的默认样式）。
2.4、用重要样式调整层叠次序
把样式属性值标记为重要（important），可以改变正常的层叠样式：
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
a {
color: black !important;
}
</style>
</head>
<body>
<a style="color:red" href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
2.5、根据具体程度和定义次序解决同级样式冲突
如果有两条定义于同一层次的样式都能应用于同一个元素，而且他们都包含着浏览器要查看的 CSS 属性值，这时就需要另加玛法。为了判断该用哪个值，浏览器会评估两条样式的具体程度，然后选择较为特殊的那条。样式的具体程度通过统计三类特征得出：
- 样式的选择器中 id 值的数目；
- 选择器中其他属性和伪类的数目；
- 选择器中元素名和伪元素的数目。
下面是一个简单的例子：
/*样式的具体程度*/
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
a {
color: black;
}
a.myclass {
color:white;
background:grey;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a class="myclass" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
在评定具体程度时要按 a-b-c 的形式（其中每个字母依次代表上述三类特征的统计结果）生成一个数字。它不是一个三位数。如果对某个样式算出的 a 值最大，那么它就是具体程度高的那个。只有 a 值相等时浏览器才会比较 b 值，此时 b 值较大的样式具体程度更高。只有 a 值和 b 值都分别相等时浏览器才会考虑 c 值。也就是说，1-0-0 这个得分比 0-5-5 这个得分代表的具体程度更高。
本例中，a.myclass 这个选择器含有一个 class 属性，于是该样式的值为 0-1-0（0 个 id 值 + 1 个其他属性 + 0 个元素名）。另一条样式的具体程度值为 0-0-0（因为它不包含 id 值、其他属性或元素名）。因此浏览器在呈现被归入 myclass 类的 a 元素时将使用 a.myclass 样式中设定的 color 属性值。对于其他 a 元素，使用的则是另一条样式中设定的值。
如果同一个样式属性出现在具体程度相当的几条样式中，那么浏览器会根据其位置的先后选择所用的值，规则是后来者居上。下边的代码就包含了两条具体程度相同的样式：
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
a.myclass1 {
color: black;
}
a.myclass2 {
color:white;
background:grey;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
此例 style 元素中定义的两条样式在具体程度上得分相同。浏览器在呈现页面上的第二个 a 元素时，为样式属性 color 选用的值是 white，这是因为该值来自靠后的那条样式。如下：
为了证实浏览器是用这个方法选择所用的 color 属性值，下边的例子颠倒了两条样式的位置：
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
a.myclass2 {
color:white;
background:grey;
}
a.myclass1 {
color: black;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
效果如下：
2.6、继承
如果浏览器在直接相关的样式中找不到某个属性的值，就会求助于继承机制，使用父元素的这个样式属性值。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
color:white;
background:grey;
border: medium solid black;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
本例关注的是浏览器应用于 span 元素（其父元素为 p）的样式。效果如下：
这个文档并没有针对 span 元素的样式中设定 color 属性值，但是浏览器显示该元素的文字内容时却使用了前景色 white。这个值系由父元素 p 继承而来。
并非所有 CSS 属性均可被继承。这方面有经验可以参考：与元素外观（文字颜色、字体等）相关的样式会被继承；与元素在页面上的布局相关的样式不会被继承。在样式中使用 inherit 这个特别设立的值可以强制实施继承，明确指示浏览器在该属性上使用父元素样式中的值。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
color:white;
background:grey;
border: medium solid black;
}
span {
border: inherit;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
此例定义了一条用于 span 元素的样式，其 border 属性值继承自父元素。文档的显示效果如下：
3、CSS 中的颜色
更为复杂的颜色：
4、CSS 中的长度
许多 CSS 属性要求为其设置长度值。width 属性和 font-size 属性就是这方面的例子。前者用于设置元素的宽度，后者用于设置元素内容的字号。下边代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
background: grey;
color:white;
width: 5cm;
font-size: 20pt;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
设置长度值时，应让数字和单位标识符连在一起，二者之间不加空格或其他字符。代码中将 width 属性设置为 5cm，这表示 5 个由标识符 cm（厘米）代表的单位的长度。同样，将 font-size 属性值设置为 20pt，表示 20 个由标识符 pt（磅）代表的单位的长度。CSS 规定了两种类型的长度单位，一种是绝对单位，另一种是与其他属性挂钩的相对单位。
4.1、绝对单位
CSS 支持五种绝对单位：
| 单位标识符 | 说明 |
|---|---|
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 磅（1 磅等于 1/72 英寸） |
| pc | pica（1 pica 等于 12 磅） |
4.2、相对单位
| 单位标识符 | 说明 |
|---|---|
| em | 与元素字号挂钩 |
| ex | 与元素字体的 “x 高度” 挂钩（即字体基线到中线之间的距离，1ex 大致等于 0.5em） |
| rem | 与根元素的字号挂钩 |
| px | CSS 像素（假定显示设备的分辨率为 96dpi） |
| % | 另一属性的值的百分比 |
-
与字号挂钩的相对单位
使用相对单位时所设置的实际上是另一种度量值的倍数。先看看与字号挂钩的相对单位。
<!DOCTYPE HTML> <html> <head> <title>Example</title> <style type="text/css"> p { background: grey; color:white; font-size: 15pt; height: 2em; } </style> </head> <body> <a href="http://apress.com">Visit the Apress website</a> <p>I like <span>apples</span> and oranges.</p> <p style="font-size:12pt">I also like mangos and cherries.</p> <a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a> </body> </html>本例中将 height 属性值设置为 2em，意思是 p 元素在屏幕上显示出来的高度为字号的两倍。本例中在 style 元素中为 p 元素的 font-size 设置了默认值 15pt，然后又在文档中第二个 p 元素的内嵌样式里将该属性值设置为 12pt。效果如下：
相对单位还可以用来表示另一个相对单位的倍数。下边的代码中，height 属性值使用的单位是 em，这个单位是从 font-size 属性值推算出来的，而 font-size 属性值在此使用的单位是 rem。
<!DOCTYPE HTML> <html> <head> <title>Example</title> <style type="text/css"> html { font-size: 0.2in; } p { background: grey; color:white; font-size: 2rem; height: 2em; } </style> </head> <body style="font-size: 14pt"> <a href="http://apress.com">Visit the Apress website</a> <p>I like <span>apples</span> and oranges.</p> <a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a> </body> </html>rem 单位根据 html 元素（文档的根元素）的字号而定。本例使用一条文档内嵌样式将 html 元素的字号设置为 0.2 英寸（这是一个绝对单位）。在另一条样式中，font-size 属性值被设定为 2rem，这表示使用该值的所有元素的字号将是根元素字号的两倍——0.4 英寸。这条样式中的 height 属性被设置为 2em，这又翻了一翻。于是 p 元素在浏览器中将以 0.4 英寸的字号显示，其高度则是 0.8 英寸。效果如下：
-
像素单位问题
CSS 中的像素定义为：
参考像素是距读者一臂之遥的像素密度为 96pdi 的设备上一个像素的视角。
<!DOCTYPE HTML> <html> <head> <title>Example</title> <style type="text/css"> p { background: grey; color:white; font-size: 20px; width: 200px; } </style> </head> <body> <a href="http://apress.com">Visit the Apress website</a> <p>I like <span>apples</span> and oranges.</p> <a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a> </body> </html>效果如下：
-
百分比单位
<!DOCTYPE HTML> <html> <head> <title>Example</title> <style type="text/css"> p { background: grey; color:white; font-size: 200%; width: 50%; } </style> </head> <body> <a href="http://apress.com">Visit the Apress website</a> <p>I like <span>apples</span> and oranges.</p> <a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a> </body> </html>百分比究竟是根据什么计算出来的，将在后边介绍。
5、其他 CSS 单位
5.1、使用 CSS 角度
| 单位标识符 | 说明 |
|---|---|
| deg | 度（取值范围：0deg ~ 360deg） |
| grad | 百分度（取值范围：0grad ~ 400grad） |
| rad | 弧度（取值范围：0rad ~ 6.28rad） |
| turn | 圆周（取值范围：1 turn 等于 360deg） |
5.2、使用 CSS 时间
| 单位标识符 | 说明 |
|---|---|
| s | 秒 |
| ms | 毫秒（1s 等于 1000ms） |
6、测试 CSS 特性的支持情况
测试网站：https://caniuse.com/
7、使用 CSS 框架
Blueprint：下载地址——http://blueprint.org/
所属网站分类: 技术文章 > 博客
作者：麻辣小龙虾
链接：http://www.qianduanheidong.com/blog/article/116059/476747f21ef1c3a68522/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力