HTML CSS简要总结

已于 2022-07-10 09:32:27 修改
阅读量391 收藏
点赞数
文章标签： javascript html 前端
于 2022-07-10 09:25:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tcyaldd/article/details/125702161
版权

目录

一、HTML简介

在这里插入图片描述

1.何为HTML

HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。
HTML 是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。
HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。
在浏览器中看到的任何网页背后都是一个 HTML 文档，只要在网页上点击鼠标右键->查看源代码（用控制台工具也可）就可看到。

2. HTML文档结构

2.1 新建工作目录

前面我们已经安装了开发软件 code 及其相关的插件（code下载）。运行该软件，打开/新建一个文件夹，如下图所示
在这里插入图片描述

2.2 新建 HTML 文件

接下来在该文件夹下新建一个 **后缀名为html **的文件，如下图所示：
在这里插入图片描述

在该文件中输入如下内容：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>页面标题</title>
</head>
<body>
  <h1>我的第一个Web页</h1>
  <p>当前有点丑：)</p>
</body>
</html>

看看结果
Web 浏览器如 Chrome、 Firefox、Edge、Safari 等用来读取 HTML 文件并呈现出来。（再次推荐使用 Chrome 或 Firefox）

在开发工具 code 中我们已经安装了open in browser插件，因此在 code 的编辑区点击鼠标右键即可看到快捷方式将该文件在浏览器中打开。如下图所示：
在这里插入图片描述

3. HTML 文档结构分析

3.1 HTML元素

HTML 使用"标记"（markup）来注明文本、图片和其他内容，以便于在浏览器中显示。HTML 标记包含一些规定的"元素"如<head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img>，<aside>，<audio>，<canvas>，<datalist>，<details>，<embed>，<nav>，<output>，<progress>，<video>等等。

检查我们刚创建的 HTML 文档你会发现，整个 HTML 就由一个个元素组成（可以嵌套），而元素则一般由一对标签（tag）构成。

3.2 剖析一个 HTML 元素

如下所示的一个用于展示段落的元素：
在这里插入图片描述

1.开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
2.结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
3.内容（Content）：元素的内容，本例中就是所输入的文本本身。
4.元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

3.3 剖析 HTML 文档

对于我们前面创建的 HTML 文档，分析如下：

  1. <!DOCTYPE html>:声明文档类型。出于历史原因需要，现在可有可无。
    2.<html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
  2. <head></head>: <head>元素。 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
  3. <meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
  4. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: 指定页面的图标，出现在浏览器标签上。(试一试：你可随意下载一个.ico图标文件到工作目录中)
  5. <title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
    7.<body></body>: <body>元素。 包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。

4. HTML 文档相关说明

4.1 注释

如同大部分的编程语言一样，在 HTML 中有一种可用的机制来在代码中书写注释 。

注释是被浏览器忽略的，而且是对用户不可见的，它们的目的是允许你描述你的代码是如何工作的和不同部分的代码做了什么等等。 如果你在半年后重新返回你的代码库，而且不能记起你所做的事情，或者当你处理别人的代码的时候， 那么注释是很有用的.

为了将一段 HTML 中的内容置为注释，你需要将其用特殊的记号<!--和-->包括起来， 比如：

<p>我在注释外，可以显示！</p>
<!-- <p>我在注释内！浏览器将忽略我</p> -->

4.2 空元素

一般来说，元素都拥有开始标签，内容，结束标签。但有一些元素只有一个开始标签，通常用来在此元素所在位置插入/嵌入一些东西，如<br>, <hr>, <input>,<img>, <a>等等。我们称其为空元素，如下：

<!-- 换行 -->
<p>我可以<br>换行</p> 
<!-- 水平分割线 -->
<hr>
<!-- 输入框 -->
<input>

4.3 元素的属性

元素是可以有相关属性的。属性包含元素的额外信息，这些信息不会在浏览器中显示出来。

<!-- 带属性的段落输入框 -->
<p title="这是个title属性">鼠标移上来试试！</p>
<!-- 带属性的输入框 -->
<input type="text">
<input type="password">

一个属性必须包含如下内容：

  1. 一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
  2. 属性名称，后面跟着一个 = 号。
  3. 一个属性值，由一对引号 “” 引起来。

