zoukankan      html  css  js  c++  java
  • 文本属性和字体属性

    文本属性:

      文本对齐:

        text-align 属性规定元素中的文本的水平对齐方式。

        属性值:none,center,left,right,justify.

      文本颜色:

        text-indent属性规定元素首行所进的距离,单位建议用em.

      文本修饰: 

        text-decoration 属性规定文本修饰的样式。

        属性值:none(默认),underline(下划线),overline(上划线),line-through(横穿文字的线),inherit(继承父元素的text-decoration属性的值)

      行高:

        line-height就是行高的意思,指的就是一行的高度。 

    字体属性:

      字体大小:

        font-size表示设置字体的大小,如果设置成inherit 表示继承父元素的字体大小值。

      字体粗细:

        font-weight表示设置字体的粗细。

        属性值:none(默认值,标准粗细) | bold(粗体) | border(更粗)| lighter(更细) | 100~900(设置具体粗细,400等同于normal,而700等同于bold)| inherit(继承父元素字体的粗细值)

      字体系列:

    font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif

    如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。如果都不支持则显示宋体。

    行高 line-height:  

        针对单行文本垂直居中

      公式:行高的高度等于盒子的高度,可以使当行文本垂直居中,注意只适用单行文本。

      针对多行文本垂直居中

      行高的高度不能小于字体的大小,不然上下字之间会紧挨一起。

      第一步,一个宽度300*300的盒子,看盒子中一共显示了几行文字,假如是5行,再看一下行高,如果行高是line-      height:30px; 那么就知道行高*5=150px

      第二步,让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px;

    font-family介绍

      使用font-family注意几点:

      1.网页中不是所有字体都能用哦,因为这个字体要看用户的电脑里面装没装,
      比如你设置: font-family: "华文彩云"; 如果用户电脑里面没有这个字体,
      那么就会变成宋体
      页面中,中文我们只使用: 微软雅黑、宋体、黑体。
      如果页面中,需要其他的字体,那么需要切图。 英语:Arial 、 Times New Roman

      2.为了防止用户电脑里面,没有微软雅黑这个字体。
      就要用英语的逗号,隔开备选字体,就是说如果用户电脑里面,
      没有安装微软雅黑字体,那么就是宋体:
      font-family: "微软雅黑","宋体"; 备选字体可以有无数个,用逗号隔开。
      3.我们要将英语字体,放在最前面,这样所有的中文,就不能匹配英语字体,就自动的变为后面的中文字体:
      font-family: "Times New Roman","微软雅黑","宋体";

      4.所有的中文字体,都有英语别名,我们也要知道: 微软雅黑的英语别名:font-family: "Microsoft YaHei";
      宋体的英语别名: font-family: "SimSun";font属性能够将font-size、line-height、font-family合三为一: font:12px/30px     "Times New Roman","Microsoft YaHei","SimSun";

      5.行高可以用百分比,表示字号的百分之多少。一般来说,都是大于100%的,因为行高一定要大于字号。font:12px/200% “宋体” 等价于 font:12px/24px “宋体”; 反过来,比如: font:16px/48px “宋体”;等价于 font:16px/300% “宋体”

  • 相关阅读:
    day7 面向对象 静态方法 类方法 属性方法 类的特殊成员方法 元类 反射 异常处理
    day6 面向对象 封装 继承 多态 类与实例在内存中的关系 经典类和新式类
    day5 time datetime random os sys shutil json pickle shelve xml configparser hashlib subprocess logging re正则 python计算器
    kafka常用操作命令
    linux基础
    django学习1——初识web应用程序
    mysql数据库(三)——pymysql模块
    mysql数据库(二)——表的查询
    mysql数据库(一)
    Python常用模块——re模块
  • 原文地址:https://www.cnblogs.com/stfei/p/9085132.html
Copyright © 2011-2022 走看看