Html笔记 –

最新推荐文章于 2024-10-09 11:42:00 发布

胖汤圆stal

最新推荐文章于 2024-10-09 11:42:00 发布

阅读量422

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/u010528989/article/details/104326304

版权

笔记专栏收录该内容

3 篇文章 2 订阅

订阅专栏

HTML 基础

HTML 规范

文件名格式： 全部使用小写字母，用短横线分隔单词，不能有空格，用 .html 作为扩展名。

文件结构：

index.html ：通常将包括你的主页内容。
images文件夹：包含你网页上所有使用的图像。
styles 文件夹：包含为你的内容添加样式的样式表（比如，设置文本颜色和背景颜色）。
scripts 文件夹：包含所有为你网页添加交互功能的 JavaScript 代码（比如点击时读取数据的按钮）。

文件路径：

引用一个位于调用的 HTML 文件同级目录的目标文件，只需直接使用文件名，比如 my-image.jpg 。
引用一个子目录的文件，在路径前写下目录名并加一个斜杠，比如 subdirectory/my-image.jpg 。
引用一个位于调用的 HTML 文件的父级目录的目标文件。每个 ../ 都表示“到当前文件的上一层”，因此，../../会向上走两级，../../../ 会向上走三级。

HTML 基本概念

1.标签

HTML使用标记标签来描述网页。
标签的组成：元素、属性和值。
标签的结构：
<标签名>标签内容</标签名>
<标签名 />

2.元素
HTML 元素以开始标签起始，以结束标签终止，元素的内容是开始标签与结束标签之间的内容，开始标签、结束标签与内容相结合，便是一个完整的元素。大多数 HTML 元素可拥有属性。
空元素：不包含任何内容的元素称为空元素，例如<img>元素。

<h1>一级标题</h1> h1就称为元素
<p>我是一个<em>段落</em></p> em是p的子元素，p是em的父元素。
<body> <p><em>内容</em></p> </body> body是p和em的祖先元素，p和em是body的后代元素。

3.属性

通过属性为HTML元素提供附加信息。
属性需要设置在开始标签或自结束标签中。
属性总是以名称/值对的形式出现。 name=“value”
注：属性值应该始终被包括在引号内；多个属性之间使用空格符隔开。

 <h1 title="我是一个标题">标题</h1> <img src="" alt="" />

属性	描述
id	id属性作为标签的唯一标识，在同一个网页中不能出现相同的id属性值。
class	为标签分组，拥有相同class属性的标签为一组，可以出现相同的class属性，可以为一个元素指定多个class。
title	指定标签的标题，指定title以后，鼠标移入到元素上方时，会出现提示文字。
style	规定元素的行内样式（inline style）

4.布尔属性

没有值的属性，只有和它的属性名相同的属性值，这种属性称为布尔属性。
例如disabled属性，可以标记表单输入使之变为不可用(变灰色)，此时用户不能向他们输入任何数据。

<!-- 使用disabled属性来防止终端用户输入文本到输入框中 -->
<input type="text" disabled>

<!-- 下面这个输入框没有disabled属性，所以用户可以向其中输入 -->
<input type="text">

HTML 简单网页内容

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>测试页面</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="测试图片">
  </body>
</html>

<!DOCTYPE html>

声明页面为HTML5文档，不区分大小写。

<HTML>标签

作用：告诉浏览器这个文档中包含的信息是用HTML编写的。
用法：
– 所有的网页的内容都要编写到html标签中。
– 一个页面中html标签只能有一个。
– html标签中有两个子标签head和body。

<head>标签

作用：标签中内容不是展现给用户的，包含面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等。
用法： head标签作为html标签的子元素的出现，一个网页中只能有一个head。

<meta charset="utf-8">

指定了当前文档使用 UTF-8 字符编码。

<body>标签

设置网页的主体，该元素包含期望让用户在访问页面时看到的内容，可以是文本、图像、视频、游戏、可播放的音轨或其他内容。

HTML 头部

<title>标签

作用：
– 表示网页的标题，一般会在网页的标题栏上显示。
– title标签中的文字，是页面优化的最重要因素。在搜索引擎会检索。
用法：
– 建议将title标签紧贴着head标签编写，搜索引擎可以快速检索到标题标签。
– 网站中的多个页面的title也不应该重复，这样不利于搜索隐藏检索。

<meta />标签

作用：
– 提供元数据。元数据也不显示在页面上，但会被浏览器解析。
– META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者和其他元数据。
– 一般放置于<head>区域
用法：

1.设置页面的字符集 
<meta charset="utf-8"> 
	常用字符集：
		a. utf-8: 包含全世界所有的符号。
		b. ansi: 不支持中文的，英文。
		c. gb2312：中国的编码，中文。
2. 为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
3.为网页定义描述内容:
<meta name="description" content="Free Web tutorials on HTML and CSS">
4.定义网页作者:
<meta name="author" content="Hege Refsnes">
5.每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30;url=地址"/>

HTML 文本

<h1>~<h6>标题标签

h1~ h6 都是网页中的标题标签，用来表示网页中的一个标题，不同的是，从h1~h6重要性越来越低。
标题标签相当于正文的标题，通常认为重要性仅次于页面的title。
一般标题标签我们只会使用到h3，h3以后的标题标签对于搜索引擎没有什么意义。
一个页面中只会使用一个h1标签。

<p>段落标签

表示网页中的一个段落。
一般浏览器会在段落的前和后各加上一个换行，也就是段落会在页面中自成一行。

HTML 图片

<img>元素

作用：用来向页面中引入一张外部的图片
属性：
– src: 指向一个外部的图片的路径。一般使用相对路径。
– alt : 用来设置在当图片不能显示时，对图片的描述。搜索引擎可以通过alt属性来识别不同的图片。
– width：修改图片的宽，单位：一般使用px。
– height：修改图片的高度。
注：图片修改大小，尽量只给一个值（宽度或者高度），另外一个值会根据图片的原始尺寸等比例缩放，不会失真。
– align:设置图像对齐。center(居中)或right(右侧)
– border:设置图像边框，值为0表示图片周围没有边框。
语法：
<img src="url" alt="some_text" border="0" align="right">

