「每日一学」前端魔法王国：HTML与CSS奇迹创造者的冒险之旅

习总目标

本次学习目标

3. HTML

3.1 HTML概念

HTML是Hyper Text Markup Language的缩写。意思是『超文本标记语言』。它的作用是搭建网页结构，在网页上展示内容

3.1.1 超文本

HTML文件本质上是文本文件，而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义——本身是文本，但是呈现出来的最终效果超越了文本。

3.1.2 标记语言

说HTML是一种『标记语言』是因为它不是向Java这样的『编程语言』，因为它是由一系列『标签』组成的，没有常量、变量、流程控制、异常处理、IO等等这些功能。HTML很简单，每个标签都有它固定的含义和确定的页面显示效果。

标签是通过一组尖括号+标签名的方式来定义的：

<p>HTML is a very popular fore-end technology.</p>

这个例子中使用了一个p标签来定义一个段落，<p>叫『开始标签』，</p>叫『结束标签』。开始标签和结束标签一起构成了一个完整的标签。开始标签和结束标签之间的部分叫『文本标签体』，也简称『标签体』。

有的时候标签里还带有『属性』：

<a href="http://www.xxx.com">show detail</a>

href=“http://www.xxx.com”就是属性，href是『属性名』，“http://www.xxx.com”是『属性值』。

还有一种标签是『单标签』：

<input type="text" name="username" />

3.2 HTML的入门程序

3.3 HTML的结构

文档声明: HTML文件中第一行的内容，用来告诉浏览器当前HTML文档的基本信息，其中最重要的就是当前HTML文档遵循的语法标准。这里我们只需要知道HTML有4和5这两个大的版本，HTML4版本的文档类型声明是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML5版本的文档类型声明是：
<!DOCTYPE html>
现在主流的技术选型都是使用HTML5，之前的版本基本不用了。

根标签:html标签是整个文档的根标签，所有其他标签都必须放在html标签里面。
头部:head标签用于定义文档的头部，其他头部元素都放在head标签里。头部元素包括title标签、script标签、style标签、link标签、meta标签等等。
主体:body标签定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签内。
注释:HTML注释的写法是：


注释的内容不会显示到浏览器窗口内，是开发人员用来对代码内容进行解释说明。

3.4 HTML语法规则

根标签有且只能有一个
无论是双标签还是单标签都必须正确关闭
标签可以嵌套但不能交叉嵌套
注释不能嵌套
属性必须有值，值必须加引号，单引号或双引号均可
标签名不区分大小写但建议使用小写

3.5 使用idea创建StaticWeb工程

3.6 HTML的各个标签的使用

3.6.1 标题标签

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
</body>
</html>

页面效果

3.6.2 段落标签

代码

<p>There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really.</p>

页面效果

3.6.3 换行标签

代码

We would like to see as much CSS1 as possible. CSS2 should be limited to widely-supported elements only. The css Zen Garden is about functional, practical CSS and not the latest bleeding-edge tricks viewable by 2% of the browsing public. <br/>The only real requirement we have is that your CSS validates.

3.6.4 无序列表标签

代码

<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grape</li>
</ul>

页面效果

3.6.5 超链接标签(重要)

代码

<body>


<a href="../01_html的入门/start.html">跳转到start.html页面</a><br/>

<a href="https://www.baidu.com" target="_blank">跳转到百度</a>
</body>

点击后跳转到href属性指定的页面

3.6.6 图片标签(重点)

准备图片文件

代码


<img src="../img/mm.jpg" width="409" height="292"/>

页面效果

3.6.7 块标签(重点)

『块』并不是为了显示文章内容的，而是为了方便结合CSS对页面进行布局。块有两种，div是前后有换行的块，span是前后没有换行的块。

把下面代码粘贴到HTML文件中查看他们的区别：

