字体

文本颜色：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 使用省略号来表示溢出的内容

HTML基础-05的更多相关文章

  1. javaSE基础05

    javaSE基础05:面向对象 一.数组 数组的内存管理 : 一块连续的空间来存储元素. Int [ ] arr = new int[ ]; 创建一个int类型的数组,arr只是一个变量,只是数组的一 ...

  2. javascript基础05

    javascript基础05 1.变量的作用域 变量既可以是全局,也可以是局部的. 全局变量:可以在脚本中的任何位置被引用,一旦你在某个脚本里声明了全局变量,你就可以 在这个脚本的任何位置(包括函数内 ...

  3. node基础05：路由基础

    1.基础实例 //server.js var http = require("http"); var url = require("url"); var rou ...

  4. python3基础05（有关日期的使用1）

    #!/usr/bin/env python# -*- coding:utf-8 -*- import timefrom datetime import datetime,timedelta,timez ...

  5. Spring 框架基础(05)：事务管理机制，和实现方式

    本文源码:GitHub·点这里 || GitEE·点这里 一.Spring事务管理 1.基础描述 Spring事务管理的本质就是封装了数据库对事务支持的操作,使用JDBC的事务管理机制,就是利用jav ...

  6. Java知识系统回顾整理01基础05控制流程06break

    一.break break:结束循环 二.练习--直接结束当前for循环 public class HelloWorld { public static void main(String[] args ...

  7. python基础05 if选择

    摘要:if语句是用来检查一个条件,如果条件为真(true),我们运行一个语句块(称为IF块),否则(else)运行另一个语句块(else块).else语句是可选的 程序1(将文件保存为if.py): ...

  8. python基础05 缩进与选择

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 缩进 Python最具特色的是用缩进来标明成块的代码.我下面以if选择结构来举例. ...

  9. php基础05：常量

    <?php // 1.PHP 常量介绍 // 常量是单个值的标识符(名称).在脚本中无法改变该值.有效的常量名以字符或下划线开头(常量名称前面没有 $ 符号). // 2设置 PHP 常量 // ...

  10. Python基础05 缩进和选择

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 缩进 Python最具特色的是用缩进来标明成块的代码.我下面以if选择结构来举例. ...

随机推荐

  1. python pytest接口自动化框架搭建（一）

    1.首先安装pytest pip install pytest 2.编写单测用例 在pytest框架中,有如下约束: 所有的单测文件名都需要满足test_*.py格式或*_test.py格式. 在单测 ...

  2. 3.新手建站教程系列之认识WordPress和第一篇文章

    上一期咱已经把本地环境和wp网站给搭建出来了,接下来就是来认识这个程序了.进入网站后台,地址为你的网址/wp-admin 后台名字叫做仪表盘,首页是一个信息合集区域,上面会显示有多少文章,多少页面以及 ...

  3. 题解 洛谷 P4546 【[THUWC2017]在美妙的数学王国中畅游】

    首先发现有连边和删边的操作,所以我们肯定要用\(LCT\)来进行维护. 接下来考虑如何进行\(LCT\)上的信息合并. \(f=1\),则函数为\(f(x)=sin(ax+b)\) \(f=2\),则 ...

  4. EOJ Monthly 2019.11 A(进制转换)

    "欢迎您乘坐东方航空公司航班 MU5692 由银川前往上海......" "我们的飞机很快就要起飞了,请收起小桌板,摘下耳机......" 收起了小桌板,摘下了 ...

  5. web自动化 -- 消息提示框处理 （alert、confirm、prompt）

    一.前提知识 1.警告消息框(alert) 警告消息框提供了一个"确定"按钮让用户关闭该消息框,并且该消息框是模式对话框,也就是说用户必须先关闭该消息框然后才能继续进行操作. 2. ...

  6. python处理文本数据

    处理文本数据,主要是通过Seris的str访问.遇到NaN时不做任何处理,保留结果为NaN,遇到数字全部处理为NaN. str是Seris的方法,DataFrame不能直接使用,但是通过索引选择Dat ...

  7. redis,rabbitmq,SqlAlchemy

    redis发布和订阅

  8. Linux重定向用法详解

    大家好,我是良许. 相信大家平时都会有需要复制粘贴数据的时候,如果是打开文件进行复制粘贴,就不可避免的需要较多的鼠标与键盘的操作,就会比较繁琐.那么有没有可以省掉这些繁琐操作的复制粘贴的方法呢? 答案 ...

  9. MVC + EFCore 项目实战 - 数仓管理系统8 - 数据源管理下--数据源预览

    上篇我们完成了数据源保存功能,并顺便看了保存后的数据源列表展示功能. 本篇我们开始开发预览功能,用户预览主要步骤: 1.点击数据源卡片预览按钮 2.查看数据源包含的表 3.点击表名,预览表中数据   ...

  10. clion 如何执行外部文件

    https://blog.csdn.net/he_yang_/article/details/96644480 这里这里