欢迎~
1.多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对 h3 选择器的三个属性：
而内部样式表拥有针对 h3 选择器的两个属性：
h3 { color:red; text-align:left; font-size: 8pt;
}
h3 { text-align:right; font-size:20pt; }假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
color:red; text-align:right; font-size:20pt;即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。
2.多重样式优先级
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
一般情况下，优先级如下：
（内联样式）Inline style > （内部样式）Internal style sheet =（外部样式）（注：就近原则，后来覆盖）External style sheet > 浏览器默认样式
下边是内部样式和外部样式对比外部样式在后边覆盖内部样式显示绿色：
<head>
<!-- 外部样式 style.css -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- 设置：h3{color:blue;} -->
<style type="text/css">
/* 内部样式 */ h3{color:green;}
</style> </head> <body>
<h3>测试！</h3>
</body>
下边是内联样式和内部样式、外部样式对比显示红色：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 外部样式 style.css -->
<!-- 设置：h3{color:blue;} -->
<style type="text/css">
/* 内部样式 */
h3 {
color: green;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h3 style="color: red;">测试！</h3>
</body>
3.CSS 样式继承行
- 有一些属性给父类或祖先元素设置后，其后代元素也会继承该样式，这就叫做继承性。
- 继承性是从当前元素开始，一直到最小的元素。
- 后代元素能够继承来自祖先元素的文字样式。这些属性包括：color，text-开头，line-开头的，font-开头的。
- 关于盒子、定位、布局的属性，不能被继承。
实例：
<body>
<div>
耗子尾汁
<p>大威天龙
<span>年轻人不讲武德</span>
</p>
</div>
</body>p标签和span标签继承了父系的字体大小和颜色
4.css选择器优先级
优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定的。
优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。
4.1优先级顺序
下列是一份优先级逐级增加的选择器列表：
- 通用选择器（*）
- 元素(类型)选择器
- 类选择器
- 属性选择器
- 伪类
- ID 选择器
- 内联样式
4.2!important 规则例外
当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里. 尽管如此, !important规则还是与优先级毫无关系.使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。
一些经验法则：
- Always 要优化考虑使用样式规则的优先级来解决问题而不是
!important - Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用
!important - Never 永远不要在全站范围的 css 上使用
!important - Never 永远不要在你的插件中使用
!important
4.3权重计算:
解释：
- 1. 内联样式表的权值最高 1000；
- 2. ID 选择器的权值为 100
- 3. Class 类选择器的权值为 10
- 4. HTML 标签选择器的权值为 1
利用选择器的权值进行计算比较，em 显示蓝色，示例如下
<head>
<style type="text/css">
#redP p {
/* 权值 = 100+1=101 */
color: #F00;
/* 红色 */
}
#redP .red em {
/* 权值 = 100+10+1=111 */
color: #00F;
/* 蓝色 */
}
#redP p span em {
/* 权值 = 100+1+1+1=103 */
color: #FF0;
/*黄色*/
}
</style>
</head>
<body>
<div id="redP">
<p class="red">red
<span><em>em red</em></span>
</p>
<p>red</p>
</div>
</body>
4.4CSS 优先级法则：
- A 选择器都有一个权值，权值越大越优先；
- B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
- C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
- D 继承的CSS 样式不如后来指定的CSS 样式；
- E 在同一组属性设置中标有“!important”规则的优先级最大；示例如下：
<html>
<head>
<style type="text/css">
#redP p{
/*两个color属性在同一组*/
color:#00f !important; /* 优先级最大 */
color:#f00;
}
</style>
</head>
<body>
<div id="redP">
<p>color</p>
<p>color</p>
</div>
</body>
</html>
4.5这里引入一张流行的CSS权重关系图：
5.font属性
5.1字体系列 font-family
- font-family 属性设置文本的字体系列。
- font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。
- 字体分为英文字体和中文字体。有些英文字体不会作用到中文字体上，而中文字体会作用到英文上。
- 字体属性值可以为多个，后面的字体为备选字体，当前面的字体，电脑上没有加载时，会去加载后面的字体，如果都没有，会使用默认字体（微软雅黑）
- 书写顺序：英文字体写在前面，中文字体写在后面。
- 中文字体也有英文名称
- 注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。
- 多个字体系列是用一个逗号分隔指明：
-
实例
p{font-family:"Times New Roman", Times, serif;}
5.2字体样式 font-style
主要是用于指定斜体文字的字体样式属性。
这个属性有三个值：
- 正常 - 正常显示文本-font-style:normal;
- 斜体 - 以斜体字显示的文字-font-style:italic;
- 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）-font-style:oblique;
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
</head>
<body>
<p class="normal">这是一个段落,正常。</p>
<p class="italic">这是一个段落,斜体。</p>
<p class="oblique">这是一个段落,斜体。</p>
</body>
</html>
5.3字体大小 font-size
font-size 属性设置文本的大小。
能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。
请务必使用正确的HTML标签，就<h1> - <h6>表示标题和<p>表示段落：
字体大小的值可以是绝对或相对的大小。
绝对大小：
- 设置一个指定大小的文本
- 不允许用户在所有浏览器中改变文本大小
- 确定了输出的物理尺寸时绝对大小很有用
相对大小：
- 相对于周围的元素来设置大小
- 允许用户在浏览器中改变文字大小
如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。
设置字体大小像素
设置文字的大小与像素，让您完全控制文字大小：
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>允许在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。</p>
<p><b>注意:</b>这个例子在 IE9之前的版本不工作, prior version 9.</p>
</body>
</html>
上面的例子可以在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。
虽然可以通过浏览器的缩放工具调整文本大小，但是，这种调整是整个页面，而不仅仅是文本
用em来设置字体大小
为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。
em的尺寸单位由W3C建议。
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>使用 em 单位，允许在所有浏览器中调整文本大小。
不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。
</p>
</body>
</html>
5.4字体加粗 font-weight
属性定义及使用说明
font-weight 属性设置文本的粗细
| 默认值： | normal |
|---|---|
| 继承： | yes |
属性值
| 值 | 描述 |
|---|---|
| normal | 默认值。定义标准的字符。 |
| bold | 定义粗体字符。 |
| bolder | 定义更粗的字符。 |
| lighter | 定义更细的字符。 |
| 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。 |
| inherit | 规定应该从父元素继承字体的粗细。 |
5.6下表是所有CSS字体属性
| Property | 描述 |
|---|---|
| font | 在一个声明中设置所有的字体属性 |
| font-family | 指定文本的字体系列 |
| font-size | 指定文本的字体大小 |
| font-style | 指定文本的字体样式 |
| font-variant | 以小型大写字体或者正常字体显示文本。 |
| font-weight | 指定字体的粗细。 |
6.文字水平对齐 text-align:
置段落的对齐方式。
left 左对齐 默认值
center 居中对齐
right 右对齐。
与文本的行数没有关系。
实例：文字居中
<head>
<style>
p {
font: 24px/40px "宋体";
background-color: aquamarine;
text-align: center;
}
</style>
</head>
<body>
<p>
提莫队长正在待命
</p>
</body>
[点击并拖拽以移动]
文字溢出处理 overflow
CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
overflow属性有以下值：
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
例如：文字溢出父框
利用 overflow: hidden;隐藏溢出文字
320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
