CSS基础-03

字体


文本颜色:color:red;
字体分类
  衬线字体serif
    --字体宽度各异,有衬线
    --Times、Georgia、宋体
  无衬线字体sans-serif
    --字体宽度各异,无衬线
    --Helvetica、Verdana、Arial、微软雅黑
  等宽字体monospace
    --字体宽度一样,一般用于代码或表格
    --Courier  New、Consolas
  草书字体cursive
    --模仿人手写的字体
    --Indie Flower、Comic Sans
  装饰字体Fantasy
    没有什么统一特征,不属于上述类别的字体
字体族:使用font-family来设置字体族
      font-family:sans-serif;
  可以同时指定多个字体,多个字体之间使用逗号隔开(若字体之间有空格或者特殊符号,使用引号)
      font-family:sans-serif,”Microsoft   YaHei”;

@font-face:字体本机有,其他人没有,用户可下载
  通过@font-face可以使浏览器自动应用服务器上的字体文件
    @font-face{
          font-family:’myFont’;
          Src:url('./ZCOOLXW-R.ttf’)}
注:有些字体有版权,不建议使用

图标字体:font-awesome.css
   1. 使用步骤:将css和fonts文件夹放到项目目录

     引入CSS文件<link  rel=’stylesheet’  href=’css/font-awesome.min.css’>

    <body>
      <span class="fa fa-power-off s1"></span>
    </body>

    <style>

      .s1{font-size:120px;

      color:red;}

    </style>

  2. 将文件css和webfonts放在fa文件夹中

<link rel="stylesheet" href="fa/css/all.css">

使用时:<i class="fas fa-stroopwafel" style="font-size: 100px;"></i>

阿里图标字体:http://www.iconfont.cn

选中想要的图标加入购物车,且添加到项目中,下载到本地,放入iconfont中,引入iconfont/iconfont.css

三种方法

   1.通过实体<span class=’iconfont’ style=’font-size:100px;color:red;’></span>

  2.通过类<span class=’iconfont icon-icon-test’ style =’ font-size:100px;color:red; ’> </span>

  3.通过伪类<p></p >

    <style>

      p::before{

        content:’\e63f’

        font-family:iconfont;

        font-size:100px;}

    </style>

 字体大小

1em=1font-size:em也是CSS中的一个单位,相当于一个字体大小

1rem=HTML的1font-size,默认16px,相对于根元素

修改:html{font-size:200px;}

行高(line height

行高指的是文字占有的实际高度。通过line-height来设置行高,行高可以指定一个大小(px,em),也可以直接设置整数(整数代表行高是字体的指定倍数)

为了使得文字垂直居中:行高设置和高度一样  line-height=height;

行高还可以设置文字的行间距:行间距=行高-字体大小

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

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

字体的简写属性

font同时设置字体相关的所有样式,后面必须是字体大小和字体族,必须写(空格隔开)

font:40px  'Times New Roman ’,Times

font:[加粗 斜体 变形]大小/行高 字体族

行高  可以省略不写,如果不写使用默认值

字重,字体加粗:font-weight:100-900;九个级别,但基本上没有用

可选值:normal  默认值,不加粗

bold    加粗

字体样式:font-style

可选值:normal  默认值,正常

italic    斜体

字体变形:font-variant

可选值:small-caps(小型大写字母)

文本样式

text-align:设置文本的对齐方式

left 默认值,靠左对齐

right 靠右对齐

center 居中对齐

justify 两端对齐

vertical-align:垂直对齐方式

baseline:基线对齐

top:和父元素顶部对齐

bottom:和父元素的底部对齐   可设置图片对齐,使其不向基线对齐

super:上标

sub:下标

middle:居中

text-decoration:设置文本修饰

underline:下划线

line-through:删除线

overline:上划线

none:没有线

white-space:如何处理空白内容

normal 默认值,自动换行

nowrap 不换行

pre 保留文本的格式

text-overflow: 如何处理溢出的文本

ellipsis 使用省略号来表示溢出的内容

(0)

相关推荐

  • CSS基础和高级

    CSS基础: 1.css层叠样式表介绍 2.css层叠样式表选择器 3.css层叠样式表选择器优先级问题 4.css层叠样式表核心属性 CSS高级: 1.css层叠样式表浮动 2.css层叠样式表盒子 ...

  • 「学习笔记」CSS基础

    前言 拖延了一周的CSS学习笔记终于利用周末去补齐了,本篇文章着重梳理之前所学的CSS知识点,查漏补缺.同时,试着用git将重点案例存放到远程仓库中,更近一步贴近公司流程.

  • JavaScript基础-03

    JavaScript基础-03

  • WEB前端第八课——CSS基础

    WEB前端第八课——CSS基础

  • CSS基础之简单介绍

    网页诞生初期,没有描述样式的语言,创建了很多用于描述样式的标签.但这些标签破坏了html作为一门结构语言的表现. 于是,W3C在1995年开始起草CSS,提出将结构和样式分离的解决方案. 元素 元素是 ...

  • 清娟盲派命理基础 03

    第四节 天干五行生克要看力量 一.当一个五行受伤严重后,就无法再去生了. 二.当年月日时有相同日干时,有十神生之,首先确定年月为大,必先受生,最后才是日主受生,且受生力量小. 比如: 年 月 日 庚  ...

  • 《5分钟商学院·基础》第03周:互联网世界的五大基本定律

    011.信息对称 在市场条件下,想要实现有效交易,交易双方掌握的信息必须对称,如果不对称,掌握信息比较充分的人员往往处于比较有利的地位. 如何解决信息不对称: 过去:通过品牌连锁经营和担保交易等来解决 ...

  • 2020上海国企公共基础知识每日一练(2020.03.25)

    2020上海国企公共基础知识每日一练(2020.03.25)

  • 面试时回答的基础教程CSS计数器

    IT行业近十年来发展迅猛,衍生出许多新的职业,如UI设计师.开发工程师.软件测试工程师等,在众多新兴职业中,Web前端工程师就是其中之一.在IT行业,Web前端真正得到重视大概也要六七年.伴随着因特网 ...