H5知识点大总结勾起你的欲望
2016-04-26 10:16
423 查看
第 13 章
CSS 选择器[下]
学习要点：1.伪类选择器总汇2.结构性伪类选择器 3.UI
伪类选择器4.动态伪类选择器5.其他伪类选择器
本章主要探讨 HTML5 中
CSS 选择器中的伪类选择器，和伪元素选择器一样，面向某种共同特征来选择元素。
一．伪类选择器总汇
伪类选择器分为四种类型：结构性伪类、UI 伪类、动态伪类和其他伪类选择器，具体如下：
二．结构性伪类选择器
结构性伪类选择器能够根据元素在文档中的位置选择元素。这类元素都有一个前缀（:）。
1.根元素选择器
:root {
border: 1px solid red;
}
解释：匹配文档中的根元素，基本不怎么用，因为总是返回<html>元素。
2.子元素选择器
ul > li:first-child {
color: red;
}
解释：选择第一个子元素。
ul > li:last-child {
color: red;
}
解释：选择最后一个子元素。
ul > li:only-child {
color: red;
}
解释：选择只有一个子元素的那个子元素。
div > p:only-of-type {
color: red;
}
解释：选择只有一个指定类型的子元素的那个子元素。
3.:nth-child(n)系列
ul > li:nth-child(2) {
color: red;
}
解释：选择子元素的第二个元素。
ul > li:nth-last-child(2) {
color: red;
}
解释：选择子元素倒数第二个元素。
div > p:nth-of-type(2) {
color: red;
};
解释：选择特定子元素的第二个元素。
div > p:nth-last-of-type(2) {
color: red;
};
解释：选择特定子元素的倒数第二个元素。
二．UI 伪类选择器
UI 伪类选择器是根据元素的状态匹配元素。
1.:enabled
:enabled {
border: 1px solid red;
}
解释：选择启用状态的元素。
2.:disabled
:disabled {
border: 1px solid red;
}
解释：选择禁用状态的元素。
3.:checked
:checked {
display: none;
}
解释：选择勾选的 input 元素。
4.:default
:default {
display: none;
}
解释：从一组类似的元素中选择默认元素。比如
input 被勾选的即默认的。
5.:valid 和:invalid
input:valid {
border: 1px solid blue;
}
input:invalid {
border: 1px solid green;
}
解释：输入验证合法与不合法显示时选择的元素。
6.:required 和:optional
input:required {
border: 1px solid blue;
}
input:optional {
border: 1px solid green;
}
解释：根据是否具有 required 属性选择元素。
三．动态伪类选择器
动态伪类选择器根据条件的改变匹配元素。
1.:link 和 visited
a:link { color: red;
}
a:visited { color: orange;
}
解释：:link 表示未访问过的超链接，:visited 表示已访问过的超链接。
2.:hover
a:hover {
color: blue;
}
解释：表示鼠标悬停在超链接上。
3.:active
a:active {
color: green;
}
解释：表示鼠标按下激活超链接时。
4.:focus
input:focus {
border: 1px solid red;
}
解释：表示获得焦点时。
四．其他伪类选择器
1.:not
a:not([href*="baidu"]) {
color: red;
}
解释：否定选择器，反选。
2.:empty
:empty {
display: none;
}
解释：匹配没有任何内容的元素。
3.:lang
:lang(en) {
color: red;
}
解释：选择包含 lang 属性，属性值前缀为
en 的元素。和属性选择器匹配结果一致。
4.:target
:target {
color: red;
}
解释：定位到锚点时，选择此元素。
5.::selection
::selection {
color: red;
}
解释：这是一个伪元素选择器，当选择文字时触发选择。CSS3 版本下的选择器。
第 14 章
CSS 颜色与度量单位
学习要点：1.颜色表方案2.度量单位
本章主要探讨 HTML5 中
CSS 颜色和度量单位等问题，包括颜色的选取方式、相对长度和绝对长度等。
一．颜色表方案
颜色的表现形式主要有三种方式：颜色名称、十六进制代码和十进制代码。
p {
color: red;
}
解释：这是将一个段落内的文字设置为红色，采用的是英文颜色名称。问题是，其他各种颜色我们将如何设置？
在古老的 HTML4 时，颜色名称只有
16 种。
当然，目前颜色名称远远不止这些，可以搜索更多的 HTML 颜色表或
CSS 颜色表查阅。这里提供一些页面如下：
http://xh.5156edu.com/page/z1015m9220j18754.html http://finle.me/colors.html http://www.w3school.com.cn/tags/html_ref_colornames.asp
在上面的表格中，我们也罗列出对应的十六进制和十进制颜色表示方法。使用方法如下：//红色的十六进制方案
p {
color: #ff0000;
}
十进制表示方法就比较多样化，有四种方案：
p {
color: rgb(112, 128, 114); color: rgba(0, 128, 128, 0.5); color: hsl(120, 100%, 30%);
color: hsla(120, 100%, 30%, 0.5);
}
目前又有一个疑问，这些值从哪里获取。除了颜色表之外，想要微调自己的颜色值。我们可以使用
photoshop 等平面设计软件的调色板获取相应的值。
二．度量单位
在 CSS 长度设置中，我们经常需要使用到度量单位，即以什么样的单位设计我们的字体或边框长度。而在
CSS 中长度单位又分为绝对长度和相对长度。
绝对长度指的是现实世界的度量单位，CSS 支持五种绝对长度单位。
下面我们使用一些常用的单位作为演示，而不做演示的基本用不到了。
//em 相对单位 p {
margin: 0;
padding: 0;
background: silver;
font-size: 15px;
height: 2em;
}
解释：em 是相对单位，与字号大小挂钩，会根据字体大小改变自己的大小，灵活性很
高。
//px 相对单位，绝对特性
p {
margin: 0;
padding: 0;
background: silver;
font-size: 15px;
height: 55px;
}
解释：虽然 px 也是相对单位，但由于和分辨率挂钩，导致他其实就变成一个绝对单位了，自然灵活性没有
em 高，但是使用难度较低，且大量的开发者习惯性使用它。
//%百分比 p {
margin: 0; padding: 0;
background: silver; font-size: 200%; width: 50%;
}
解释：长度比较好理解，就是挂钩它所在区块的宽度。而 font-size 则是继承到的原始大小的百分比。
第 15 章
CSS 文本样式[上]
学习要点：1.字体总汇2.字体设置
3.Web 字体
本章主要探讨 HTML5 中
CSS 文本样式，通过文本样式的设置，更改字体的大小、样式以及文本的方位。
一．字体总汇
本节课，我们重点了解一下 CSS 文本样式中字体的一些设置方法，样式表如下：
二．字体设置
我们可以通过 CSS 文本样式来修改字体的大小、样式以及形态。
1.font-size
p {
font-size: 50px;
}
解释：设置文本的大小。属性值如下表：
xx-small
x-small
small
medium设置字体大小。每个值从小到大的固定值。
large
x-large
font-variant: small-caps;
}
解释：设置字体是否以小型大写字母显示。
font-variant: small-caps;
}
//让子元素设置恢复小写 p {
font-size: 50px; font-variant: normal;
}
3.font-style
p {
font-style: italic;
}
解释：设置字体是否倾斜。
在目前计算机和浏览器显示中，只有 bold 加粗，其他更粗更细，目前体现不出来。
5.font-family
p {
font-family: 微软雅黑;
}
解释：使用指定字体名称。这里使用的字体是浏览者系统的字体。有时为了兼容很多浏览者系统的字体，可以做几个后备字体。
//备用字体
p {
font-family: 楷体,微软雅黑,宋体;
}
6.font
p {
font: 50px 楷体;
}
解释：字体设置简写组合方式。格式如下：[是否倾斜|是否加粗|是否转小型大写] 字体大小
字体名称；
三．Web 字体
虽说可以通过备用字体来解决用户端字体缺失问题，但终究用户体验不好，且不一定备用字体所有用户都安装了。所以，现在
CSS 提供了
Web 字体，也就是服务器端字体。
//服务器提供字体
@font-face { font-family: abc;
src: url('BrushScriptStd.otf');
}
p {
font-size: 50px; font-family: abc;
}
英文字体文件比较小，而中文则很大。所以，中文如果想用特殊字体可以使用图片。大面积使用特殊中文字体，就不太建议了。
第 15 章
CSS 文本样式[下]
学习要点：1.文本总汇2.文本样式3.文本控制
本章主要探讨 HTML5 中
CSS 文本样式，通过文本样式的设置，更改字体的大小、样式以及文本的方位。
一．文本总汇
本节课，我们重点了解一下 CSS 文本样式中文本内容的一些设置方法，样式表如下：
二．文本样式
CSS 文本样式有三种：文本装饰、英文大小写转换和文本阴影。
1.text-decoration
p {
text-decoration: underline;
}
解释：设置文本出现下划线。属性值如下表：
//让本来有下划线的超链接取消 a {
text-decoration: none;
}
2.text-transform p {
text-transform: uppercase;
}
解释：设置英文文本转换为大小写。
text-shadow : 5px 5px 3px black;
}
解释：给文本添加阴影。其中四个值，第一个值：水平偏移；第二个值：垂直偏移；第三个值：阴影模糊度（可选）；第四个值：阴影颜色（可选）。
三．文本控制
CSS 文本样式中还有一组对文本进行访问、形态进行控制的样式。
1.text-align
p {
text-align: center;
}
解释：指定文本的对齐方式。
left靠左对齐，默认
right靠右对齐
center居中对齐
start 和 end
属于 CSS3
新增的功能，但目前 IE
和 Opera 尚未支持。
2.white-space
p {
white-space: nowrap;
}
解释：处理空白排版方式。
3.letter-spacing p {
letter-spacing: 4px;
}
解释：设置文本之间的间距。
normal设置默认间距
长度值比如：“数字”+“px”
4.word-spacing
p {
word-spacing: 14px;
}
解释：设置英文单子之间的间距。
normal设置默认间距
长度值比如：“数字”+“px”
5.line-height p {
line-height: 200%;
}
解释：设置段落行高。
6.word-wrap p {
word-wrap: break-word;
}
解释：让过长的英文单词断开。
解释：设置文本首行的缩进。
第 16 章
CSS 盒模型[上]
学习要点：1.元素尺寸2.元素内边距3.元素外边距4.处理溢出
本章主要探讨 HTML5 中
CSS 盒模型，学习怎样了解元素的外观配置以及文档的整体布局。
一．元素尺寸
CSS 盒模型中最基础的就是设置一个元素的尺寸大小。有三组样式来配置一个元素的尺寸大小，样式表如下：
//设置元素尺寸
div {
width: 200px;
height: 200px;
}
解释：设置元素的固定尺寸。
//限制元素尺寸 div {
min-width: 100px; min-height: 100px; max-width: 300px; max-height: 300px;
}
解释：这一组主要是应对可能动态产生元素尺寸变大变小的问题，从而限制它最大和最
小的值。
//auto 自适应 div {
width: auto;
height: auto;
}
解释：auto 是默认值，width 在
auto 下是
100%的值；height 在
auto 下是自适应。
//百分比方式
#a {
background: silver; width: 200px; height: 200px;
}
#b {
background: gray; width: 80%; height: 80%;
}
<div id="a">
<div id="b">我是 html5</div> </div>
解释：百分比就是相对于父元素长度来衡定的。
二．元素内边距
CSS 盒模型中可以设置元素内部边缘填充空白的大小，我们成为内边距。样式表如下：
//设置四个内边距 div {
padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px;
}
//简写形式，分别为上 10px、右 10px、下 10px、左 10px
div {
padding: 10px 10px 10px 10px;
}
//简写形式，分别为上 10px，左右 50px，下 200px
div {
padding: 10px 50px 200px;
}
//简写形式，分别是上下 10px，左右 20px
div {
padding: 10px 20px;
}
//简写形式：上下左右均 10px
div {
padding: 10px;
}
三．元素外边距
CSS 盒模型中可以设置元素外部边缘填充空白的大小，我们成为外边距。样式表如下：
//设置四个内边距 div {
margin-top: 10px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px;
}
//简写形式，分别为上 10px、右 10px、下 10px、左 10px
div {
margin: 10px 10px 10px 10px;
}
//简写形式，分别为上 10px，左右 50px，下 200px
div {
margin: 10px 50px 200px;
}
//简写形式，分别是上下 10px，左边 20px
div {
margin: 10px 20px;
}
//简写形式：上下左右均 10px
div {
margin: 10px;
}
四．处理溢出
当设置了元素固定尺寸且内容过大时，就会出现溢出的问题。溢出主要朝两个方向：右侧和底部。我们可以通过
overflow 系列样式来控制它。
浏览器自行处理溢出内容。如果有溢出内容，就显示滚动条，否
auto
则就不显示滚动条。
hidden如果有溢出的内容，直接剪掉。
不管是否溢出，都会出现滚动条。但不同平台和浏览器显示方式 scroll
不同。
visible默认值，不管是否溢出，都显示内容。
//设置溢出为 auto
值 div {
overflow-x: auto;
}
CSS 选择器[下]
学习要点：1.伪类选择器总汇2.结构性伪类选择器 3.UI
伪类选择器4.动态伪类选择器5.其他伪类选择器
本章主要探讨 HTML5 中
CSS 选择器中的伪类选择器，和伪元素选择器一样，面向某种共同特征来选择元素。
一．伪类选择器总汇
伪类选择器分为四种类型：结构性伪类、UI 伪类、动态伪类和其他伪类选择器，具体如下：
| 选择器 | 名称 | 说明 | CSS 版本 |
| :root | 根元素选择器 | 选择文档中的根元素 | 3 |
| :first-child | 子元素选择器 | 选择元素中第一个子元素 | 2 |
| :last-child | 子元素选择器 | 选择元素中最后一个子元素 | 3 |
| :only-child | 子元素选择器 | 选择元素中唯一子元素 | 3 |
| :only-of-type | 子元素选择器 | 选择指定类型的唯一子元素 | 3 |
| :nth-child(n) | 子元素选择器 | 选择指定 N 个子元素 | 3 |
| :enabled | UI 选择器 | 选择启用状态的元素 | 3 |
| :disabled | UI 选择器 | 选择禁用状态的元素 | 3 |
| :checked | UI 选择器 | 选择被选中 input 勾选元素 | 3 |
| :default | UI 选择器 | 选择默认元素 | 3 |
| :valid | UI 选择器 | 验证有效选择 input 元素 | 3 |
| :invalid | UI 选择器 | 验证无效选择 input 元素 | 3 |
| :required | UI 选择器 | 有 required 属性选择元素 | 3 |
| :optional | UI 选择器 | 无 required 属性选择元素 | 3 |
| :link | 动态选择器 | 未访问的超链接元素 | 1 |
| :visited | 动态选择器 | 已访问的超链接元素 | 1 |
| :hover | 动态选择器 | 悬停在超链接上的元素 | 2 |
| :active | 动态选择器 | 激活超链接上的元素 | 2 |
| :foucs | 动态选择器 | 获取焦点的元素 | 2 |
| :not | 其他选择器 | 否定选择的元素 | 3 |
| :empty | 其他选择器 | 选择没有任何内容的元素 | 3 |
| :lang | 其他选择器 | 选取包含 lang 属性的元素 | 2 |
| :target | 其他选择器 | 选取 URL 片段标识指向元素 | 3 |
结构性伪类选择器能够根据元素在文档中的位置选择元素。这类元素都有一个前缀（:）。
1.根元素选择器
:root {
border: 1px solid red;
}
解释：匹配文档中的根元素，基本不怎么用，因为总是返回<html>元素。
2.子元素选择器
ul > li:first-child {
color: red;
}
解释：选择第一个子元素。
ul > li:last-child {
color: red;
}
解释：选择最后一个子元素。
ul > li:only-child {
color: red;
}
解释：选择只有一个子元素的那个子元素。
div > p:only-of-type {
color: red;
}
解释：选择只有一个指定类型的子元素的那个子元素。
3.:nth-child(n)系列
ul > li:nth-child(2) {
color: red;
}
解释：选择子元素的第二个元素。
ul > li:nth-last-child(2) {
color: red;
}
解释：选择子元素倒数第二个元素。
div > p:nth-of-type(2) {
color: red;
};
解释：选择特定子元素的第二个元素。
div > p:nth-last-of-type(2) {
color: red;
};
解释：选择特定子元素的倒数第二个元素。
二．UI 伪类选择器
UI 伪类选择器是根据元素的状态匹配元素。
1.:enabled
:enabled {
border: 1px solid red;
}
解释：选择启用状态的元素。
2.:disabled
:disabled {
border: 1px solid red;
}
解释：选择禁用状态的元素。
3.:checked
:checked {
display: none;
}
解释：选择勾选的 input 元素。
4.:default
:default {
display: none;
}
解释：从一组类似的元素中选择默认元素。比如
input 被勾选的即默认的。
5.:valid 和:invalid
input:valid {
border: 1px solid blue;
}
input:invalid {
border: 1px solid green;
}
解释：输入验证合法与不合法显示时选择的元素。
6.:required 和:optional
input:required {
border: 1px solid blue;
}
input:optional {
border: 1px solid green;
}
解释：根据是否具有 required 属性选择元素。
三．动态伪类选择器
动态伪类选择器根据条件的改变匹配元素。
1.:link 和 visited
a:link { color: red;
}
a:visited { color: orange;
}
解释：:link 表示未访问过的超链接，:visited 表示已访问过的超链接。
2.:hover
a:hover {
color: blue;
}
解释：表示鼠标悬停在超链接上。
3.:active
a:active {
color: green;
}
解释：表示鼠标按下激活超链接时。
4.:focus
input:focus {
border: 1px solid red;
}
解释：表示获得焦点时。
四．其他伪类选择器
1.:not
a:not([href*="baidu"]) {
color: red;
}
解释：否定选择器，反选。
2.:empty
:empty {
display: none;
}
解释：匹配没有任何内容的元素。
3.:lang
:lang(en) {
color: red;
}
解释：选择包含 lang 属性，属性值前缀为
en 的元素。和属性选择器匹配结果一致。
4.:target
:target {
color: red;
}
解释：定位到锚点时，选择此元素。
5.::selection
::selection {
color: red;
}
解释：这是一个伪元素选择器，当选择文字时触发选择。CSS3 版本下的选择器。
第 14 章
CSS 颜色与度量单位
学习要点：1.颜色表方案2.度量单位
本章主要探讨 HTML5 中
CSS 颜色和度量单位等问题，包括颜色的选取方式、相对长度和绝对长度等。
一．颜色表方案
颜色的表现形式主要有三种方式：颜色名称、十六进制代码和十进制代码。
p {
color: red;
}
解释：这是将一个段落内的文字设置为红色，采用的是英文颜色名称。问题是，其他各种颜色我们将如何设置？
在古老的 HTML4 时，颜色名称只有
16 种。
| 颜色名称 | 十六进制代码 | 十进制代码 | 含义 |
| black | #000000 | 0,0,0 | 黑色 |
| silver | #c0c0c0 | 192,192,192 | 银灰色 |
| gray | #808080 | 128,128,128 | 灰色 |
| white | #ffffff | 255,255,255 | 白色 |
| maroon | #800000 | 128,0,0 | 栗色 |
| red | #ff0000 | 255,0,0 | 红色 |
| purple | #800080 | 128,0,128 | 紫色 |
| fuchsia | #ff00ff | 255,0,255 | 紫红 |
| green | #008000 | 0,128,0 | 绿色 |
| lime | #00ff00 | 0,255,0 | 闪光绿 |
| olive | #808000 | 128,128,0 | 橄榄色 |
| yellow | #ffff00 | 255,255,0 | 黄色 |
| navy | #000080 | 0,0,128 | 海军蓝 |
| blue | #0000ff | 0,0,255 | 蓝色 |
| teal | #008080 | 0,128,128 | 水鸭色 |
| aqua | #00ffff | 0,255,255 | 浅绿色 |
CSS 颜色表查阅。这里提供一些页面如下：
http://xh.5156edu.com/page/z1015m9220j18754.html http://finle.me/colors.html http://www.w3school.com.cn/tags/html_ref_colornames.asp
在上面的表格中，我们也罗列出对应的十六进制和十进制颜色表示方法。使用方法如下：//红色的十六进制方案
p {
color: #ff0000;
}
十进制表示方法就比较多样化，有四种方案：
| 函数 | 说明 | 示例 |
| rgb(r,g,b) | 用 RGB 模型表示颜色 | rgb(0,128,128) |
| rgba(r,g,b,a) | 同上，a 表示透明度 0~1 之间 | rgba(0,128,128,0.5) |
| hsl(h,s,l) | 用 HSL 模型（色相、饱和度 | hsl(120,100%,30%) |
| 和透明度）来表示颜色 | ||
| hsla(h,s,l,a) | 同上，a 表示透明度 0~1 之间 | hsla(120,100%,30%,0.5) |
color: rgb(112, 128, 114); color: rgba(0, 128, 128, 0.5); color: hsl(120, 100%, 30%);
color: hsla(120, 100%, 30%, 0.5);
}
目前又有一个疑问，这些值从哪里获取。除了颜色表之外，想要微调自己的颜色值。我们可以使用
photoshop 等平面设计软件的调色板获取相应的值。
二．度量单位
在 CSS 长度设置中，我们经常需要使用到度量单位，即以什么样的单位设计我们的字体或边框长度。而在
CSS 中长度单位又分为绝对长度和相对长度。
绝对长度指的是现实世界的度量单位，CSS 支持五种绝对长度单位。
| 绝对长度单位 | ||
| 单位标识符 | 说明 | |
| in | 英寸 | |
| cm | 厘米 | |
| mm | 毫米 | |
| pt | 磅 | |
| pc | pica | |
| 相对长度指的是依托其他类型的单位，也是五种。 | ||
| 相对长度单位 | ||
| 单位标识符 | 说明 | |
| em | 与元素字号挂钩 | |
| ex | 与元素字体的“x 高度”挂钩 | |
| rem | 与根元素的字号挂钩 | |
| px | 像素，与分辨率挂钩 | |
| % | 相对另一值的百分比 | |
//em 相对单位 p {
margin: 0;
padding: 0;
background: silver;
font-size: 15px;
height: 2em;
}
解释：em 是相对单位，与字号大小挂钩，会根据字体大小改变自己的大小，灵活性很
高。
//px 相对单位，绝对特性
p {
margin: 0;
padding: 0;
background: silver;
font-size: 15px;
height: 55px;
}
解释：虽然 px 也是相对单位，但由于和分辨率挂钩，导致他其实就变成一个绝对单位了，自然灵活性没有
em 高，但是使用难度较低，且大量的开发者习惯性使用它。
//%百分比 p {
margin: 0; padding: 0;
background: silver; font-size: 200%; width: 50%;
}
解释：长度比较好理解，就是挂钩它所在区块的宽度。而 font-size 则是继承到的原始大小的百分比。
第 15 章
CSS 文本样式[上]
学习要点：1.字体总汇2.字体设置
3.Web 字体
本章主要探讨 HTML5 中
CSS 文本样式，通过文本样式的设置，更改字体的大小、样式以及文本的方位。
一．字体总汇
本节课，我们重点了解一下 CSS 文本样式中字体的一些设置方法，样式表如下：
| 属性名 | 说明 | CSS 版本 |
| font-size | 设置字体的大小 | 1 |
| font-variant | 设置英文字体是否转换为小型大写 | 1 |
| font-style | 设置字体是否倾斜 | 1 |
| font-weight | 设置字体是否加粗 | 1 |
| font-family | 设置 font 字体 | 1 |
| font | 设置字体样式复合写法 | 1 ~ 2 |
| @font-face | 设置 Web 字体 | 3 |
我们可以通过 CSS 文本样式来修改字体的大小、样式以及形态。
1.font-size
p {
font-size: 50px;
}
解释：设置文本的大小。属性值如下表：
| 值 | 说明 |
x-small
small
medium设置字体大小。每个值从小到大的固定值。
large
x-large
| xx-large | ||
| smaller | 设置字体相对于父元素字体的大小 | |
| larger | ||
| 数字+px | 使用 CSS 像素长度设置字体大小 | |
| 数字+% | 使用相对于父元素字体的百分比大小 | |
| //先设置父元素字体大小 | ||
| body { | ||
| font-size: 50px; | ||
| } | ||
| //再设置相对小一些 | ||
| p { | ||
| font-size: smaller; | ||
| } | ||
| 2.font-variant | ||
| p { |
}
解释：设置字体是否以小型大写字母显示。
| 值 | 说明 | |
| normal | 表示如果以小型大写状态，让它恢复小写状态。 | |
| small-caps | 让小写字母以小型大写字母显示。 | |
| //先让父元素设置小型大写 | ||
| body { |
}
//让子元素设置恢复小写 p {
font-size: 50px; font-variant: normal;
}
3.font-style
p {
font-style: italic;
}
解释：设置字体是否倾斜。
| 值 | 说明 | |
| normal | 表示让倾斜状态恢复到正常状态。 | |
| italic | 表示使用斜体。 | |
| oblique | 表示让文字倾斜。区别在没有斜体时使用。 | |
| 4.font-weight | ||
| p { | ||
| font-weight: bold; | ||
| } | ||
| 解释：设置字体是否加粗。 | ||
| 值 | 说明 | |
| normal | 表示让加粗的字体恢复正常。 | |
| bold | 粗体 | |
| bolder | 更粗的字体 | |
| lighter | 轻细的字体 | |
| 100 ~ 900 之间的数字 | 600 及之后是加粗，之前不加粗 | |
5.font-family
p {
font-family: 微软雅黑;
}
解释：使用指定字体名称。这里使用的字体是浏览者系统的字体。有时为了兼容很多浏览者系统的字体，可以做几个后备字体。
//备用字体
p {
font-family: 楷体,微软雅黑,宋体;
}
6.font
p {
font: 50px 楷体;
}
解释：字体设置简写组合方式。格式如下：[是否倾斜|是否加粗|是否转小型大写] 字体大小
字体名称；
三．Web 字体
虽说可以通过备用字体来解决用户端字体缺失问题，但终究用户体验不好，且不一定备用字体所有用户都安装了。所以，现在
CSS 提供了
Web 字体，也就是服务器端字体。
//服务器提供字体
@font-face { font-family: abc;
src: url('BrushScriptStd.otf');
}
p {
font-size: 50px; font-family: abc;
}
英文字体文件比较小，而中文则很大。所以，中文如果想用特殊字体可以使用图片。大面积使用特殊中文字体，就不太建议了。
第 15 章
CSS 文本样式[下]
学习要点：1.文本总汇2.文本样式3.文本控制
本章主要探讨 HTML5 中
CSS 文本样式，通过文本样式的设置，更改字体的大小、样式以及文本的方位。
一．文本总汇
本节课，我们重点了解一下 CSS 文本样式中文本内容的一些设置方法，样式表如下：
| 属性名 | 说明 | CSS 版本 |
| text-decoration | 装饰文本出现各种划线。 | 1 |
| text-transform | 将英文文本转换大小写。 | 1 |
| text-shadow | 给文本添加阴影 | 3 |
| text-align | 设置文本对齐方式 | 1,3 |
| white-space | 排版中的空白处理方式 | 1 |
| letter-spacing | 设置字母之间的间距 | 1 |
| word-spacing | 设置单词之间的间距 | 1 |
| line-height | 设置行高 | 1 |
| word-wrap | 控制段词 | 3 |
| text-indent | 设置文本首行的缩进 | 1 |
CSS 文本样式有三种：文本装饰、英文大小写转换和文本阴影。
1.text-decoration
p {
text-decoration: underline;
}
解释：设置文本出现下划线。属性值如下表：
| 值 | 说明 |
| none | 让本身有划线装饰的文本取消掉 |
| underline | 让文本的底部出现一条下划线 |
| overline | 让文本的头部出现一条上划线 |
| line-through | 让文本的中部出现一条删除划线 |
| blink | 让文本进行闪烁，基本不支持了 |
text-decoration: none;
}
2.text-transform p {
text-transform: uppercase;
}
解释：设置英文文本转换为大小写。
| 值 | 说明 | |
| none | 将已被转换大小写的值恢复到默认状态 | |
| capitalize | 将英文单词首字母大写 | |
| uppercase | 将英文转换为大写字母 | |
| lowercase | 将英文转换为小写字母 | |
| 3.text-shadow | ||
| p { |
}
解释：给文本添加阴影。其中四个值，第一个值：水平偏移；第二个值：垂直偏移；第三个值：阴影模糊度（可选）；第四个值：阴影颜色（可选）。
三．文本控制
CSS 文本样式中还有一组对文本进行访问、形态进行控制的样式。
1.text-align
p {
text-align: center;
}
解释：指定文本的对齐方式。
| 值 | 说明 |
right靠右对齐
center居中对齐
| justify | 内容两端对齐 |
| start | 让文本处于开始的边界 |
| end | 让文本处于结束的边界 |
属于 CSS3
新增的功能，但目前 IE
和 Opera 尚未支持。
2.white-space
p {
white-space: nowrap;
}
解释：处理空白排版方式。
| 值 | 说明 |
| normal | 默认值，空白符被压缩，文本自动换行 |
| nowrap | 空白符被压缩，文本不换行 |
| pre | 空白符被保留，遇到换行符则换行 |
| pre-line | 空白符被压缩，文本会在排满或遇换行符换行 |
| pre-wrap | 空白符被保留，文本会在排满或遇换行符换行 |
letter-spacing: 4px;
}
解释：设置文本之间的间距。
| 值 | 说明 |
长度值比如：“数字”+“px”
4.word-spacing
p {
word-spacing: 14px;
}
解释：设置英文单子之间的间距。
| 值 | 说明 |
长度值比如：“数字”+“px”
5.line-height p {
line-height: 200%;
}
解释：设置段落行高。
| 值 | 说明 |
| normal | 设置默认间距 |
| 长度值 | 比如：“数字”+“px” |
| 数值 | 比如：1,2,3 |
| % | 比如：200% |
word-wrap: break-word;
}
解释：让过长的英文单词断开。
| 值 | 说明 | |
| normal | 单词不断开 | |
| break-word | 断开单词 | |
| 7.text-indent | ||
| p { | ||
| text-indent: 20px; | ||
| } |
| 值 | 说明 |
| normal | 设置默认间距 |
| 长度值 | 比如：“数字”+“px” |
CSS 盒模型[上]
学习要点：1.元素尺寸2.元素内边距3.元素外边距4.处理溢出
本章主要探讨 HTML5 中
CSS 盒模型，学习怎样了解元素的外观配置以及文档的整体布局。
一．元素尺寸
CSS 盒模型中最基础的就是设置一个元素的尺寸大小。有三组样式来配置一个元素的尺寸大小，样式表如下：
| 属性 | 值 | 说明 | CSS 版本 |
| width | auto、长度值或百分比 | 设置元素的宽度 | 1 |
| height | auto、长度值或百分比 | 设置元素的高度 | 1 |
| min-width | auto、长度值或百分比 | 设置元素最小宽度 | 2 |
| min-height | auto、长度值或百分比 | 设置元素最小高度 | 2 |
| max-width | auto、长度值或百分比 | 设置元素最大宽度 | 2 |
| max-height | auto、长度值或百分比 | 设置元素最大高度 | 2 |
div {
width: 200px;
height: 200px;
}
解释：设置元素的固定尺寸。
//限制元素尺寸 div {
min-width: 100px; min-height: 100px; max-width: 300px; max-height: 300px;
}
解释：这一组主要是应对可能动态产生元素尺寸变大变小的问题，从而限制它最大和最
小的值。
//auto 自适应 div {
width: auto;
height: auto;
}
解释：auto 是默认值，width 在
auto 下是
100%的值；height 在
auto 下是自适应。
//百分比方式
#a {
background: silver; width: 200px; height: 200px;
}
#b {
background: gray; width: 80%; height: 80%;
}
<div id="a">
<div id="b">我是 html5</div> </div>
解释：百分比就是相对于父元素长度来衡定的。
二．元素内边距
CSS 盒模型中可以设置元素内部边缘填充空白的大小，我们成为内边距。样式表如下：
| 属性 | 值 | 说明 | CSS 版本 |
| padding-top | 长度值或百分比 | 设置顶部内边距 | 1 |
| padding-bottom | 长度值或百分比 | 设置底部内边距 | 1 |
| padding-left | 长度值或百分比 | 设置左边内边距 | 1 |
| padding-right | 长度值或百分比 | 设置右边内边距 | 1 |
| padding | 1 ~ 4 个长度值或百分比 | 简写属性 | 1 |
padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px;
}
//简写形式，分别为上 10px、右 10px、下 10px、左 10px
div {
padding: 10px 10px 10px 10px;
}
//简写形式，分别为上 10px，左右 50px，下 200px
div {
padding: 10px 50px 200px;
}
//简写形式，分别是上下 10px，左右 20px
div {
padding: 10px 20px;
}
//简写形式：上下左右均 10px
div {
padding: 10px;
}
三．元素外边距
CSS 盒模型中可以设置元素外部边缘填充空白的大小，我们成为外边距。样式表如下：
| 属性 | 值 | 说明 | CSS 版本 |
| margin-top | 长度值或百分比 | 设置顶部内边距 | 1 |
| margin-bottom | 长度值或百分比 | 设置底部内边距 | 1 |
| margin-left | 长度值或百分比 | 设置左边内边距 | 1 |
| margin-right | 长度值或百分比 | 设置右边内边距 | 1 |
| margin | 1 ~ 4 长度值或百分比 | 简写属性 | 1 |
margin-top: 10px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px;
}
//简写形式，分别为上 10px、右 10px、下 10px、左 10px
div {
margin: 10px 10px 10px 10px;
}
//简写形式，分别为上 10px，左右 50px，下 200px
div {
margin: 10px 50px 200px;
}
//简写形式，分别是上下 10px，左边 20px
div {
margin: 10px 20px;
}
//简写形式：上下左右均 10px
div {
margin: 10px;
}
四．处理溢出
当设置了元素固定尺寸且内容过大时，就会出现溢出的问题。溢出主要朝两个方向：右侧和底部。我们可以通过
overflow 系列样式来控制它。
| 属性 | 值 | 说明 | CSS 版本 |
| overflow-x | 溢出值 | 设置水平方向的溢出 | 3 |
| overflow-y | 溢出值 | 设置垂直方向的溢出 | 3 |
| overflow | 溢出值 | 简写属性 | 2 |
| 溢出处理主要有四种处理值： | |||
| 值 | 说明 |
auto
则就不显示滚动条。
hidden如果有溢出的内容，直接剪掉。
不管是否溢出，都会出现滚动条。但不同平台和浏览器显示方式 scroll
不同。
visible默认值，不管是否溢出，都显示内容。
//设置溢出为 auto
值 div {
overflow-x: auto;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- H5知识点大总结勾起你的欲望
- H5知识点大总结勾起你的欲望
- html5 canvas 实现简单的画图
- html5为什么能替代Flash?搞不懂
- Atitit .h5文件上传 v3
- Atitit .h5文件上传 v3
- Atitit .h5文件上传 v3
- h5学习笔记：ul 边框引起导航偏移
- html5标签说明
- HTML5 data-* 自定义属性
- HTML5属性data-*的操作
- HTML5属性data-*的操作
- HTML5 LocalStorage 本地存储
- h5第一章第四节
- h5第三章
- required - HTML5里的input标签的required属性提示文字修改
- Html5
- iis配置站点，页面中的video 视频标签加载的视频无法播放或者无法加载的解决方法
- Html5中localStorage，sessionStorage用法
- H5——图片映射，取坐标点的在线工具