2.2 css学习

蟑螂恶霸不是恶霸 蟑螂恶霸不是恶霸 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 300+累计阅读 374平均单平台 已同步平台 CSDN 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄5年
关注
原创 2024-05-13 16:18:38 374 阅读 AI 写同款· GEO 优化 ›
前端面试笔试题目-CSS专项练习（进阶） 1、盒模型（content-box） 盒模型是CSS的核心概念，页面中的所有元素都被看作一个矩形盒子，这个盒子包含元素的内容、内边距、边框和外边距。 默认盒模型的width和height只会作用于盒子的内容区，而通过"box-sizing"属性可以改变计算盒子大小的方式。“box-sizing"的默认值为"content-box”，把值只作用于内容区。 默认情况下，width和height是指盒子的内容区域的大小，如果此时给盒子添加内边距或边框，那么会导致整个盒子变大。 现在给类名为"content-bo 阅读详情

文章目录

1. 概述

CSS全称叫做层叠样式表Cascading Style Sheets，是用来修饰HTML网页的一门技术，增强网页的展示能力。

主要是使用CSS属性来实现，最终可以将css代码和HTML网页代码进行分离，也可以提高css代码的复用性。

根据其代码位置可以分为以下三类：

  • 行内CSS:只作用在当前行, 给当前元素使用style属性来修饰样式；
  • 内部CSS: 在HTML代码里使用style标签,包裹着CSS代码.提高了CSS代码的复用性；
  • 外部CSS: 把HTML代码和CSS代码分离,在HTML中引入CSS文件

2.CSS语法

首先我们来看一个案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS语法案例</title>
<style>
body {background-color:yellow;}
h1   {font-size:36pt;}
h2   {color:blue;}
p    {margin-left:50px;}
</style>
</head>

<body>

<h1>这个标题设置的大小为 36 pt</h1>
<h2>这个标题设置的颜色为蓝色：blue</h2>

<p>这个段落的左外边距为 50 像素：50px</p> 

</body>
</html>

这个案例中，我们使用了内部CSS，在HTML代码里使用style标签,包裹着CSS代码，其共有4行代码：

  1. body {background-color:yellow;}：这行CSS代码将所有页面可见内容中的背景颜色设置为黄色；
  2. h1 {font-size:36pt;}：这行CSS代码将所有h1标签文字大小设置为36px；
  3. h2 {color:blue;}：这行CSS代码将所有h2标签颜色设置为蓝色；
  4. p {margin-left:50px;}：这行CSS代码将所有p标签的左外边距设置为50px；

在这里插入图片描述

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
在这里插入图片描述

选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来；多个属性之间使用分号；分割。为了增加可读性我们也可以每行设置一个属性：

p
{
    color:red;
    text-align:center;
}

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。CSS注释以 /* 开始, 以 */ 结束, 实例如下:

/*这是个注释*/
p
{
    text-align:center;
    /*这是另一个注释*/
    color:black;
    font-family:arial;
}

2.1 内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表。使用内部CSS可以实现代码的重用，并且小幅度降低代码的耦合性，虽然其没有外部CSS那样可以大幅度降低耦合性，但是它比外部CSS更简便一点。

所以当我们单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

当前CSS样式一般只生效于当前页面。

2.2 外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：

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

CSS文件则单独部署在目录下，浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

2.3 内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时才应该这么使用。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

2.4 多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如，外部样式表拥有针对 h3 选择器的三个属性：

h3
{
    color:red;
    text-align:left;
    font-size:8pt;
}

而内部样式表拥有针对 h3 选择器的两个属性：

h3
{
    text-align:right;
    font-size:20pt;
}

假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：

color:red;
text-align:right;
font-size:20pt;

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

2.5 多重样式优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

一般情况下，优先级如下：

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

其中要特别注意，内联样式一般总是最终的表现形式，但内部样式与外部样式是与载入时间有关的，如果先引入外部样式，再定义内部样式，则最后显示的效果是内部样式的，内部样式会覆盖外部样式的规则；

同样的，如果先定义内部样式再引入外部样式，那么最后的呈现效果是外部样式的规则，因为外部样式会覆盖内部样式的规则。

3.CSS选择器

3.1 标签选择器

标签选择器可以为所有相同类型的标签设置样式，如上面我们的示例就使用了标签名选择器，分别给body，h1，h2，p标签设置样式。

我们这里再展示一个以span标签为示例的CSS选择器案例，span此时的功能就可以明显的体现出来了。

    <style> /* 在HTML中加入css*/
        span{ /* 标签名选择器,选中所有span */
            font-size: 24px; /*字号*/
            font-family: 黑体;/* 字体 */
        }
    </style>

3.2 class选择器

class 选择器用于描述一组元素的样式，可以在多个元素中使用。给需要修饰的元素，加class属性，也可以同时使用多个属性，之间用空格隔开。

  1. 示例一：给元素添加多个属性

    <p class="a b">123</p> <!-- b覆盖a-->

<style> /* 在HTML中加入css*/
	 /* 选择class=a的元素 */
	.a{
		background-color: cornflowerblue; /*背景颜色*/
		color:red; /*字体颜色*/
	}
	.b{
		background-color: lightsalmon;
		color: black;
	}
</style>

  2. 示例二：给多个元素添加属性

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

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>

3.3 id选择器

id属性的值在整个HTML中作为唯一标识的存在。其可以为标有特定 id 的 HTML 元素指定特定的样式。CSS 中 id 选择器以 “#” 来定义，可以通过ID值选中指定的元素（#id值）。

<p id="p1">123</p>
/* 使用id选中元素 */
#p1{
	text-indent: 200px; /* 首行缩进*/
}

但是要注意，ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

3.4 分组选择器

分组选择器可以将多个选择器选中的元素组合在一起，统一设置样式。例如下方的示例，将class选择器与id选择器组合到一起，统一设置背景颜色。

/* 分组选择器,将多个选择器选中的元素组合在一起，统一设置样式 */
.a,.b,#p1{
	background-color: #d39a9a;
}

3.5 属性选择器

根据属性条件选中符合条件的元素来设置样式（逗号隔开）

<style type="text/css">
	/* 选中指定的元素 */
	input[type='text']{
		background-color: #6495ED;
	}
