博客

学习思路： '由浅入深',不要一上来就要弄得很详尽,不然容易'陷入细节',无法把握'全局'

一  字体属性

类比： 'wps或word'有什么,可以思考'css'怎么实现

①  font-family设置字体

CSS 的 font-family '取值':

 1) '具体'的'字体'样式,具体'字体族名',常见的'字体族名'如下：

   Helvetica
   Arial
   PingFang SC
   Microsoft Yahei
   Hiragino Sans GB

 2) '通用'字体族名,它表示'一大类'字体,并'非'单个 -->"了解"

  serif:      衬线字体族
  sans-serif: 非衬线字体族
  monospace:  等宽字体，即字体中每个字宽度相同
  cursive:    草书字体
  fantasy:    主要是那些具有特殊艺术效果的字体

3) 新增'通用'字体族关键字

  system-ui 系统'默认'字体,保证不同的操作系统的Web页面下,自动选择本操作系统下默认系统字体

  emoji 用于兼容 emoji ‘表情符号‘字符

4）font-family 属性应包含多个字体名称作为"后备"系统,以确保浏览器/操作系统之间的最大兼容性

1) font-family:PingFang SC;

备注：  Windows 系统下并没有'上述苹方字体'可以使用

2）Microsoft Yahei;

备注：  'Windows'系统下'默认'的中文字体

3）设置'字体'的要求

  [1]、所以我们需要'灵活地'去设置网页的'字体'家族

  [2]、在不同的'系统'下,不同的'设备'下,使用'合适'的字体,并且兼顾到'中、英'文

+++++++++++++"简单案例讲解"+++++++++++++

② font-size设置字号大小

单位

细节点： 标题标签'<h1>...<h9>比较特殊',需要'单独指定'字体大小

③  font-weight字体粗细

+++++++++++++  "简单案例"  +++++++++++++

④  font-style设置文本风格

++++++++++  "简单案例"  ++++++++++

⑤  font复合属性

font简介

++++++++++  "简单案例"  ++++++++++

必须要有：'字号'和'字体'

⑥  字体属性小结

二   文本属性

①  color  文本的颜色

++++++++++  "简单案例"  ++++++++++

1) 后续关注'透明度'

2) 表示颜色的'若干'方式

3) 16进制,'鼠标双击',然后鼠标'滑动'产生颜色

②  text-align文本水平对齐方式

++++++++++  "简单案例"  ++++++++++ 

③  text-decoration 装饰文本

++++++++++  "简单案例"  ++++++++++ 

1) 重点： 如何添加'下划线'? 如何'删除'下划线?

2)  常见需求： 去掉'超链接'下划线

④  text-indent  文本缩进

++++++++++  "简单案例"  ++++++++++

⑤  line-height   行间距

1) 注意： 文本高度'不会'变化

2) 细节： '行间距' = '上间距' + '文本高度' + '下间距'

文本高度： 也即'字体大小' --> "font-size"

3) 第一行的最下面到第二行的最下面就是'行间距'

4) Windows利用'FSCaputure'小工具进行测量

⑥  文本属性小结

三   css的三种引入方式

①  总汇

+++++++++++++++++++++"两种常见的外部样式表"+++++++++++++++++++++

1）'链接'式外部样式文件

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

备注： 一般在'head'标签内定义

2）'导入'式外部样式文件  

<style>
 
  @import url("css/style.css");

 /*简写方式： @import "css/style.css"*/;
 
</style>

注意： 浏览器'并非'全部支持@import导入,'不推荐'使用

②  内部样式表 

1) 内部样式表还是在'html'页面中定义样式

2）一般在'head'标签内,通过'style'标签定义

3) '嵌入式'引入,这种方式是我们'练习时常用'的方式

③   行内样式表

④  外部样式表

⑤  小结