zoukankan      html  css  js  c++  java
  • CSS系列:CSS文字样式

    1. 设置字体

      在CSS中字体通过font-family属性来设置。

    font-family: Verdana, Arial, Helvetica, sans-serif;

      上面的字体设置告诉浏览器首先在访问者的计算机中寻找Verdana字体。如果该访问者的计算机中没有Verdana字体,则寻找Arial字体。若没有Arial字体,再依次寻找Helvetica、sans-serif字体。如果这4种字体都没有,则使用浏览器的默认字体显示。

      font-family属性可以同时声明多种字体,字体之间用逗号分隔开。另外一些字体的名称中间会出现空格,如Times New Roman,这时需要用双引号将其引起来,使浏览器知道这是一种字体的名称。

    2. 文字的大小

      CSS通过font-size属性来设置文字的大小。

    font-size: 12px;

      长度单位:

      ◊ px 表示在浏览器上1个像素的大小;

      ◊ em  1em表示在其父元素中字母m的标准宽度;

      ◊ ex   1ex表示字母x的标准高度。

    3. 行高

      CSS中通过line-height属性设置。在CSS中line-height的值表示两行文字之间基线的距离,即每行文字的高度。如果给文字加上下划线,下划线的位置就是文字的基线。

    line-height: 30px;

      除了可以使用px等作为行高的单位,也可以不加任何单位,此时行高应该写成与字体大小的比值。

    line-height: 1.5;

      CSS中字体、大小和行高的组合:

    font: 12px/18px Verdana, Arial, Helvetica, sans-serif;
    font: 12px/1.5 Verdana, Arial, Helvetica, sans-serif;

    4. 文字颜色

    color: blue;
    color: #0000FF;
    color: rgb(0,0,255);
    color: rgb(0%,0%,100%);

    5. 空白折行

    white-space: nowrap;

    6. CSS1定义的字体、颜色和文本属性

    属性类型说明
    font-family 字体 字体类型
    font-style 字体 字体样式,包括:normal、italic(斜体)、oblique(倾斜)
    font-variant 字体 字体大小写,包括:normal、small-caps(小型的大写字母字体)
    font-weight 字体 字体粗细
    font-size 字体 字体大小
    font 字体(复合属性) 字体样式,可以包含所有字体属性的声明值
    color 颜色 字体颜色
    word-spacing 文本 词间距
    letter-spacing 文本 字符间距
    text-decoration 文本 文本修饰线,包括:none(默认值)、blink(闪烁)、underline(下划线)、line-through(中划线)、overline(上划线)
    vertical-align 文本 文本垂直对齐方式,包括:auto、baseline、sub、supper、top、text-top、middle、bottom、text-bottom、length。
    text-transform 文本 文本大小写,包括:none(默认值)、capitalize(首字母大写)、uppercase(大写)、lowercase(小写)
    text-align 文本 文本的水平对齐方式,包括:left、right、center、justify(两端对齐)
    text-indent 文本 首行缩进
    line-height 文本 行高

    7. CSS2新增字体、颜色和文本属性

    属性类型说明
    font-size-adjust 字体 是否强制对文本使用同一尺寸
    font-stretch 字体 是否横向拉伸变形字体
    text-shadow 文本 文本阴影效果
    direction 文本 文本流入的方向,包括:ltr(默认值,从左到右)、rtl(从右到左)、inherit(由继承获得)
    unicode-bidi 文本 定义同一个页面中存在不同方向读进的文本显示,与direction属性一起使用

    8. CSS3新增字体、颜色和文本属性

    属性类型说明
    text-shadow 文本 文本阴影或模糊效果
    text-overflow 文本 省略文本的处理方式
    word-wrap 文本 文本超过指定容器的边界时是否断开换行

      示例

    text-shadow: -0.1em 0.1em #CCCCCC;
    text-shadow: -0.1em 0.1em 0.3em #CCCCCC;
    text-shadow: -0.1em 0.1em #CCCCCC,
            -0.1em 0.1em 0.3em #CCCCCC;

      text-shadow属性的第一个值表示水平偏移;第二个值表示垂直偏移,正值偏右或偏下,负值偏左或偏上;第三个值表示模糊半径,可选;第四个值表示阴影是颜色,可选。

      text-shadow属性可以接受一个以逗号分隔的阴影效果列表,并应用到元素的文本上。

    text-overflow: ellipsis;

      text-overflow属性值包括:clip | ellipsis | ellipsis-word。

      clip:不显示省略标记,只是简单的裁切。

      ellipsis:当对象内文本溢出时显示省略标记,省略标记插入的位置是最后一个字符。

      ellipsis-word:当对象内文本溢出时显示省略标记,省略标记插入的位置是最后一个词。

    word-wrap: break-word;

      word-wrap属性值包括:normal | break-word。

      normal:连续文本换行。

      break-word:内容将在边界内换行。

  • 相关阅读:
    区块链学习笔记
    Ubuntu下Maven配置与Maven项目创建教程
    Java数字签名——ECDSA算法
    Java数字签名——DSA算法
    Java数字签名——RSA算法
    Python——Web.py詳解
    Flask從入門到入土(五)——Flask与数据库
    Flask從入門到入土(四)——登錄實現
    Flask從入門到入土(三)——Web表單
    Flask從入門到入土(三)——模板
  • 原文地址:https://www.cnblogs.com/libingql/p/4187025.html
Copyright © 2011-2022 走看看