css:选择器;表单伪类;文本控制

外部样式

使用 link 标签引入外部样式文件

link 标签放在 head 标签内部
样式文件要以 .css 为扩展名
一个页面往往需要引入多个样式文件

属性	说明
rel	定义当前文档与被链接文档之间的关系
href	外部样式文件
type	文档类型

<link rel="stylesheet" href="houdunren.css" type="text/css">

嵌入样式

使用 style 标签可以在文档内部定义样式规则

<style>
    body {
        background: red;
    }
</style>

内联样式

可以为某个标签单独设置样式

<h1 style="color:green;">houdunren.com</h1>

导入样式

使用 @import 可以在原样式规则中导入其他样式表，可以在外部样式、style标签中使用。

可以使用以下两种方式导入

@import "hd.css" @import url("hd.css");

导入样式要放在样式规则前面定义。

<style>
    @import url("hdcms.css");
    body {
        background: red;
    }
</style1>

在样式规则中可以随意使用空白，空白只是看不见但同样占用空间，所以可以结合其他工具如 webpack 等将css 压缩为一行。

注释是对定义样式规则的说明，便于后期维护理解。

... body {
  /* 这是注释的使用 */
  background: red;
}
...;

样式规则如果存在错误，解析器会选择忽略，并不会影响其他样式规则。

以下代码的houdunren:red 是无效样式但不影响后面的 font-size:100px; 规则使用。

h1 {
  houdunren: red;
  font-size: 100px;
}

初始样式

有些标签默认含有内外边距，且不同浏览器大小也不一样。为了统一我们可以重置标签的 CSS 默认样式。

最简单的方式就是使用插件css-reset (opens new window)open in new window完成，你也可以在 vscode 等编辑器中定义代码片段。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />

选择器

houdunren.com (opens new window)open in new window@ 大军大叔

样式是做用在元素标签上的，通过本章将可以随意查找元素来应用样式。

基本选择器

选择器	示例	描述
.class	.intro	选择 class="intro" 的所有元素
#id	#firstname	选择 id="firstname" 的所有元素
*	*	选择所有元素
element	p	选择所有元素
element,element	div,p	选择所有元素和所有元素
element element	div p	选择元素内部的所有元素
element>element	div>p	选择父元素为元素的所有元素
element+element	div+p	选择紧接在元素之后的所有元素

标签选择

使用 * 可为所有元素设置样式。

* {
  text-decoration: none;
  color: #6c757d;
}

根据标签为元素设置样式

h1 {
  color: red;
}

同时设置多个元素组合

h1,
h2 {
  color: red;
}

元素在多个组件中存在

h1,
h2 {
  color: red;
}
h1,
h3 {
  background: #dcdcdc;
}

类选择器

类选择器是为一类状态声明样式规则，下面是把文本居中定义为类样式。

<style>
.text-center {
    text-align: center;
}
</style>

<h1 class="text-center">houdunren.com</h1>
<h2 class="text-center">hdcms.com</h2>

将类选择器指定为具体标签

.help-block {
  background: red;
}

span.help-block {
  font-size: 12px;
  color: #aaa;
  background: none;
}
... <span class="help-block" > 感谢访问厚道人</span >;

ID 选择器

为有 id 属性的元素设置样式

#container {
  background: red;
}

... <h1 id="container" > houdunren.com</h1 >;

文档中 ID 应该是唯一的，虽然为多个元素设置同一个 ID 也可以产生样式效果，但这是不符合规范的。

建议优先使用类选择器

#open in new window结构选择器

选择器	示例	描述
element element	div p	选择元素内部的所有元素
element>element	div>p	选择父元素为元素的所有元素
element+element	div+p	选择紧接在元素之后的元素
element~element2	p~ul	选择元素同级并在元素后面的所有元素

#open in new window后代选择器

HTML 中元素是以父子级、兄弟关系存在的。后代选择器指元素后的元素（不只是子元素，是后代元素）。

main article h2,
main h1 {
  color: green;
}
...
  <main
  > <article
  > <h2
  name="houdunren"
  > houdunren.com</h2
  > <aside
  > <h2
  > houdunwang.com</h2
  > </aside
  > </article
  > <h2
  name="hdcms.com"
  > hdcms.com</h2
  > <h1
  > 厚道人</h1
  > </main
  >;