<div style="border: 1px solid black;width: 100px;height: 100px;">This is a div block</div>
<div style="border: 1px solid black;width: 100px;height: 100px;">This is a div block</div>
<span style="border: 1px solid black;width: 100px;height: 100px;">This is a span block</span>
<span style="border: 1px solid black;width: 100px;height: 100px;">This is a span block</span>

3.6.8 HTML实体(了解)

在HTML文件中，<、>等等这样的符号已经被赋予了特定含义，不会作为符号本身显示到页面上，此时如果我们想使用符号本身怎么办呢？那就是使用HTML实体来转义。

3.7 路径介绍

在我们整个Web开发技术体系中，『路径』是一个贯穿始终的重要概念。凡是需要获取另外一个资源的时候都需要用到路径。要想理解路径这个概念，我们首先要认识一个概念：『文件系统』。

3.7.1 文件系统

我们写代码的时候通常都是在Windows系统来操作，而一个项目开发完成后想要让所有人都能够访问到就必须『部署』到服务器上，也叫『发布』。而服务器通常是Linux系统。

Windows系统和Linux系统的文件系统有很大差别，为了让我们编写的代码不会因为从Windows系统部署到了Linux系统而出现故障，实际开发时不允许使用物理路径。

物理路径举例：
D:\aaa\pro01-HTML\page01-article-tag.html
D:\aaa\pro01-HTML\page02-anchor-target.html

幸运的是不管是Windows系统还是Linux系统环境下，目录结构都是树形结构，编写路径的规则是一样的。

所以我们以项目的树形目录结构为依据来编写路径就不用担心操作系统平台发生变化之后路径错误的问题了。有了这个大前提，我们具体编写路径时有两种具体写法：

相对路径
绝对路径

3.7.2 相对路径

相对路径都是以『当前位置』为基准来编写的。假设我们现在正在浏览a页面，想在a页面内通过超链接跳转到z页面。

那么按照相对路径的规则，我们现在所在的位置是a.html所在的b目录：

z.html并不在b目录下，所以我们要从b目录出发，向上走，进入b的父目录——c目录：

c目录还是不行，继续向上走，进入c的父目录——d目录：

在从d目录向下经过两级子目录——e目录、f目录才能找到z.html：

所以整个路径的写法是：

3.8 使用表格标签展示数据(重要)

3.8.1 目标页面效果

3.8.2 第一版代码


<table>

<tr>

<th>姓名</th>
<th>属性</th>
<th>级别</th>
<th>忍村</th>
</tr>
<tr>

<td>漩涡鸣人</td>
<td>风</td>
<td>下忍</td>
<td>木叶</td>
</tr>
<tr>
<td>宇智波佐助</td>
<td>雷&火</td>
<td>下忍</td>
<td>木叶</td>
</tr>
<tr>
<td>我爱罗</td>
<td>沙</td>
<td>影</td>
<td>砂隐村</td>
</tr>
</table>

如果只有上面的代码，页面显示效果是：

没有表格边框。想要显示好看的表格边框可以把下面的style标签代码复制粘贴到head标签里,CSS还没讲，不必在意语法细节，整体照搬即可。

<style type="text/css">
table,th,td {
border-collapse: collapse;
border: 1px solid black;
padding: 5px;
}
</style>

我们发现，相较于目标效果而言，还未实现横纵向合并单元格

3.8.3 合并单元格

① 横向合并单元格(列合并)

使用colspan属性将两个横向相邻的单元格跨列合并：

<tr>
<td>宇智波佐助</td>
<td>雷&火</td>
<td colspan="2">下忍</td>
</tr>

注意: 『被合并』的单元格要删掉。

② 纵向合并单元格(行合并)

使用rowspan属性将两个纵向相邻的单元格跨行合并：

<tr>
<td>宇智波佐助</td>
<td rowspan="2">雷&火</td>
<td colspan="2">下忍</td>
</tr>
<tr>
<td>我爱罗</td>
<td>影</td>
<td>砂隐村</td>
</tr>

注意: 『被合并』的单元格要删掉。

3.9 表单标签(最重要)