5. 标题（heading）

HTML 提供了从大到小6级标题，分别是：<h1> ~ <h6>，如下所示：

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

在页面中，标题非常重要：

  1. 搜索引擎用标题来索引页面的内容
  2. 用户也习惯以标题进行主要内容浏览，以决定是否查看该页面

6. 文本格式

我们需要知道的文本格式标签如下：

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

7. 超链接 a

没有超链接就没有万维网（World Wide Web）。基本上，我们可以把任何东西加上超链接，不过常用的是文本、图片等。

7.1 超链接语法

<a href="https://www.baidu.com/" target="_blank">百度一下</a>

说明：

  1. href即为要跳转去的地址 URL（Uniform Resorce Locator)
  2. target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）
  3. 超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的

7.2 锚点

锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。

先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。

<!-- 文档其余部分 -->
<h2 id="C4">第四章 论零号病人的重要性</h2>
<!-- 文档其余部分 -->
<a href="#C4">跳到第四章</a>
<!-- 文档其余部分 -->
...

8. 图片及文件路径 img

8.1 图片

在页面插入一张图片如下：

<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">

说明：

  1. src属性为要显示图片文件的位置 URL，即图片文件的路径
  2. alt属性当获取图片出现问题时显示的文字（占位符）
  3. 可为图片指定高宽度，但不建议（可能导致图片变形）

8.2 文件路径

为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径有相对路径和绝对路径两种。

上面图片的例子即为绝对路径。下面是相对路径的例子：

例子解释
<img src="picture.jpg"> 该图片文件与当前文档在同一目录中
<img src="./images/picture.jpg">该图片文件在当前目录下的images目录中
<img src="../picture.jpg">该图片文件在上一级目录中

9. 表格 Table

有时，页面的内容需要用表格来进行呈现。我们使用

等标签即可： 

  <table>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </table>

代码中，<tr>表示行, <td>表示行中的单元, <th>是表头的单元（将会加粗显示）

10. 列表 List

我们也可以使用列表来呈现内容，分为无序列表和有序列表。

10.1无序列表

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

无序列表使用<ul>标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。

<ul type="square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

10.2 有序列表

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

有序列表使用<ol>标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

11. 表单 Form

当网站需要获取我们的一些信息如：用户名、密码、选择买什么、买多少、提出意见等等时，我们就需要使用表单（form）来让用户填写或选择。

请输入如下代码进行学习：

<form>
  <!-- 文本框，注意有 placeholder 提示符 -->
  用户名：<br>
  <input type="text" name="name" placeholder="请输入用户名"><br>
  <!-- 密码框 -->
  密码：<br>
  <input type="password" name="ps" placeholder="请输入密码"><br>
  年龄：<br>
  <!-- 数字输入框，注意 min 和 value 属性-->
  <input type="number" name="age" min="18" value="18"><br>
  <!-- 单选按钮, 注意 checked 属性 -->
  性别：<br>
  <input type="radio" name="gender" value="male" checked> 男<br>
  <input type="radio" name="gender" value="female"> 女<br>
  <input type="radio" name="gender" value="other"> 其它<br>
  <!-- 下拉列表，注意 selected 属性 -->
  党派：<br>
  <select name="party">
    <option value="D">民主党</option>
    <option value="R" selected>共和党</option>
    <option value="N">无党派</option>
  </select><br>
  <!-- 多选框 -->
  您有哪些交通工具：<br>
  <input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
  <input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
  <input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
  <input type="checkbox" name="vehicle4" value="Jet"> 飞机<br>
  <!-- 日期选择器 -->
  您的工作日期：<br>
  <input type="date"><br>
  <!-- 文件选择器 -->
  上传您的照片:<br>
  <input type="file" name="photo"><br>
  <!-- 文本输入区域，注意 rows 和 cols 属性 -->
  您的建议：<br>
  <textarea name="message" rows="5" cols="30">
    The cat was playing in the garden.
  </textarea><br><hr>
  <!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理 -->
  <input type="submit" value="提 交">
  <input type="reset" value="重 置">
</form>

12. 其它

HTML 的元素可以以称为区块 或 内联的方式进行显示。

12.1 区块元素

区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：<h1>, <pre>, <ul>, <table>，<div> 等。

