Xy丶Promise

HTML-CSS知识速查

HTML/CSS知识速查

文章目录

HTML/CSS知识速查

@[toc]

网页的组成

浏览器

为什么需要Web标准：

web标准的构成：

HTML

HTML语法导读

1.1 HTML语法规则：

1.2 基本结构标签

1.3 标签的关系：

1. 包含关系（Parent-Child Relationship）:

2. 并列关系（Sibling Relationship）:

HTML常用语法

2.1 标题标签

2.2 段落标签：

2.3 换行标签

2.4 文本格式化标签：

2.5 div和span标签

2.6 图片标签：

2.7 路径：

2.8 链接标签：

2.9 注释

2.10 特殊字符

2.11 表格（重点）

2.12 标签分类

CSS

一、CSS简介

1.1 CSS语法规范

1.2 CSS 注释

二、CSS选择器

CSS选择器的作用

CSS基础选择器

类选择器

多类名选择器

id选择器：

通配符选择器

序号选择器(用于定位)

选择器总结

三、CSS 伪类选择器与伪元素

1. 基本伪类选择器

2. 新增伪类选择器

3. 伪元素

四、CSS字体属性

字体大小

字体粗细

字体样式

字体的综合写法

字体总结

字体的综合写法

字体总结

网页的组成

网页是图片、链接、文字、声音、视频等元素组成, 其实就是一个html文件(后缀名为html)
网页生成制作: 有前端人员书写 HTML 文件, 然后浏览器打开,就能看到了网页.
HTML: 超文本标记语言, 用来制作网页的一门语言. 有标签组成的. 比如图片标签链接标签视频标签等…

浏览器

常用的浏览器 + IE + 火狐 + 谷歌 + 苹果 + 欧朋 - 浏览器是网页显示、运行的平台。常用的浏览器有 IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。平时称为五大浏览器。

浏览器内核（渲染引擎） + 负责读取网页内容，整理讯息，计算网页的显示方式并显示页面

+ 目前国内一般浏览器都会采用 Webkit/Blink 内核，如 360、UC、QQ、搜狗等。三、web标准：

Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

为什么需要Web标准：

浏览器不同，它们显示页面或者排版就有些许差异
遵循 Web 标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点： 1.让 Web 的发展前景更广阔。 2.内容能被更广泛的设备访问。 3.更容易被搜寻引擎搜索。 4.降低网站流量费用。 5.使网站更易于维护。 6.提高页面浏览速度。

web标准的构成：

主要包括《结构Structure》、《表现（Presentation）》和《行为（Behavior）》三个方面。

Web 标准提出的最佳体验方案：结构、样式、行为相分离。
简单理解：结构写到 HTML 文件中，表现写到 CSS 文件中，行为写到 JavaScript 文件中

结构类似身体
表现类似外观装饰
行为类似行为动作
相比较而言, 三者中结构最重要.

HTML

HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。
HTML 不是一种编程语言，而是一种标记语言 (markup language)。

标记语言是一套标记标签 (markup tag)。

HTML语法导读

1.1 HTML语法规则：

HTML 标签是由尖括号包围的关键词，例如。HTML标签关系可以是嵌套关系，也可以是并列关系

HTML中单标签和双标签的分类

单标签：只有一个标签。

常见的单标签
1. 标签：
  - 标签用于创建一个水平分割线，通常用于分隔内容或定义主题的变化。
2. 标签：
  - 标签用于插入一个换行符，使得内容能在下一行继续。
3. 标签：
  - 标签提供了有关页面的元信息，如字符集、页面描述、关键字和作者信息。它还可以用于控制浏览器行为，如设置页面的刷新率。
4. 标签：
  - 标签用于嵌入图像。它有多个属性，如 src（图像源的URL）、alt（替代文本，用于图像无法显示时）、height 和 width（用于指定图像的尺寸）。
5. 标签：
  - 标签用于链接外部资源，如样式表。它通常位于区域内，并且拥有如 href（资源的URL）、rel（资源与当前文档的关系）和 type（资源的MIME类型）等属性。
6. 标签：
  - 标签是表单中非常重要的元素，用于收集用户输入。它有多种类型，如文本、密码、单选按钮、复选框等，通过type属性来定义。
双标签：有开始和结束标签
1. 文档结构标签:
- : HTML文档的根元素，所有其他元素都嵌套在其中。
- : 包含文档的元信息，如元数据、链接到CSS文件和JavaScript文件。
- : 定义文档的标题，显示在浏览器的标题栏中。
- : 包含文档的所有内容，如文本、图像、视频等。
1. 标题标签:
- 到: 定义六个级别的标题，
  是最高级别（最重要），
  是最低级别（最不重要）。