3.9.1 表单标签的作用

在项目开发过程中，凡是需要用户填写的信息都需要用到表单。它的作用是接收用户的输入信息，并且将用户输入的信息提交给服务器

3.9.2 form标签的介绍

在HTML中我们使用form标签来定义一个表单。而对于form标签来说有两个最重要的属性：action和method。

<form action="/aaa/pro01-HTML/page05-form-target.html" method="post">

</form>

① action属性

用户在表单里填写的信息需要发送到服务器端，对于Java项目来说就是交给Java代码来处理。那么在页面上我们就必须正确填写服务器端的能够接收表单数据的地址。

这个地址要写在form标签的action属性中。但是现在暂时我们还没有服务器端环境，所以先借用一个HTML页面来当作服务器端地址使用。

② method属性

『method』这个单词的意思是『方式、方法』，在form标签中method属性用来定义提交表单的『请求方式』。method属性只有两个可选值：get或post，没有极特殊情况的话使用post即可。

什么是『请求方式』？

浏览器和服务器之间在互相通信时有大量的『数据』需要传输。但是不论是浏览器还是服务器都有很多不同厂商提供的不同产品。

常见的浏览器有：

Chrome
Firefox
Safari
Opera
Edge

常见的Java服务器有：

Tomcat
Weblogic
WebSphere
Glassfish
Jetty

这么多不同厂商各自开发的应用程序怎么能保证它们彼此之间传输的『数据』能够被对方正确理解呢？

很简单，我们给这些数据设定『格式』，发送端按照格式发送数据，接收端按照格式解析数据，这样就能够实现数据的『跨平台传输』了。

而这里定义的『数据格式』就是应用程序之间的『通信协议』。

在JavaSE阶段的网络编程章节我们接触过TCP/IP、UDP这样的协议，而我们现在使用的『HTTP协议』的底层就是TCP/IP协议。

但是在HTML标签中，点击超链接是GET方式的请求，提交一个表单可以通过form标签的method属性指定GET或POST请求，其他请求方式无法通过HTML标签实现。除了GET、POST之外的其他请求方式暂时我们不需要涉及（到我们学习SpringMVC时会用到PUT和DELETE）。至于GET请求和POST请求的区别我们会在讲HTTP协议的时候详细介绍，现在大家可以从表面现象来观察一下。

3.10 表单项标签

表单中的每一项，包括: 文本框、密码框、单选框、多选框等等，都称之为表单项，一个表单中可以包含多个表单项

3.10.1 name和value属性

在用户使用一个软件系统时，需要一次性提交很多数据是非常正常的现象。我们肯定不能要求用户一个数据一个数据的提交，而肯定是所有数据填好后一起提交。那就带来一个问题，服务器怎么从众多数据中识别出来收货人、所在地区、详细地址、手机号码……？

很简单，给每个数据都起一个『名字』，发送数据时用『名字』携带对应的数据，接收数据时通过『名字』获取对应的数据。

在各个具体的表单标签中，我们通过『name属性』来给数据起『名字』，通过『value属性』来保存要发送给服务器的『值』。

但是名字和值之间既有可能是『一个名字对应一个值』，也有可能是『一个名字对应多个值』。

这么看来这样的关系很像我们Java中的Map，而事实上在服务器端就是使用Map类型来接收请求参数的。具体的是类型是：Map<String,String[]>。

name属性就是Map的键，value属性就是Map的值。

有了上面介绍的基础知识，下面我们就可以来看具体的表单项标签了。

3.10.2 单行文本框

代码

个性签名：<input type="text" name="signal"/><br/>

显示效果

3.10.3 密码框

代码

密码：<input type="password" name="secret"/><br/>

显示效果

3.10.4 单选框

代码