<figure>元素

经常与<figcaption> 配合使用, 并且作为一个独立的引用单元在主文中,可以引用的图片，插图，表格，代码段等等

<figcaption>元素

是与其相关联的图片的说明/标题，用于描述其父节点<figure>元素里的其他数据。

<figure>
  <img src="dinosaur_small.jpg"
     alt="一只恐龙头部和躯干的骨架"
     width="400"
     height="341">
  <figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>

HTML 超链接

作用：
– 从一个页面指向另一个目的端的链接。
– 当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

属性：
– href: 指向一个链接跳转的目标地址。一般使用相对路径。
– title：为超链接声明额外的信息。当鼠标悬停在超链接上面时，这部分信息将以工具提示的形式显示。
– target ：定义被链接的文档在何处显示，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。
– download ：当您链接到要下载的资源，而不是在浏览器中打开时，使用 download 属性来提供一个默认的保存文件名。

<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
   download="firefox-latest-64bit-installer.exe">
  Download Latest Firefox for Windows (64-bit) (English, US)
</a>

默认情况下，链接将以以下形式出现在浏览器中：
– 一个未访问过的链接显示为蓝色字体并带有下划线。
– 访问过的链接显示为紫色并带下划线。
– 点击链接时，链接显示为红色并带下划线。

用法：

如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。当点击超链接后，会自动跳转到当前页面的顶部。
可将某元素id设为xxx，将链接标签的href属性值定义为“#id属性值”(即href="#id属性值")，会自动跳转到id为xxx的元素位置。
发送电子邮件的超链接,点击链接后可以自动打开计算机中默认的邮件客户端。href="mailto:邮件地址"

在HTML文档中插入ID:   
<a id="tips">Useful Tips Section</a>
在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：    
<a href="https://www.w3cschool.cn/html/html-links.html#tips">Visit the Useful Tips Section</a>
或者，从另一个页面创建一个链接到"有用的提示(id="tips"）部分"：  
<a href="//www.w3cschool.cn/html_links.html#tips"> Visit the Useful Tips Section</a>

HTML 文本标签

`标签名`	概述	显示结果
`<hr>`	水平线	自结束标签
`<br>`	换行符	自结束标签
`<b>`	粗体	加粗
`<i>`	斜体	斜体
`<strong>`	语义强调	以粗体方式表现
`<em>`	语气强调	以斜体方式表现
`<u>`	下划线	下划线
`<small>`	小号字	包括版权信息、合同中小字
`<cite>`	引用引证	书名、歌名、电影名
`<blockquote>`	引用	长引用
`<q>`	行内引用	自动加引号
`<sub>`	下标	H₂O
`<sup>`	上标	2²
`<ins>`	插入	自动添加下划线
`<del>`	删除	~~17.75~~
`<code>`	计算机代码	`if(i!=0)`
`<pre>`	预格式文本	保存原格式
`<mark>`	突出显示文本	荧光笔

<abbr>：用来包裹一个缩略语或缩写，并且提供缩写的解释（包含在title属性中）。

<abbr title="超文本标记语言（Hypertext Markup Language）">HTML</abbr>

<address>：添加作者联系信息。输入作者的电子邮件地址、指向联系信息页的链接等。元素中的文字默认以斜体显示.

<address>
	Email her at <a href="mailto:traceyw@thepaperofpapers.com">traceyw@thepaperofpapers.com</a>
</address>

<time>：标记时间和日期

<!-- 标准简单日期 -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- 只包含年份和月份-->
<time datetime="2016-01">January 2016</time>
<!-- 只包含月份和日期 -->
<time datetime="01-20">20 January</time>
<!-- 只包含时间，小时和分钟数 -->
<time datetime="19:30">19:30</time>
<!-- 还可包含秒和毫秒 -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- 日期和时间 -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>

-<dfn>：定义术语。首次定义术语通常会对其添加区别于其他文本的格式（英文通常为斜体，汉语通常为黑体或者楷体），在其后提到术语时则不再使用特殊格式。

HTML 区块

块元素

块级元素在浏览器显示时，无论内容多少，都会会独占一整行。例如：<h1>, <p>, <ul>, <table>, <div>
<div>元素
– 没有特定的含义,可以把文档分割为独立的、不同的部分。
– 主要用于文档布局。

内联元素

内联元素在浏览器显示时，只占自身大小的元素。例如：<b>, <td>, <a>, <img>, <span>
<span>元素
– 没有特定的语义。
– 主要用于选中文字，为文字来设置样式。

注：

一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含块元素。
a元素可以包含任意元素，除了他本身。
p元素不可以包含任何其他元素。

HTML 列表

无序列表

定义：使用ul标签来创建一个无序列表，使用li在ul创建一个个列表项。
通过type属性修改项目符号，可选值：
-disc（默认值）：实心的圆点“●”
-circle：空心的圆圈“○”
-square：实心的方块“■”

<ul>
	<li>列表项1<li>
	<li>列表项2<li>
	<li>列表项3<li>
</ul>

注：
①默认的项目符号一般不使用。
②如果需要设置项目符号，则可以采用为li设置背景图片的方式来设置。

<style type="text/css">
	/* 去掉项目符号*/
	ul{
		list-style: none;
	}
</style>

有序列表

定义：使用ol标签来创建一个无序列表，使用li在ul创建一个个列表项。
通过type属性修改项目符号，可选值：
-1（默认值）：阿拉伯数字
-a/A：小写或大写字母
-i/I：小写或大写的罗马数字

<ol>
     <li>行驶到这条路的尽头</li>
     <li>向右转</li>
     <li>直行穿过第一个双环形交叉路</li>
     <li>在第三个环形交叉路左转</li>
     <li>学校就在你的右边，300米处</li>