1. 文本格式化标签:
- : 定义段落。
- : 定义预格式化文本，保留文本中的空格和换行。
- : 定义单行代码。
- : 强调文本。
- : 强烈强调文本，通常显示为加粗。
- : 斜体文本。
- : 粗体文本。
- : 下划线文本。
- : 高亮文本。
1. 块级元素和内联元素:
- : 块级元素，用于组织内容和应用样式。
- : 内联元素，用于组织内容和应用样式。
1. 链接和列表:
- : 定义超链接。
- : 定义无序列表。
- : 定义有序列表。
- : 定义描述列表。
- : 定义描述术语。
- : 定义描述定义。
1. 表格:
- : 定义表格。
- : 定义表头。
- : 定义表体。
- : 定义表头单元格。
- : 定义表格行。
- : 定义表格数据。
1. 表单:
- : 定义表单。
- : 定义输入标签。
- : 定义输入字段。
- : 定义下拉列表。
- : 定义下拉列表中的选项。
- : 定义按钮。
- : 定义多行文本输入字段。
1. 媒体和脚本：
- : 定义视频。
- : 定义客户端JavaScript。
- : 定义内联框架，可以嵌套其他文档。

1.2 基本结构标签

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。

每个HTML文档通常都遵循一个基本的结构，包括以下几个主要的标签组成，通常被称为HTML的骨架。下面是一个简单的示例来展示这些基本结构标签的用法：

DOCTYPE html> 
<html lang="zh-CN"> 

<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>我的第一个网页title> 
    <link rel="stylesheet" href="styles.css"> 
    <script src="script.js">script> 
head>

<body> 
body>

html>

在上述代码中:

是文档类型声明，它告诉浏览器这是一个HTML5文档。
标签是所有其他HTML元素的根元素。
标签包含了文档的元信息，如字符集声明、页面标题、以及链接到外部CSS和JavaScript文件的标签。
标签包含了页面的所有可见内容，如头部、导航菜单、主要内容区和底部。在这个例子中，我们还使用了一些其他的结构和内容标签，如
,
,
,
, 和
，来组织页面的不同部分。
lang 语言种类
- 用来定义当前文档显示的语言。
- en定义语言为英语 zh-CN定义语言为中文简单来说,定义为en 就是英文网页, 定义为
- zh-CN 就是中文
- 简单来说,定义为en 就是英文网页, 定义为 zh-CN 就是中文网页
- 其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文
- 这个属性对浏览器和搜索引擎(百度.谷歌等)还是有作用的
字符集：
- 1.字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。
- 2.在标签内，可以通过标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。
- charset属性是用于指定文档字符集的。它应该被设置在标签内，通常放置在区域的顶部。
- 3.charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符.
- 5.注意：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的 “UTF-8”，不要写成 “utf8” 或 “UTF8”。

这个基本结构为你创建的每个页面提供了一个清晰、组织良好的框架，你可以在此基础上添加更多内容和样式，以完成你的网页设计。

1.3 标签的关系：

在HTML中，标签之间的关系通常可以归纳为包含关系和并列关系。下面是对这两种关系的解释和示例：

1. 包含关系（Parent-Child Relationship）:

包含关系也被称为父子关系。在这种关系中，一个标签（父标签）包含另一个或多个标签（子标签）。子标签被嵌套在父标签中。例如，在您提供的代码中，标签是 </code> 标签的父标签，而 <code><title></code> 标签是 <code><head></code> 标签的子标签。其他的包含关系示例如下： <pre><code class="prism language-html"><html> <body> <div> <p></p> <p></p> </div> <div> <img /> </div> </body> </html> </code></pre> 在上面的示例中，<code><html></code> 是 <code><body></code> 的父标签，<code><body></code> 是两个 <code><div></code> 标签的父标签，第一个 <code><div></code> 是两个 <code></code> 标签的父标签，而第二个 <code><div></code> 是 <code><img></code> 标签的父标签。 <h6>2. 并列关系（Sibling Relationship）:</h6> 并列关系是指在同一级别上的标签，它们共享同一个父标签。这些标签被称为兄弟标签（或同级标签）。例如： <pre><code><body> <div></div> <div></div> <img /> </body> </code></pre> 在上面的示例中，两个 <code><div></code> 标签和一个 <code><img></code> 标签是兄弟标签，因为它们都是 <code><body></code> 标签的直接子标签。 这两种关系是理解和组织HTML文档结构的基础，它们帮助开发人员清楚地理解标签之间的层级和关联，也便于通过CSS和JavaScript对页面元素进行样式设计和交互处理。 <h4>HTML常用语法</h4> <h5>2.1 标题标签</h5> 标题标签 <code><h1></code> - <code><h6></code>（重要） <ul> <li>具体实现：</li> </ul> <pre><code class="prism language-html"><h1> 我是一级标题 </h1> </code></pre> 特点： <ol> <li>标题文字会自动加粗，字号也会依次变大。</li> <li>每个标题独占一行。</li> </ol> <pre><code class="prism language-html"><h1>标题一共六级选,</h1> <h2>文字加粗一行显。</h2> <h3>由大到小依次减，</h3> <h4>从重到轻随之变。</h4> <h5>语法规范书写后，</h5> <h6>具体效果刷新见。</h6> </code></pre> <h5>2.2 段落标签：</h5> <ul> <li>具体实现：</li> </ul> <pre><code class="prism language-html"><p> 我是一个段落标签 </p> </code></pre> 特点： <ol> <li>文本在一个段落中会根据浏览器窗口的大小自动换行。</li> <li>段落和段落之间保有空隙。</li> </ol> <h5>2.3 换行标签</h5> <ul> <li>具体实现：</li> </ul> <pre><code class="prism language-html"><br /> </code></pre> <ul> <li>特点： <ol> <li><code> </code> 是个单标签。</li> <li><code> </code> 标签只是简单地开始新的一行，与段落不同，段落之间会插入一些垂直的间距。</li> </ol> </li> </ul> <h5>2.4 文本格式化标签：</h5> <ul> <li>粗体：<code></code>，斜体：<code></code>，下划线：<code></code></li> </ul> <h5>2.5 div和span标签</h5> <ul> <li>具体实现：</li> </ul> <pre><code class="prism language-html"><div> 这是头部 </div> <span> 今日价格 </span> </code></pre> <ul> <li> 特点 ： <ol> <li><code><div></code> 标签用来布局，但是现在一行只能放一个<code><div></code>。大盒子</li> <li><code></code> 标签用来布局，一行上可以多个 <code></code>。小盒子</li> </ol> </li> </ul> <h5>2.6 图片标签：</h5> <ul> <li>具体实现：</li> </ul> <pre><code><img src="图像URL" /> </code></pre> <ul> <li>解释： <ul> <li><code>src</code> 是<code><img></code>标签的必须属性，它用于指定图像文件的路径和文件名。</li> </ul> </li> </ul> 图像标签的其他属性: <table> <thead> <tr> <th align="center">属性名</th> <th align="center">属性值</th> <th align="center">描述</th> </tr> </thead> <tbody> <tr> <td align="center">src</td> <td align="center">图片路径</td> <td align="center">图片路径，是必须属性</td> </tr> <tr> <td align="center">alt</td> <td align="center">文本</td> <td align="center">提供图像不可见时的文本</td> </tr> <tr> <td align="center">width</td> <td align="center">像素</td> <td align="center">指定图像的宽度</td> </tr> <tr> <td align="center">height</td> <td align="center">像素</td> <td align="center">指定图像的高度</td> </tr> <tr> <td align="center">broder</td> <td align="center">像素</td> <td align="center">设置图像边框的粗细</td> </tr> <tr> <td align="center">title</td> <td align="center">文本</td> <td align="center">提示文本，鼠标放到图片上弹出的文本提示</td> </tr> </tbody> </table> 图像标签注意点： <ol> <li>图像标签可以拥有多个属性，必须写在标签名的后面。</li> <li>属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。</li> <li>属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”。</li> </ol> <h5>2.7 路径：</h5> <ul> <li>相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。</li> <li>绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。例如，“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”</li> </ul> <h5>2.8 链接标签：</h5> <ul> <li>链接的语法格式：</li> </ul> <pre><code class="prism language-html"><a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a> </code></pre> <ul> <li>属性： <ol> <li><code>href</code>：用于指定链接目标的url地址</li> <li><code>target</code>:用于指定链接页面的打开方式 <code>_self</code>默认值 <code>_blank</code>新窗口打开</li> <li><code>#</code>：空链接</li> </ol> </li> </ul> 链接分类： <ol> <li>外部链接</li> <li>内部链接</li> <li>空链接</li> <li>下载链接</li> <li>网页元素链接</li> <li>锚点链接</li> </ol> <h5>2.9 注释</h5> <ul> <li>具体实现：</li> </ul> <pre><code class="prism language-html"> </code></pre> <ul> <li>解释： <ul> <li>HTML中的注释以“ ”结束。注释标签里面的内容是给程序员看的, 这个代码是不执行不显示到页面中的。添加注释是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的</li> </ul> </li> </ul> <h5>2.10 特殊字符</h5> 在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。 <table> <thead> <tr> <th align="center">特殊字符</th> <th align="center">描述</th> <th align="center">字符的代码</th> </tr> </thead> <tbody> <tr> <td align="center"><</td> <td align="center">空格符</td> <td align="center"> </td> </tr> <tr> <td align="center"><</td> <td align="center">小于号</td> <td align="center"><</td> </tr> <tr> <td align="center">></td> <td align="center">大鱼号</td> <td align="center">></td> </tr> <tr> <td align="center">&</td> <td align="center">和号</td> <td align="center">&</td> </tr> <tr> <td align="center">￥</td> <td align="center">人民币</td> <td align="center">¥</td> </tr> <tr> <td align="center">©</td> <td align="center">版权</td> <td align="center">©</td> </tr> <tr> <td align="center">®</td> <td align="center">注册商标</td> <td align="center">®</td> </tr> <tr> <td align="center">°</td> <td align="center">摄氏度</td> <td align="center">°</td> </tr> <tr> <td align="center">±</td> <td align="center">正负号</td> <td align="center">±</td> </tr> <tr> <td align="center">×</td> <td align="center">乘号</td> <td align="center">×</td> </tr> <tr> <td align="center">÷</td> <td align="center">除号</td> <td align="center">÷</td> </tr> <tr> <td align="center">²</td> <td align="center">平方2</td> <td align="center">²</td> </tr> <tr> <td align="center">³</td> <td align="center">立方3</td> <td align="center">³</td> </tr> </tbody> </table> 重点记住：空格、大于号、小于号这三个，其余的使用很少。 <h5>2.11 表格（重点）</h5> HTML表格用于显示行和列数据。表格由<code><table></code>元素创建，其中包括若干行（由<code><tr></code>元素创建），每行包括若干列（由<code><td></code>元素创建）。另外，还可以使用<code><th></code>元素创建表头单元格，这些单元格通常用于显示列的标题。下面是HTML表格中使用的主要标签和属性的详细介绍及示例： <ol> <li> <code><table></code>标签：用于创建表格。 <pre><code class="prism language-html"><table border="1">  </table> </code></pre> </li> <li> <code><tr></code>标签：用于创建表格行。 <pre><code class="prism language-html"><tr>  </tr> </code></pre> </li> <li> <code><td></code>标签：用于创建表格数据单元格。 <pre><code class="prism language-html"><td>数据</td> </code></pre> </li> <li> <code><th></code>标签：用于创建表格头单元格。 <pre><code class="prism language-html"><th>标题</th> </code></pre> </li> <li> <code>colspan</code>属性：用于指定单元格应横跨的列数。 <pre><code class="prism language-html"><td colspan="2">数据</td> </code></pre> </li> <li> <code>rowspan</code>属性：用于指定单元格应纵跨的行数。 <pre><code class="prism language-html"><td rowspan="2">数据</td> </code></pre> </li> <li> <code><thead></code>标签：用于组合表格头部内容。 <pre><code class="prism language-html"><thead>  </thead> </code></pre> </li> <li> <code><tbody></code>标签：用于组合表格主体内容。 <pre><code class="prism language-html"><tbody>  </tbody> </code></pre> </li> <li> <code><tfoot></code>标签：用于组合表格底部内容。 <pre><code class="prism language-html"><tfoot>  </tfoot> </code></pre> </li> </ol> 下面是一个包括了跨行、跨列和合并单元格的完整HTML表格示例： <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Table Example</title> </head> <body> <table border="1"> <thead> <tr> <th colspan="3">表格标题</th> </tr> </thead> <tbody> <tr> <td rowspan="2">跨两行</td> <td>数据1</td> <td>数据2</td> </tr> <tr> <td colspan="2">跨两列</td> </tr> <tr> <td>数据3</td> <td>数据4</td> <td>数据5</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">表格底部</td> </tr> </tfoot> </table> </body> </html> </code></pre> 在这个示例中，我们创建了一个表格，其中包括表头、主体和底部。我们使用<code>colspan</code>属性使表头和底部的单元格横跨三列，使用<code>rowspan</code>属性使一个单元格纵跨两行。同时，我们在主体的一行中使用<code>colspan</code>属性使一个单元格横跨两列。 实例代码：课程表 <pre><code class="prism language-html"><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <h1 style="text-align: center;color: red;">Test</h1> <div> <table border="1" style="align-items: center;margin: auto;"> <thead> <tr> <th colspan="8">课程表</th>  </tr> <tr> <th>节次</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <th>星期六</th> <th>星期天</th> </tr> </thead> <tbody> <tr> <td>第一节</td> <td>A</td> <td>B</td> <TD>C</TD> <TD>D</TD> <TD>E</TD> <td>F</td> <td>G</td> </tr> <tr> <td>第一节</td> <td>A</td> <td>B</td> <TD>C</TD> <TD>D</TD> <TD>E</TD> <td>F</td> <td>G</td> </tr><tr> <td>第一节</td> <td>A</td> <td>B</td> <TD>C</TD> <TD>D</TD> <TD>E</TD> <td>F</td> <td>G</td> </tr><tr> <td>第一节</td> <td>A</td> <td>B</td> <TD>C</TD> <TD>D</TD> <TD>E</TD> <td>F</td> <td>G</td> </tr><tr> <td>第一节</td> <td>A</td> <td>B</td> <TD>C</TD> <TD>D</TD> <TD>E</TD> <td>F</td> <td>G</td> </tr><tr> <td>第一节</td> <td>A</td> <td>B</td> <TD>C</TD> <TD>D</TD> <TD>E</TD> <td>F</td> <td>G</td> </tr><tr> <td>第一节</td> <td>A</td> <td>B</td> <TD>C</TD> <TD>D</TD> <TD>E</TD> <td>F</td> <td>G</td> </tr> </tbody> </table> </div> </body> </html> </code></pre> <h2>Test</h2> <table border="1"> <thead> <tr> <th colspan="8">课程表</th> </tr> <tr> <th>节次</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <th>星期六</th> <th>星期天</th> </tr> </thead> <tbody> <tr> <td>第一节</td> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> <td>F</td> <td>G</td> </tr> <tr> <td>第一节</td> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> <td>F</td> <td>G</td> </tr> <tr> <td>第一节</td> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> <td>F</td> <td>G</td> </tr> <tr> <td>第一节</td> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> <td>F</td> <td>G</td> </tr> <tr> <td>第一节</td> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> <td>F</td> <td>G</td> </tr> <tr> <td>第一节</td> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> <td>F</td> <td>G</td> </tr> <tr> <td>第一节</td> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> <td>F</td> <td>G</td> </tr> </tbody> </table> <h5>2.12 标签分类</h5> 块级元素： <ul> <li>独占一行、内容决定高度、继承父宽、可设置宽高</li> <li>div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……</li> </ul> 行内元素： <ul> <li>一行显示多个、内容决定宽高、不可以设置宽高</li> <li>a、span 、b、u、i、s、strong、ins、em、del……</li> </ul> 行内块元素： <ul> <li>一行可以显示多个、可设置宽高</li> <li>input、textarea、img、button、select</li> </ul> <table> <thead> <tr> <th align="center">属性</th> <th align="center">效果</th> <th align="center">使用效率</th> </tr> </thead> <tbody> <tr> <td align="center">display: block</td> <td align="center">转换成块级元素</td> <td align="center">较多</td> </tr> <tr> <td align="center">display: inline-block</td> <td align="center">转化为行内块元素</td> <td align="center">较多</td> </tr> <tr> <td align="center">display: inline</td> <td align="center">转化成行内元素</td> <td align="center">极少</td> </tr> </tbody> </table> HTML嵌套规范注意点 <ol> <li>块级元素一般作为大容器，可以嵌套:文本、块级元素、行内元素、行内块元素等等… <ul> <li>p标签中不要嵌套div、p、h等块级元素</li> </ul> </li> <li>a标签内部可以嵌套任意元素</li> </ol> <ul> <li>a标签不能嵌套a标签</li> </ul> 居中方法总结 <a href="http://img.e-com-net.com/image/info8/53d578b421a84678979e469862738bb1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/53d578b421a84678979e469862738bb1.jpg" alt="HTML-CSS知识速查_第2张图片" width="650" height="364" style="border:1px solid black;"></a> <h3>CSS</h3> <h4>一、CSS简介</h4> CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表。 CSS 是也是一种标记语言 CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。 CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单。 CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即结构 ( HTML ) 与样式( CSS ) 相分离 CSS的应用方式 <ol> <li>内联样式：在标签中包括一个style属性，并在其后定义CSS属性及值，例如：</li> </ol> Hello world! <pre><code class="prism language-css">"color:red"> Hello world! </code></pre> <ol start="2"> <li> 文档级样式表：将一系列样式规则罗列在HTML文档开头，处于内的之间，它可以改变外部样式表中定义的一个或多个规则，创建一个个性化的文档，适用于单个HTML文件。 </li> <li> 外部样式表：将样式定义放置于分离的文档中，在各个需要应用该样式表的HTML通过在内的标签引入这个分离文档，例如。每次打开页面都需要下载这个表格，所以要尽量减小样式表的容量。 </li> </ol> 注意：三种样式表作用域不同，同时存在时的页面处理原则为： <ul> <li>“近优先于远”——内联样式>文档级样式。</li> <li>“局部优先于整体”——定义为标签的类的属性>为标签总体进行定义的属性</li> <li>“特殊优先于一般”——上下文样式>为标签总体进行定义的属性</li> <li>“后优先于前”——后边指定的属性>前面指定的属性</li> </ul> <h5>1.1 CSS语法规范</h5> 1.使用 HTML 时，需要遵从一定的规范，CSS 也是如此。要想熟练地使用 CSS 对网页进行修饰，首先需要了解CSS 样式规则。 2.CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。 <a href="http://img.e-com-net.com/image/info8/0e46a5cf0ccf4c3f9f2aa51eab6f04d9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0e46a5cf0ccf4c3f9f2aa51eab6f04d9.jpg" alt="HTML-CSS知识速查_第3张图片" width="570" height="120" style="border:1px solid black;"></a> 选择器通常是您需要改变样式的 HTML 元素。 <ul> <li>1.选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式</li> <li>2.属性和属性值以“键值对”的形式出现</li> <li>3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等</li> <li>4.属性和属性值之间用英文“:”分开</li> <li>5.多个“键值对”之间用英文“;”进行区分</li> </ul> CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来: <pre><code class="prism language-css">p {color:red;text-align:center;} </code></pre> 为了让CSS可读性更强，你可以每行只描述一个属性: <pre><code class="prism language-css">p { color:red; text-align:center; } </code></pre> <h5>1.2 CSS 注释</h5> 注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。 CSS注释以 /* 开始, 以 */ 结束, 实例如下: <pre><code class="prism language-css">/*这是个注释*/ p { text-align:center; /*这是另一个注释*/ color:black; font-family:arial; } </code></pre> <h4>二、CSS选择器</h4> <h5>CSS选择器的作用</h5> 选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择标签用的。 <pre><code>h1 { /*h1是选择器，选择h1标签*/ color: red; /* color是标签，red是值*/ font-size: 25px; } </code></pre> 这里的意思是：找到所有的 h1 标签。选择器（选对人）设置这些标签的样式，比如颜色为红色（做对事）。 <h6>CSS基础选择器</h6> 基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器 标签选择器： 标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。 <pre><code class="prism language-css">/*如上*/ h1 { color: red; font-size: 20px; } </code></pre> <h6>类选择器</h6> 如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器. 语法： <pre><code class="prism language-css">.类名 { 属性1: 属性值1; ... } 结构需要用class属性来调用 class 类的意思 <div class="类名"> 变红色 </div> </code></pre> 1.如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。 2.类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。 3.类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。 4.可以理解为给这个标签起了一个名字，来表示。 5.长名称或词组可以使用中横线来为选择器命名。 6.不要使用纯数字、中文等命名，尽量使用英文字母来表示。 <h6>多类名选择器</h6> 多类名选择器是CSS中的一个强大功能，它允许你为HTML元素指定多个类名，并按照这些类名来应用样式。当一个元素具有多个类名时，它会继承所有相关类的样式。如果同一个样式属性在多个类中被定义，那么最后一个类的属性值会被应用。 语法： 在HTML中，你可以通过空格分隔每个类名，为元素指定多个类名： <pre><code class="prism language-html"><div class="class1 class2 class3">...</div> </code></pre> 在CSS中，你可以通过以下方式选择具有多个类名的元素： <pre><code class="prism language-css">/* 选择同时具有 class1 和 class2 的元素 */ .class1.class2 { /* styles */ } /* 或者，你可以为每个类分别定义样式 */ .class1 { /* styles */ } .class2 { /* styles */ } </code></pre> 示例： HTML代码 <pre><code class="prism language-html"><div class="box highlighted">这是一个同时具有 box 和 highlighted 类名的元素。</div> </code></pre> CSS代码 <pre><code class="prism language-cSS">.box { width: 200px; height: 200px; border: 1px solid black; } .highlighted { background-color: yellow; } </code></pre> 在上面的例子中，<code><div></code>元素同时具有<code>box</code>和<code>highlighted</code>两个类名。所以，它将获得<code>box</code>类定义的边框样式，以及<code>highlighted</code>类定义的背景颜色样式。 <ol> <li>在标签class 属性中写多个类名</li> <li>多个类名中间必须用空格分开</li> <li>这个标签就可以分别具有这些类名的样式</li> </ol> <h6>id选择器：</h6> id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。 语法： HTML代码 <pre><code class="prism language-html"><div id="i_Test">Hello World</div> </code></pre> CSS代码 <pre><code class="prism language-css">#id名 { 属性1: 属性值1; ... } </code></pre> 注意：id 属性只能在每个 HTML 文档中出现一次 id选择器和类选择器的区别： <ul> <li>1.类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。</li> <li>2.id 选择器好比人的身份证号码，全中国是唯一的，不得重复。</li> <li>3.id 选择器和类选择器最大的不同在于使用次数上。</li> <li>4.类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。</li> </ul> <h6>通配符选择器</h6> 通配符选择器不需要调用，自动就给所有的元素使用样式 <pre><code class="prism language-css">* { 属性1: 属性值1; ... } * { margin: 0; padding: 0; } </code></pre> <h6>序号选择器(用于定位)</h6> <table> <thead> <tr> <th align="center">序号选择器</th> <th align="center">意义</th> <th align="center">用法</th> </tr> </thead> <tbody> <tr> <td align="center">:first-child</td> <td align="center">选择其父元素的第一个子元素</td> <td align="center"><code>css ul > li:first-child { color: red; }</code></td> </tr> <tr> <td align="center">:last-child</td> <td align="center">选择其父元素的最后一个子元素</td> <td align="center"><code>css ul > li:last-child { color: blue; }</code></td> </tr> <tr> <td align="center">:nth-child(n)</td> <td align="center">选择其父元素的第 n 个子元素</td> <td align="center"><code>css ul > li:nth-child(2) { color: green; }</code></td> </tr> <tr> <td align="center">:nth-last-child(n)</td> <td align="center">选择其父元素的倒数第 n 个子元素</td> <td align="center"><code>css ul > li:nth-last-child(2) { color: purple; }</code></td> </tr> <tr> <td align="center">:only-child</td> <td align="center">选择其父元素只有一个子元素的元素</td> <td align="center"><code>css ul > li:only-child { font-weight: bold; }</code></td> </tr> <tr> <td align="center">:first-of-type</td> <td align="center">选择指定类型的第一个子元素</td> <td align="center"><code>css p:first-of-type { text-decoration: underline; }</code></td> </tr> <tr> <td align="center">:last-of-type</td> <td align="center">选择指定类型的最后一个子元素</td> <td align="center"><code>css p:last-of-type { text-decoration: overline; }</code></td> </tr> <tr> <td align="center">:nth-of-type(n)</td> <td align="center">选择指定类型的第 n 个子元素</td> <td align="center"><code>css p:nth-of-type(2) { font-style: italic; }</code></td> </tr> <tr> <td align="center">:nth-last-of-type(n)</td> <td align="center">选择指定类型的倒数第 n 个子元素</td> <td align="center"><code>css p:nth-last-of-type(2) { background-color: yellow; }</code></td> </tr> <tr> <td align="center">:only-of-type</td> <td align="center">选择指定类型且父元素只有一个该类型子元素的元素</td> <td align="center"><code>css p:only-of-type { text-align: center; }</code></td> </tr> </tbody> </table> 序号选择器的用法通常涉及到父元素和子元素的关系。通过这些选择器，你可以非常具体地定位到某个元素，无论是基于它在父元素中的位置还是它的类型。在上述的用法示例中，你可以看到如何使用每个序号选择器来应用特定的样式。 <h6>选择器总结</h6> <table> <thead> <tr> <th align="center">基础选择器</th> <th align="center">作用</th> <th align="center">特点</th> <th align="center">使用情况</th> <th align="center">用法</th> </tr> </thead> <tbody> <tr> <td align="center">标签选择器</td> <td align="center">可以选出所有相同的标签，比如 p</td> <td align="center">不能差异化选择</td> <td align="center">较多</td> <td align="center"><code>p{color: red;}</code></td> </tr> <tr> <td align="center">类选择器</td> <td align="center">选出具有指定类的元素，比如 .intro</td> <td align="center">可差异化选择元素</td> <td align="center">较多</td> <td align="center"><code>.intro{font-size: 20px;}</code></td> </tr> <tr> <td align="center">ID选择器</td> <td align="center">选出具有指定ID的元素，比如 #unique</td> <td align="center">选择唯一的元素</td> <td align="center">较少</td> <td align="center"><code>#unique{border: 1px solid;}</code></td> </tr> <tr> <td align="center">属性选择器</td> <td align="center">根据元素的属性和值来选择元素</td> <td align="center">灵活且具体</td> <td align="center">较少</td> <td align="center"><code>[type="text"]{background-color: blue;}</code></td> </tr> <tr> <td align="center">通配符选择器</td> <td align="center">选出所有元素</td> <td align="center">选择范围广泛</td> <td align="center">较少</td> <td align="center"><code>*{margin: 0; padding: 0;}</code></td> </tr> <tr> <td align="center">后代选择器</td> <td align="center">选出某元素的所有后代元素</td> <td align="center">结构化选择</td> <td align="center">较多</td> <td align="center"><code>article p{color: green;}</code></td> </tr> <tr> <td align="center">子元素选择器</td> <td align="center">选出某元素的直接子元素</td> <td align="center">结构化且具体</td> <td align="center">较多</td> <td align="center"><code>ul>li{list-style: none;}</code></td> </tr> <tr> <td align="center">伪类选择器</td> <td align="center">根据元素的特定状态来选择元素，比如:hover</td> <td align="center">状态化选择</td> <td align="center">较多</td> <td align="center"><code>a:hover{color: purple;}</code></td> </tr> <tr> <td align="center">伪元素选择器</td> <td align="center">创建元素的某个部分的样式，比如 ::before</td> <td align="center">创建虚拟元素</td> <td align="center">较少</td> <td align="center"><code>p::before{content: "Read this: ";}</code></td> </tr> <tr> <td align="center">分组选择器</td> <td align="center">将多个选择器分组，应用相同的样式</td> <td align="center">合并样式</td> <td align="center">较多</td> <td align="center"><code>h1, h2, h3 {color: blue;}</code></td> </tr> <tr> <td align="center">否定选择器</td> <td align="center">选出不匹配指定选择器的所有元素</td> <td align="center">反向选择</td> <td align="center">较少</td> <td align="center"><code>:not(p){font-style: italic;}</code></td> </tr> </tbody> </table> <h4>三、CSS 伪类选择器与伪元素</h4> CSS 伪类和伪元素允许你根据元素的特定状态或位置应用样式，而无需添加额外的类或 ID。 <h5>1. 基本伪类选择器</h5> <table> <thead> <tr> <th align="center">伪类</th> <th align="center">意义</th> <th align="center">用法</th> </tr> </thead> <tbody> <tr> <td align="center">:link</td> <td align="center">选择所有未被访问的链接</td> <td align="center"><code>css a:link { color: blue; }</code></td> </tr> <tr> <td align="center">:visited</td> <td align="center">选择所有被访问过的链接</td> <td align="center"><code>css a:visited { color: purple; }</code></td> </tr> <tr> <td align="center">:hover</td> <td align="center">选择鼠标指针浮动在上面的元素</td> <td align="center"><code>css a:hover { color: red; }</code></td> </tr> <tr> <td align="center">:active</td> <td align="center">选择活动链接,鼠标点击未松开状态</td> <td align="center"><code>css a:active { color: green; }</code></td> </tr> <tr> <td align="center">:focus</td> <td align="center">选择获得焦点的元素</td> <td align="center"><code>css input:focus { border-color: red; }</code></td> </tr> </tbody> </table> 注意书写伪类的顺序应该是：:link => :visited => :hover => :active，若是单个标签使用多个伪类不按照这个熟悉写会无效。 示例 CSS代码 <pre><code class="prism language-css">/* 将超链接的下划线去除，更改颜色 */ a{ text-decoration: none; color: #000000; } /* :hover 触碰到效果 */ a:hover{ color: #FF0000; } /* :active 点击不松开效果 */ a:active{ color: #0000FF; } /* text-shadow 文本阴影效果三个数字分别为：水平阴影的位置垂直阴影的位置模糊的距离十六进制表示：阴影的颜色 */ .p1{ text-shadow: 3px 3px 2px #000000 ; } </code></pre> 完整HTML代码 <pre><code><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

Example

在上述 HTML 代码中，我们在