#open in new window子元素选择

子元素选择器中选择子元素，不包括孙级及以下元素。

main article > h2 {
  color: green;
}
...
  <main
  > <article
  > <h2
  name="houdunren"
  > houdunren.com</h2
  > <aside
  > <h2
  > houdunwang.com</h2
  > </aside
  > </article
  > <h2
  name="hdcms.com"
  > hdcms.com</h2
  > <h1
  > 厚道人</h1
  > </main
  >;

#open in new window紧邻兄弟元素

用于选择紧挨着的同级兄弟元素。

main article + h2 {
  color: green;
}
...
  <main
  > <article
  > <h2
  name="houdunren"
  > houdunren.com</h2
  > <aside
  > <h2
  > houdunwang.com</h2
  > </aside
  > </article
  > <h2
  name="hdcms.com"
  > hdcms.com</h2
  > <h1
  > 厚道人</h1
  > </main
  >;

#open in new window后面兄弟元素

用于选择后面的所有兄弟元素。

main article ~ * {
  color: green;
}
...
  <main
  > <article
  > <h2
  name="houdunren"
  > houdunren.com</h2
  > <aside
  > <h2
  > houdunwang.com</h2
  > </aside
  > </article
  > <h2
  name="hdcms.com"
  > hdcms.com</h2
  > <h1
  > 厚道人</h1
  > </main
  >;

| 选择器 | 示例 | 描述 | | --------------------- | --------------------- | ----------------------------------------- | ----- | ------------------------------------------------------------ | | [attribute] | [target] | 带有 target 属性所有元素 | | [attribute=value] | [target=_blank] | targe 属性等于"_blank" 的所有元素 | | [attribute~=value] | [title~=houdunren] | title 属性包含单词 "houdunren" 的所有元素 | | [attribute | =value] | [title | =hd] | title 属性值为 "hd"的单词，或hd-cms 以-连接的的独立单词 | | [attribute*=value] | a[src*="hdcms"] | src 属性中包含 "hdcms" 字符的每个元素 | | [attribute^=value] | a[src^="https"] | src 属性值以 "https" 开头的每个元素 | | [attribute$=value] | a[src$=".jpeg"] | src 属性以 ".jpeg" 结尾的所有元素 |

为具有 class 属性的 h1 标签设置样式

h1[class] {
  color: red;
}
... <h1 class="container" > houdunren.com</h1 >;

约束多个属性

h1[class][id] {
  color: red;
}
... <h1 class="container" id > houdunren.com</h1 >;

具体属性值设置样式

a[href="https://www.houdunren.com"]
{
  color: green;
}
...

<a href="https://www.houdunren.com">厚道人</a>
<a href="">HDCMS</a>;

^ 以指定值开头的元素

h2[name^="hdcms"] {
  color: red;
}
...
  <h2
  name="houdunren"
  > houdunren.com</h2
  > <h2
  name="hdcms.com"
  > hdcms.com</h2
  >;

$ 以指定值结尾的元素

<h2
  name="houdunren"
  > houdunren.com</h2
  > <h2
  name="hdcms.com"
  > hdcms.com</h2
  > ...
  h2[name$="com"] {
  color: red;
}

* 属性内部任何位置出现值的元素

h2[name*="houdunren"] {
  color: red;
}
...
  <h2
  name="houdunren"
  > houdunren.com</h2
  > <h2
  name="houdunren.com"
  > hdcms.com</h2
  >;

~ 属性值中包含指定词汇的元素

h2[name~="houdunren"] {
  color: red;
}
...
  <h2
  name="houdunren"
  > houdunren.com</h2
  > <h2
  name="houdunren web"
  > hdcms.com</h2
  >;

| 以指定值开头或以属性连接破折号的元素

h2[name|="houdunren"] {
  color: red;
}
...
  <h2
  name="houdunren"
  > houdunren.com</h2
  > <h2
  name="houdunren-web"
  > hdcms.com</h2
  >;

#open in new window伪类选择器

为元素的不同状态或不确定存在的元素设置样式规则。