<h2>区块元素</h2>
<div>Hello</div>
<div>World</div>
<p>单独一行</p>

12.2 内联元素

内联元素相反，他们总是一个接一个进行显示，不会新起一行。如：<span>, <input>, <td>, <a>, <img>等。

<h3>下面的元素将在一行中显示</h3>
<span>姓名：</span>
<input name="username">
<span>哈哈哈</span>
<a href="https://google.com/">Google</a>
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg">

12.3 预设格式

如果你想在网页中展示一首诗或一些特别格式的文本，那么请使用pre标签。

<!-- pre标签中的内容将保持格式不变 -->
<pre>
              我如果爱你——
              绝不象攀援的凌霄花，
              借你的高枝炫耀自己；

              我如果爱你——
              绝不学痴情的鸟儿，
              为绿荫重复单调的歌曲；

              也不止像泉源，
              常年送来清凉的慰藉；

              也不止像险峰，
              增加你的高度，衬托你的威仪。

              甚至日光。
              甚至春雨。

              不，这些都还不够！
              我必须是你近旁的一株木棉，
              作为树的形象和你站在一起。

              根，紧握在地下，
              叶，相触在云里。

              每一阵风过，
              我们都互相致意，
              但没有人，
              听懂我们的言语。

              你有你的铜枝铁干，
              像刀，像剑，
              也像戟；

              我有我红硕的花朵，
              像沉重的叹息，
              又像英勇的火炬。

              我们分担寒潮、风雷、霹雳；
              我们共享雾霭、流岚、虹霓。
              仿佛永远分离，
              却又终身相依。

              这才是伟大的爱情，
              坚贞就在这里：
              爱——
              不仅爱你伟岸的身躯，
              也爱你坚持的位置，足下的土地。
</pre>

12.4 特殊字符

考虑下面的代码将显示成什么？

<p>有多          远，滚                         多远！</p>

或者你希望在页面显示一段 HTML 的源代码，你打算用标签<pre>:

<pre>
  <h1>这是个一级标题</h1>
  <p>这是一个段落<p>
  <a href="https://twitter.com/">眼见何事，情系何处，身处何方，心思何人</a>
<pre>

以上代码将得不到你想要的结果。
原因是：在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）

<p>有多&nbsp;&nbsp;&nbsp;远，滚&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;多远！</p>
<hr>
<h2>test.html</h2>
<pre>
  &lt;h1&gt;这是个一级标题&lt;/h1&gt;
  &lt;p&gt;这是一个段落&lt;p&gt;
  &lt;a href="https://twitter.com/"&gt;眼见何事，情系何处，身处何方，心思何人&lt;/a&gt;
<pre>

二 CSS简介

1. 何为 CSS

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。

网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。

万维网联盟 W3C（World Wide Web Consortium）意识到这个问题，于1997年推出 CSS 1.0（当前最新的版本是 CSS3），正式推动了内容（HTML）和表现（CSS）的分离，人们开始可以把所有的布局和样式代码从 HTML 中移除放入到 CSS 中。

CSS 入门极其容易，但要完全掌握及合理的应用则比较困难。

2. CSS 语法

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

这条规则表明，页面中所有的一级标题都显示为蓝色，字体大小为12像数。
说明：

  1. 选择器是您需要改变样式的对象（上图的规则就一级标题生效）。
  2. 每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）
  3. 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
    再如下例所示：
/* 这是CSS的注释 */
/* 建议每条申明占一行 */
p{
  color:red;
  text-align:center;  /* 文本居中 */
}

2.1 选择器

一个页面上的元素众多，选择器就用于在页面中找到/选择需要应用这个样式的对象。
除我们前示的元素选择器外，还有id和class选择器。其中class选择器使用非常普遍。

2.1.1 id 选择器
/* 注意：id选择器前有 # 号。 */
#sky{
  color: blue;
}

这条规则表明，找到页面上id为sky的那个元素让它呈现蓝色，如下所示的页面，蓝色的天空这几个字就将会是蓝色的。

<p id="sky">蓝色的天空</p>
<p id="forest">绿色的森林</p>
2.1.2 class 选择器
/* 注意：class选择器前有 . 号。 */
.center{
  text-align: center;
}
.large{
  font-size: 30px;
}
.red{
  color: red;
}