你最喜欢的季节是：
<input type="radio" name="season" value="spring" />春天
<input type="radio" name="season" value="summer" checked="checked" />夏天
<input type="radio" name="season" value="autumn" />秋天
<input type="radio" name="season" value="winter" />冬天
<br/><br/>
你最喜欢的动物是：
<input type="radio" name="animal" value="tiger" />路虎
<input type="radio" name="animal" value="horse" checked="checked" />宝马
<input type="radio" name="animal" value="cheetah" />捷豹

显示效果

说明:

name属性相同的radio为一组，组内互斥
当用户选择了一个radio并提交表单，这个radio的name属性和value属性组成一个键值对发送给服务器
设置checked=“checked”属性设置默认被选中的radio

3.10.5 多选框

代码

你最喜欢的球队是：
<input type="checkbox" name="team" value="Brazil"/>巴西
<input type="checkbox" name="team" value="German" checked="checked"/>德国
<input type="checkbox" name="team" value="France"/>法国
<input type="checkbox" name="team" value="China" checked="checked"/>中国
<input type="checkbox" name="team" value="Italian"/>意大利

显示效果

说明:

设置checked=“checked”属性设置默认被选中的checkbox

3.10.6 下拉框

代码

你喜欢的运动是：
<select name="interesting">
<option value="swimming">游泳</option>
<option value="running">跑步</option>
<option value="shooting" selected="selected">射击</option>
<option value="skating">溜冰</option>
</select>

显示效果

说明:

下拉列表用到了两种标签，其中select标签用来定义下拉列表，而option标签设置列表项。
name属性在select标签中设置。
value属性在option标签中设置。
option标签的标签体是显示出来给用户看的，提交到服务器的是value属性的值。
通过在option标签中设置selected=“selected”属性实现默认选中的效果。

3.10.7 按钮

代码

<button type="button">普通按钮</button>或<input type="button" value="普通按钮"/>
<button type="reset">重置按钮</button>或<input type="reset" value="重置按钮"/>
<button type="submit">提交按钮</button>或<input type="submit" value="提交按钮"/>

显示效果

说明:

普通按钮: 点击后无效果，需要通过JavaScript绑定单击响应函数
重置按钮: 点击后将表单内的所有表单项都恢复为默认值提交按钮
提交按钮: 点击后提交表单

3.10.8 隐藏域

代码

<input type="hidden" name="userId" value="2233"/>

说明:

通过表单隐藏域设置的表单项不会显示到页面上，用户看不到。但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据，例如：用户id等等。

3.10.9 多行文本框

代码

自我介绍：<textarea name="desc"></textarea>

显示效果

说明:

textarea没有value属性，如果要设置默认值需要写在开始和结束标签之间。

3.10.10 文件表单

代码

头像:<input type="file" name="file"/>

显示效果

说明:

不同浏览器显示的样式有微小差异

人熟悉前端(html,css,js,vue等)，后端(python)，小程序，老板有需求联系我。

1.CSS初识

概念： CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表）
作用：主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

2. 引入CSS样式表（书写位置）

2.1 行内式（内联样式）

概念：称行内样式、行间样式. 是通过标签的style属性来设置元素的样式

其基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

实际上任何HTML标签都拥有style属性，用来设置行内式。

案例：

<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

注意：style其实就是标签的属性样式属性和值中间是:多组属性值之间用;隔开。只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余
缺点：没有实现样式和结构相分离

2.2 内部样式表（内嵌样式表）

概念：称内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义
其基本语法格式如下：

<head>
<style type="text/CSS">
    选择器（选择的标签） { 
      属性1: 属性值1;
      属性2: 属性值2; 
      属性3: 属性值3;
    }
</style>
</head>

<style>
     div {
        color: red;
        font-size: 12px;
     }
</style>

注意：style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。type="text/css" 在html5中可以省略。只能控制当前的页面
缺点：没有彻底分离

综合案例

<style>
   /*选择器{属性:值；}*/
   p {
      color:#06C; 
      font-size:14px;  
    }  /*文字的颜色是 蓝色*/
   h4 {
     color:#900;
   }
   h1 {
     color:#090; 
     font-size:16px; 
    }
   body { 
     background:url(bg2.jpg);
   }
