码迷,mamicode.com
首页 > Web开发 > 详细

CSS(六)-- 布局(元素的层级),字体

时间:2021-01-26 11:43:44      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:access   none   boot   tom   rem   wrap   header   sans   背景   

1.层级

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

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

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

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

2.字体相关

2.1字体相关的样式

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‘);
    }

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设置为透明

CSS(六)-- 布局(元素的层级),字体

标签:access   none   boot   tom   rem   wrap   header   sans   背景   

原文地址:https://www.cnblogs.com/psyduck/p/14319671.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!