</ol>

列表可以相互嵌套

定义列表

定义：dl创建一个定义列表，其有两个子标签（dt和dd）。dt：要解释的名词，dd：该名词的具体解释。
作用：对一些词汇或内容进行定义。
注：一个术语 <dt> 可以同时有多个描述<dd>。

<dl> 
	<dt>定义项1</dt> 
	<dd>定义描述1</dd> 
	<dt>定义项2</dt> 
	<dd>定义描述2</dd> 
	<dt>定义项3</dt> 
	<dd>定义描述3</dd> 
</dl>

HTML 文本格式化

单位

像素px
百分比%
百分比是相对于父元素来说的。如果父元素使用的大小是16px，则100%就是16px，200%就是32px。
在创建一个自适应的页面时，经常使用百分比作单位。
em
em是相对于父元素说的。1em就相当于100%，2em相当于200%，1.5em相当于150%
1em = 1font-size

颜色

在CSS中可以直接使用颜色的关键字来代表一种颜色。
红色：red；蓝色：blue；绿色：green;
RGB值
①颜色的浓度需要一个0~255之间的值。
红色： RGB(255,0,0)；蓝色： RGB(0,0,255)；绿色： RGB(0.255.0);
②也可以使用0%~100%的百分比数。0%表示0，100%表示255。
红色： RGB(100%,0%,0%);
十六进制颜色
使用三组两位的十六进制数组表示一个颜色，00~ff。00表示0，ff表示255。#红色绿色蓝色
对于两位两位重复的颜色可简写。如#abc~#aabbcc

HTML 实体引用

定义：
在html中，一些如< >这种特殊字符不能被直接使用，需要使用特殊的符号来表示这种特殊字符，这种特殊字符被称为实体（转义字符）。
语法：
&实体名称;
常用类型

显示结果	`标签名`	概述
<	`<`	大于
>	`>`	小于
空格	` `	空格
©	`©`	版权符号

<p>HTML 中用 <p> 来定义段落元素。</p>

<p>HTML 中用 &lt;p&gt; 来定义段落元素</p>

在这里插入图片描述

HTML 视频

<video>标签 ：向网页中引入一个外部的视频文件。

<audio>标签 ：向网页中引入一个外部的音频文件。音视频文件引入时，默认情况下不允许用户自己控制播放停止。

属性：

controls：是否允许用户控制播放。
autoplay：使音频和视频内容立即播放，即使页面的其他部分还没有加载完全。如果设置了autoplay，则音乐在打开页面是自动播放，但是目前大多数浏览器都不会自动对音乐进行播放。
loap：音频或者视频文件循环播放。

方法一：
	<audio src="sourse/audio.mp3" autoplay></audio>

方法二：
    <audio controls>
    	<p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
        <source src="sourse/audio.mp3" type="audio/mp3">
        <source src="sourse/audio.ogg" type="audio/ogg">
    </audio>

性质

不同的浏览器对音频（视频）格式的支持不同。需要使用几个不同格式的文件来兼容不同的浏览器。如果你使用的格式都得不到浏览器的支持，那么媒体文件将不会播放。
每个<source> 标签页含有一个 type 属性，这个属性是可选的，浏览器也会通过检查这个属性来迅速的跳过那些不支持的格式。如果你没有添加 type 属性，浏览器会尝试加载每一个文件，直到找到一个能正确播放的格式，这样会消耗掉大量的时间和资源。

HTML 网页布局

基本组成部分

页眉
通常横跨于整个页面顶部有一个大标题和/或一个标志。这是网站的主要一般信息，通常存在于所有网页。
导航栏
指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致。
主内容
中心的大部分区域是当前网页大多数的独有内容，例如视频、文章、地图、新闻等。这些内容是网站的一部分，且会因页面而异。
侧边栏
一些外围信息、链接、引用、广告等。通常与主内容相关（例如一个新闻页面上，侧边栏可能包含作者信息或相关文章链接），还可能存在其他的重复元素，如辅助导航系统。
页脚
横跨页面底部的狭长区域。和标题一样，页脚是放置公共信息（比如版权声明或联系方式）的，一般使用较小字体，且通常为次要内容。还可以通过提供快速访问链接来进行 SEO。

<header>页眉

作用：展示介绍性内容，通常包含一组介绍性的或是导航性内容的区域。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称。
是简介形式的内容。如果它是 <body> 的子元素，那么就是网站的全局页眉。如果它是 <article> 或<section> 的子元素，那么它是这些部分特有的页眉。

<nav>导航栏

作用：一般仅对文档中重要的链接群使用nav。nav的链接可以指向页面中的内容，也可以指向其他页面或资源。

<main>主内容

一个页面只有一个部分代表主要内容，因此每个页面上只能用一次 <main>，且直接位于<body> 中。最好不要把它嵌套进其它元素。

<article>

包围的内容即一篇文章，与页面其它部分无关。一个页面可以有多个article元素。

<section>

与 <article> 类似，但 <section> 更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块，具有相似主题的一组内容。

<aside>侧边栏

包含一些间接信息（术语条目、作者简介、相关链接），一般将附注栏内容放在 main 的内容之后。

<footer>页脚

常包括版权声明，可能还包括指向隐私政策页面的链接以及其他类似的内容。
当它祖先元素是<body>，则它是整个页面的页脚，当它嵌套在其他元素中，则是该元素的页脚。

在这里插入图片描述

ARIA

地标角色可以帮助用户识别页面区域，从而让屏幕阅读器用户可以直接跳到这些区域。通常，对这些区域指定 role 属性。

CSS基础

CSS 规则集

选择器（Selector）
HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 h1 元素）。要给不同元素添加样式只需要更改选择器就行了。
声明（Declaration）
一个单独的规则。如 color: red; 用来指定添加样式元素的属性。
属性（Properties）
改变 HTML 元素样式的途径。（本例中 color 就是 <p> 元素的属性。）CSS 编写人员决定修改哪个属性以改变规则。
属性的值（Property value）
在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值。

