内容简介：文章大纲来源：层叠样式表（Cascading Style Sheets），即前端常说的CSS。内容引用：
文章大纲来源： 【Day 3】HTML复习 + CSS基础
- 初识CSS
- 入门CSS
初识CSS
层叠样式表（Cascading Style Sheets），即前端常说的CSS。
内容引用： CSS 简介
样式解决了什么问题？
HTML标签 原本 被设计为用于 定义文档内容 。
通过使用 标签 来表达 语义信息 。
那个时候的文档布局由浏览器实现，没有使用什么格式的标签。
但是当时主要的浏览器（Netscape 和 Internet Explorer）不断地将新的HTML标签和属性（比如字体颜色等）加入到HTML规范中，文档内容要独立于文档表示层越来越困难（各家都有各家的HTML书写属性规范，并且样式一般不统一）。
为了解决这个问题，万维网联盟（W3C）在HTML 4.0 之外创造出 样式 （Style）。
样式表如何提高工作效率？
样式表（Style Sheets）定义 如何显示 HTML 元素 。
样式通常保存在外部的 .css
文件中，并且可以被多个 .html
文件所引用，所以外部的样式表可以 一处修改，多处协同影响
。
CSS的使用方法
一共有三种：
标签内属性定义
<!-- learn.html --> <body style="background: red;"> ... </body>
内部定义
<!-- learn.html -->
<style>
body {
background: red;
}
</style>
外部定义
<!-- learn.html --> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
/* style.css */
body {
background: red;
}
外部定义可以 <link>
多个样式表，书写多个 <link>
标签引用即可。
那“层叠”指的是什么？
样式表允许 多种方式 规定样式信息。
- HTML元素属性中
- HTML的头元素中
- 外部的CSS文件中
- 同一个文档引用多个外部样式表
那么就容易遇到一个问题：“当 同一个 HTML 元素被 不止一个样式 定义时，会使用哪个样式呢？”
这就是一种 层叠 了，即 多重样式将层叠为一个 。
在这个层叠过程中，就需要一种 层叠次序 ，来选择最后到底选择哪一个样式：
- 最高 —— 内联样式 ，即 HTML 元素内部
-
高 —— 内部样式表
，即
<head>标签内部 - 中 —— 外部样式表
- 最低 —— 浏览器缺省样式
拥有高次序的样式会覆盖低次序的样式定义。
入门CSS
基础语法
CSS规则 由两个主要部分构成： 选择器 ，以及 声明 。
selector {
declaration1;
declaration2;
...
declarationN;
}
property: value
例如：
h1 {
color: red;
font-size: 14px;
}
将 <h1>
元素内的文字颜色定义为红色，同时字体大小设置为14像素。
内容引用： CSS 基础语法
语法补充
除了基础语法，还有一些需要补充的内容。
内容引用： CSS 高级语法
选择器分组
被分组的选择器可以分享相同的声明。
h1,h2,h3,h4,h5,h6 {
color: green;
}
使用逗号将需要分组到一组的选择器连接在一起即可。
样式继承
根据CSS，子元素从父元素继承属性。
body {
font-family: Verdana, sans-serif;
}
上述规则说明， <body>
元素将使用 Verdana
字体（如果访问者系统中有的话）。
通过CSS继承，子元素将继承 最高级元素
（上面的例子是 <body>
）所拥有的属性。这里的子元素指的就是在 <body>
标签内声明的那些所有标签(其实并不一定是所有，具体取决于浏览器支持度)。
但是在使用CSS继承规则时，如果不希望一个特定子元素继承该CSS，则再说明一条特殊规则来覆盖即可（这部分涉及到选择器优先级问题，将在后面说明）。
body {
font-family: Verdana, sans-serif;
}
p {
font-family: Times, "Times New Roman", serif;
}
CSS 派生选择器
依据元素的位置关系来定义样式。
CSS1称其为上下文选择器（contextual selectors），CSS2称其为派生选择器。
例子：
li strong {
font-style: italic;
font-weight: normal;
}
<p> <strong>我是粗体字，不是斜体，因为这个规则对我不起作用</strong> </p> <ol> <li> <strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong> </li> <li>我是正常的字体。</li> </ol>
只有 li 元素中的 strong 元素的样式为斜体字，这样无需为需要修饰的 strong 元素单独定义 class或者id，代码更加简洁。
派生选择器还有更加深入的内容：
- CSS 后代选择器
- CSS 子元素选择器
- CSS 相邻兄弟选择器
内容引用： CSS 派生选择器
CSS id选择器
为标有 特定id 的 HTML 元素指定特定的样式。
id选择器以"#"来定义。
#red { color: red; }
#green { color: green; }
<p id="red">这个段落是红色。</p> <p id="green">这个段落是绿色。</p>
之所以叫特定的，就是因为 id属性 只能在每个HTML文档中出现一次 。
在现在布局中，id选择器常常用于 建立派生选择器 。
#sidebar p {
...
}
样式只会应用于出现在id是 sidebar
的元素内的段落。
内容引用： CSS id 选择器
CSS 类选择器
类选择器的功能可以简单看成是：能给多个元素相同id的id选择器，只不过这里不再是用id了，而是用class。
在CSS中，类选择器以一个点号显示。
.center {
text-align: center;
}
所有拥有 center
类的HTML元素都会应用这个样式。
<h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p>
注意：类名的第一个字符不能是数字，否则无法在 Mozilla 或 Firefox 中起作用。
和 id 一样，class 也可被用作派生选择器。
.sidebar p {
...
}
内容引用： CSS 类选择器
CSS 属性选择器
对带有指定属性的 HTML 元素设置样式，不仅限于 class 和 id 属性。
注意：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
属性选择器：
/* 带有 title 属性的所有元素 */
[title] {
color: red;
}
属性和值选择器：
/* title="W3School" 的所有元素 */
[title=W3School] {
border: 5px solid blue;
}
如果一个属性有多个值，想要选中这样的元素：
/* 适用于由空格分隔的属性值 */
[title~=hello] {
color: red;
}
/* 适用于由连字符分隔的属性值 */
[lang|=en] {
color: red;
}
这种方法的一个应用是设置表单的样式：
input[type="text"] {
...
}
input[type="button"] {
...
}
...
内容引用： CSS 属性选择器
个人静态博客：
- 气泡的前端日记： https://rheabubbles.github.io
以上所述就是小编给大家介绍的《前端菜鸟笔记 Day-3 CSS基础》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Head First HTML5 Programming
Eric Freeman、Elisabeth Robson / O'Reilly Media / 2011-10-18 / USD 49.99
What can HTML5 do for you? If you're a web developer looking to use this new version of HTML, you might be wondering how much has really changed. Head First HTML5 Programming introduces the key featur......一起来看看 《Head First HTML5 Programming》 这本书的介绍吧!