状态	示例	说明
:link	a:link	选择所有未被访问的链接
:visited	a:visited	选择所有已被访问的链接
:hover	a:hover	鼠标移动到元素上时
:active	a:active	点击正在发生时
:focus	input::focus	选择获得焦点的 input 元素
:root	:root	选择文档的根元素即 html。
:empty	p:empty	选择没有子元素的每个元素（包括文本节点）。
:first-child	p:first-child	选择属于父元素的第一个子元素的每个元素
:last-child	p:last-child	选择属于其父元素最后一个子元素每个元素。
:first-of-type	p:first-of-type	选择属于其父元素的首个元素的每个元素
:last-of-type	p:last-of-type	选择属于其父元素的最后元素的每个元素。
:only-of-type	p:only-of-type	选择属于其父元素唯一的元素的每个元素。
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个元素。
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个元素。
:nth-child(odd)	p:nth-child(odd)	选择属于其父元素的奇数元素。
:nth-child(even)	p:nth-child(even)	选择属于其父元素的偶数元素。
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个元素的每个元素。
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。
:not(selector)	:not(p)	选择非元素的每个元素

#open in new window:超链接伪类

定义链接的不同状态

a:link {/*连接*/
    color: red
}

a:visited {  /* 访问 */
    color: green
}

a:hover {/*盘旋*/
    color: blue
}

a:active {/*活跃*/
    color: yellow
}

<a href="https://www.houdunren.com">厚道人</a>

不只是链接可以使用伪类，其他元素也可以使用。下面是对表单的点击与获取焦点状态的样式设置。

input:focus {/*焦点*/
    background: green;
}

input:hover {
    background: blue;
}

input:active {/*活跃*/
    background: yellow;
}

<input type="text">

#open in new window:target

用于控制具有锚点目标元素的样式(定位到锚点后才会触发 target color:red)

div {
    height: 900px;
}

div:target {/*目标，点击达到目标才触发*/
    color: red;
}


<a href="#hdcms">hdcms</a>
<div></div>
<div id="hdcms">
    hdcms内容管理系统
</div>

#open in new window:root

根元素选择伪类即选择 html

:root {
  font-size: 100px;
}

#open in new window:empty

没有内容和空白的元素。下面第一个 p 标签会产生样式，第二个不会因为有空白内容

:empty {
  border: solid 2px red;
}
... <p > </p > <p > </p >;

#open in new window结构伪类

下面来通过结构伪类选择器选择树状结构中的标签元素。

#open in new window:first-child

选择元素中span 标签并且是第一个。

article span:first-child {
  color: red;
}
...
  <article
  > <span
  > houdunren.com</span
  > <aside
  > <span
  > houdunwang.com</span
  > <span
  > hdcms.com</span
  > </aside
  > </article
  >;

#open in new window:first-of-type

选择类型是span 的第一个元素

article span:first-of-type {
  color: red;
}
...
  <article
  > <span
  > houdunren.com</span
  > <aside
  > <strong
  > hdcms.com</strong
  > <span
  > houdunwang.com</span
  > </aside
  > </article
  >;

#open in new window:last-child

选择元素中span 标签并且是最后一个。

article span:last-child {
  color: red;
}
...
  <article
  > <span
  > houdunren.com</span
  > <aside
  > <strong
  > hdcms.com</strong
  > <span
  > houdunwang.com</span
  > </aside
  > <span
  > hdphp.com</span
  > </article
  >;

#open in new window:last-of-type

选择类型为span 的最后一个元素

article span:last-of-type {
  color: red;
}
...
  <article
  > <span
  > houdunren.com</span
  > <aside
  > <span
  > houdunwang.com</span
  > <strong
  > hdcms.com</strong
  > </aside
  > <span
  > hdphp.com</span
  > </article
  >;

#open in new window:only-child

选择是唯一子元素的span 标签

article span:only-child {
  color: red;
}
...
  <article
  > <span
  > houdunren.com</span
  > <aside
  > <span
  > houdunwang.com</span
  > </aside
  > </article
  >;

#open in new window:only-of-type

选择同级中类型是span 的唯一子元素

article span:only-of-type {
  color: red;
}
...
  <article
  > <span
  > houdunren.com</span
  > <aside
  > <span
  > houdunwang.com</span
  > <span
  > hdcms.com</span
  > </aside
  > </article
  >;