css规则： 选择器以及一条或多条声明:

– 每条声明由一个属性和一个值组成。
– 每个属性有一个值，属性和值被冒号分开。
– CSS声明总是以分号(;)结束，声明组以大括号({})括起来。

CSS 添加到HTML的方法

内联样式（在HTML元素中使用"style" 属性）
注：内联样式只对当前的元素中的内容起作用，不方便服用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
</head>
<body>
	<p style="font-size: 30px;color: #2a9bff">锄禾日当午</p>
</body>
</html>

内部样式表（在HTML文档头部 <head> 区域使用<style>元素来包含CSS）
将样式表编写的style标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style type="text/css">
        p {
            font-size: 30px;
            color: #2a9bff;
        }
    </style>
</head>
<body>
	<p>锄禾日当午</p>
</body>
</html>

外部引用（使用外部 CSS 文件）
完全使结构和表现分离，最大限度的使样式服用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
	<link rel="stylesheet" type="text/css" href="01.css">
</head>
<body>
	<p>锄禾日当午</p>
</body>
</html>


p {
	font-size: 30px;
	color: #2a9bff;
}

CSS 选择器

常用选择器

元素选择器

作用：可以根据标签的名字来从页面中选取指定的元素。
比如p则会选中页面中的所有p标签，h1会选中页面中的所有h1标签。
语法：标签名{}

ID选择器

作用：根据元素的id属性值从页面中选取指定的元素。
语法：#id属性值{}

Class选择器

作用：根据元素的class属性值选取一组元素。
– 拥有相同class属性的标签为一组，可以出现相同的class属性，可以为一个元素指定多个class，用空格隔开。
语法：.className{}

选择器分组（并集选择器）

作用：通过选择器分组可以同时选中多个选择器对应的元素。
– 比如p,.hello,#box会同时选中页面中p元素， class为hello的元素，id为box的元素
语法：选择器1,选择器2,选择器3{ }

复合选择器（交集选择器）

作用：可以选择同时满足多个选择器的元素。
语法：选择器1选择器2{ }

通配选择器

作用：选中页面中的所有元素。
语法：*{}

后代选择器

作用：根据标签的关系，为处在元素内部的代元素设置样式。
– 比如p strong 会选中页面中所有的p元素内的strong元素。
语法：祖先元素后代元素后代元素{}

伪类选择器

伪类
用来添加一些选择器的特殊效果。比如访问过得超链接、未访问过的超链接

给链接定义样式

伪类	属性
`a:link`	未访问的链接
`a:visited`	访问过的链接
`a:hover`	鼠标滑过的链接
`a:active`	正在点击的链接

注：

visited伪类只能设置字体颜色
:hover和:active也可以为其他元素设置
伪类顺序：link visited hover active
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

其他伪类

伪类	属性
`-：focus`	获取焦点
`-::selection`	选中的元素

伪元素
用来表示元素中的一些特殊位置。

伪元素	属性
`-：first-letter`	首字母
`-:first-line`	首行
`-:before`	元素最前边部分
`-:after`	元素最后边部分

注：一般before和after都需要结合content这个样式一起使用，浏览器中无法选中。
p:before{
	content:"我会出现在整个段落的最前面";
	color:orange;
}

其他选择器

属性选择器

作用：根据元素中的属性或者属性值来选取指定元素。
语法：

[属性名]				含有指定属性的元素	
[属性名="属性值"] 	含有指定属性值的元素
[属性名^="属性值"] 	属性值以指定内容开头的元素
[属性名$="属性值"] 	属性值以指定内容结尾的元素
[属性名*="属性值"]	属性值以包含指定内容的元素

子元素选择器

作用：给某一元素的子元素设置样式。
– 比如body > h1将选择body子标签中的所有h1标签。
语法：父元素 > 子元素{}

 :first-child  		选择第一个子标签  
 :last-child   		选择最后一个子标签 
 :nth-child(number)   选择指定位置的子元素 
 			(even:偶数位置；odd：基数位置）
 :first-of-type  	选择当前类型的第一个子元素
 :last-of-type		选择当前类型的咱以后一个子元素
 :nth-of-type    	选择指定类型的子元素

兄弟选择器

查找后边一个兄弟元素
兄弟元素 + 兄弟元素{}
查找后边所有的兄弟元素
兄弟元素 ~ 兄弟元素{}

否定伪类

作用：从已选中的元素中剔除出某些元素。
比如p：not（.hello) 否定p中class为hello的元素
语法：:not(选择器)

选择器性质

一、继承

定义：继承是指应用在一个标签上的那些CSS样式会同时被应用到其内嵌标签上。
例：为父元素设置了字体颜色，子元素也会应用上相同的颜色。
注：并不是所有的样式都会被继承，比如：背景相关的样式都不会被继承。

二、优先级

定义：当使用不同的选择器，选中同一个元素时并且设置相同的样式，由选择器的优先级决定。
不同的选择器由不同的权重值，即优先级：
– 内联样式：权重是1000
– id选择器：权重是100
– 类、属性、伪类选择器：权重是10
– 元素选择器：权重是1
– 通配符（*）：权重是0
– 继承的样式，没有优先级
注意：
1.当选择器中包含多种选择器时，需要将多种选择器的优先级相加。
2.如果选择器的优先级一样，则使用靠后的样式。
3.并集优先级的优先级是单独计算。
4.可以在样式的最后，添加一个!important，此时该样式会获得一个最高的优先级，将会优先于所有的样式显示，甚至超过内联样式。

字体样式

在这里插入图片描述

属性	说明
font-family	字体类型
font-size	字体大小
font-weight	字体粗细
font-style	字体斜体
color	颜色

字体大小

font-size设置的并不是文字本身的大小，在页面中每个文字都是处在一个看不见的框中。
浏览器一般默认的文字大小为16px。