</style>

3.6 选择器优先级

同样的，与样式表一样，选择器也存在优先级，如果通过不同选择器对同一个标签定义了不同的颜色，那么最后到底是什么颜色呢？

其优先级逐级增加的顺序如下：

  • 通用选择器（*）
  • 标签选择器
  • 类选择器
  • 属性选择器
  • 伪类
  • ID 选择器
  • 内联样式

但是要注意，!important 规则例外。

当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里. 尽管如此, !important规则还是与优先级毫无关系.使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。

这里引入一张CSS权重关系图，其具体的计算方式十分复杂，我们这里不再做过多介绍：
在这里插入图片描述

3.7 综合练习一

首先我们创建css_text.html 文件，并在其中创建div标签，span标签，a标签各俩个：

		<div>我是div1</div>
		<div>我是div2</div>
		<span>我是span1</span>
		<span>我是span2</span>
		<a>我是a1</a>
		<a>我是a2</a>

然后使用CSS修饰以下内容：

  1. 根据标签名修饰div的样式为：
    • 颜色：red
    • 背景色：darkgray
    • 边框样式：dashed
    • 边框颜色：blue
  2. 根据标签名修饰span的样式为：
    • 字号：30px
    • 字体：黑体
  3. 根据类名修饰div1的样式为：
    • 字号：25px
  4. 根据类名修饰span1的样式：
    • 透明度：0.4
  5. 根据ID修饰a2的样式为：
    • 边框的样式：实线
    • 边框的角样式：圆角

最后完成的代码为：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>css_text</title>
    <!-- 用HTML提供的style标签包裹css代码 -->
    <style>
        /* 1.标签名选择器:根据标签的名字选中 */
        div {
            /* 练习1:修饰div的样式 */
            color: red;
            /* 字的颜色 */
            background-color: darkgray;
            /* 背景色 */
            border-style: dashed;
            /* 边框的样式,虚线 */
            border-color: blue;
            /* 边框的颜色 */
        }

        span {
            /* 练习2:修饰span的样式 */
            font-size: 30px;
            /* 字号 字体 */
            font-family: "黑体";
            /* 字体 */
        }

        /* 2.class选择器:根据class属性的值选中元素,class的值能相同
				步骤:给元素加class属性+通过.获取元素 
			*/
        .a {
            /* 练习3:修饰div1的样式*/
            font-size: 25px;
            /* 字号 */
        }

        .b {
            /* 练习4:修饰span1的样式 */
            opacity: 0.4;
            /* 透明度 0.0~1.0,数值越小越透明 */
        }

        /* 3.id选择器:根据id属性的值选中元素,要求id的值不能相同 
				步骤:给元素添加id属性 + 通过#获取值
			*/
        #c {
            /* 练习5:修饰a2的样式 */
            border-style: solid;
            /* 边框的样式:实线*/
            border-radius: 25px;
            /* 圆角 */
        }
    </style>
</head>

<body>
    <div class="a">我是div1</div>
    <div>我是div2</div>
    <span class="b">我是span1</span>
    <span>我是span2</span>
    <a class="a b">我是a1</a>
    <!--同时拥有a b两种样式的修饰-->
    <a id="c">我是a2</a>
</body>

</html>

运行到浏览器为：

在这里插入图片描述

3.8 综合练习二

接下来，我们创建css_text2.html文件，再来实现一个css的操作案例：

首先，我们创建3个a标签，3个input输入框，输入框为2个文本输入框，1个密码输入框，并分别为其设置下列的属性：

		<a class="x">我是a1</a>
		<a href="#" class="x">我是a2</a>
		<a href="#" id="y">我是a3</a>
		<input type="text" />
		<input type="password" placeholder="请您输入密码..."/>
		<input type="text" />

然后，我们使用分组选择器，将多种选择器的结果，组成一组进行修饰：

  1. 将一个a标签与一个input输入框使用标签名选择器，在一个css语句中设置为：
    • 边框宽度：1px
    • 边框样式：dashed
    • 边框颜色：red
  2. 将剩余的俩个a标签与另一个input输入框分别使用类选择器，id选择器，标签选择器在一个css语句中设置为：
    • 字号：20px
  3. 将拥有href属性的a标签设置为：
    • 字号：50px
  4. 将type="text"的input输入框设置为：
    • 背景颜色：green

最后完成的代码为：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>css_text2</title>
    <style>
        /* 1.分组选择器:把多种选择器的结果,组成一组进行修饰,逗号隔开 */
        a,
        input {
            /* 利用标签名选择器,选中一组元素,修饰样式 */
            /* 边框: 宽度 样式 颜色; */
            border: 1px dashed red;
        }

        /* 2.利用基本选择器,选中一组元素,修饰样式 */
        .x,
        #y,
        input {
            font-size: 20px;
        }

        /* 3.属性选择器:按照标签的属性来选择元素,标签名[属性名]*/
        a[href] {
            /* 选中拥有href属性的a标签*/
            font-size: 50px;
        }

        /* 4. 选中type="text"的input设置背景色 */
        input[type='text'] {
            background-color: green;
        }
    </style>
</head>

<body>
    <a class="x">我是a1</a>
    <a href="#" class="x">我是a2</a>
    <a href="#" id="y">我是a3</a>
    <input type="text" />
    <input type="password" placeholder="请您输入密码..." />
    <input type="text" />
</body>

</html>

输出的样式为：
在这里插入图片描述

4.CSS修饰案例

4.1 文本格式

通过上面的案例我们也可以了解到，对于文本的修饰包含文本的颜色、对齐方式等，下面我们将分别介绍实现其具体修饰的方案。

4.1.1 文本颜色

颜色是CSS修饰中经常使用的，在CSS中所有关于颜色的设置都可以以下列三种类型的值来指定，分别为：

  1. 十六进制值 - 如: ＃FF0000
  2. 一个RGB值 - 如: RGB(255,0,0)
  3. 颜色的名称 - 如: red

在网页中搜索颜色转换颜色码，即可找到对应颜色的十六进制值或RGB值，这些值在开发中会由设计人员确认，所以我们只需要使用对应的值就可以了。

4.1.2 文本修饰

