CSS（六）-- 布局（元素的层级），字体

目录

• 1.层级
• 2.字体相关
  • 2.1字体相关的样式
    • color：用来设置字体的颜色
    • font-size：字体大小
    • font-weight：字重（字体的加粗）
    • font-style：字体的风格
    • font-family：字体族（字体的分类）
    • font-stretch
    • font-variant
    • font-size-adjust
  • 2.2图标字体
    • fontawesome使用步骤
    • Awesome图标字体的使用方式
    • IconFont矢量图标使用
  • 2.3行高line-height
  • 2.4字体的简写属性font
• 3.文本的样式
  • 3.1 文本的水平和垂直对齐
    • 水平对齐text-align
    • 垂直对齐vertical-align
    • 设置文本修饰text-decoration
    • 设置网页如何处理空白white-space
    • 设置文本溢出text-overflow
    • 实现溢出内容省略并加上省略号的效果
• 4.练习
  • 4.1京东顶部导航条

1.层级

• 对于开启了定位的元素，可以通过z-index属性来指定元素的层级

• z-index需要一个整数作为参数，值越大元素的层级越高，元素的层级越高越优先显示

• 如果元素的层级一样，则优先显示靠下的元素

• 祖先元素的层级再高也不会盖住后代元素

2.字体相关

2.1字体相关的样式

(https://blog.csdn.net/mxd395/article/details/24324557)

color：用来设置字体的颜色

font-size：字体大小

• font-size相关的单位
  • em：相当于当前元素的一个font-size，2em=2*font-size
  • rem：相当于根元素（html）的一个font-size；

font-weight：字重（字体的加粗）

• 可选值：
  • normal（默认值）：不加粗
  • bold 加粗

font-style：字体的风格

• 可选值：
  • normal：正常
  • italic：斜体

font-family：字体族（字体的分类）

• 可选值
  serif 衬线字体
  sans-serif 非衬线字体
  monospace 等宽字体
  cursive 草书 字体
  fantasy 加粗字体

字体族可以有多个
font-family：'Courier New',Courier,monospace;//当电脑没有‘Courier New’就用Courier，依次往下推

• 如何让用户使用服务器上的字体fontface
  font-face可以将服务器中的字体直接提供给用户去使用
  @font-size{
  /指定字体的名字（自定义）/
  font-family: "myfont";
  /服务器中字体的路径/
  src: url('./font/ZCOOOLXiaoMei-Rugular.ttf');
  }

font-stretch

控制字体中实际字母的宽度

font-variant

指定字体中是否正常的，或者是小型大写字母

font-size-adjust

修改字体字符的尺寸比

2.2图标字体

• 在网页中经常需要使用一些图标，可以通过图片来引入图标，但是图片比较大，并且不灵活
• 所以在使用图标时，可以将图标设置为字体
• 然后通过font-face的形式来对字体进行引入，就可以通过使用字体的形式来使用图标

fontawesome使用步骤

1.下载 https://fontawesome.com/
2.解压
3.将css和webfonts移动到项目中
4.将all.css引入到网页中
5.使用图标字体

• 直接通过类名来使用图标字体

直接通过类名来使用图标字体
class="fas fa-ell"
class="fab fa-accessible-icon"
前边的fas/fab是固定结构，fa-eel是查询文档后的具体key

Awesome图标字体的使用方式

• 通过类来设置图标
  <li><i class="fas fa-star"></i>aa</li>
• 通过伪元素来设置图标字体
  • 找到要设置图标的元素通过before或after选中
  • 在content中设置字体的编码
  • 设置字体的样式：font-family：‘Font Awesome 5 Brands’；
    给每一列加上图标

<style>
      li{
            list-style:none;
      }
      /*使用伪元素*/
      li::before{
            content:'\f1b0';
            font-family:'Font Awesome 5 Free';//要确定字体，通常在文档里面找
      }
</style>
<ul>
      <li>q</li>
      <li>w</li>
      <li>e</li>
      <li>r</li>
</ul>

• 通过实体来使用图标字体
  &#x图标的编码；

IconFont矢量图标使用

• 进入网站iconfont
• 登录
• 将想要的图标加入购物车
• 点开购物车
• 点击添加至项目
• 会自动跳转至我的项目
  • 点击生成在线链接，可以直接使用
  • 点击下载至本地
    • 打开文件，内容如下
      
    • 使用方法：点击demo_index.html会有使用方法说明

2.3行高line-height

• 行高是指文字占有的实际高度，可以通过line-height来设置行高

• 行高可以直接指定一个大小（px，em）

• 也可以为行高设置一个整数

  • 如果是一个整数的话，行高将会是字体（font-size）的指定的倍数

• 行高经常还用来设置文字的行间距

  • 行间距=行高 - 字体的大小

• 字体框

  • 字体框就是字体存在的格子，设置font-size实际上就是在设置字体，框的高度

• 行高会在字体框的上下平均分配

• 可以将行高设置位和高度一样的值，使单行文字在一个元素中垂直居中

2.4字体的简写属性font

font 可以设置字体相关的所有属性

• 语法：自重(可不写) 字的风格(可不写) 字体大小/行高 字体族

font：bold italic 50px/2 微软雅黑,'Times'

• 如果不写行高，自重，字的风格（font-style）会使用默认值

3.文本的样式

3.1 文本的水平和垂直对齐

水平对齐text-align

可选值：

• left 左侧对齐
• right 右对齐
• center 居中对齐
• justify 两端对齐

垂直对齐vertical-align

设置元素垂直对齐的方式，是在子元素中设置

• 可选值：
  • baseline（默认值）：基线对齐（根据字体设计的不同而不同）
  • top：顶部对齐
  • bootom：底部对齐
  • middl：居中对齐

用途：让图片底部没有空隙

• 添加前：img沿着图片基线对其
  

下面有空隙

• 添加后：
  

没有空隙

用bottom，middle也行，别让其沿着基线对其即可

设置文本修饰text-decoration

可选项：

• 第一个参数：
  • none （默认值）：什么都没有
  • underline：下划线
  • line-through：删除线
  • overline：上划线
• 第二个参数（不适用于IE）：可以设置颜色
• 第三个参数（IE不支持）：指定边框样式

text-decoration:underline red dotted;

设置网页如何处理空白white-space

• 可选值：
  • normal（默认）：正常
  • nowrap：不换行（会出现横向滚动条）
  • pre：保留空白（取消将多个空格自动变为一个空格，写什么就是什么，不做任何处理）

设置文本溢出text-overflow

• 可选值
  • ellipsis；溢出部分用省略号代替

实现溢出内容省略并加上省略号的效果

<style>
      .box2{
            width:200px;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
      }
</style>
<div class="box2">
asfwagasgdfagdshsgdhsdhgfdhfchggfdhfhdjd
</div>

4.练习

4.1京东顶部导航条

• 行内元素不支持宽高

• background-clip:content-box;
  将背景颜色设置到内容区，边框和内边距不再有背景颜色

• background-color：transparent设置为透明