p{
	font-size:20px;
}

字体类型

font-family当采用某种字体时，浏览器支持则使用改字体，如果不支持，则使用默认字体，
可以指定多个字体，字体之间使用，分开，浏览器会优先使用前边的字体。
如果字体系列的名称超过一个字，它必须用引号。

p{
	font-family:"隶书",Arial;
}

字体分类

网页中将字体分为5大类，这些分类都是一些大的分类，并没有涉及具体的类型，如果将字体指定为这些格式，浏览器会自己选择指定类型的字体。
serif（衬线字体）：字符在行的末端拥有额外的装饰
sans-serif（非衬线字体）：在末端没有额外的装饰
monospace （等宽字体）：所有的等宽字符具有相同的宽度
cursive （草书字体）
fantasy （虚幻字体）

斜体

font-style用来设置文字的斜体.
可选值：
– 指定斜体：font-style:italic
– 指定非斜体：font-style:normal

粗体

font-weight用来指定文本的粗体。
可选值：
– 指定粗体：font-weight:bold
– 指定非粗体：font-weight:normal

小型大写字母

font-variant属性可以将字母类型设置为小型大写(所有字母都以大写形式显示，但小写字母的大写要比大写字母小)。
font-variant:small-cap

字母大写化

text-transform样式用于将元素中的字母全都变成大小。
可选值：
– 大写：text-transform:uppercase
– 小写：text-tansform:lowercase
– 首字母大写：text-transform:capitalize
– 正常：text-transform:none

字体属性简写

font可以一次性同时设置多个字体的样式。
语法：font:加粗斜体小型大写大小/行高字体
注：
① 加粗、斜体和小型大写的顺序无所谓，也可以不写，但是大小和字体必须写且必须写到后两个。
②不同的值之间使用空格隔开。
③此处行高使可选的，如果不指定则会使用默认值。

行间距