#open in new window:nth-child(n)

选择第二个元素并且是 span 标签的

article span:nth-child(2) {
  color: red;
}
...
  <article
  > <span
  > houdunren.com</span
  > <aside
  > <span
  > houdunwang.com</span
  > <span
  > hdcms.com</span
  > </aside
  > <span
  > hdphp.com</span
  > </article
  >;

#open in new window:nth-of-type(n) (不生效)

选择第二个span 元素，不管中间的其他元素

article span:nth-of-child(2) {
  color: red;
}
...
  <article
  > <span
  > houdunren.com</span
  > <aside
  > <span
  > houdunwang.com</span
  > <span
  > hdcms.com</span
  > </aside
  > <span
  > hdphp.com</span
  > </article
  >;

#open in new window计算数量

n 为 0/1/2/3... ，下面是隔列变色

table tr > td:nth-child(2n + 1) {
  background: green;
  color: white;
}
...
  <table
  border="1"
  > <tr
  > <td
  > houdunren.com</td
  > <td
  > hdcms.com</td
  > <td
  > 厚道人</td
  > <td
  > houdunwang.com</td
  > <td
  > hdcms</td
  > </tr
  > </table
  >;

从第三个开始设置样式

table tr > td:nth-child(n + 3) {
  background: rgb(128, 35, 2);
  color: red;
}

设置前三个元素

table tr > td:nth-child(-n + 3) {
  background: rgb(128, 35, 2);
  color: white;
}

#open in new window奇数元素

选择奇数单元格

table tr > td:nth-child(odd) {
  background: green;
  color: white;
}
...
  <table
  border="1"
  > <tr
  > <td
  > houdunren.com</td
  > <td
  > hdcms.com</td
  > <td
  > 厚道人</td
  > <td
  > houdunwang.com</td
  > <td
  > hdcms</td
  > </tr
  > </table
  >;

#open in new window偶数元素

选择偶数单元格

table tr > td:nth-child(even) {
  background: green;
  color: white;
}
...
  <table
  border="1"
  > <tr
  > <td
  > houdunren.com</td
  > <td
  > hdcms.com</td
  > <td
  > 厚道人</td
  > <td
  > houdunwang.com</td
  > <td
  > hdcms</td
  > </tr
  > </table
  >;

#open in new window:nth-last-child(n)

从最后一个元素开始获取

table tr > td:nth-last-child(2n + 1) {
  background: green;
  color: white;
}
...
  <table
  border="1"
  > <tr
  > <td
  > houdunren.com</td
  > <td
  > hdcms.com</td
  > <td
  > 厚道人</td
  > <td
  > houdunwang.com</td
  > <td
  > hdcms</td
  > </tr
  > </table
  >;

取最后两个元素

main > ul li:nth-last-child(-n + 2) {
  color: red;
}

#open in new window:nth-last-of-type(n)

从最后一个元素开始选择span 标签。

article span:nth-last-of-type(1) {
  background: red;
  color: white;
}
...
  <article
  > <aside
  > <span
  > houdunren.com</span
  > <span
  > houdunwang.com</span
  > <strong
  > hdcms.com</strong
  > </aside
  > <span
  > hdphp.com</span
  > </article
  >;

#open in new window:not(selector)

排除第一个 li 元素

ul li:not(:nth-child(1)) {
  background: red;
}
...
  <ul
  > <li
  > houdunren.com</li
  > <li
  > hdcms.com</li
  > <li
  > 厚道人</li
  > </ul
  >;

#open in new window表单伪类

选择器	示例	说明
:enabled	input:enabled	选择每个启用的 input 元素
:disabled	input:disabled	选择每个禁用的 input 元素
:checked	input:checked	选择每个被选中的 input 元素
:required	input:required	包含`required`属性的元素
:optional	input:optional	不包含`required`属性的元素
:valid	input:valid	验证通过的表单元素
:invalid	input:invalid	验证不通过的表单

#open in new window表单属性样式

input:enabled {
  background: red;
}

input:disabled {
  background: #dddddd;
}

