一、css
1、css概述
CSS ( Cascading Style Sheets，层叠样式表 ），是一种用来为结构化文档（ 如 HTML 文档或 XML 应用 ）添加样式（ 字体、间 距和颜色等 ）的计算机语言，CSS 文件扩展名为 .css。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能 力。
CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于 HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则 被放置在一个带有文件扩展名_css的外部样式单文档中。
- CSS 指层叠样式表 (Cascading Style Sheets)；
- 样式定义如何显示 HTML 元素；
- 样式通常存储在样式表中；
- 把样式添加到 HTML 中，是为了解决内容与表现分离的问题；
- 外部样式表可以极大提高工作效率；
- 外部样式表通常存储在 CSS 文件中；
- 多个样式定义可层叠为一个；
2、css引入规则
2.1css语法
CSS 规则由两个主要的部分构成：选择器[核心]，以及一条或多条声明[规则]：
- 选择器通常是您需要改变样式的 HTML 元素(我们可以通过各种选择器灵性的选择页面的各种元素)。
- 每条样式声明由一个属性[样式属性]和一个值[样式值]组成。
- 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
- CSS声明总是以分号(;)结束，声明总以大括号({})括起来。
- 为了让CSS可读性更强，你可以每行只描述一个属性；
2.2、三种css样式引入规则
插入样式表的方法有三种：
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
2.2.1内联样式(Inline style)
行内样式(内联样式)引入规则：样式写在标签的style属性中行内样式的语法规则:
<标记名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;..."> 内容 </标记名>
行内式只对其所在的标记及嵌套在其中的子标记起作用(部分样式)。
行内式也是通过标记的属性来控制样式的，由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种 方法。只有在样式规则较少且只在该元素上使用一次，或者需要临时修改某个样式规则时使用。
2.2.2 内部样式表(Internal style sheet)
内嵌[内部]样式引入规则：样式放在head或body标签的style标签中:
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用
<head>
<style type="text/css">
选择器{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
....
}
</style>
</head>
该语法时最好设置type的属性值为“text/css“，这样浏览器才知道 <style>标记包含的是CSS代码，因为
内嵌式CSS样式只对其所在的HTML页面有效，因此，仅设计一个页面时，使用内嵌式是个不错的选择。但如果在一个网站，不建 议使用这中方式，因为它不能充分发挥CSS代码的重用优势。
2.2.3 外部样式表(External style sheet)
外部样式[链入式]引入规则；一个单独的样式文件,存放我们的样式
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个 站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：
链入式的语法规则:
<head>
<like href="CSS文件的路径" type="text/css" rel="stylesheet"/>
</head
该语法中,<link>标记需要放在 <head> 头部标记中，并且必须指定 <link> 标记的三个属性。如下：
- href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
- type：定义所链接文档的类型，在这里需要制定为”text/css“，表示链接的外部文件为CSS样式表。
- rel：定义当前文档与被链接文档之间的关系，在这里需要指定为”stylesheet“，表示被链接的文档是一个样式表文件。
2.2.4 样式引入优先级
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件 中。甚至可以在同一个 HTML 文档内部引用多个外部样式表
一般情况下，优先级如下：
(内联样式）Inline style > （内部样式）Internal style sheet =（外部样式）External style sheet > 浏览器默认样式
3 、基本选择器
3.1 元素选择器
元素选择器根据元素名称来选择 HTML 元素。
示例：
p {
text-align: center;
color: red;
}
3.2 id 选择器
id 选择器根据元素的 id 属性来选择特定的 HTML 元素。
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素
要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id 。
示例：
#striking {
text-align: center;
color: red;
}
3.3 类选择器
类选择器选择有特定 class 属性的 HTML 元素。
如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。
示例：
.center {
text-align: center;
color: red;
}
你还可以指定只有特定的 HTML 元素会受类的影响。
p.center {
text-align: center;
color: red;
}
HTML 元素也可以引用多个类。
<p class="center large">这个段落引用两个类。</p>
3.4 通用选择器
通用选择器（*）选择页面上的所有的 HTML 元素。
示例：
* {
text-align: center;
color: blue;
}
3.5 分组选择器
分组选择器选取所有具有相同样式定义的 HTML 元素。
请看下面的 CSS 代码（h1、h2 和 p 元素具有相同的样式定义）：
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
最好对选择器进行分组，以最大程度地缩减代码。 如需对选择器进行分组，请用逗号来分隔每个选择器。
示例：
h1, h2, p {
text-align: center;
color: red;
}
4 、组合选择符
CSS 组合选择符包括各种简单选择符的组合方式，说明了两个选择器之间的关系。
在 CSS3 中包含了四种组合方式:
- 后代选择器(以空格 分隔)
- 子元素选择器(以大于号 > 分隔）
- 相邻兄弟选择器（以加号 + 分隔）
- 普通兄弟选择器（以波浪号 ～ 分隔）
4.1 后代选择器
后代选择器用于选取某元素的后代元素。
div p {
background-color: yellow;
}
4.2 子元素选择器
与后代选择器相比，子元素选择器只能选择作为某元素直接/一级子元素的元素。
div > p {
background-color: red;
}
4.3 相邻兄弟选择器
相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。
div + p {
background-color: green;
}
5.4 后续兄弟选择器
后续兄弟选择器选取指定元素之后的所有相邻兄弟元素。
div ~ p {
background-color: orange;
}
5 、属性选择器
我们可以设置带有特定属性或属性值的HTML元素的样式。
5.1 [attribute] 选择器
[attribute] 选择器用于选取带有指定属性的元素。
示例：
a [target] {
background-color: yellow;
}
5.2 [attribute=“value”] 选择器
[attribute=“value”] 选择器用于选取带有指定属性和值的元素。
示例：
a [target="_blank"] {
background-color: red;
}
5.3 设置表单样式
若需为不带 class 或 id 的表单设置样式，属性选择器会很有用：
input[name="nickname"] {
width: 150px;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"] {
width: 120px;
margin-left: 48px;
display: block;
}
6 、CSS三大机制(重点)
6.1 CSS样式来源
CSS中的样式一共有三种来源：创作人员、读者和用户代理
6.2CSS三大机制
CSS的三大机制是：特殊性[冲突]、继承、层叠。
6.2.1特殊性
所谓的特殊性，其实是CSS样式一种计算声明权重的规则。特殊性是由规则的选择器确定的，然后用户代理会将计算出来的特殊性 附加给相应的每一个声明上。
选择器类型：
- ID #id
- class .class
- 标签 p
- 通用 *
- 属性 [type=“text”]
- 伪类 ：hover
- 伪元素 ::first-line
- 子选择器、相邻选择器
权重计算规则
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表元素选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值。
重要性！important:
有时某些声明可能非常重要超过了其他所有生命。这时就可以在声明的结束分号之前插入! important来标志。
P {
color ; red !important;
background: yellow
}
6.2.2继承
CSS还有一个继承机制，即样式不仅会应用到指定的样式，而且会应用到其后代的元素。
继承的机制需要注意的点
并不是所有的属性都可以继承，一般的，大多数框模型属性（包括外边距、内边距、背景、边框）都不能继承。
6.2.3层叠
文档中的一个元素可能同时被多个css选择器选中，每个选择器都有一些css规则，这就是层叠;
7 、文本
7.1文本颜色
CSS颜色表示方式
- 英文颜色名称
- 十六进制方式
- 目前所有浏览器都支持以下颜色名。141个颜色名称是在HTML和CSS颜色规范定义的（17标准颜色，再加124）。提 示: 17标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色， 黄色。
- 优点：方便快捷而且特定颜色比较准确。
- 缺点：表示颜色数量有限，不支持透明度的表示。
- RGB方式:三原色配色方式
- 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（十六进 制：#00）。最大值是255（十六进制：#FF）。三种颜色 红，绿，蓝的组合从0到255，一共有1600万种不同颜色(256 x 256 x 256)。
- 优点：表示颜色种类多，使用较方便
- 缺点：不支持透明颜色。
- 每个参数 (red、green 以及 blue) 定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分比值（从 0% 到 100%）。
color属性用于设置文本的颜色。颜色由以下值指定：
- 颜色名 - 比如 red
- 十六进制值 - 比如 #ff0000
- RGB 值 - 比如 rgb(255, 0, 0)
7.2文本对齐
text-align属性用于设置文本的水平对齐方式。
文本可以左对齐或右对齐，或居中对齐。
h1 {
text-align: center;/*居中对齐*/
}
h2 {
text-align: left;/*向左对齐*/
}
h3 {
text-align: right;/*向右对齐*/
}
当text-align 属性设置为 justify后，将拉伸每一行，以使每一行具有相等的宽度并且左右边距是直的（就像在杂志和报纸中）
p {
text-align: justify;
}
7.3垂直对齐
vertical-align属性设置元素的垂直对齐方式。
vertical-align常用属性值
- . baseline：默认值，元素放置在父元素的基线上。
- top：把元素的顶端与行中最高元素的顶端对齐；
- middle：把此元素放置在父元素的中部。
- bottom：把元素的顶端与行中最低的元素的顶端对齐。
img.top {
vertical-align: top;
}
img.middle {
vertical-align: middle;
}
img.bottom {
vertical-align: bottom;
}
7.4 文本装饰
text-decoration属性用于设置或删除文本装饰。
text-decoration: none;通常用于从链接上删除下划线：
a {
text-decoration: none;
}
其他text-decoration值用于装饰文本：
/*上划线*/
h1 {
text-decoration: overline;
}
/*删除线*/
h2 {
text-decoration: line-through;
}
/*下划线*/
h3 {
text-decoration: underline;
}
7.5 文本缩进
text-indent属性用于指定文本第一行的缩进。（文章开头前的空两格）
p {
text-indent: 2em;
}
7.6 字符间距
letter-spacing属性用于指定文本中字符之间的间距。
h2 {
letter-spacing: 12px;
}
效果：
7.7文本阴影
text-shadow属性为文本添加阴影。
最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）：
h1{
text-shadow: 2px 2px;
}
效果：
h1{
text-shadow: 2px 2px red;
}
向阴影添加颜色（红色）：
效果：
向阴影添加模糊效果（5px）：
h1{
text-shadow: 2px 2px 5px red;
}
8、字体属性
8.1 font-family属性
在 CSS 中，我们使用 font-family 属性规定文本的字体。
font-family 属性应包含多个字体名称作为备用字体，以确保浏览器/操作系统之间的最大兼容性。字体名称应以逗号分隔。
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
8.2字体样式
font-style属性主要用于指定斜体文本。
此属性可设置三个值：
- normal - 文本正常显示
- italic - 文本以斜体显示
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
效果：
8.3 字体粗细
font-weight属性指定字体的粗细。
/*文本正常显示*/
p.normal {
font-weight: normal;
}
/*文本加粗显示*/
p.thick {
font-weight: bold;
}
8.4字体大小
font-size属性设置文本的大小。
在网页设计中，能够管理文本大小很重要。但是，不应使用调整字体大小来使段落看起来像标题，或是使标题看起来像段落。请 始终使用正确的 HTML 标签，例如 <h1>-<h6>用于标题，而 <p>仅用于段落。
font-size 值可以是绝对或相对大小。
绝对尺寸：
- 将文本设置为指定大小
- 不允许用户在所有浏览器设置中更改文本大小（可访问性不佳）
- 当输出的物理尺寸已知时，绝对尺寸很有用
相对尺寸：
- 设置相对于周围元素的大小
- 允许用户在浏览器中更改文本大小
如果未指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）。
8.4.1 以像素设置字体大小
使用像素设置文本大小可以完全控制文本大小：
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
8.4.2 以 em 设置字体大小
为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。 W3C 建议使用 em 尺寸单位。
1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。 可以使用这个公式从像素到 em 来计算大小：pixels/16=em。
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 */
}
8.4.3 使用百分比和 em 的组合
body {
font-size: 80%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
8.4.4 响应式字体大小
可以使用 vw单位设置文本大小，它的意思是“视口宽度”。
这样，文本大小将遵循浏览器窗口的大小。当调整浏览器窗口的大小时，字体大小将会缩放。
h1 {
font-size: 10vw;
}
视口（Viewport）是浏览器窗口的大小。 1vw = 视口宽度的 1％。如果视口为 50 厘米宽，则 1vw 为 0.5 厘米。
132
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