在CSS中没有直接修改行间距的方法，只能通过设置行高来间接的设置行间距，行高越大行间距越大。(文字默认在行高中垂直居中显示）
公式：行间距 = 行高 - 字体大小
语法：line-height: ;
可以接受的值：
①直接接收一个大小px
②指定一个百分数，就会相对于字体去计算行高
③直接传一个数值，则行高会设置字体大小相应的倍数
对于单行文本，可以将行高设置为何父元素的高度一致，这样可以使单行文本在父元素中垂直居中。

文本的修饰

text-decoration属性用来给文本添加各种修饰。通过它可以为文本的上方、下方或者中间添加线条。
可选值：
– underline：下划线（超链接默认添加下划线）
– overline：上划线
– line-through：删除线
– none

间距

letter-spacing用来设置字符之间的间距。
word-spacing用来设置单词之间的间距。
这两个属性都可以直接指定一个长度或百分数作为值。正数代表的是增加距离，而负数代表减少距离

对齐文本

text-align用于设置文本的水平对齐方式。

可选值	说明
left	左对齐
right	右对齐
justify	两边对齐
center	居中对齐

vertical-align用于元素垂直对齐的方式。

可选值	说明
baseline	默认值，基线对齐
top	顶部对齐
bottom	底部对齐
middle	居中对齐

首行缩进

text-indent用来设置首行缩进。
该样式需要指定一个长度，并且只对第一行生效。

设置网页如何处理空白

white-space

可选值	说明
normal	默认值
nowrap	不换行
pre	保留空白

p{
	width:200px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
<p>Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。</p>

在这里插入图片描述

CSS 图标字体

在网页中经常需要使用一些图标，可以通过图片来引入图标，但是图片大小本身比较大，并且非常不灵活。所以在使用图标时，可以将图标直接设置为字体，在通过font-face的形式来对字体进行引入。

fontawesome的使用步骤：

将css和webfonts移动到项目中。
将all.css引入到网页中。
使用图标字体：
– 直接通过类名来使用图标字体
– 通过伪元素来设置图标字体：
①找到要设置图标的元素通过before或after选中
②在content中设置字体的编码
③设置字体样式
– 通过实体来使用图标字体：&#x图标的编码

类名
<i class="fas fa-bell" style="font-size:60px; color:red;"></i>
伪元素
<style>
	content:'\f1b0';
	font-family:'Font Awesome 5 Brands';
	font-weight:900;
</style>
实体
<span class="fas"> &#xf0f3; </span>

iconfont的使用步骤：
– 点击图标加入库中，添加至项目；
– 图标管理>我的项目，下载至本地；
– 将除了html和demo.css，其他都填入到文件中；
– 引入文件iconfont.css

<i class="iconfont"> &#x061c; </i>

CSS 盒子模型

定义：所有HTML元素可以看作盒子，我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。
盒子的组合部分：

属性	说明
Margin（外边距）	用于定义页面中元素与元素之间的距离
Border（边框）	边框周围的填充和内容
Padding（内边距）	清除内容周围的区域
Content（内容）	显示文本和图像

在这里插入图片描述

内容区

内容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他的3部分都是可选的。
属性
– width：内容区的宽度
– height：内容区的高度
注：
①width和height只是设置盒子内容区的大小，不是盒子的整个大小。
②盒子可见框的大小由内容区、内边距和边框共同决定。
③盒子可见框的宽度 = border-left-width + padding-left-width + width + padding-right-width + border-right-width。高度类似。

边框

样式（为一个元素设置边框必须指定三个样式）
– border-width：边框宽度
– border-color：边框颜色
– border-style：边框样式
border-width可以分别指定四个边框的宽度（按顺时针方向设置）。
– 如果指定了四个值，上右下左
border-width:10px 20px 30px 40px;
– 如果指定三个值，则上左右下
border-width:10px 20px 30px;
– 如果指定2个值，则上下左右
border-width:10px 20px;
– 如果指定1个值，则上下左右
border-width:10px;
注：除了border-width,CSS还提供了四个border-xxx-width，xxx的值可能是 top right botton left，专门用来指定边的宽度。
边框颜色与边框宽度性质相似
border-style边框样式
注：大部分浏览器中，边框的宽度和颜色都是有默认值，而边框的样式默认值都是none。

{
	border-width:1px;
	border-style:solid;
	border-color:gray;
}
等价于
{
	border:1px solid gray;
	<!--
		border一指定就是同时指定四个边，不能分别指定
		但是border-top/right/bottom/left可以单独对一个边生效
	-->
	border-top:1px solid gray;
}

边距

内边距

内边距指的是盒子的内容区与盒子边框之间的距离。内边距会影响盒子可见框的大小，元素的背景会延伸到内边距。
属性：
padding - top / right / bottom / left：设置四个方向的内边距

外边距

外边距指的是盒子与其他盒子之间的距离，他不会影响可见框的大小，但是会影响到盒子的位置。
属性：
margin - top / right / bottom / left：设置四个方向的外边距
margin值还可以设为auto，一般只设置给水平方向的margin。
– 如果只指定左外边距或右外边距的margin为auto，则会将外边距设置为最大值。
– 如果垂直方向外边距设置为auto，则外边距默认为0。
– 如果将left和right同时设置为auto，则会将两侧外边距设置为相同的值，即使元素自动在父元素中居中。
垂直外边距的重叠
– 即在网页中垂直方向的相邻外边距会发生外边距的重叠
①兄弟元素之间的相邻外边距会取最大值，而不是取和
②父子元素的垂直外边距相邻，则子元素的外边距会设置给父元素。
注：
①由于页面中的元素都是靠左靠上摆放的，所以设置上和左外边框时，会导致盒子自身的位置发生变化；设置下和右外边框时，会导致其他盒子的位置发生变化。
②外边距可以指定负值，则元素会向反方向移动。

浏览器默认效果

浏览器为了页面中没有样式时，也可以有一个比较好的结果，为许多的元素都设置了一些默认的margin和padding。
正常情况下，我们不使用这些默认的样式，会将默认的样式去除。

*{
	margin:0;
	padding:0;
}

内联元素的盒模型

性质

不能设置width和height。
可以设置水平方向内边距；可以设置垂直方向内边距，但是不会影响页面布局。
可以设置水平方向边框；可以设置垂直方向边框，但是不会影响页面布局。
水平方向的相邻外边距不会重叠，而是求和；不支持垂直外边距。

盒模型补充内容

box-sizing盒子的大小:

作用：设置盒子尺寸的计算方法（设置width和height的作用）
可选值：
– content-box：默认值，宽度和高度用来设置内容区的大小。
– border-box：宽度和高度用来设置整个盒子可见框的大小。
width和height指的是内容区和内边距和边框的总大小。

outline轮廓

作用：用来设置元素的轮廓线，用法和border一样，但是不会影响到可见框的大小。

	outline:10px red solid;

box-shadow阴影

作用：用来设置元素的阴影效果，阴影不会影响页面布局。
第一个值：水平偏移量，正右负左。
第二个值：垂直偏移量，正右负左。
第三个值：阴影的模糊半径，值越大越模糊。
第四个值：阴影的颜色。

	box-shadow:10px 10px black;

border-radius圆角

作用：用来设置圆角，设置圆的半径大小
可选值：
– border-top-left-radius
– border-top-right-radius
– border-bottom-left-radius
– border-bottom-right-radius
设置圆形：border-radius:50%;

CSS 显示与可见性

display样式

作用：将一个内联元素变成块元素。
可选值：

可选值	含义
inline	设置元素为行内元素
block	设置元素为块元素
inline-block	设置元素为行内块元素(如img标签)
none	隐藏元素（元素将在页面中完全消失）

注：display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

visibility样式

作用：设置元素的隐藏和显示的状态。
可选值：

可选值	含义
visible	默认值，元素会在页面中显示
hidden	元素会隐藏不显示

注：visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

overflow样式

子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素内容区大小。如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，称为溢出的内容。
作用：设置父元素如何处理溢出内容。
可选值：

可选值	含义
visible	默认值，不会对溢出内容做处理
hidden	隐藏超出盒子的内容
scroll	不论内容是否会溢出，添加水平和垂直双方向滚动条
auto	根据需要添加滚动条

CSS 浮动

文档流

定义：
文档流处于页面的最底层，表示文档中可现实的对象在排列时所占用的位置。网页中创建的元素默认都处在文档流中。
元素在文档流的特点：
– 块元素
①独占一行，自上向下排列。
②默认宽度为父元素的100%。
③默认高度被内容撑开。
– 内联元素
①只占自身大小，自左向右排列，若一行中不足以容纳所有的内联元素，则换到下一行。
②默认宽度和高度默认都被内容撑开。
注：当元素的高度或宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度和高度，以适应内边距。

浮动： 使元素脱离原来的文本流，在父元素中浮动起来。使用float属性

float属性

可选值

可选值	含义
none	默认值，元素默认在文档流中排列
left	元素会脱离文档流，向页面的左侧浮动
right	元素会脱离文档流，向页面的右侧浮动

性质
– 当为一个元素设置浮动后（非none的值），元素会立即脱离文档流，也就是不在文档中占用位置。元素脱离文档流后，它下边还在文档流的元素会自动向上移动。
– 当元素浮动以后，会自动向页面的左上或右上漂浮，直到遇到父元素的边框或者其他浮动元素。
– 如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素。
– 浮动元素不会超过他上边的兄弟元素，最多和他一边齐。
– 浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围。可以通过浮动来设置文字环绕图片的效果。
– 元素脱离文档流后，高度和内容会被内容撑开。

高度塌陷问题

元素浮动以后即完全脱离文档流，这时不会再影响父元素的高度。也就是浮动元素不会撑开父元素。由于父元素高度塌陷了，父元素的下边元素会向上移动，页面布局会乱。

解决高度塌陷问题

可以将父元素的高度写死，避免塌陷问题出现。
给父元素的overflow属性设为hidden。（该方法不适用IE6）

在页面中元素都有一个隐含属性叫做BFC（块级格式化环境）     
   开启BFC，该元素会变成一个独立的布局区域。
– 当开启元素的BFC后，元素会有如下特性：
	①父元素的垂直外边距不会和子元素重叠
	②元素不会被浮动元素所覆盖
	③元素可以包含浮动的子元素
– 开启元素BFC的方法：
	①设置元素浮动
	②设置元素绝对定位
	③设置元素为inline-block，即行内块元素
	④将元素的overflow属性设为hidden

clear属性：
– 作用：清除浮动元素对当前元素所产生的影响。
– 原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边距，使其位置不受其他元素的影响。
– 可选值：

可选值	含义
left	清除左侧浮动元素对当前元素的影响
right	清除右侧浮动元素对当前元素的影响
both	清除两侧中最大影响的那侧的影响

clearfix类：同时解决高度塌陷和外边距重叠问题

.clearfix::before，.clearfix::after
{
	content:'';
	display:table;
	clear:both;
}
<div class ="box1 clearfix"></div>

CSS 定位

定位（position）

定义：通过定位可以将元素摆放到页面的任意位置。
可选值

可选值	含义
static	默认值，元素是静止的没有开启定位
relative	开启元素相对定位
absolute	开启元素绝对定位
fixed	开启元素固定定位
sticky	开启元素的粘滞定位

偏移量（offset）

当元素开启了定位以后，可以通过偏移量来设置元素的位置。
可选值

可选值	含义
top	定位元素和定位位置上边的距离
bottom	定位元素和定位位置下边的距离
left	定位元素和定位位置左边的距离
right	定位元素和定位位置右边的距离

相对定位

每个元素在页面的文档流中都有一个自然位置。相对于这个位置对元素进行移动就称为相对定位。周围的元素完全不受此影响。当元素的position属性值设置为relative时，开启了元素的相对定位。
特点：
①开启相对定位后，如果不设置偏移量，元素不会发生任何的变化。
②相对定位是参照于元素在文档流中的位置进行定位的。
③相对定位会提升元素的层级，使元素可以覆盖文本流中的元素。
④相对定位不会是元素脱离文档流，元素在文档流中的位置不会改变。
⑤相对定位不会改变元素的性质（行内仍是行内，块仍是块）。

绝对定位

绝对定位指使元素相对于html元素或离他最近的包含块进行定位。当将position属性设置为absolute时，则开启了元素的绝对定位。
包含块：
– 正常情况下：
包含块是离当前元素最近的祖先块元素。
– 绝对定位情况下：
离他最近的开启了定位元素的祖先元素。如果所有的祖先元素都没有开启定位，则根元素<html>就是他的包含块。
特点
①绝对定位会使元素完全脱离文本流。
②绝对定位会改变元素的性质，块元素的宽度会被其内容撑开；行内元素变成块元素。
③一般使用绝对定位时会同时为其父元素指定一个相对定位，以确保元素可以相对于父元素进行定位。

固定定位

当将position属性设置为fixed时，则开启了元素的固定定位。
固定定位的元素会被锁定在屏幕的某个位置上，当访问者滚动网页时，固定元素会在屏幕上保持不动。
其他性质和绝对定位相同。

粘滞定位

当元素的position属性设置为sticky时，则开启了元素的粘滞定位。
性质和相对定位的特点基本一致。不同的是粘滞定位可以在元素到达某个位置是将其固定。

z-index

作用：对于开启了定位的元素，可以通过z-index属性来指定元素的层级。
z-index可以指定一个整数作为参数，值越大元素显示的优先级越高，也就是z-index值较大的元素层级越高，越优先显示。
特点：
①如果元素的层级一样，会优先显示靠下的元素。
②祖先的元素的层级在高，也不会盖住后代元素。

CSS 导航条

导航条基本上是一个链接列表，使用 <ul> 和 <li> 元素.
具体步骤：

<html>
	<head>
		<meta charset="utf-8" />
		<title>导航条</title>
		<style type="text/css">
			/*从列表中删除边距和填充*/
			*{
				margin:0;
				padding:0;
			}
			.nav{
				/*移除列表前小标志。一个导航栏并不需要列表标记*/
				list-style:none;
				/*在IE6中，为元素制定了一个宽度，则会默认开启haslayout*/
				background-color:#6495ED;
				width:1000px;
				/*设置元素居中*/
				margin: 50px auto;
				/*解决高度塌陷*/
				overflow: hidden;
			}
			.nav li{
				/*设置li向左浮动*/
				float:left;
				width:25%;
			}
			.nav a{
				/*转换为块元素*/
				display:block;
				width:100%;
				/*将文字设为居中*/
				text-align: center;
				/*设置上下内边距*/
				padding:5px 0;
				/*清除下划线*/
				text-decoration:none;
				/*设置字体颜色、加粗*/
				color:white;
				font-width:bold;
			}
			/*设置a的鼠标移入效果*/
			.nav a:hover{
				background-color:#c00;
			}
		</style>
	</head>
	<body>
		<ul class="nav">
			<li><a href="#">首页</a></li>
			<li><a href="#">新闻</a></li>
			<li><a href="#">联系</a></li>
			<li><a href="#">关于</a></li>
		</ul>	
	</body>
</html>

CSS 背景

设置背景颜色

background-color: 颜色;

设置背景图片

background-image: url(地址)；
如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满；
如果背景的图片大于元素，则有一个部分背景无法显示。
可以同时设置背景图片和背景颜色，这样背景颜色会成为图片的背景色。

设置背景的重复方式

background-repeat: ;
可选值

可选值	含义
repeat	默认值，背景会沿着x轴和y轴双方向重复
repeat-x	沿着x轴方向重复
repeat-y	沿着y轴方向重复
no-repeat	背景图片不重复

设置背景图片的位置

通过top left right bottom center几个表示方位的词来设置背景图片的位置。
必须同时指定两个值，如果只写一个则第二个默认为center。
通过偏移量来指定背景图片的位置。
水平方向偏移量垂直方向偏移量

设置背景的范围

background-clip
可选值

可选值	含义
border-box	默认值，背景会出现在边框下边
padding-box	背景不会出现在边框，只出现在内容区和内边距
content-box	背景只出现在内容区

设置背景图片的偏移量计算的原点

background-origin
可选值

可选值	含义
border-box	默认值，position从边框开始计算
padding-box	position从内边距开始计算
content-box	position从边框开始计算

设置背景图片的大小

background-size
表示方法：
①第一个值表示宽度，第二个值表示高度。如果只写一个，则第二个默认值为auto。
②cover：图片比例不变，将元素填满。
③contain：图片比例不变，将图片在元素中完整显示。

设置背景图片是否跟随元素移动

background-attachment
可选值

可选值	含义
scroll	默认值，背景图片会跟随元素移动
fixed	背景会固定在页面中，不会跟随元素移动

background背景相关的简写属性

所有背景相关的样式都可以通过该样式来设置。
注：
①size必须写在position后面，并使用/隔开。
②origin必须卸载clip前边。

CSS 过渡效果

transition-property

指定要执行过渡的属性
多个属性间使用,隔开，如果所有属性都需要过渡，使用all关键词。

transition-duration

指定过渡效果的持续时间
时间单位：s、ms（1s = 1000ms）

transition-timing-function

指定过渡的执行方式
可选值

可选值	含义
ease	默认值，慢速开始，先加速，再减速
linear	匀速运动
ease-in	加速运动
ease-out	减速运动
cubic-bezier()	来指定时序函数
steps()	分布执行过渡效果

注：steps() 可以设置一个第二个值，①end：在时间结束时执行过渡（默认值）；②start：在时间开始时执行过渡。

transition-delay

过渡效果的延迟，即等待一段时间后再执行过渡。

transition

可以同时设置过渡相关的所有属性，当出现两个时间时，第一个时间是持续时间，第二个是延续时间。

CSS 动画

设置动画效果，必须要先设置一个关键帧。
– from表示动画的开始位置，也可使用0%。
– to表示动画的结束位置，也可使用100%。

@keyframes test{
	from{
		margin-left:0;
	}	
	to{
		margin-left:700px;
	}
}

为某个元素设置动画，需要使用：

animation-iteration-count

动画执行的次数
可选值：次数和infinite（无限)

animation-direction

指定动画的运行方向
可选值

可选值	含义
normal	默认值，从from向to运行，每次都一样
reverse	从to向from运行，每次都一样
alternate	从from向to运行，重复执行动画时反向执行
alternate-reverse	从to向from运行，重复执行动画时反向执行

animation-play-state

设置动画的执行状态
可选值：
– running ：默认值，动画执行
– paused ：动画暂停

animation-fill-mode

动画的填充模式
可选值

可选值	含义
none	默认值，动画执行完毕元素回到原来位置
forwards	动画执行完元素会停止在动画结束的位置
backwards	动画延时等待时，元素会处于开始位置
both	从to向from运行，重复执行动画时反向执行

<style>
	.box1{
		/* 对当前元素生效的关键帧名字 */
		animation-name:test;
		/* 动画的执行时间 */
		animation-duration:4s;
		/* 动画的延时 */
		animation-delay:2s;
		animation-iteration-count:infinite;	
		animation-direction:reverse;
	}
</style>

CSS 变形平移

变形：通过css来改变元素的形状或位置，变形不会影响到页面的布局。

transform

设置元素的变形效果
平移：
– translateX() 沿着x轴方向平移
– translateY() 沿着y轴方向平移
– translateZ() 沿着z轴方向平移
注：平移元素，百分比是相对于自身计算
XY可以设置大小未知的元素在页面中居中

left:50%;
right:50%;
transform:translateX(50%) translateY(50%);

Z轴平移，调整元素在z轴的位置，正常情况是调整元素和人眼之间的距离。
– z轴平移属于立体效果，默认情况下网页是不支持透视，如果需要看见效果，必须设置网页的视距。

/* 设置当前网页的视距为800px，人眼距离网页的距离*/
html{
	perspective:800px;
}
.box1{
	transition:2s;
}
body:hover .box1{
	transform:translateZ(200px);
}

CSS 属性

text - shadow 属性

作用：为元素中的文本提供阴影。
属性：
– 第一个值设置水平偏移值 —— 即阴影右移的像素数（负值左移）。
– 第二个值设置垂直偏移值 —— 即阴影下移的像素数（负值上移）。
– 第三个值设置阴影的模糊半径 —— 值越大产生的阴影越模糊。
– 第四个值设置阴影的基色。

常见问题

上下标会影响行间距的修复方法

	sub,
	sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
	}
	sup {
	top: -0.5em;
	}
	sub {
	bottom: -0.25em;
}

胖汤圆stal

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Html笔记 –

文章目录

HTML 基础

HTML 规范

HTML 基本概念

HTML 简单网页内容

HTML 头部

HTML 文本

HTML 图片

HTML 超链接

HTML 文本标签

HTML 区块

HTML 列表

HTML 文本格式化

HTML 实体引用

HTML 视频

HTML 网页布局

CSS基础

CSS 规则集

CSS 添加到HTML的方法

CSS 选择器

常用选择器

伪类选择器

其他选择器

选择器性质

字体样式

CSS 图标字体

CSS 盒子模型

内容区

边框

边距

浏览器默认效果

内联元素的盒模型

盒模型补充内容

CSS 显示与可见性

CSS 浮动

CSS 定位

CSS 导航条

CSS 背景

CSS 过渡效果

CSS 动画

CSS 变形平移

CSS 属性

常见问题