文本样式

最新推荐文章于 2024-11-01 19:34:36 发布

to-and-fro

最新推荐文章于 2024-11-01 19:34:36 发布

阅读量161

点赞数

分类专栏： html+css 文章标签： css3 css

本文链接：https://blog.csdn.net/qq_39225271/article/details/107358030

版权

html+css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文深入探讨CSS中的文本样式，包括文本阴影、文本溢出、文本换行、动态内容及默认样式等特性。详细讲解了text-shadow属性如何为文字添加阴影效果，text-overflow属性如何处理文本溢出，以及line-break、word-wrap、word-break和white-space属性如何控制文本换行。此外，还介绍了content属性用于插入动态内容的方法。

摘要由CSDN通过智能技术生成

文本阴影

text-shadow属性给文字添加阴影效果
1，值为none表示无阴影
2，显示单个阴影包含参数，第一个为对象的阴影水平偏移值，第二个为对象的垂直偏移值，第三个为阴影模糊值（可选），第四个为阴影的颜色
例如：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p {
    text-align: center;
    font: bold 60px helvetica, arial, sans-serif;
    color: #999;
    text-shadow: 0.1em 0.1em #333;
}
</style>
</head>
<body>
<p>文本阴影</p>
</body>
</html>

运行结果如下：
在这里插入图片描述
3，设置多重阴影

text-shadow: 0.2em 0.5em 0.1em #600,
        -0.3em 0.1em 0.1em #060,
        0.4em -0.3em 0.1em #006;

运行结果如下：
在这里插入图片描述

文本溢出

text-overflow：clip | ellipsis | ellipsis-word；
初始值为无
值为clip表示不现实省略标记，文本溢出裁剪
值为ellipsis表示溢出显示省略标记，省略标记插入到最后一个字符
值为ellipsis-word表示文本溢出显示省略标记，插入位置为最后一个词(word)

要实现省略号效果，必须定义white-splace：nowrap来强制文本一行显示，overflow：hidden来溢出内容隐藏

文本换行

1，line-break专门控制日文换行
2，word-wrap属性：
属性值为normal控制连续文本换行，默认值
属性值为break-word内容将在边界内换行，如果需要词内换行也会发送
3，word-break属性：
属性值为break-all表示允许在非亚洲语言文本行的任意字内断开
属性值为keep-all表示对于中文，韩文，日文来说是不允许字断开的
4，white-space属性
属性值为nowrap表示强制在一行显示
属性值为pre表示显示预定义文本格式

动态内容

content属性
属性值可以是normal默认值，可以是字符串来插入文本内容，可以是attr（）来插入属性值，可以是url（）来插入外部资源，可以是contour来插入排序标识，可以是none标识无内容

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>列表结构</title>
<style type="text/css">
ol { list-style:none;} /*清除默认的序号*/
li:before {color:#f00; font-family:Times New Roman;} /*设计层级目录序号的字体样式*/
li{counter-increment:a 1;}  /*设计递增函数a，递增起始值为1 */
li:before{content:counter(a)". ";}   /*把递增值添加到列表项前面*/
li li{counter-increment:b 1;} /*设计递增函数b，递增起始值为1 */
li li:before{content:counter(a)"."counter(b)". ";}  /*把递增值添加到二级列表项前面*/
li li li{counter-increment:c 1;}  /*设计递增函数c，递增起始值为1 */
li li li:before{content:counter(a)"."counter(b)"."counter(c)". ";}  /*把递增值添加到三级列表项前面*/
</style>
</head>
<body>
<ol>
  <li>一级列表项目1
      <ol>
          <li>二级列表项目1</li>
          <li>二级列表项目2
              <ol>
                  <li>三级列表项目1</li>
                  <li>三级列表项目2</li>
              </ol>
          </li>
      </ol>
  </li>
  <li>一级列表项目2</li>
</ol>
</body>
</html>

运行结果如下：
在这里插入图片描述

默认样式

initial属性值直接取消对某个元素的样式指定

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
p {
    color: blue;
    font-family: 宋体;
}
p#text02 {
    color: initial;
    color: -moz-initial;
}
</style>

<body>
<p id="text01">有时，爱也是种伤害。残忍的人，选择伤害别人，善良的人，选择伤害自己。</p>
<p id="text02">有些事，我们明知道是错的，也要去坚持，因为不甘心；有些人，我们明知道是爱的，也要去放弃，因为没结局；有时候，我们明知道没路了，却还在前行，因为习惯了。</p>
<p id="text03">以为蒙上了眼睛，就可以看不见这个世界；以为捂住了耳朵，就可以听不到所有的烦恼；以为脚步停了下来，心就可以不再远行；以为我需要的爱情，只是一个拥抱。 </p>
</body>
</html>

运行结果如下：
在这里插入图片描述

字体

Font-family设置字体类型宋体，罗马体等
Font-style设置字体样式 normal正常 italic 斜体
Font-size设置字体大小单位px em px/16=em 百分数 20%
Font-weight设置字体的粗细 400为正常最大为900，700为blod，blod定义粗体，bolder定义更粗的字符，lighter定义更细的字符
color设置字体颜色

文本

Text-align设置文本的位置center居中 right justify表示宽度相同左右对齐
Text-decoration主要删除链接的下划线值为none 添加下划线为underline
Text-transform指定大小写 uppercase大写 lowercase 小写 capitalize 首字母大写
Text-indent设置文本第一行缩进 Text-indent： 20px
Color设置文本颜色

自定义字体

@font-face{字体描述}
描述内容包含：font-family设置字体名称，font-style色湖之文本样式，font-variant设置文本是否大小写，font-weight设置文本粗细，font-stretch设置文本是否横向拉伸变形，font-size设置字体大小，src设置字体的相对路径和绝对路径

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 引入外部字体文件 */
@font-face {
    /* 选择默认的字体类型 */
    font-family: "lexograph";
    /* 兼容IE */
    src: url(http://randsco.com//fonts/lexograph.eot);
    /* 兼容非IE */
    src: local("Lexographer"), url(http://randsco.com/fonts/lexograph.ttf) format("truetype");
}
h1 {
    /* 设置引入字体文件中的lexograph字体类型 */
    font-family: lexograph, verdana, sans-serif;
    font-size:4em;
}
</style>
</head>
<h1>http://www.baidu.com/</h1>
<body>
</body>
</html>

运行结果如下：
在这里插入图片描述