以上代码定义了三条规则，分别应用于页面上对应的元素，如只要页面上某元素的class为red，那么就让它呈现红色。
如下所示的页面：

<p class="center">我会居中显示的</p>
<p class="red">我是红色的</p>
<p class="center large red">我又红又大还居中</p>
<p class="red">我也可以是红的</p>

3. CSS 如何生效

上节我们学习了如何定义 CSS样式，那么如何让这些规则对页面生效？
我们一般有三种方法：外部样式表，内部样式表，内联样式

3.1 外部样式表

新建如下内容的一个 HTML文件（后缀为.html)：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
  <link rel="stylesheet" type="text/css" href="mycss.css">
  <title>页面标题</title>
</head>
<body>
  <h1>我是有样式的</h1>
  <hr>
  <p class="haha">还是有点丑：)</p>
</body>
</html>

在同一目录新建一个样式表文件mycss.css（注意后缀名为css）如下：

body {
  background-color: linen;
  text-align: center;
}
h1 {
  color: red;
}
.haha {
  margin-top: 100px;
  color: chocolate;
  font-size: 50px;
}

在浏览器中打开这个 HTML 文件看看效果。

提示： 一般我们会在项目目录下建一个文件夹如css专门存放样式表文件，如此我们引入样式文件时路径就变为 ./css/mycss.css之类的。

提示： 引入外部样式表是我们使用样式的主流方式，因为众多的样式规则单独放在一个文件中，与 HTML 内容分开，结构清晰。同时其它页面也可使用，达到复用的目的。

3.2 内部样式表

我们也可以将样式放在 HTML 文件中，这称为内部样式表。如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
  <link rel="stylesheet" type="text/css" href="mycss.css">
  <title>页面标题</title>
  <style>
    body {
      background-color: linen;
      text-align: center;
    }
    h1 {
      color: red;
    }
    .haha {
      margin-top: 100px;
      color: chocolate;
      font-size: 50px;
    }
  </style>
</head>
<body>
  <h1>我是有样式的</h1>
  <hr>
  <p class="haha">还是有点丑：)</p>
</body>
</html>

该例子与上述例子一样的效果，但注意在<head>元素中引入了<style>标签，放入了样式。

3.3 内联样式

所谓内联样式，就是直接把样式规则直接写到要应用的元素中，如：

<h3 style="color:green;">I am a heading</h3>

提示： 内联样式是最不灵活的一种方式，完全将内容和样式合在一起，实际应用中非常少见。

3.4 级联的优先级

前面我们学习了三种使用样式的方式，如果某元素如

在外部、内部及内联样式中都被设置color:red;、color:green;、color:blue;，那么到底是什么颜色，也即到底哪个有效呢？
这就涉及样式的优先级问题，从高到低分别是：

  1. 内联样式
  2. 内部样式表或外部样式表
  3. 浏览器缺省样式

4. 颜色, 尺寸, 对齐

4.1 颜色

颜色在网页中的重要性不言而喻。
我们可以采用颜色名称也可以使用颜色RGB16进制值，来设定前景或背景的颜色。如：

<!-- 颜色名称 -->
<h3 style="background-color:Tomato;">Tomato</h3>
<h3 style="background-color:Orange;">Orange</h3>
<h3 style="background-color:DodgerBlue;">DodgerBlue</h3>
<h3 style="background-color:MediumSeaGreen;">MediumSeaGreen</h3>
<h3 style="background-color:Gray;">Gray</h3>
<h3 style="background-color:SlateBlue;">SlateBlue</h3>
<h3 style="background-color:Violet;">Violet</h3>
<h3 style="background-color:LightGray;">LightGray</h3>
<hr>
<!-- 颜色值，3个字节分别代表RGB（Red，Green，Blue）的0～255的值 -->
<h3 style="background-color:#ff0000;">#ff0000</h3>
<h3 style="background-color:#0000ff;">#0000ff</h3>
<h3 style="background-color:#3cb371;">#3cb371</h3>
<h3 style="background-color:#ee82ee;">#ee82ee</h3>
<h3 style="background-color:#ffa500;">#ffa500</h3>
<h3 style="background-color:#6a5acd;">#6a5acd</h3>
<!-- 文本颜色 -->
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
<p style="color:MediumSeaGreen;">Ad facilis est ducimus rem consectetur, corporis omnis, eveniet esse dolor molestiae numquam odio corrupti, sed obcaecati praesentium accusamus? Tempora, dolor a?</p>