我们经常使用text-decoration 属性用来设置或删除文本的装饰，从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

<body>
<p>链接到: <a href="http://www.baidu.com/">baidu.com</a></p>
</body>

像这段代码，其显示效果中有下划线：
在这里插入图片描述

我们可以为其添加CSS样式来消除下划线：

<style>
a {text-decoration:none;}
</style>

在这里插入图片描述

4.1.3 文本转换

我们也可以指定在一个文本中的大写和小写字母，可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>

例如这段代码，其文字是标准格式：
在这里插入图片描述
我们可以通过CSS样式修饰来将其转为全部大写，全部小写或每个单词首字母大写：

<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>

在这里插入图片描述

4.1.4 文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式，文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

<body>
<h1>CSS text-align 实例</h1>
<p class="date">2015 年 3 月 14 号</p>
<p class="main">“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</p>
<p><b>注意：</b> 重置浏览器窗口大小查看 &quot;justify&quot; 是如何工作的。</p>
</body>

例如上边的代码，其文本是标准格式：
在这里插入图片描述

我们可以为其设置CSS样式，将其格式改为报纸版式：

<style>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>

在这里插入图片描述

4.1.5 文本缩进

文本缩进属性是用来指定文本的第一行的缩进。

<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>

在这里插入图片描述

例如这行代码，我们可以为其设置文本缩进格式来进行缩进样式的展示

<style>
p {text-indent:50px;}
</style>

在这里插入图片描述

4.2 字体

对字体的修饰包括字型，字号等修饰，下面我们将分别介绍实现其具体修饰的方案。

4.2.1 字体样式

我们使用font-family 属性设置文本的字体系列，font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。

多个字体系列使用逗号分隔指明：

<body>
<h1>CSS font-family</h1>
<p class="serif">这一段的字体是 Times New Roman </p>
<p class="sansserif">这一段的字体是 Arial.</p>

</body>

例如上面的例子，其默认字体展示效果如下图所示：
在这里插入图片描述

我们对其设置不同的字体：

<style>
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>

设置后的展示效果如下图所示：
在这里插入图片描述

4.2.2 字体大小

我们使用font-size 属性设置文本的大小，能否管理文字的大小，在网页设计中是非常重要。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。所以请务必使用正确的HTML标签，就<h1> - <h6>表示标题和<p>表示段落。

字体大小的值可以是绝对或相对的大小。

绝对大小：

  • 设置一个指定大小的文本
  • 不允许用户在所有浏览器中改变文本大小
  • 确定了输出的物理尺寸时绝对大小很有用

相对大小：

  • 相对于周围的元素来设置大小
  • 允许用户在浏览器中改变文字大小

如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素。

例如下面的文本案例：

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>允许在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。</p>
<p><b>注意:</b>这个例子在 IE9之前的版本不工作, prior version 9.</p>

其默认字体显示效果如图所示：
在这里插入图片描述

但对其设置字体大小后：

<style>
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
</style>

其显示效果为：
在这里插入图片描述
上面的例子可以在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小，虽然可以通过浏览器的缩放工具调整文本大小，但是，这种调整是整个页面，而不仅仅是文本。

为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。em的尺寸单位由W3C建议。1em和当前字体大小相等。在浏览器中默认的文字大小是16px。因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em。

<style>
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
</style>

在上面的例子，em的文字大小是与前面的例子中像素一样。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小，不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。

在所有浏览器的解决方案中，设置 <body>元素的默认字体大小的是百分比：

<style>
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
</style>

这将能实现在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

4.3 背景

4.3.1 背景颜色

我们使用background-color 属性定义了元素的背景颜色，页面的背景颜色使用在body的选择器中:

<style>
body
{
	background-color:#b0c4de;
}
</style>

当然你也可以单独给某一块区域设置背景颜色：

<style>
h1
{
	background-color:#6495ed;
}
p
{
	background-color:#e0ffff;
}
div
{
	background-color:#b0c4de;
}
</style>

4.3.2 背景图像

我们使用background-image 属性描述了元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

<style>
body 
{
	background-image:url('https://static.runoob.com/images/mix/paper.gif');
	background-color:#cccccc;
}
</style>

显示效果为：
在这里插入图片描述

4.3.3 背景图像 - 水平或垂直平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺，一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如下所示:。

<style>
body
{
	background-image:url('gradient2.png');
}
</style>

在这里插入图片描述

如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:

<style>
body
{
	background-image:url('https://static.runoob.com/images/mix/gradient2.png');
	background-repeat:repeat-x;
}
</style>

在这里插入图片描述

4.3.4 背景图像- 设置定位与不平铺

如果你不想让图像平铺，你可以使用 background-repeat 属性:

<style>
body
{
	background-image:url('img_tree.png');
	background-repeat:no-repeat;
}
</style>

在这里插入图片描述

以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置，可以利用 background-position 属性改变图像在背景中的位置:

<style>
body
{
	background-image:url('https://static.runoob.com/images/mix/img_tree.png');
	background-repeat:no-repeat;
	background-position:right top;
	margin-right:200px;
}
</style>

在这里插入图片描述

4.3.4 背景- 简写属性

在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制，为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中。

背景颜色的简写属性为 “background”:

<style>
body
{
	background:#ffffff url('https://static.runoob.com/images/mix/img_tree.png') no-repeat right top;
	margin-right:200px;
}
</style>

在这里插入图片描述

当使用简写属性时，属性值的顺序为：:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

以上属性无需全部使用，你可以按照页面的实际需要使用。

4.4 链接

链接的样式，可以使用任何CSS属性，如颜色，字体，背景）。不同状态的链接，可以有不同的样式，链接的状态有以下分类：

  • a:link - 正常，未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻

例如我们这里定义一个链接：

<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>

然后为其分别设置不同状态下的链接颜色：

<style>
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
</style>

其在显示时，根据其状态的不同会显示不同的颜色。但是要注意，当为链接设置不同状态的不同样式时，也有一些顺序规则：

  • a:hover 必须跟在 a:link 和 a:visited后面
  • a:active 必须跟在 a:hover后面

我们在前面文本格式介绍过，text-decoration 属性主要用于删除链接中的下划线，根据其不同状态设置时案例如下：

