文本样式

文本字体

color

color 属性用于设置字体颜色。

p {
  color: deepskyblue;
}

font-family

font-family 属性用于设置字体。

p {
  font-family: "Source Han Sans", Helvetica, Arial, sans-serif;
}

思源黑体(Source Han Sans) Github 链接

字体图标

💡 Baidu 静态资源公共库http://staticfile.org 提供了前端常用的静态资源,可以直接引用。

font-size

font-size 属性用于设置字体大小。

  • px 像素
  • em 1em = 当前元素的字体大小
  • rem 1rem = 根元素的字体大小
html {
  font-size: 62.5%; /* font-size: 10px; */
}

.container {
  width: 30rem;
}

💡 浏览器默认字体大小是 16px。

font-style

font-style 属性用于设置文字是否以斜体显示。

  • normal 正常
  • italic 斜体
  • oblique 模拟斜体

font-weight

font-weight 属性用于设置文字粗细。

  • normal 正常
  • bold 粗体
  • lighter 比父元素字体细一级
  • bolder 比父元素字体粗一级
  • 100-900 用于微调字体粗细

text-decoration

text-decoration 属性用于设置文字划线样式。

  • none 取消划线
  • underline 下划线
  • overline 上划线
  • line-through 中划线
    .syntax-error {
    text-decoration: underline wavy red; 
    }
    

text-transform

text-transform 属性用于改变字母的大小写。

  • none 取消转换效果
  • uppercase 转为大写
  • lowercase 转为小写
  • capitalize 转为首字母大写

text-shadow

CSS3 text-shadow 属性用于设置文字阴影。

p { 
  text-shadow: 1px 1px 2px black;
}

/* 多重阴影 - 求阴影面积 */
h1 {
  text-shadow: -1px -1px 1px #aaa,
               0px 4px 1px rgba(0, 0, 0, 0.5),
               4px 4px 5px rgba(0, 0, 0, 0.7),
               0px 0px 7px rgba(0, 0, 0, 0.4);
}

文本布局

text-align

text-align 属性用于设置文字对齐方式。

  • left 左对齐
  • right 右对齐
  • center 居中,当设置在图片的父元素上时,可以使图片居中。
  • ...

line-height

line-height 属性用于设置行高。

p { line-height: 150%; }  /* 1.5 倍 font-size 的行高 */

单行文本垂直居中

.header {
  height: 50px;
  line-height: 50px;
}

text-indent

text-indent 属性用于设置首行文本的缩进。

p { 
  text-indent: 2em;  /* 文章的每一段空两格开头 */
}

🚀 https://codepen.io/twhy/pen/BZKPWz

h1 { text-indent: -9999px; }    /* 对用户隐藏文字 */

letter-spacing

letter-spacing 属性用于设置文字/字母的间距。

<h1><span class="b">13</span></h1>
h1 {
  font-size: 10em;
  color: deepskyblue;
  text-align: center;
  font-family: monospace;
}

.b {
  transition: all .3s;
}

h1:hover .b {
  letter-spacing: -43px;
}

🚀 https://codepen.io/twhy/pen/QgNBLK

省略文字 ...

以下样式可以让文字过长的时候显示 ... 提示 如果想提早出现 ...,可以给元素设置 widthmax-width

<p class="ellipsis">
  唐僧:你想要啊?你要是想要的话你就说话嘛,你不说我怎么知道你想要呢,虽然你很有诚意地看着我,可是你还是要跟我说你想要的。
  难道你真的想要吗?你想要的话我会给你的,你想要我怎么可能不给你呢?不可能你想我不给你,你不想要我却偏给你的。
  大家讲道理嘛!现在我数三下,你要说清楚你要不要……你真的想要吗?那你就拿去吧!你不是真的想要吧?
</p>
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

🚀 https://codepen.io/twhy/pen/MoyYBg

参考链接

results matching ""

    No results matching ""