</style>

2.3 外部样式表（外链式）

概念：称链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中
其基本语法格式如下：

<head>
  <link rel="stylesheet" type="text/css" href="css文件路径">
</head>

注意： link 是个单标签link标签需要放在head头部标签中，并且指定link标签的三个属性

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
type	定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。我们都可以省略
href	定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

2.4 三种样式表总结（位置）

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点（多）

CSS选择器（重点）

2. CSS基础选择器

2.1 标签选择器

概念：标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
语法：

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

作用：标签选择器可以把某一类标签全部选择出来比如所有的div标签和所有的 span标签
优点：是能快速为页面中同类型的标签统一样式
缺点：不能设计差异化样式。

2.2 类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名.

语法：类名选择器.类名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}标签<p class='类名'></p>
优点：可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签
注意类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)长名称或词组可以使用中横线来为选择器命名。不要纯数字、中文等命名，尽量使用英文字母来表示。

命名规范：见附件（Web前端开发规范手册.doc）

命名是我们通俗约定的，但是没有规定必须用这些常用的命名。

课堂案例：

<head>
        <meta charset="utf-8">
        <style>
    
        .blue {
            color: blue;
            font-size: 100px;
        }
        .red {
            color: red;
            font-size: 100px;
        }
        .orange {
            color: orange;
            font-size: 100px;
        }
        .green {
            color: green;
            font-size: 100px;
        }
        </style>
    </head>
    <body>
        <span class="blue">G</span>
        <span class="red">o</span>
        <span class="orange">o</span>
        <span class="blue">g</span>
        <span class="green">l</span>
        <span class="red">e</span>
    </body>

2.3 类选择器特殊用法- 多类名

我们可以给标签指定多个类名，从而达到更多的选择目的。

注意：

各个类名中间用空格隔开。
多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>

2.4 id选择器

id选择器使用#进行标识，后面紧跟id名

其基本语法格式如下：id选择器#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }标签<p id="id名"></p>
元素的id值是唯一的，只能对应于文档中某一个具体的元素。
用法基本和类选择器相同。

id选择器和类选择器区别

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

id选择器和类选择器最大的不同在于使用次数上。

总结他们**

类选择器我们在修改样式中，用的最多。
id选择器一般用于页面唯一性的元素身上，经常和我们后面学习的javascript 搭配使用。

2.6 通配符选择器

概念通配符选择器用*号表示， * 就是选择所有的标签他是所有选择器中作用范围最广的，能匹配页面中所有的元素。
其基本语法格式如下：

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

注意：会匹配页面所有的元素，降低页面响应速度，不建议随便使用

2.7 基础选择器总结

选择器	作用	缺点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p { color：red;}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav { color: red; }
id选择器	一次只能选择器1个标签	只能使用一次	不推荐使用	#nav {color: red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	不推荐使用	* {color: red;}

2.8 团队约定

选择器

尽量少用通用选择器 *
尽量少用 ID 选择器
不使用无具体语义定义的标签选择器 div span

CSS字体样式属性调试工具

1.font字体

1.1 font-size:大小

作用：font-size属性用于设置字号

p {  
    font-size:20px; 
}

单位：可以使用相对长度单位，也可以使用绝对长度单位。相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。

注意：

我们文字大小以后，基本就用px了，其他单位很少使用
谷歌浏览器默认的文字大小为16px
但是不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。一般给body指定整个页面文字的大小

1.2 font-family:字体

作用：font-family属性用于设置哪一种字体。

p{ font-family:"微软雅黑";}

网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体，如果都没有，则以我们电脑默认的字体为准。

p{font-family: Arial,"Microsoft Yahei", "微软雅黑";}

常用技巧：

1. 各种字体之间必须使用英文状态下的逗号隔开。
2. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
3. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。
4. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

CSS Unicode字体