input:checked + label {
  color: green;
}
...
  <input
  type="text"
  disabled
  > <input
  type="text"
  name="info"
  > <input
  type="radio"
  name="sex"
  checked
  id="boy"
  > <label
  for="boy"
  > 男</label
  > <input
  type="radio"
  name="sex"
  checked
  id="girl"
  > <label
  for="girl"
  > 女</label
  >;

#open in new window表单必选样式

input:required {
  border: solid 2px blue;
}

input:optional {
  background: #dcdcdc;
  border: none;
}
... <input type="text" name="title" required > <input type="text" name="name" >;

#open in new window表单验证样式

input:valid {
  border: solid 10px green;
}

input:invalid {
  border: solid 10px red;
}
... <form > <input type="email" > <button > 保存</button > </form >;

#open in new window字符伪类

状态	示例	说明
::first-letter	p:first-letter	选择每个元素的首字母
::first-line	p:first-line	选择每个元素的首行
::before	p:before	在每个元素的内容之前插入内容
::after	p:after	在每个元素的内容之后插入内容

#open in new window首字母大写

p::first-line {
  font-size: 100px;
}
... <p > 厚道人不断跟新视频教程 厚道人不断跟新视频教程 </p >;

#open in new window段落首行处理

p::first-letter {
  font-size: 30px;
}
... <p > 厚道人不断更新视频 </p >;

#open in new window在元素前添加

span::before {
  content: "⇰";
  color: red;
}
span::after {
  content: "⟲";
  color: green;
}
... <span > 厚道人</span >;

#open in new window搜索框示例

div {
  border: solid 1px #ddd;
  width: 150px;
}

div > input[type="text"] {
  border: none;
  outline: none;
  width: 80%;
}

div > input[type="text"] + span:after {
  content: "\21AA";
  font-size: 14px;
  cursor: pointer;
}
... <div > <input type="text" > <span > </span > </div >;

#open in new window添加属性内容

h2::before {
  content: attr(title);
}
... <h2 title="厚道人" > houdunren.com</h2 >;

元素权重

houdunren.com (opens new window)open in new window@ 大军大叔

元素会被多个样式一层层作用，这就是层叠样式表的来源。如果多个样式做用在元素上就会产生优先级权重问题。

使用类、ID、伪类都有不同的权重，具体应用哪条规则要看权限大小。

相同权重的规则应用最后出现的
可以使用 !important 强制提升某个规则的权限

#open in new window权重应用

规则	粒度
ID	0100
class，类属性值	0010
标签,伪元素	0001
*	0000
行内样式	1000

下面是 ID 权限大于 CLASS 的示例

<style>
  .color {
      color: red;
  }

  #hot {
      color: green;
  }
</style>

<h2 class="color" id="hot">HDCMS</h2>

属性权重的示例

<style>
  /* 权重:0021 */
  h2[class="color"][id] {
        color: red;
  }

  /* 权重:0012 */
  article h2[class="color"] {
      color: blue;
  }
</style>

<article>
    <h2 class="color" id="hot">HDCMS</h2>
</article>

行级权重优先级最高

<style>
  /* 权重:0012 */
  article h2[class="color"] {
      color: blue;
  }

  #hot {
      color: black;
  }
</style>

<h2 class="color" id="hot" style="color:green;">HDCMS</h2>

#open in new window强制优先级

有时在规则冲突时，为了让某个规则强制有效可以使用 !important。

<style>
  h2 {
      color: red !important;
  }

  h2 {
      color: green;
  }
</style>

<h2>HDCMS</h2>

两条规则权限一样，默认应用第二个规则，但第一个规则使用了!important 提升了权限，所以被应用。

#open in new windowLESS

为了使 CSS 更易维护和扩展，并减少在书写规则时对权重的思考，使用 LESS 是不错的主意。

很多软件提供了自动生成 LESS 的功能，下面是在 VSCODE 中使用的方法。

安装插件 easy-less 编译 LESS(opens new window)open in new window
编辑扩展名为 .less 的文件将自动生成同名的 .css 文件。

下面是一个 LESS 的示例

main {
  article {
    h1 {
      color: red;
    }
  }
}

将生成 css 文件如下

main article h1 {
  color: red;
}

#open in new window继承规则

子元素可以继承父元素设置的样式。