注意： 为演示方便，我们的样式采用了内联方式，实际中不能这样做！

一个网站，颜色是其重要的一个特征。如 facebook，twitter，taobao等等（我们学校的主色调是什么？）。甚至连香港地铁的各个站也使用了颜色来区分，如下图：
在这里插入图片描述

网页选用一种耐看、易用、符合心意的配色是不容易的，尤其在没有专业设计师时。幸好，即使没有美学基础，但有一些已经调配好的配色方案我们可以直接使用。去ColorDrop 或 LOL Corlors 挑选你网站的配色吧。

4.2 尺寸

我们可以用 height 和 width设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。
新建如下 HTML 文件：

<html>
  <head>
    <link rel="stylesheet" href="./mycss.css">
  </head>
  <body>
    <div class="example-1">
      这个元素高 200 pixels，占据全部宽度
    </div>
    <div class="example-2">
      这个元素宽200像素,高300像素
    </div>
  </body>
</html>

再建对应的 CSS 文件如下：

.example-1 {
  width: 100%;
  height: 200px;
  background-color: powderblue;
  text-align: center;
}
.example-2 {
  height: 100px;
  width: 500px;
  background-color: rgb(73, 138, 60);
  text-align: right;
}

4.3 对齐

对于元素中的文本，我们可以简单的设置text-align属性为left, center, ````right即可（显然缺省的是左对齐），上例中已有相关的应用。
对于元素本身如何对齐，我们后面再学习。

5. 盒子模型

盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的，如下图所示：
在这里插入图片描述

说明：

  1. Content 盒子的内容，如文本、图片等
  2. Padding 填充，也叫内边距，即内容和边框之间的区域
  3. Border 边框，默认不显示
  4. Margin 外边距，边框以外与其它元素的区域
    新建如下 HTML 文件：
<html>
  <head>
    <link rel="stylesheet" href="./mycss.css">
  </head>
  <body>
    <div class="box1">我是内容一，外面红色的是我的边框。注意边框的内外都有25px的距离。</div>
    <div class="box2">我是内容二，外面蓝色的是我的边框。注意与上面元素的外边距，发生了叠加，不是50px而是25px。</div>
  </body>
</html>

再建对应的 CSS 文件如下：

.box1 {
  height: 200px;
  width: 200px;
  background-color:#615200;
  color: aliceblue;
  border: 10px solid red;
  padding: 25px;
  margin: 25px;
}
.box2 {
  height: 300px;
  width: 300px;
  background-color:#004d61;
  color: aliceblue;
  border: 10px solid blue;
  padding: 25px;
  margin: 25px;
}

打开浏览器看看效果。

提示： 在页面上点击鼠标右键，选择审查元素，你可清楚看到如下图所示的布局。
在这里插入图片描述

留意上图，你会发现一个元素真正占据的宽度应该是：
左外边距 + 左边框宽度 + 左内边距 + 内容宽度 + 右内边距 + 右边框宽度 + 右外边距

因此，我们在用width属性设置元素的宽度时，实际上只设置了其内容的宽度。

6. 边框与边距

提示： 无论边框、内边距还是外边距，它们都有上下左右四个方向。

6.1 边框

试一试如下的代码：

<p class="example-1">I have black borders on all sides.</p>
<p class="example-2">I have a blue bottom border.</p>
<p class="example-3">I have rounded grey borders.</p>
<p class="example-4">I have a purple left border.</p>

.example-1 {
  border: 1px dotted black; /* 上下左右都相同 */
}
.example-2 {
  border-bottom: 1px solid blue; /* 只设置底部边框 */
}
.example-3 {
  border: 1px solid grey;
  border-radius: 15px; /* 边框圆角 */
}
.example-4 {
  border-left: 5px solid purple;
}

边距
下面样式说明了内边距的设置：

