从零开始学 Web 之 CSS（二）文本、标签、特性

时间 2019-11-17

标签开始 web css 文本标签特性栏目 HTML 繁體版

原文原文链接

你们好，这里是「 Daotin的梦呓」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓」公众号，欢迎你们订阅关注。在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。如今就让咱们一块儿进入 Web 前端学习的冒险之旅吧！css

1、文本元素

一、属性

font-size: 50px;         /*文字大小*/
font-weight: 700;       /*值从100-900，文字粗细,700约等于Bold，不推荐使用font-weight:bold; */
font-family:微软雅黑;    /*文本的字体*/
font-style: normal | italic;  /*normal:默认值  italic:斜体*/
line-height: 50px            /*行高*/

二、文本属性连写

/* 格式：font: font-style font-weight  font-size/line-height  font-family; */
font: italic 700 50px/40px  微软雅黑;

注意：font:后边写属性的值。必定按照书写顺序。
PS：文本属性连写中文字大小和字体为必写项。html

三、文字的表达方式

1. 直接写中文名称前端

font-family: 微软雅黑;

2. 写字体的英文名称浏览器

font-family: microsoft yahei;

3. unicode 编码（解析更快）学习

如何找到某一字体相对应的unicode编码呢？字体

第一步：通常打开浏览器，按F12
第二步：找到console
第三步：输入escape(“宋体”); 注意英文的括号和双引号。编码

2、样式表书写位置

内嵌式写法

<head>
<style type="text/css">
    /*样式表写法*/
</style>
</head>

外链式写法

<link rel="stylesheet" href="1.css"> <!--写在head里-->

行内样式表

<div style="font-size: 30px; color:red;">行内样式表</div>

三种写法特色:
内嵌式写法：样式只做用于当前文件，没有真正实现结构表现分离。
外链式写法：做用范围是当前站点，谁调用谁生效，范围广，真正实现结构表现分离。
行内样式表：做用范围仅限于当前标签，范围小，结构表现混在一块儿。（不推荐使用）spa

3、标签分类

一、块元素

/*典型表明:*/ div, h1-h6, p, ul, li

特色:
1.独占一行；
2.能够设置宽高；
3.嵌套（包含）下，子块元素宽度（没有定义状况下）和父块元素宽度默认一致。3d

二、行内元素

/*典型表明*/ span, a, strong, em, del, ins

特色：
1.在一行上显示；
2.不能直接设置宽高（须要转行内块）；
3.元素的宽和高就是内容撑开的宽高。code

三、行内块元素(内联元素)

/*典型表明*/  input, img

特色：
1.在一行上显示；
2.能够设置宽高。

四、三者相互转换

1. 块元素转行内元素

display:inline;

2. 行内元素转块元素

display:block;

3. 块和行内元素转行内块元素（用的最多）

display:inline-block;

4、CSS三大特性

一、层叠性

当多个样式做用于同一个（同一类）标签时，样式发生了冲突，老是执行后边的代码(后边代码层叠前边的代码)。和标签调用选择器的顺序没有关系。

二、继承性

继承性发生的前提是包含（嵌套关系）
★ 文字颜色能够继承
★ 文字大小能够继承
★ 字体能够继续
★ 字体粗细能够继承
★ 文字风格能够继承
★ 行高能够继承
总结：文字的全部属性均可以继承。

特殊状况：

h系列不能继承文字大小。（继承了可是不显示）

实际上：h1显示的是你设置的 font-size * 2；
h2显示的是：你设置的 font-size * 1.5
.......

a连接标签不能继承文字颜色（继承了可是不显示，连接标签默认是蓝色）

三、优先级

默认样式 < 标签选择器 < 类选择器 < id选择器 < 行内样式< !important  
 权重：      0         1            10        100      1000     1000以上

PS：这里的数字不是准确的，实际上100个标签选择器叠加的权重也比不过一个类选择器的权重。

特色：

1.继承的权重为0（当没有本身的样式时，听继承的；有本身的样式时，继承的权重为0）
2.权重会叠加。

（上图：类选择器10+标签选择器1=11，因此最后14期威武显示的是黄色）