子元素并不是全部样式。比如边框、高度等并不会继承。
继承的规则没有权重

<style>
  article {
    color: red;
    border: solid 1px #ddd;
  }
</style>
...

<article>
    <h2>hdcms <span>内容管理系统</span></h2>
</article>

上例中 h2 标签没有设置颜色样式，将继承 html 的颜色，并且边框没有产生继承。

#open in new window通配符

在开发中使用* 选择器会有一个问题。因为通配符的权限为 0，而继承的规则没有权重，看以下代码产生的问题。

<style>
  * {
      color: red;
  }

  h2 {
      color: blue;
  }
</style>

<article>
    <h2>hdcms <span>内容管理系统</span></h2>
</article>

h2 中的 span 并没有继承 h2 的颜色，就是因为继承没有权重。而使用了 * 权重为 0 的规则。

字体设置

可以定义多个字体，系统会依次查找，比如 'Courier New' 字体不存在将使用 Courier 以此类推。

要使用通用字体，比如你电脑里有 厚道人宋体 在你电脑可以正常显示，但不保证在其他用户电脑可以正常，因为他们可能没有这个字体。

font-family: "Courier New", Courier, monospace;

自定义字体

可以声明自定义字段，如果客户端不存在将下载该字体，使用方式也是通过 font-family 引入。

<style>
  @font-face {
      font-family: "houdunren";
      src:     url("SourceHanSansSC-Light.otf") format("opentype"),
                  url("SourceHanSansSC-Heavy.otf") format("opentype");
  }

  span {
      font-family: 'houdunren';
  }
</style>

字体	格式
.otf	opentype
.woff	woff
.ttf	truetype
.eot	Embedded-opentype

不建议使用中文字体，因为文件太大且大部分是商业字体。

#open in new window字重定义

字重指字的粗细定义。取值范围 normal | bold | bolder | lighter | 100 ~900。

400 对应 normal,700 对应 bold ，一般情况下使用 bold 或 normal 较多。

<style>
span {
    font-weight: bold;
}

strong:last-child {
    font-weight: normal;
}
</style>
...

<span>houdunren.com</span>
<strong>hdcms.com</strong>

#open in new window文本字号

百分数

百分数是子元素相对于父元素的大小，如父元素是 20px，子元素设置为 200%即为你元素的两倍大小。

<style>
  article {
      font-size: 20px;
  }

  span {
      font-size: 500%;
  }
</style>
...

<article>
    <span>houdunren.com</span>
</article>

em 单位等同于百分数单位。

<style>
  article {
      font-size: 20px;
  }

  span {
      font-size: 5em;
/* 相当于 font-size: 500%; */
  }
</style>
...

<article>
    <span>houdunren.com</span>
</article>

#open in new window文本颜色

字符串颜色

可以使用如 red | green 等字符颜色声明

color: red;

使用十六进制网页颜色

color: #ddffde;

如果颜色字符相同如 #dddddd 可以简写为 #ddd

使用 RGB 颜色

color: rgb(38, 149, 162);

透明颜色

透明色从 0~1 间，表示从透明到不透明

color: rgba(38, 149, 162, 0.2);

#open in new window行高定义

div {
  line-height: 2em;
}

#open in new window倾斜风格

字符的倾斜样式控制

<style>
  span {
      font-style: italic;
  }

  em {
      font-style: normal;
  }
</style>
...

<span>houdunren.com</span>
<hr>
<em>hdcms.com</em>

#open in new window组合定义

可以使用 font 一次将字符样式定义，但要注意必须存在以下几点：

必须有字体规则
必须有字符大小规则

span {
  font: bold italic 20px/1.5 "Courier New", Courier, monospace;
}
... <span > houdunren.com</span >;

上例中的 20px 为字体大小，1.5 为 1.5 倍行高定义

#open in new window文本样式

#open in new window大小转换

小号大写字母

span {
  font-variant: small-caps;
}
... <span > houdunren.com</span >;

字母大小写转换

<style>
h2 {
  /* 首字母大小(单词首字母大写) */
  text-transform: capitalize;

  /* 全部大小 */
  text-transform: uppercase;

  /* 全部小写 */
  text-transform: lowercase;
  }
</style>

#open in new window文本线条