<body>
<p><b><a href="/css/" target="_blank">This is a link</a></b></p>
<p><b>注意:</b> hover必须在:link和 a:visited之后定义才有效.</p>
<p><b>注意:</b>active必须在hover之后定义是有效的.</p>
</body>

我们将其设置为未访问的链接与已访问的链接没有下划线，点击和鼠标放上去时显示下划线：

<style>
a:link {text-decoration:none;}    /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:underline;}   /* mouse over link */
a:active {text-decoration:underline;}  /* selected link */
</style>

其同样要遵循顺序规则。，同样的，我们设置背景色等规则时，也都要遵循顺序规则：

<style>
a:link {background-color:#B2FF99;}    /* 未访问链接 */
a:visited {background-color:#FFFF85;} /* 已访问链接 */
a:hover {background-color:#FF704D;}   /* 鼠标移动到链接上 */
a:active {background-color:#FF704D;}  /* 鼠标点击时 */
</style>

4.5 列表

CSS 列表属性效果有下列三种：

  • 设置不同的列表项标记为有序列表
  • 设置不同的列表项标记为无序列表
  • 设置列表项标记为图像

4.5.1 置列表项标志的类型

在 HTML中，有两种类型的列表，无序列表和有序列表，我们可以使用list-style-type改变其默认的前标样式，如：

<p>无序列表实例:</p>

<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>有序列表实例:</p>

<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

我们使用CSS样式改变其前标样式：

<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>

改变后，其显示效果为：
在这里插入图片描述

其中，list-style-type属性指定列表项标记的类型。list-style-type:none 属性可以用于移除小标记。默认情况下列表

  • 或
    1. 还设置了内边距和外边距，可使用 margin:0 和 padding:0 来移除: 

<head>
<meta charset="utf-8"> 
<title>列表移除小标记案例</title> 
<style>
ul.demo {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
</style>
</head>
<body>

<p>默认设置:</p>
<ul>
  <li>Google</li>
  <li>Runoob</li>
  <li>Taobao</li>
</ul>

<p>移除默认设置:</p>
<ul class="demo">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>

4.5.2 将图像设置为列表项标志

同时，我们也可以使用list-style-image将图像作为列表的前标显示：

ul 
{
	list-style-image:url('sqpurple.gif');
}

但是此方案在不同浏览器中会导致显示的图像大小不一致的问题，所以想要正确的使用，需要使用下列的例子：

<style>
ul
{
	list-style-type:none;
	padding:0px;
	margin:0px;
}
ul li
{
	background-image:url(sqpurple.gif);
	background-repeat:no-repeat;
	background-position:0px 5px; 
	padding-left:14px;
}
</style>

例子中涉及的设置有：
ul:

  • 设置列表类型为没有列表项标记
  • 设置填充和边距 0px（浏览器兼容性）
    ul 中所有 li:
  • 设置图像的 URL，并设置它只显示一次（无重复）
  • 您需要的定位图像位置（左 0px 和上下 5px）
  • 用 padding-left 属性把文本置于列表中

4.5.3 简写属性

单个属性中可以指定所有的列表属性。这就是所谓的简写属性。为列表使用简写属性，列表样式属性设置如下：

<style>
ul 
{
	list-style:square url("sqpurple.gif");
}
</style>

可以按顺序设置如下属性：

  • list-style-type
  • list-style-position
  • list-style-image
    如果上述值丢失一个，其余仍在指定的顺序，就没关系。

4.5.4 设置列表中列表项标志的位置

我们使用list-style-position 属性来规定列表中列表项目标记的位置：

<html>
<head>
<meta charset="utf-8"> 
<title>列表项目标记位置案例</title> 
<style type="text/css">
ul.inside 
{
	list-style-position: inside
}

ul.outside 
{
	list-style-position: outside
}
</style>
</head>

<body>
<p>该列表的 list-style-position 的值是 "inside"：</p>
<ul class="inside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>

<p>该列表的 list-style-position 的值是 "outside"：</p>
<ul class="outside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
</body>
</html>

其显示效果如下：
在这里插入图片描述

这里我们可能看的不是很明显，如果将其隐藏的块级区域（块级的概念我们将在后面介绍）显示出来，我们就可以很清楚的了解其意义：
在这里插入图片描述

其默认值是 outside，共可以设置以下三种值：

  • inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐。
  • outside：默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
  • inherit：规定应该从父元素继承 list-style-position 属性的值。

4.5 表格

我们可以使用CSS修饰表格使表格样式更加精美。

4.5.1 表格边框

指定CSS表格边框，使用border属性。

下面的例子指定了一个表格的Th和TD元素的黑色边框：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>表格边框案例</title>
<style>
table,th,td
{
	border:1px solid black;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>

但是我们发现上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。

在这里插入图片描述

为了显示一个表的单个边框，使用 border-collapse属性。

4.5.2 折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开，我们在上面的案例中将CSS样式修改为下列的代码：

<style>
table {
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
}
</style>

此时表格显示就为单线条了：
在这里插入图片描述

4.5.3 表格宽度和高度

Width和height属性定义表格的宽度和高度。

我们将上面的表格设置为100％的宽度，50像素的th元素的高度的表格：

<style>
table {
    border-collapse: collapse;
	width:100%;
}

table, td, th {
    border: 1px solid black;
}
th
{
	height:50px;
}
</style>

其样式为：
在这里插入图片描述

4.5.4 表格文字对齐

表格中的文本对齐和垂直对齐属性。

  • text-align属性设置水平对齐方式，向左，右，或中心；
  • 垂直对齐属性设置垂直对齐，比如顶部，底部或中间；

我们将上面表格标题的垂直对齐设置为向下对其，其他表格设置为水平对齐为向右对齐：

<style>
table {
    border-collapse: collapse;
	width:100%;
}

table, td, th {
    border: 1px solid black;
}
td{
	text-align:right;
}
th
{
	height:50px;
	vertical-align:bottom;
}
</style>

其样式为：
在这里插入图片描述

4.5.5 表格填充

如需控制边框和表格内容之间的间距，应使用padding属性控制td和th元素的填充属性，我们将上面的表格间距设置为15px：

<style>
table {
    border-collapse: collapse;
	width:100%;
}

table, td, th {
    border: 1px solid black;
}
td{
	text-align:right;
	padding:15px;
}
th
{
	height:50px;
	vertical-align:bottom;
}
</style>

其样式为：
在这里插入图片描述

4.5.6 表格颜色

表格的颜色分为：

  • 边框颜色：使用border:solid属性
  • th元素的文本颜色：使用color属性
  • h元素的背景颜色：使用background-color属性

我们将上面的表格边框设置为绿色，标题背景色设置为橙色，标题文字设置为红色：

<style>
table, td, th {
    border: 1px solid green;
}
table {
    border-collapse: collapse;
	width:100%;

}
td{
	text-align:right;
	padding:15px;
}
th
{
	height:50px;
	vertical-align:bottom;
	background-color:orange;
	color:red;
}
</style>

其样式为：
在这里插入图片描述

4.6 边框

CSS边框属性允许你指定一个元素边框的样式和颜色。

4.6.1 边框样式

例如下图的几种边框样式：
在这里插入图片描述

边框样式属性指定要显示什么样的边界，使用border-style属性用来定义边框的样式，其可以选择的样式有：

  • none: 默认无边框
  • dotted: 定义一个点线边框
  • dashed: 定义一个虚线边框
  • solid: 定义实线边框
  • double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
  • groove: 定义3D沟槽边框。效果取决于边框的颜色值
  • ridge: 定义3D脊边框。效果取决于边框的颜色值
  • inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
  • outset: 定义一个3D突出边框。 效果取决于边框的颜色值

下面是常用的一些边框样式测试案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title> 边框样式测试案例</title> 
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>

<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
<p class="mix">混合边框</p>
</body>

</html>

其效果为：
在这里插入图片描述

4.6.2 边框宽度

您可以通过 border-width 属性为边框指定宽度。

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。

注意：CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。

下面是边框宽度的测试案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>边框宽度的测试案例</title>
<style>
p.one 
{
	border-style:solid;
	border-width:5px;
}
p.two 
{
	border-style:solid;
	border-width:medium;
}
p.three
{
	border-style:solid;
	border-width:1px;
}
</style>
</head>

<body>
<p class="one">一些文本。</p>
<p class="two">一些文本。</p>
<p class="three">一些文本。</p>
<p><b>注意:</b> "border-width" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。</p>
</body>

</html>

4.6.3 边框颜色

border-color属性用于设置边框的颜色。可以设置的颜色：

  • name - 指定颜色的名称，如 “red”
  • RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
  • Hex - 指定16进制值, 如 “#ff0000”
  • 您还可以设置边框的颜色为"transparent"。

注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

我们分别为上面三个边框设置红色蓝色绿色：

<style>
p.one 
{
	border-style:solid;
	border-width:5px;
	border-color:red;
}
p.two 
{
	border-style:solid;
	border-width:medium;
	border-color:#98bf21; 
}
p.three
{
	border-style:solid;
	border-width:1px;
	border-color:#0000FF;
}
</style>

其分别使用不同的三种方式表示对应的颜色：
在这里插入图片描述

同样的，颜色设置也不能单独使用，要先使用"border-style" 属性来设置边框。

4.6.4 单独设置各边

在CSS中，可以指定不同的侧面不同的边框，这些值可以单独出现，也可以同时出现，如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>边框单独设置边测试</title>
<style>
p
{
	border-top-style:dotted;
	border-right-style:solid;
	border-bottom-style:dotted;
	border-left-style:solid;
}
</style>
</head>

<body>
<p>两个不同的边界样式。</p>
</body>
</html>

这里将上边框和下边框设置为dotted类型，左边框和右边框设置为solid类型，其中的CSS样式也可以这样写：

<style>
p
{
	border-style:dotted solid，dotted solid;
}
</style>

5.盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：
在这里插入图片描述

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

5.1 元素的宽度和高度

当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。

下面的例子中的元素的总宽度为 450px：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>元素的宽度和高度测试</title>
<style>
div {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
</style>
</head>
<body>

<h2>盒子模型演示</h2>

<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>

<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>

</body>
</html>

在这里插入图片描述

这里的实际元素大小为：300px (宽)+ 50px (左 + 右填充)+ 50px (左 + 右边框)+ 50px (左 + 右边距)= 450px。假设我们只有 250 像素的空间，让我们设置总宽度为 250 像素的元素:

将上面的案例修改为：

div {
    width: 220px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}

在这里插入图片描述

此时，它的大小才符合要求。最终元素的总宽度计算公式是这样的：

  • 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

  • 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

5.2 margin(外边距)

margin 清除周围的（外边框）元素区域，没有背景颜色，是完全透明的。其可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

在这里插入图片描述

在CSS中，可以指定单边外边距属性：

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

也可以使用一个属性中margin指定的所有边距属性。也就是所谓的简写属性。

margin:100px 50px;

margin属性可以有一到四个值。

  • margin:25px 50px 75px 100px;

    • 上边距为25px
    • 右边距为50px
    • 下边距为75px
    • 左边距为100px

  • margin:25px 50px 75px;

    • 上边距为25px
    • 左右边距为50px
    • 下边距为75px

  • margin:25px 50px;

    • 上下边距为25px
    • 左右边距为50px

  • margin:25px;

    • 所有的4个边距都是25px
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>外边距测试</title> 
<style>
p
{
	background-color:yellow;
}
p.margin
{
	margin-top:100px;
	margin-bottom:100px;
	margin-right:50px;
	margin-left:50px;
}
</style>
</head>

<body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
</body>

</html>

上面是一个外边距测试案例，其效果如下图所示：
在这里插入图片描述

5.3 padding（内边距）

CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。单独使用 padding 属性可以改变上下左右的填充。
在这里插入图片描述

在CSS中，它可以指定不同的侧面不同的填充：

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

这里指定上内边距是 25px，右内边距是 50px，下内边距是 25px，左内边距是 50px。

同样的，为了缩短代码，它可以在一个属性中指定的所有填充属性，这就是所谓的简写属性，所有的填充属性的简写属性是 padding 。Padding属性，可以有一到四个值：

  • padding:25px 50px 75px 100px;
    • 上填充为25px
    • 右填充为50px
    • 下填充为75px
    • 左填充为100px
  • padding:25px 50px 75px;
    • 上填充为25px
    • 左右填充为50px
    • 下填充为75px
  • padding:25px 50px;
    • 上下填充为25px
    • 左右填充为50px
  • padding:25px;
    • 所有的填充都是25px

5.4 边框

盒子模型中的边框符合我们上边介绍的边框的规则：

#div2{
border:10px solid yellow;/*实线*/
border:10px dashed yellow;/*点状*/
border:10px dotted yellow;/*虚线*/
}

5.5 案例

我们简单使用单选框与输入框来进行一个外边距与内边距的案例：

  1. 设置单选框的选择框与选项之间的距离为20px
  2. 设置input输入框内，文字到边框的距离为20px

首先我们要清楚，其分别是什么距离，首先单选框是一个盒子 选项也是一个盒子 所以两个盒子的距离为外边距margin。然后input输入框是一个盒子, 盒子里的内容到边框的距离padding内边距。

所以代码为：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外边距与内边距案例测试</title>
	</head>
	<body>
		<!-- 外边距: 单选框是一个盒子    男也是一个盒子   两个盒子的距离margin -->
		<input type="radio" style="margin: 20px;"/>男 
		
		<!-- 内边距: 一个盒子里, 内容到边框的距离padding -->
		<input type="text" placeholder="你好" style="padding: 20px;"/>
		
	</body>
</html>

在这里插入图片描述

6.制作餐饮小票

在这里插入图片描述

6.1 CSS代码

body{/* 统一网页风格*/
	width: 400px;/* 宽度 */
	font-size: 15px;/* 字号 */
}
/* 修改字号 */
.a{/* class选择器,选中网页中class=a的元素 */
	font-size: 30px;
}
/* 修饰文字居中 */
.b{
	/* text-align: center; */
	padding-left: 100px;/* 内边距 */
}
/* 修饰水平线 */
hr{
	border:1px dashed green; /* 宽度 虚线 绿色*/
}
/* 修饰文本缩进/首行缩进 */
#note{
	text-indent:30px;
}
/* 修饰图片居中 */
img{
	padding-left: 80px;
}

6.2 html文件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>餐饮小票制作案例</title>
    <!-- 1.松耦合,分离了HTML和css代码,在网页里引入css文件 -->
    <link rel="stylesheet" href="D:\ApplicationFiles\vscode\chapter_three\css\1.css" />
</head>

<body>
    <div>顾客联</div>
    <div class="a">请您留意取餐账单号</div>
    <div class="b">自取顾客联</div>
    <div>永和大王(北二环西路店)</div>
    <div>010-6211313</div>
    <div class="b">--结账单--</div>
    <div class="a">账单号:P000009</div>
    <div>账单类型：堂食</div>
    <div>人数：1</div>
    <div>收银员：张静</div>
    <div>开单时间：2018-04-17 07:24:29</div>
    <div>结账时间：2018-04-17 07:24:38</div>
    <hr />
    <table>
        <tr>
            <th>数量</th>
            <th>品项</th>
            <th>金额</th>
        </tr>
        <tr>
            <td>1</td>
            <td>油条豆浆套餐<br /> 1X--油条<br />1X--现磨豆浆(热/甜) </td>
            <td>7.00</td>
        </tr>
    </table>
    <hr />
    <table>
        <tr>
            <td width="180px">支付宝花呗一元早餐</td>
            <td>3.00</td>
        </tr>
        <tr>
            <td>合计</td>
            <td>4.00</td>
        </tr>
        <tr>
            <td>支付宝</td>
            <td>1.00</td>
        </tr>
        <tr>
            <td>支付宝补贴</td>
            <td>3.00</td>
        </tr>
    </table>
    <hr />
    <div>打印时间：2018-04-17 07:24:38</div>
    <hr />
    <div id="note">根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整。
    </div>
    <img src="D:\ApplicationFiles\vscode\chapter_three\images\2.jpg" />
    <div>官网：www.yonghe.com.cn</div>
    <div>加盟热线：86-21-60769397 或 86-21-60769002</div>

</body>

</html>

7.完成用户注册

在这里插入图片描述

7.1 CSS代码

/* 修饰输入框 */
.a{
	width: 300px;/* 宽度 */
	height: 30px;/* 高度 */
	font-size: 20px;/* 字号 */
	padding: 15px;/* 内边距padding */
}
/* 修饰文字说明 */
.b{
	text-indent: 20px;/* 首行缩进 */
	font-size: 8px;/* 字号 */
	color: gray;/* 颜色 */
}
/* 修饰我已阅读 */
#note{
	padding-left: 20px;/* 内边距-左边距 */
}
/* 修饰注入按钮 */
input[type='submit']{
	text-align: center;/* 居中 */
	width: 330px;/* 宽度 */
	height: 50px;/* 高度 */
	font-size: 20px;/* 字号 */
	background-color: orangered;/* 背景色 */
	border-color: orangered;/* 边框颜色 */
	color: white;/* 字的颜色 */
}
/* 修饰用户注册 */
h3{
	margin-left: 130px;/* 左边距 */
}

7.2 html文件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>用户注册案例</title>

    <!-- 在HTML网页中引入css代码 -->
    <link rel="stylesheet" type="text/css" href="D:\ApplicationFiles\vscode\chapter_three\css\2.css">
</head>

<body>
    <!--只有form标签才能提交数据:必须用form+必须有submit+必须设置name属性
			method属性用来设置数据提交方式(get/post,默认是get)
			action属性用来设置数据将要交给哪个java程序来处理
		-->
    <form method="post" action="#">
        <!-- 指定提交数据的方式-->
        <table>
            <h2 style="padding-left: 130px;font-size:30px;">用户注册</h2>
            <tr>
                <td>
                    <input type="text" placeholder="用户名" class="a" />
                </td>
            </tr>
            <tr>
                <td class="xiao">
                    支持中文、字母、数字、“-”、“_”的组合，4-20个字符
                </td>
            </tr>
            <tr>
                <td>
                    <input type="password" placeholder="设置密码" class="a" />
                </td>
            </tr>
            <tr>
                <td class="xiao">
                    建议使用数字、字母和符号两种以上的组合，6-20个字符
                </td>
            </tr>
            <tr>
                <td>
                    <input type="password" placeholder="确认密码" class="a" />
                </td>
            </tr>
            <tr>
                <td class="xiao">
                    两次密码输入不一致
                </td>
            </tr>
            <tr>
                <td>
                    <input type="password" placeholder="验证手机" class="a" />
                    或
                    <a href="#"> 验证邮箱</a>
                </td>
            </tr>
            <tr>
                <td id="note">
                    <input type="checkbox" />
                    我已阅读并同意
                    <a href="#">《京淘用户注册协议》</a>
                </td>
            </tr>
            <tr>
                <td>
                    <!-- type类型必须是submit才能提交数据 -->
                    <input id="btn" type="submit" value="立即注册" />
                </td>
            </tr>
        </table>
</body>

</html>
收录于
零基础入门到就业--JAVA篇

当前文章被收录于：

零基础入门到就业--JAVA篇
224 篇文章 6 人学习
订阅专栏 查看详情
标签
#css #学习 #html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
CSS简单练习案例 CSS简单练习案例 目录 CSS简单练习案例 1. 新闻 2. 小米侧边栏（简易） 3. 五彩导航栏 4. 产品模块 5. 新浪导航栏 6. 排行榜 7. 模块 #END（素材源于pink老师分享） 1. 新闻 1.1 css代码： body { font: 16px/28px 'Microsoft YaHei'; } h1 { font-weight: 400; .. 阅读详情

相关推荐

threejs学习笔记：CSS2DObject 2d文字渲染

threejs 2d文字渲染

九段刀客的博客 3712

css常用demo练习

1.横向弹性布局，溢出的部分换行 flex布局实现不同分辨率屏幕显示效果不同，”自适应布局“ (flex-flow是flex-direction和flex-wrap的复合属性） display:flex; flex-flow:wrap; white-space: nowrap; text-overflow: ellipsis; 2.文字多余部分用省略号表示 over-flow:hidden; white-space:nowarp; text-overflow:ellipsis; 3.弹性布局，水平均匀间

SundayGoG的博客 2559

人形机器人系列——硬件介绍

人形机器人是多领域交叉技术的产物，主要由三大系统组成：感知系统、决策系统和执行系统。感知系统感知系统是人形机器人获取外界信息的途径，主要由各种传感器组成。其中，视觉传感器用于获取图像信息，如摄像头、激光雷达等；触觉传感器用于感知触碰和压力，如力/力矩传感器、声学传感器等。这些传感器收集到的信息为机器人的决策和执行提供基础。决策系统决策系统是人形机器人的大脑，负责处理和决策各种信息。它由芯片和算法组成。芯片是硬件基础，提供计算能力；算法是软件基础，用于处理和分析传感器收集到的信息，并做出相应的决策。执行系统。

liangwqi的博客 1万+

CSS练习

实现效果图 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l

毕业才是起点 1321

零外围电路！用CH340X实现ESP32一键下载的完整教程

本文详细介绍了如何利用CH340X系列USB转串口芯片实现ESP32的一键自动下载功能，无需任何外围逻辑控制电路。通过解析CH340X的增强型DTR/RTS功能，提供核心电路设计、电压匹配方案，并指导在Arduino IDE和PlatformIO中进行软件配置，帮助开发者构建简洁、可靠且低成本的ESP32下载方案。

gpu4optimizer的博客 758

智能手环心率检测不准？用STM32+MAX30102教你实现医疗级精度（含算法优化）

本文详细解析了如何利用STM32微控制器和MAX30102光学传感器实现医疗级精度的心率检测方案。通过硬件参数调校、ADC采集优化、运动伪影消除及深度学习算法改进，显著提升智能手环在静态和运动状态下的检测精度，误差可控制在±1.5bpm以内，满足医疗电子标准。

weixin_28335283的博客 517

前端技术——4——CSS练习

仿抽屉新热榜界面： 写一个类似的页面，练习CSS的使用。 整个页面分为两大部分，一是蓝色的页头，然后是页体 头部，即蓝色一行的设置，是页面的头部： <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; pad

kaoa000的专栏——非淡泊无以明志，非宁静无以致远 2186

3dsMax高效导入OSGB倾斜模型的3个关键步骤与插件应用

本文详细解析了在3dsMax中高效导入OSGB倾斜模型的三个核心步骤：建立索引、处理贴图路径以及选择合适的插件。针对导入过程中常见的模型崩溃、贴图丢失和操作卡顿问题，提供了从数据结构理解到插件选型的实战解决方案，帮助用户实现大规模实景模型在3dsMax中的流畅导入与编辑。

weixin_29238147的博客 464

HTML5和CSS3技术出来了 还需要学习CSS2吗？

HTML5和CSS3技术出来了 还需要学习CSS2吗？ 答案是必须学习CSS 2.0版技术。 因为CSS3是基于CSS2版本升级添加一些效果，但这些布局效果只有高版本IE浏览器才能呈现。 学会了CSS2对应CSS3只需要了解下即可会使用。 对应HTML5也是基于HTML4版本升级，增加可以自定义标签，比如以前布局网页头部局部，html5可以直接做为标签使用。

u013951435的专栏 1243

【人工智能】架构师必读：大模型时代的意图识别 (Intent Recognition) 四大技术流派与实践指南

意图识别没有“银弹”，选择哪种方案取决于具体的业务需求、数据积累以及成本预算。如果追求极简与低成本，BERT 是不二之选。如果业务极其复杂且依赖上下文，RAG 或 Agent 模式更合适。如果追求极致的稳定与效果，基于 LLM 的微调 + Function Calling 是目前的行业最佳实践。参考资源：基于 LLM 的意图识别解决方案(Embedding 相关课程章节)

奶爸的编程之路，也就一周冷个三天 692

2026华为OD面试题029：勇攀数字高峰

在给定的数字地形图里寻找登山路径，数字代表当前位置的海拔高度。要求从最低海拔出发，不断攀登，最终到达最高山峰。地图保证最低海拔和最高山峰都只有一个。 登山规则： - 路径上的海拔必须严格递增 - 只能向上下左右 4 个方向移动 - 路径必须从最低海拔开始，到最高海拔结束 - 每个地点只能走一次 - 每一步的攀登高度差必须大于 0，且不超过指定值 `K` 输出满足条件的登山路径的数量。

琅嬛福地 90

HTML和CSS自学可以吗,HTML5和CSS3技术出来了 还需要学习CSS2吗？

HTML5和CSS3技术出来了 还需要学习CSS2吗？答案是必须学习CSS 2.0版技术。因为CSS3是基于CSS2版本升级添加一些效果，但这些布局效果只有高版本IE浏览器才能呈现。学会了CSS2对应CSS3只需要了解下即可会使用。对应HTML5也是基于HTML4版本升级，增加可以自定义标签，比如以前做为标签使用。同时HTML5增加了数据存储、视频呈现代码规范不同等功能，大的HTML结构是没有变化...

weixin_36127579的博客 261

PCB仿真软件：Altium Designer_（18）.PCB设计中的热管理

在PCB设计中，热管理是一个至关重要的环节。随着电子设备的集成度越来越高，功耗和发热量也随之增加，不合理的热设计可能导致电路板过热，从而影响电路的性能和可靠性。热管理不仅能够提高电路板的使用寿命，还能确保电路在各种环境条件下的稳定工作。本节将详细介绍如何在Altium Designer中进行有效的热管理，包括热分析、热设计和热仿真等关键步骤。

kkchenjj的博客 1970

学习用Xhtml+CSS2构建网页

第一篇：喜新厌旧，逐步习惯Xhtml+CSS2的布局方式 近来有很多网站用Xhtml1.0标准将站点重构，其中包括yahoo，163，CSDN等这些大站。近来一段时间Xhtml+CSS2的热潮更是一浪高过一浪，所以偶也开始学起了，慢慢的就爱上她们了，页面构建技术就是若干MM，我们也要来个喜新厌旧。 一、为什么要学Xhtml+CSS2 首先，标准的代码便于网页在各种浏览器中的顺利显示。...

weixin_34025151的博客 218

电源芯片MPQ3431A

MPQ3431A是一款具有宽输入范围的固定频率为450kHz的高度集成的升压转换器，其输入电压低至2.7V，采用恒定关断时间（COT）的控制拓扑，可提供快速的瞬态响应。芯片支持通过MODE管脚配置PSM（pulse-skip mode）、FCCM（forced continuous conduction mode）和USM（ultrasonic mode）；还支持通过电流限制配置来达到精确的过流保护；同时芯片欠压保护(UVLO)和过温保护(OTP)。MPQ3431A采用QFN-13（3mmx4mm）封装。保

qflook的博客 1550

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术，以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索，主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式，计算机控制系统的数学描述与基本分析方法，以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

CSS2与CSS3布局方式比较，书籍+视频+学习笔记+技能提升资源库

*JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串。**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式。例文字实例文字实例文字。

1054

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox（带书签），MATLAB统计学习工具

css2学习总结之尚品汇静态页面

在 PC 端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页的版心。版心的宽度一般是 960 ~ 1200 像素之间。版心可以是一个，也可以是多个。

冬阳 952

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android：LinePhone3.2.7(最新版本)，官网地址：http://www.linphone.org/

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

css css2 css3_学习CSS的最佳方法

无论您是刚刚开始使用基础知识还是想探索更高级CSS，我们都会提供一个全新且全面的学习指南，以帮助您在线学习CSS。 查阅 学习CSS：完整指南 。 CSS与HTML协同工作; HTML整理了页面结构，CSS使其看上去很漂亮，并增加了微妙的交互作用。 作为一名网页设计师，您应该真正掌握这两种语言。 即使您自己不进行编码，了解它们的工作原理也会帮助您进行网络设计。 掌握基础知识：什么是CS...

Web design 教程小屋 374

Rainer’s DHTML Library 2.0　　学习ＣＳＳ的好助手

Rainer’s DHTML Library 2.0　　学习ＣＳＳ的好助手 

874

html&css学习笔记——CSS2基础

的位置，创建一个子元素（必须用 content 属性指定内容）。3.3选择器的优先级(权重)

weixin_61182303的博客 1487

css css2 css3_学习CSS第2部分

css css2 css3Welcome back! 欢迎回来！ Today’s article is about colours. For this article, you need to have a sound understanding of what is CSS and how it works. Here is the link to Part 1. Please go thro...

weixin_26737625的博客 358

前端学习2——CSS

CSS 是层叠样式表（Cascading Style Sheets）的简称，也称或，主要适用场景就是的HTML 只关注内容的语义，CSS 主要用于设置 HTML 页面中的（字体、大小、对齐方式等）、（宽高、边框样式、边距等）以及。

weixin_49157844的博客 1817

css 学习2

css学习笔记2 优先级注意 a自己相当于a { color : blue} [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UmVgRDVN-1650890649144)(image/css2/1650711674348.png)] 权重叠加 可以叠加，但是永远不会有进位 继承的权重是0,0,0,0； 盒子模型 网页布局本质 用css摆盒子 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lo2WUsaD-1650890649145)(C:\Us

weixin_52700040的博客 897

CSS2_基础学习

* 什么是伪元素？3 [属性名^=“值”] 选中包含某个属性，且属性值以指定的值开头的元素。4 [属性名$=“值”] 选中包含某个属性，且属性值以指定的值结尾的元素。/* 选中的是p元素最开始的位置，随后创建一个子元素 *//* 选中的是p元素最后的位置，随后创建一个子元素 */行内样式>ID选择器>类选择器>元素选择器>通配选择器。语法：选择器1,选择器2, 选择器3,…语法：选择器1 选择器2 选择器3…语法：选择器1>选择器2>选择器3>…语法：选择器1选择器2选择器3…

feverfew1的博客 1194

CSS学习2

CSS学习2

m0_58383878的博客 431
上一篇： 2.4 VUE基础讲解
下一篇： 2.3 js学习
点赞 0
评论 0
书签 书签 3
蟑螂恶霸不是恶霸
蟑螂恶霸不是恶霸
博客等级 码龄5年 152粉丝 308原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值