为什么使用 Unicode字体在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持类似微软雅黑的中文。
解决：方案一：你可以使用英文来替代。比如font-family:"Microsoft Yahei"。方案二：在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。font-family: "FAEF6FC5ED1"; 表示设置字体为“微软雅黑”。

字体名称	英文名称	Unicode 编码
宋体	SimSun	B8BF53
新宋体	NSimSun	B0B8BF53
黑体	SimHei	ED1F53
微软雅黑	Microsoft YaHei	FAEF6FC5ED1
楷体_GB2312	KaiTi_GB2312	77F53_GB2312
隶书	LiSu	B6E66
幼园	YouYuan	E7C06
华文细黑	STXihei	4E87EC6ED1
细明体	MingLiU	EC60EF53
新细明体	PMingLiU	B0EC60EF53

1.3 font-weight:字体粗细

在html中如何将字体加粗我们可以用标签来实现使用 b 和 strong 标签是文本加粗。
可以使用CSS 来实现，但是CSS 是没有语义的。

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体（加粗的）
100~900	400 等同于 normal，而 700 等同于 bold 我们重点记住这句话

提倡：

我们平时更喜欢用数字来表示加粗和不加粗。

1.4 font-style:字体风格

在html中如何将字体倾斜我们可以用标签来实现字体倾斜除了用 i 和 em 标签，
可以使用CSS 来实现，但是CSS 是没有语义的

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

属性	作用
normal	默认值，浏览器会显示标准的字体样式 font-style: normal;
italic	浏览器会显示斜体的字体样式。

小技巧：

平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。

1.5 font:综合设置字体样式 (重点)

font属性用于对字体样式进行综合设置

基本语法格式如下：

选择器 { font: font-style  font-weight  font-size/line-height  font-family;}

注意：使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

1.6 font总结

属性	表示	注意点
font-size	字号	我们通常用的单位是px 像素，一定要跟上单位
font-family	字体	实际工作中按照团队约定来写字体
font-weight	字体粗细	记住加粗是 700 或者 bold 不加粗是 normal 或者 400 记住数字不要跟单位
font-style	字体样式	记住倾斜是 italic 不倾斜是 normal 工作中我们最常用 normal
font	字体连写	1. 字体连写是有顺序的不能随意换位置 2. 其中字号和字体必须同时出现

2. CSS外观属性

2.1 color:文本颜色

作用：color属性用于定义文本的颜色，
其取值方式有如下3种：

表示表示	属性值
预定义的颜色值	red，green，blue，还有我们的御用色 pink
十六进制	#FF0000，#FF6600，#29D794
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

注意我们实际工作中，用 16进制的写法是最多的，而且我们更喜欢简写方式比如 #f00 代表红色

2.2 text-align:文本水平对齐方式

作用：text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性
其可用属性值如下：

属性	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

注意：是让盒子里面的内容水平居中，而不是让盒子居中对齐

2.3 line-height:行间距

作用：line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。
单位：line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px
技巧：

一般情况下，行距比字号大7.8像素左右就可以了。
line-height: 24px;

2.4 text-indent:首行缩进

作用：text-indent属性用于设置首行文本的缩进，
属性值其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值,建议使用em作为设置单位。

1em 就是一个字的宽度如果是汉字的段落， 1em 就是一个汉字的宽度

p {
      /*行间距*/
      line-height: 25px;
      /*首行缩进2个字  em  1个em 就是1个字的大小*/
      text-indent: 2em;  
 }

2.5 text-decoration 文本的装饰

text-decoration 通常我们用于给链接修改装饰效果

值	描述
none	默认。定义标准的文本。取消下划线（最常用）
underline	定义文本下的一条线。下划线也是我们链接自带的（常用）
overline	定义文本上的一条线。（不用）
line-through	定义穿过文本下的一条线。（不常用）

2.6 CSS外观属性总结