添加隐藏删除线

a {
  text-decoration: none;
}

span.underline {
  text-decoration: underline;
}

span.through {
  text-decoration: line-through;
}

span.overline {
  text-decoration: overline;
}
...
  <a
  href=""
  > houdunren.com</a
  > <hr
  > <span
  class="underline"
  > 下划线</span
  > <hr
  > <span
  class="through"
  > 删除线</span
  > <hr
  > <span
  class="overline"
  > 上划线</span
  >;

#open in new window阴影控制

参数顺序为：颜色，水平偏移，垂直偏移，模糊度。

<style>
  h2 {
      text-shadow: rgba(13, 6, 89, 0.8) 3px 3px 5px;
  }
</style>
...

<h2>houdunren.com</h2>

#open in new window空白处理

使用 white-space 控制文本空白显示。

选项	说明
pre	保留文本中的所有空白，类似使用 pre 标签
nowrap	禁止文本换行
pre-wrap	保留空白，保留换行符
pre-line	空白合并，保留换行符

h2 {
  white-space: pre;
  width: 100px;
  border: solid 1px #ddd;
}
... <h2 > hou dunren .com</h2 >;

#open in new window文本溢出

下面来学习文本溢出时的控制

单行文本

溢出文本容器后换行处理

h2 {
  overflow-wrap: break-word;
  width: 100px;
  border: solid 1px #ddd;
}
... <h2 > houdunren.com</h2 >;

溢出内容末尾添加 ...