padding: 20px; /* 上下左右都相同 */
padding-top: 20px;
padding-bottom: 100px;
padding-right: 50px;
padding-left: 80px;
padding: 25px 50px 75px 100px; /* 简写形式，按上，右，下，左顺序设置 */
padding: 25px 10px; /* 简写形式，上下为25px，左右为10px */

外边距与此类似。

7. 定位

position属性用于对元素进行定位。该属性有以下一些值：

  1. static 静态
  2. relative 相对
  3. fixed 固定
  4. absolute 绝对
    设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。

7.1 static

设置为静态定位position: static;，这是元素的默认定位方式，也即你设置与否，元素都将按正常的页面布局进行。
即：按照元素在 HTML出现的先后顺序从上到下，从左到右进行元素的安排。

7.2 relative

设置为相对定位position: relative;，这将把元素相对于他的静态（正常）位置进行偏移
试试如下的代码：

<!-- HTML -->
<div class="example-relative">我偏移了正常显示的位置。去掉我的样式对比看看？</div>
<!-- CSS -->
.example-relative {
  position: relative;
  left: 60px;
  top: 40px;
  background-color: rgb(173, 241, 241);
}

7.3 fixed

设置为固定定位position: fixed;，这将使得元素固定不动（即使你上下左右拖动浏览器的滚动条）。
此时元素固定的位置仍由``top, bottom, left, right属性确定，但相对的是视口（viewport，就是浏览器的屏幕可见区域）
如下的代码将会在浏览器右下角固定放置一个按钮元素：

<!-- HTML -->
<div class="broad">占位区域。请将浏览器窗口改变大小，看看右下角的按钮发生了什么？</div>
<div class="example-fixed">这个按钮是固定的</div>
<!-- CSS -->
.example-fixed {
  position: fixed;
  bottom: 40px;
  right: 10px;
  padding: 6px 24px;
  border-radius: 4px;
  color: #fff;
  background-color: #9d0f0f;
  cursor: pointer;
  box-shadow: 0 3px 3px 0 rgba(0,0,0,0.3), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
.broad {
  height: 5000px;
  width: 5000px;
  padding: 20px;
  background-color: darkkhaki;
}

7. 4 absolute

设置为绝对定位position: absolute;，将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。
如果该元素的所有父元素都没有设置定位属性，那么就相对于<body>这个父元素。

注意： 绝对定位此处可能有些混淆，请留意其是仍是相对的，不过是相对最近的父元素

试试如下的代码：

<!-- HTML -->
<div class="example-relative">这是父元素，有 relative 定位属性
  <div class="example-absolute">
    这是子元素，有 absolute 定位属性
  </div>
</div>
<!-- CSS -->
.example-relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid rgb(87, 33, 173);
}
.example-absolute {
  position: absolute;
  top: 80px;
  right: 5px;
  width: 200px;
  height: 100px;
  border: 3px solid rgb(218, 73, 16);
}

8. 溢出

当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。
溢出属性有一下几个值：

  1. visible 默认值，溢出部分不被裁剪，在区域外面显示
  2. hidden 裁剪溢出部分且不可见
  3. scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
  4. auto 裁剪溢出部分，视情况提供滚动条
    以上内容较好理解，请自行进行验证。
    关于滚动，我们还可以单独对上下或左右方向进行，如下代码所示：
<!-- HTML -->
<div class="example-overflow-scroll-y">You can use the overflow property when you want to have better control of the
    layout. The overflow property specifies what happens if content overflows an element's box.
</div>
<!-- CSS -->
.example-overflow-scroll-y {
  width: 200px;
  height: 100px;
  background-color: #eee;
  overflow-y: scroll;
}

9. 浮动

在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。
我们常用这种样式来使图像和文本进行合理布局，如我们希望有以下的效果：

让图片向右浮动即可，代码如下：

<html>
<head>
  <style>
    .example-float-right {
      float: right;
    }
  </style>
</head>
<body>
  <img src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" class="example-float-right" alt="">
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem, architecto officiis, repellendus
  corporis obcaecati, et commodi quam vitae vel laudantium omnis incidunt repellat qui eveniet fugiat totam
  modi nam vero!</p>
</body>
</html>

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。

试一试： 有如下4张图片，如果没加样式的话，这几张图片将会从上到下依次显示。考虑使用左浮动，让它们水平依次显示。
在这里插入图片描述

