webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update: 字体加粗属性

Browse Source
This commit is contained in:
qianguyihao
2019-10-05 11:59:34 +08:00
parent 5d97750592
commit 2f436f2dbe
20 changed files with 458 additions and 434 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
02-CSS基础/01-CSS属性：字体属性和文本属性.md
View File

@@ -39,12 +39,25 @@ html中的单位只有一种，那就是像素px，所以单位是可以省略
![](http://img.smyhvae.com/2015-10-03-css-17.png)
## 字体属性
## font 字体属性
CSS中，有很多**非布局样式**（与布局无关），包括：字体、行高、颜色、大小、背景、边框、滚动、换行、装饰性属性（粗体、斜体、下划线）等。
这一段，我们先来讲一下字体属性。
css样式中，常见的字体属性有以下几种：
```css
p{
font-size: 50px; /*字体大小*/
line-height: 30px; /*行高*/
font-family: 幼圆,黑体; /*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
font-style: italic ; /*italic表示斜体，normal表示不倾斜*/
font-weight: bold; /*粗体*/
font-variant: small-caps; /*小写变大写*/
}
```
### 行高
CSS中，所有的行，都有行高。盒子模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。
@@ -76,24 +89,7 @@ vertical-align: middle; /*指定行内元素（inline）或表格单元格（tab
```
### font字体属性
css样式中，字体属性有以下几种：
```html
p{
font-size:50px; /*字体大小*/
line-height: 30px; /*行高*/
font-family:幼圆,黑体; /*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
font-style:italic ; /*italic表示斜体，normal表示不倾斜*/
font-weight:bold; /*粗体：属性值写成bolder也可以*/
font-variant:small-caps; /*小写变大写*/
}
```
上面这些属性中，字号、行高、字体这三个属性是最常见的。我们继续看。
**1、字号、行高、字体三大属性：**
### 字号、行高、字体三大属性
（1）字号：
@@ -117,7 +113,6 @@ p{
格式：
```
font: 加粗 字号/行高/ 字体
@@ -134,7 +129,6 @@ PS：400是nomal，700是bold。
上面这几个属性可以连写，但是有一个要求，font属性连写至少要有**字号和字体**，否则连写是不生效的（相当于没有这一行代码）。
**2、字体属性的说明：**
（1）网页中不是所有字体都能用，因为这个字体要看用户的电脑里面装没装，比如你设置：
@@ -143,11 +137,11 @@ PS：400是nomal，700是bold。
font-family: "华文彩云";
```
上方代码中，如果用户电脑里面没有这个字体，那么就会变成宋体。
上方代码中，如果用户的 Windows 电脑里面没有这个字体，那么就会变成宋体。
页面中，中文我们只使用：微软雅黑、宋体、黑体。英文使用：Arial、Times New Roman。页面中如果需要其他的字体，就需要切图。
页面中，中文我们一般使用：微软雅黑、宋体、黑体。英文使用：Arial、Times New Roman。页面中如果需要其他的字体，就需要单独安装字体，或者切图。
（2）为了防止用户电脑里，没有微软雅黑这个字体。就要用英语的逗号，隔开备选字体。如下：（可以备选多个）
（2）为了防止用户电脑里，没有微软雅黑这个字体。就要用英语的逗号，提供备选字体。如下：（可以备选多个）
```
font-family: "微软雅黑","宋体";
@@ -200,18 +194,32 @@ PS：400是nomal，700是bold。
反过来， `font:16px/48px “宋体”;`等价于`font:16px/300% “宋体”`。
### 字体加粗属性
```css
.div {
font-weight: normal; /*正常*/
font-weight: bold; /*加粗*/
font-weight: 100;
font-weight: 200;
font-weight: 900;
}
```
在设置字体是否加粗时，属性值既可以填写`normal`、`bold`这样的加粗字体，也可以直接填写 100至900 这样的数字。`normal`的值相当于400，`bold`的值相当于700。
## 文本属性
CSS样式中，常见的文本属性有以下几种：
- `letter-spacing: 0.5cm ;` 单个字母之间的间距
- `word-spacing: 1cm;` 单词之间的间距
- `text-decoration: none;` 字体修饰：none去掉下划线、**underline下划线**、line-through中划线、overline上划线、
- `text-transform: lowercase;` 单词字体大小写。uppercase大写、lowercase小写
- `color:red;` 字体颜色
- `text-align: center;` 在当前容器中的对齐方式。属性值可以是：left、right、center（<font color="#0000FF">**在当前容器的中间**</font>）、justify
- `text-transform: lowercase;` 单词的字体大小写。属性值可以是：`uppercase`（单词大写）、`lowercase`（单词小写）、`capitalize`（每个单词的首字母大写）
- `letter-spacing: 0.5cm ;` 单个字母之间的间距
- `word-spacing: 1cm;` 单词之间的间距
- `text-decoration: none;` 字体修饰：none 去掉下划线、**underline 下划线**、line-through 中划线、overline 上划线
- `text-transform: lowercase;` 单词字体大小写。uppercase大写、lowercase小写
- `color:red;` 字体颜色
- `text-align: center;` 在当前容器中的对齐方式。属性值可以是：left、right、center（<font color="#0000FF">**在当前容器的中间**</font>）、justify
- `text-transform: lowercase;` 单词的字体大小写。属性值可以是：`uppercase`（单词大写）、`lowercase`（单词小写）、`capitalize`（每个单词的首字母大写）
这里来一张表格的图片吧，一览无遗：
@@ -219,7 +227,7 @@ CSS样式中，常见的文本属性有以下几种：
## 列表属性
```html
```css
ul li{
list-style-image:url(images/2.gif) ; /*列表项前设置为图片*/
margin-left:80px; /*公有属性*/
@@ -244,11 +252,10 @@ ul li{
`overflow`属性的属性值可以是：
- `auto`：浏览器自己解决。在必需时裁切对象多余的内容或显示滚动条。一般采用这个属性值。
- `visible`：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。
- `hidden`：不显示超过对象尺寸的内容。
对象将以包含对象的 window 或 frame 的尺寸进行裁切，并且 clip 属性设置将失效。
- `scroll`：总是显示滚动条。
- `visible`：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。
- `hidden`：不显示超过对象尺寸的内容。
- `auto`：如果内容不超出，则不显示滚动条；如果内容超出，则显示滚动条。
- `scroll`：Windows 平台下，无论内容是否超出，总是显示滚动条。Mac 平台下，和 `auto` 属性相同。
针对上面的不同的属性值，我们来看一下效果：
举例：
@@ -275,14 +282,14 @@ ul li{
}
#div1{
overflow:auto;/*超出的部分让浏览器自行解决*/
overflow: auto;/*超出的部分让浏览器自行解决*/
}
#div2{
overflow:visible;/*超出的部分会显示出来*/
overflow: visible;/*超出的部分会显示出来*/
}
#div3{
overflow:hidden;/*超出的部分将剪切掉*/
overflow: hidden;/*超出的部分将剪切掉*/
}
</style>
@@ -439,10 +446,8 @@ p:hover{
## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg)
![](http://img.smyhvae.com/20190101.png)

4
02-CSS基础/02-CSS属性：背景属性.md
View File

@@ -356,8 +356,8 @@ PS：以后的CSS3内容中，我们会接触到更多的background属性： bac
## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg)
![](http://img.smyhvae.com/20190101.png)

7
02-CSS基础/03-CSS样式表和选择器.md
View File

@@ -957,11 +957,10 @@ div的儿子p。和div的后代p的截然不同。
这种选择器作用不大。
## 我的公众号
##我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/cnblogs/%E7%94%9F%E5%91%BD%E5%9B%A2%E9%98%9F%E5%85%AC%E4%BC%97%E5%8F%B7%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg)
![](http://img.smyhvae.com/20190101.png)

6
02-CSS基础/04-CSS选择器：伪类.md
View File

@@ -328,10 +328,10 @@ a标签有4种伪类（即对应四种状态），要求背诵。如下：
![](http://img.smyhvae.com/2015-10-03-css-04.gif)
##我的公众号
## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg)
![](http://img.smyhvae.com/20190101.png)

4
02-CSS基础/05-CSS样式表的继承性和层叠性.md
View File

@@ -389,8 +389,8 @@ ul li:last-child
## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg)
![](http://img.smyhvae.com/20190101.png)

4
02-CSS基础/06-CSS盒模型详解.md
View File

@@ -529,10 +529,10 @@ div{
## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg)
![](http://img.smyhvae.com/20190101.png)

7
02-CSS基础/07-浮动.md
View File

@@ -965,15 +965,12 @@ text-indent: 2em;
上方属性中，单位比较奇怪，叫做em，em就是汉字的一个宽度。indent的意思是缩进。
## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg)
![](http://img.smyhvae.com/20190101.png)

5
02-CSS基础/08-CSS属性：定位属性.md
View File

@@ -518,11 +518,10 @@ z-index属性的应用还是很广泛的。当好几个已定位的标签出现
（2）用`z-index`来控制层级数。
## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg)
![](http://img.smyhvae.com/20190101.png)

10
02-CSS基础/09-CSS案例讲解：博雅互动.md
View File

@@ -469,4 +469,12 @@
工程文件如下：
- [2018-03-20-boya.rar](待审核通过)
- [2018-03-20-boya.rar](https://download.csdn.net/download/smyhvae/11832612)
## 我的公众号
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/20190101.png)

5
02-CSS基础/11-CSS3选择器详解.md
View File

@@ -492,9 +492,8 @@ CSS3又新增了其它的伪类选择器。这一小段，我们来学习CSS3中
## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg)
![](http://img.smyhvae.com/20190101.png)

5
02-CSS基础/12-CSS3属性详解（一）.md
View File

@@ -799,9 +799,8 @@ CSS3的更多属性，且看下文继续。
## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg)
![](http://img.smyhvae.com/20190101.png)

9
02-CSS基础/13-CSS3属性详解：动画详解.md
View File

@@ -1436,17 +1436,12 @@ PS：图片的url是<http://img.smyhvae.com/20180209_1245.gif>，图片较大，
## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg)
![](http://img.smyhvae.com/20190101.png)

8
02-CSS基础/14-CSS3属性详解：flex布局.md
View File

@@ -601,6 +601,14 @@ PS：主轴和侧轴并不是固定不变的，通过flex-direction可以互换
## 我的公众号
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/20190101.png)

8
02-CSS基础/15-CSS3属性详解：Web字体.md
View File

@@ -371,6 +371,14 @@ SVG素材：
## 我的公众号
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/20190101.png)