属性	表示	注意点
color	颜色	我们通常用十六进制比如而且是简写形式 #fff
line-height	行高	控制行与行之间的距离
text-align	水平对齐	可以设定文字水平的对齐方式
text-indent	首行缩进	通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration	文本修饰	记住添加下划线 underline 取消下划线 none

3. sublime快捷操作emmet语法

Emmet的前身是Zen coding,它使用缩写,来提高html/css的编写速度。

生成标签直接输入标签名按tab键即可比如 div 然后tab 键，就可以生成 <div></div>
如果想要生成多个相同标签加上 * 就可以了比如 div*3 就可以快速生成3个div
如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
如果有兄弟关系的标签，用 + 就可以了比如 div+p
如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab 键就可以了
如果生成的div 类名是有顺序的，可以用自增符号 $ .demo$*3
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>

4. 拓展阅读@

emment语法

浏览器更好用，自然离不开万能的《油猴插件》（戳这里），通过脚本实现去广告、绕过二次跳转、自动翻页、悬停看图、扒下载链接等功能。虽说AC-baidu这类的脚本自带更改页面样式，

但由于是1对1的，没法改所有网站的面貌，这时候就要用到另一个插件“Stylus”了，它可以让绝大多数网页都变得工工整整（赶上时代）。

▌用上Stylus

插件可以直接诶从Chrome浏览器插件商店安装，或者网上直接下一个。

样式可以点击插件中[查找更多样式]，

接下来会列出所在网页可用的所有样式，供你选择，包含源链接、发布日期、本周/所有下载数据等。

装好的样式可以在顶部选择开关，也可以组合搭配使用（可能有bug冲突），比方说：

这一步可能需要梯子，不然可能加载不出来...你也可以到Stylish的网站userstyles.org下载安装。

点击[选项]进入设置界面，它支持Dropbox、Google Drive、Onedrive云同步功能，一键在其他电脑上同步使用，不再需要一个个手动重新添加。

▌样式推荐

百度：Baidu Lite 百度轻

谷歌：Google Search - Material Design

IT之家：IT之家去广告,优化阅读

贴吧：TieBa Maverick

知乎：Flat Zhihu 扁平化知乎

微博：Weibo v6 简约微博

斗鱼：Douyu Cleaner清爽斗鱼

夜读：NightShift - eye care 全局夜间模式

字体：ForceMyFonts 全局字体美化

如果你恰巧会一点CSS，那么可以自定义修改任意样式，也可以从头自己做。

▌什么是CSS（层叠样式表）？

Stylus的原理也不复杂，通过CSS层叠样式表改变网页样式，什么字体、背景、边框、网页布局，统统在它的掌控之中，就像整形一样，换个鼻子、调个眼睛什么的，还是全程无痛。

CSS很复杂，但是Stylus简单好用、没啥学习成本，所以这部分只是当简单的拓展讲一下：

那它是如何诞生的呢？这还得从1993年说起，早期网页使用的是RRP样式，仅支持一个样式表，只能显示文字，看网页的体验可能还不如看报纸来的丰富。之前在《浏览器的辉煌发展史》（戳这里）中咱们提到过一款Mosaic（马赛克）浏览器，

开始采用HTML标签实现样式表达，支持了书签、图标按钮、图片显示这些革命性的功能、沿用至今。网景最早支持HTML框架显示，也就是最简单的table布局，

可以调整内外边距，网页看着更舒服，优点是兼容性高，但既要负责图文内容、又要负责排版样式，注定了他的样式不够美观。

魏培源开发的ViolaWWW浏览器用了有层次嵌套性的样式表，率先支持用<Link>标签引用外部样式表（可以简单理解为：你请了个美工帮你改善改善）。但各家浏览器各用各的，岂不是乱了套？1994年，以万维网之父老李为首的W3C万维网联盟，开始提供网络标准化建议。

同年老莱（Håkon W Lie）提出层叠HTML样式表（CHSS）支持用户自定义样式，网页作者可以自己DIY版面，不同的规则用不同的百分比呈现，这也是CSS的雏形。隔壁的波斯正在做一款Argo浏览器，两人相谈盛欢、打算合作。