一个元素浮动后，其后的元素将尽可能包围它，或者说出现在这个浮动元素的左或右方。
如果希望浮动元素后面的元素在其下方显示，可使用clear: both样式来进行清除。

10. 不透明度

我们可以用opacity对任何元素（不过常用于图片）设置不透明度。
值在[0.0～1.0]之间，值越低，透明度越高，如下图所示：
在这里插入图片描述

试试如下代码：

<html>
<head>
  <style>
    img {
      width: 25%;
      border-radius: 10px;
      float: left;
      margin: 10px;
    }
    .opacity-2 {
      opacity: 0.2;
    }
    .opacity-5 {
      opacity: 0.5;
    }
    .opacity-10 {
      opacity: 1;
    }
  </style>
</head>
<body>
  <img class="opacity-2" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
  <img class="opacity-5" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
  <img class="opacity-10" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
</body>
</html>

11. 组合选择器

前面我们学习了 CSS有三种选择器：元素、id 和 class 。但我们也可以进行组合，以得到简洁精确的选择。
下面我们介绍两种组合选择器。

11.1 后代选择器

以空格作为分隔，如：.haha p 代表在div元素内有.haha这种类的所有元素。
参见如下代码：

<html>
<head>
  <style>
    .haha p {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="haha">
    <p>Paragraph 1 in the div .haha.</p>
    <p>Paragraph 2 in the div .haha>.</p>
    <span>
        <p>Paragraph 3 in the div .haha.</p>
    </span>
  </div>
  <p>Paragraph 4. Not in a div .haha.</p>
  <p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>

段落1、2、3都将有黄色的背景，而段落4、5没有。

11.2 子选择器

也称为直接后代选择器，以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接

元素。
参见如下代码：

<html>
<head>
  <style>
    .haha > p {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="haha">
    <p>Paragraph 1 in the div .haha.</p>
    <p>Paragraph 2 in the div .haha.</p>
    <span>
        <p>Paragraph 3 in the div .haha - it is descendant but not immediate child.</p>
    </span> <!-- not Child but Descendant -->
  </div>
  <p>Paragraph 4. Not in a div .haha.</p>
  <p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>
```
虽然段落3在``.haha``类中，但它的直接父元素是span，不是``.haha``的直接后代，所以不能选择。只有段落1、2有黄色背景。
## 12. 伪类和伪元素
伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。
比如我们可能有这样的需求：

1. 鼠标移到某元素上变换背景颜色
2. 超链接访问前后访问后样式不同
3. 离开必须填写的输入框时出现红色的外框进行警示
4. 保证段落的第一行加粗，其它正常
...
使用伪类/伪元素的语法如下：
```javascript
/* 选择器后使用 : 号，再跟上某个伪类/伪元素 */
selector:pseudo-class/pseudo-element {
  property:value;
}
```
以下是常用的伪类/伪元素的简单使用：
```javascript
a:link {color:#FF0000;}     /* 未访问的链接 */
a:visited {color:#00FF00;}  /* 已访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标划过链接 */
/* 鼠标移到段落则改变背景颜色 */
p:hover {background-color: rgb(226, 43, 144);}
p:first-line{color:blue;}   /* 段落的第一行显示蓝色 */
p:first-letter{font-size: xx-large;}   /* 段落的第一个字超大 */

h1:before { content:url(smiley.gif); } /* 在每个一级标题前插入该图片 */
h1:after { content:url(smiley.gif); } /* 在每个一级标题后插入该图片 */
```
tcyaldd
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Html CSS javascript 总结
zhangliewena的博客
11-25 316
一.Html总结：大名Hyper Text Markup Language (超文本 标记 语言) 1.基本结构：文档标记， 头部标记，正文标记 ， 属于中的一部分。 但一般这一部分编译器会生产 2.段落标签： 3.字体：通过size来控制字体的大小 而且还可以调节字体颜色 其中颜色：color：调节 字体种类由font-family 4.标题：为一级标题 为二级标题为三级标题而后还有到但一般常用为h1~h3标题 5.注释： 6.对于读取照片可分为相对路径与绝对路径 （常用属性：src,width,h
简要总结CSS编程中的响应式设计
09-24
在CSS编程中，响应式设计是一个不可或缺的概念，尤其对于初学者来说，理解并掌握它是进阶到高级前端开发的必经之路。 首先，我们要理解响应式设计的基础——`<meta>`标签中的`viewport`属性。`viewport`是指设备的...
HTML和CSS总结
m0_46275263的博客
06-15 3286
前端三剑客之二：HTML和CSS的初步了解
HTML+CSS学习总结
weixin_53351919的博客
06-26 2815
html+css学习总结
HTML和CSS的总结
weixin_46631196的博客
06-19 206
作业总结
HTML&CSS总结
qq_52338998的博客
07-09 433
html css的简要总结
HTML&CSS 学习总结
qq_59826941的博客
07-10 273
HTML是超文本标记语言（HyperText Markup Language）的缩写，我们用HTML来构建Web页面。它定义了网页内容的含义和结构，HTML不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML文件应是一个后缀名为html的文件。HTML元素：HTML使用“标记”来注明文本、图片和其他内容，便于在浏览器中显示。该标记包含一些规定的“元素”，如：，，，，，，，，，...
HTML & CSS 学习总结
wg__C的博客
06-23 562
1.标签的格式为<标签名>文本</标签名>，如2.标签名大小写都可以，如下，把h1改成H!，仍然能显示3.标签属性基本属性：设置简单的样式效果如下，可以给标签加上一个style，设置其字体颜色为红色事件属性：设置事件响应后的代码如下，为标签设置一个点击事件，点击或触发弹窗提示点击效果：4.标签分类单标签：<标签名/> 如：<br/> <hr/>双标签：<标签名>文本<标签名/> 上图展示的皆为双标签。
HTML+CSS简答题总结
2301_78986604的博客
07-01 332
0% 0% 表示图像左上角与标记的左上角对齐，50% 50% 表示图像50% 50%中心点与标记50% 50%的中心点对齐，20% 30% 表示图像20% 30%的点与标记20% 30%的点对齐，100% 100% 表示图像右下角与标记的右下角对齐，而不是图像充满标记，如果只有一个百分数，将作为水平值，垂直值则默认为50%。对于两个嵌套关系的块元素，如果父标记没有上内边距及边框，则父标记的上外边距会与子标记的上外边距发生合并，合并后的外边距为两者中的较大者，即使父标记的上外边距为0，也会发生合并。
HTML.rar_HTML个人总结
09-24
HTML，全称HyperText Markup Language，即超文本标记语言，是网页制作的基础，用于构建...以上是对HTML基础知识的简要总结，实际应用中，还需要结合CSS和JavaScript进行更深入的学习，才能打造出美观且功能丰富的网页。
总结 css-样式处理。。。
01-05
在CSS（层叠样式表）中，样式处理是构建...以上内容仅是对CSS样式处理的简要概述，实际应用中CSS包含更多细节和技巧，如性能优化、浏览器兼容性处理、CSS Grid Flexbox的高级用法等，需要不断学习和实践来深入掌握。
HTML、CSS、JavaScript.pdf
09-12
对HTML、CSS、JavaScript的一个知识思维导图，对web前端知识的一个简要概括和学习总结，绘制的一个xmind的思维导图。
Element学习（布局组件、案例操作）（4）
m0_74363339的博客
08-08 371
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
Arco Design for Vue 3 - 快速上手指南与实战技巧
最新发布
qq_42072014的博客
08-11 410
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
.eslintrc.js 有什么作用
weixin_64684095的博客
08-08 296
可以启用、禁用或修改特定的 ESLint 规则，以适应项目的特定需求和编码风格。
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 300
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
牛客JS题（三十四）监听对象
不起眼小菜菜的博客
08-10 368
注释很详细，直接上代码……
Ant-Design-Vue快速上手 指南+排坑（下）
Dingdangr的博客
08-10 430
确保你正确定义了校验规则。Ant Design Vue 3.x 及以上版本推荐使用Form.Item的rules属性来定义校验规则，这是一个数组，可以包含多个校验项。html复制代码label="用户名":rules="[{ required: true, message: '请输入用户名!' }, { min: 3, message: '用户名至少为3个字符!' }]"如果 Ant Design Vue 提供的校验规则不满足你的需求，你可以自定义校验规则。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值