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% “宋体”

  • 相关阅读:
    2021.1.28 个人rating赛补题报告
    2021.1.23 个人rating赛补题报告
    2021.1.23 个人rating赛补题报告
    2020.12.14 个人训练赛补题报告
    2020.11.28 2020团体程序设计天梯赛补题报告
    2020.12.3 Codeforces Beta Round #73(Div2)补题报告
    Xhorse VVDI Prog V5.0.6 is Ready for BCM2 Adapter
    Program 2021 Ford Bronco All Keys Lost using VVDI Key Tool Plus
    Xhorse VVDI Prog V5.0.4 Software Update in July 2021
    How to use Xhorse VVDI2 to Exchange BMW FEM/BDC Module?
  • 原文地址:https://www.cnblogs.com/stfei/p/9085132.html
Copyright © 2011-2022 走看看