1996年底出现了一种和CSS语法很像的表现指明语言，PSL 96，可以根据不同的浏览器信息，自动判断用什么样式。年底，CSS已经完成，支持改变字体大小、字形、颜色、间距、排列、表格、边框、id、class等等，如果说普通网页是你刚买到手的毛坯房，那么CSS就是你给它做装修。

但由于早期网页设计师滥用HTML导致了“tagsoup标签汤”问题，哪怕微软在IE上逐步实现CSS，但BUG依然不少（

果然BUG是微软祖传BUFF）。

隔壁对手网景则推出了JS（JavaScript）语言，浏览器大战没有胜者，当时的网页设计师被迫要为IE和网景分别设计一套网页，头都气秃了...

于是民间团体WaSP（网页标准计划）发动水军推动W3C 标准化，怒喷那些不加盟的厂商。在1998年出台CSS2，他们之中的7位主要成员成立了CSS 武士团（CSS Samurai），催厂商们改善对CSS的支持，Opera照做了，但微软依旧无动于衷。

可能也是因为大家看不到CSS的优势，觉得没必要，但2003年，Dave Shea推出了CSS 禅意花园（CSS Zen Garden）来展示样式效果，也就是搭了个“样板房”，让设计师们热血沸腾起来。

在2006~2009年间，DIV+CSS布局开始取代传统表格布局，CSS3引入了简单动画等功能，插了JS一脚，还有灵活的flex弹性布局，沿用至今，而2011年开始设计的CSS4特性目前支持的还太少。

▌其他浏览器

你说为啥不直接用Stylish呢？因为3年前原作者卖给SimilarWeb之后，它涉嫌窃取用户浏览历史，被Chrome和Firefox下架。而Stylus是Stylish 1.5.2的开发分支，也是原作者维护的最后一个版本，作为GH上的开源项目，代码公开审查，可以安心食用啦。

除了Chrome外，Firefox、Opera也都支持，Safari可以用FreeStyler（你也要来一段说唱吗），同类插件还有xStyle。当然，由于win的字体渲染并不美观，还可以搭配MacType使用，关于它的配置方法，咱们以后继续说。

参考&引用：

sspai.com/post/40485

sspai.com/post/45537

github.com/openstyles/stylus

zhihu.com/search?type=content&q=css

zhihu.com/question/24826065/answer/194294438

zh.wikipedia.org/wiki/层叠样式表?oldformat=true

在线咨询

上一篇：JavaScript奇淫技巧：命令行语法高亮
下一篇：HTML调用打开本地文件

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

「每日一学」前端魔法王国：HTML与CSS奇迹创造者的冒险之旅

人熟悉前端(html,css,js,vue等)，后端(python)，小程序，老板有需求联系我。

1.CSS初识

2. 引入CSS样式表（书写位置）

2.1 行内式（内联样式）

2.2 内部样式表（内嵌样式表）

综合案例

2.3 外部样式表（外链式）

2.4 三种样式表总结（位置）

CSS选择器（重点）

2. CSS基础选择器

2.1 标签选择器

2.2 类选择器

2.3 类选择器特殊用法- 多类名

2.4 id选择器

id选择器和类选择器区别

2.6 通配符选择器

2.7 基础选择器总结

2.8 团队约定

CSS字体样式属性调试工具

1.font字体

1.1 font-size:大小

1.2 font-family:字体

CSS Unicode字体

1.3 font-weight:字体粗细

1.4 font-style:字体风格

1.5 font:综合设置字体样式 (重点)

1.6 font总结

2. CSS外观属性

2.1 color:文本颜色

2.2 text-align:文本水平对齐方式

2.3 line-height:行间距

2.4 text-indent:首行缩进

2.5 text-decoration 文本的装饰

2.6 CSS外观属性总结

3. sublime快捷操作emmet语法

4. 拓展阅读@

您的项目需求