<style>
  div {
    width: 200px;
    border: solid 1px blueviolet;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
<div>
  厚道人自2010年创立至今，免费发布了大量高质量视频教程，视频在优酷、土豆、酷六等视频网站均有收录，很多技术爱好者受益其中。除了免费视频外，厚道人还为大家提供了面授班、远程班、公益公开课、VIP系列课程等众多形式的学习途径。厚道人有一群认真执着的老师，他们一心为同学着想，将真正的知识传授给大家是厚道人永远不变的追求。
</div>

多行文本

控制多行文本溢出时添加 ...

<style>
 div{
  width: 200px;
  border:solid 1px blueviolet;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
 }
</style>
<div>
厚道人自2010年创立至今，免费发布了大量高质量视频教程，视频在优酷、土豆、酷六等视频网站均有收录，很多技术爱好者受益其中。除了免费视频外，厚道人还为大家提供了面授班、远程班、公益公开课、VIP系列课程等众多形式的学习途径。厚道人有一群认真执着的老师，他们一心为同学着想，将真正的知识传授给大家是厚道人永远不变的追求。
</div>

显示结果如下

表格文本溢出

表格文本溢出控制需要为 table 标签定义 table-layout: fixed; css 样式，表示列宽是由表格和单元格宽度定义。

<style>
  table {
    table-layout: fixed;
  }

  table tbody tr td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

#open in new window段落控制

#open in new window文本缩进

控制元素部的文本、图片进行缩进操作

<style>
  p {
      text-indent: 2em;
  }
</style>
<p>
厚道人自2010年创立至今，免费发布了大量高质量视频教程，视频在优酷、土豆、酷六等视频网站均有收录，很多技术爱好者受益其中。除了免费视频外，厚道人还为大家提供了面授班、远程班、公益公开课、VIP系列课程等众多形式的学习途径。厚道人有一群认真执着的老师，他们一心为同学着想，将真正的知识传授给大家是厚道人永远不变的追求。
</p>

#open in new window水平对齐

使用 left|right|center 对文本进行对齐操作

h2 {
  text-align: center;
}
... <h2 > houdunren.com</h2 >;

为了让段落内容看得舒服，需要设置合适的行高

p {
  text-indent: 2em;
  line-height: 2em;
}
...
  <p
  > 厚道人自2010年创立至今，免费发布了大量高质量视频教程，视频在优酷、土豆、酷六等视频网站均有收录，很多技术爱好者受益其中。除了免费视频外，厚道人还为大家提供了面授班、远程班、公益公开课、VIP系列课程等众多形式的学习途径。厚道人有一群认真执着的老师，他们一心为同学着想，将真正的知识传授给大家是厚道人永远不变的追求。
  </p
  >;

#open in new window垂直对齐

使用 vertical-align 用于定义内容的垂直对齐风格，包括middle | baseline | sub | super 等。

图像在段落中居中对齐

img {
  height: 50px;
  width: 50px;
  vertical-align: middle;
}
...
  <p
  > <img
  src="houdunren.jpg"
  > 厚道人自2010年创立至今，免费发布了大量高质量视频教程，视频在优酷、土豆、酷六等视频网站均有收录，很多技术爱好者受益其中。除了免费视频外，厚道人还为大家提供了面授班、远程班、公益公开课、VIP系列课程等众多形式的学习途径。厚道人有一群认真执着的老师，他们一心为同学着想，将真正的知识传授给大家是厚道人永远不变的追求。
  </p
  >;

顶部与底部对齐

bottom | top 相对于行框底部或顶部对齐。

h2 > span {
  vertical-align: bottom;
  font-size: 12px;
}
... <h2 > houdunren.com <span > hdcms</span > </h2 >;

使用单位对齐

可以使用具体数值设置对齐的位置。

h2 > span {
  vertical-align: -20px;
  font-size: 12px;
}

#open in new window字符间隔

单词与字符间距

使用 word-spacing 与 letter-spacing 控制单词与字符间距。

h2 {
  word-spacing: 2em;
  letter-spacing: 3em;
}

#open in new window排版模式

模式	说明
horizontal-tb	水平方向自上而下的书写方式
vertical-rl	垂直方向自右而左的书写方式
vertical-lr	垂直方向内内容从上到下，水平方向从左到右

div {
  height: 200px;
  border: solid 1px #ddd;
  writing-mode: vertical-rl;
}
...
  <div
  > 厚道人自2010年创立至今，免费发布了大量高质量视频教程，视频在优酷、土豆、酷六等视频网站均有收录，很多技术爱好者受益其中。除了免费视频外，厚道人还为大家提供了面授班、远程班、公益公开课、VIP系列课程等众多形式的学习途径。厚道人有一群认真执着的老师，他们一心为同学着想，将真正的知识传授给大家是厚道人永远不变的追求。
  </div
  >;

# css:选择器;表单伪类;文本控制

# 外部样式

# 嵌入样式

# 内联样式

# 导入样式

# 初始样式

# 选择器

# 基本选择器

# 标签选择

# 类选择器

# ID 选择器

# #open in new window结构选择器

# #open in new window后代选择器

# #open in new window子元素选择

# #open in new window紧邻兄弟元素

# #open in new window后面兄弟元素

# #open in new window属性选择器

# #open in new window伪类选择器

# #open in new window:超链接伪类

# #open in new window:target

# #open in new window:root

# #open in new window:empty

# #open in new window结构伪类

# #open in new window:first-child

# #open in new window:first-of-type

# #open in new window:last-child

# #open in new window:last-of-type

# #open in new window:only-child

# #open in new window:only-of-type

# #open in new window:nth-child(n)

# #open in new window:nth-of-type(n) (不生效)

# #open in new window计算数量

# #open in new window奇数元素

# #open in new window偶数元素

# #open in new window:nth-last-child(n)

# #open in new window:nth-last-of-type(n)

# #open in new window:not(selector)

# #open in new window表单伪类

# #open in new window表单属性样式

# #open in new window表单必选样式

# #open in new window表单验证样式

# #open in new window字符伪类

# #open in new window首字母大写

# #open in new window段落首行处理

# #open in new window在元素前添加

# #open in new window搜索框示例

# #open in new window添加属性内容

# 元素权重

# #open in new window权重应用

# #open in new window强制优先级

# #open in new windowLESS

# #open in new window继承规则

# #open in new window通配符

# 字体设置

# #open in new window字重定义

# #open in new window文本字号

# #open in new window文本颜色

# #open in new window行高定义

# #open in new window倾斜风格

# #open in new window组合定义

# #open in new window文本样式

# #open in new window大小转换

# #open in new window文本线条

# #open in new window阴影控制

# #open in new window空白处理

# #open in new window文本溢出

# #open in new window段落控制

# #open in new window文本缩进

# #open in new window水平对齐

# #open in new window垂直对齐

# #open in new window字符间隔

# #open in new window排版模式