css文字、文本样式

最新推荐文章于 2024-08-24 02:50:35 发布

「已注销」

最新推荐文章于 2024-08-24 02:50:35 发布

阅读量918

点赞数

CC 4.0 BY-SA版权

分类专栏：前端基础入门 css/css3 文章标签： css

本文链接：https://blog.youkuaiyun.com/Allisa_yan/article/details/88644345

前端基础入门同时被 2 个专栏收录

22 篇文章

订阅专栏

css/css3

15 篇文章

订阅专栏

本文介绍了CSS中关于文字样式的各种属性，包括字体、文字大小、颜色、粗细、斜体和字体变形等，并详细讲解了文本样式属性，如水平和垂直对齐方式以及行高设置。此外，还探讨了多行文字垂直居中问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文字样式 :
字体（font-family）
文字大小（font-size）
文字颜色（color）
文字粗细（font-weight）
文字斜体（font-style）
字体变形（font-variant）
文本样式属性 :
水平对齐方式（text-align）
垂直对齐方式（vertical-align）
行高（line-height）
其他文本样式属性

* 文字样式 *

字体（font-family）

//设置多种字体，浏览器依次找，如果都没有，则使用浏览器默认样式

（font-family的属性值，可以是字体名，也可以是字体集）

//字体集：不是单个字体的名称，而是一类字体的统称（不同字体集，反映了不同的文字装饰效果）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文字样式</title>
	<style type="text/css">
		h1{font-family:"Times New Roman";}
		p{font-family:"微软雅黑","宋体","黑体",sans-serif;}
	</style>
</head>
<body>
	<h1 style="font-family:'宋体';">CSS层叠样式表（Cascading Style Sheets）</h1>
	<p>CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。</p>
</body>
</html>

文字大小（font-size）

//一般展示的是浏览器的默认大小16px；

绝对单位：（不推荐使用）

相对单位：

1、px像素（受显示器分辨率的影响，一般不适用于手机端）

2、em / %（都是相对于父元素的展示大小）

文字颜色（color）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文字样式</title>
	<style type="text/css">
		h1{color:red;}/*具体颜色名称*/
		p{color:rgb(0%,100%,0%);}/*数字：0~255；百分比：0%~100%*/
		div{color:#00880a;}/*十六进制：#开头，六位，0~F*（不区分字母大小写）（008800 = 080）/
	</style>
</head>
<body>
	<h1>CSS层叠样式表（Cascading Style Sheets）</h1>
	<p>CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。</p>
	<div>CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。</div>	
</body>
</html>

文字粗细（font-weight）

1、使用、标签

2、使用font-weight设置

//通常使用 bold

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文字样式</title>
	<style type="text/css">
		p{font-family: "黑体";}
		.normal{font-weight:normal;}
		.bold{font-weight:bold;}
		.bolder{font-weight:bolder;}
		.lighter{font-weight:lighter;}
		.f100{font-weight:100;}
		.f200{font-weight:200;}
		.f300{font-weight:300;}
		.f400{font-weight:400;}
		.f500{font-weight:500;}
		.f600{font-weight:600;}
		.f700{font-weight:700;}
		.f800{font-weight:800;}
		.f900{font-weight:900;}
	</style>
</head>
<body>
<!-- HTML中加粗 -->
	<p>字体粗细<b>font-weight</b></p>
	<p>字体粗细<strong>font-weight</strong></p>	
<!-- CSS样式加粗 -->
	<p class="normal">字体粗细font-weight：normal</p>
	<p class="bolder">字体粗细font-weight：bolder</p>
	<p class="bold">字体粗细font-weight：bold</p>	
	<p class="lighter">字体粗细font-weight：lighter</p>
	<!-- 数值 -->
	<p class="f100">字体粗细font-weight：100</p>
	<p class="f200">字体粗细font-weight：200</p>
	<p class="f300">字体粗细font-weight：300</p>
	<p class="f400">字体粗细font-weight：400</p>
	<p class="f500">字体粗细font-weight：500</p>
	<p class="f600">字体粗细font-weight：600</p>
	<p class="f700">字体粗细font-weight：700</p>
	<p class="f800">字体粗细font-weight：800</p>
	<p class="f900">字体粗细font-weight：900</p>
</body>
</html>

文字斜体（font-style）

1、斜体标签、

2、使用font-style样式设置

//一般使用 italic

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文字样式</title>
	<style type="text/css">
		.normal{font-style:normal;}
   		.italic{font-style:italic;}
		.oblique{font-style:oblique;}
	</style>
</head>
<style>

</style>
<body>
    <!-- HTMl中斜体 -->
	<p>正常的字体</p>
	<p><em>斜体</em></p>
	<p><i>斜体</i></p>

    <!-- CSS样式中斜体 -->
    <p class="normal">正常的字体</p>
	<p class="italic">斜体</p>
	<p class="oblique">倾斜</p>	
</body>
</html>

字体变形（font-variant）

//将内容中的英文转为小型大写字母

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文字样式</title>
	<style type="text/css">
		.fontVariant{font-variant:small-caps;}
	</style>
</head>
<body>
	<p>CSS层叠样式表（Cascading Style Sheets）</p>
	<p class="fontVariant">CSS层叠样式表（Cascading Style Sheets）</p>
</body>
</html>

//前3个的顺序随意，后边2个顺序固定

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文字样式</title>
	<style type="text/css">
		P{
			/*font-size:20px;
			font-family:"黑体","宋体";
			font-style:italic;
			font-weight:bold;
			font-variant: small-caps;*/

			font:italic bold small-caps 50px/1.5em "黑体","宋体";
		}
	</style>
</head>
<body>
	<p>CSS层叠样式表（Cascading Style Sheets）</p>	
</body>
</html>

* 文本样式属性 *

水平对齐方式（text-align）

1、通过在p标签内添加 align="left/center/right/justify(两端对齐)" 属性设置

2、使用text-align样式设置

//如果是对span标签，则不会生效

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>文本属性</title>
  <style type="text/css">
     .text1{text-align:left;}
     .text2{text-align:center;}
     .text3{text-align:right;}
     .text4{text-align:justify;}

     img{text-align:center;} /*不会生效，则需要在外层添加<div>块级：div{text-align:center;}*/

     body{text-align:right;} /*整体可以生效*/

     .textAlign{text-align:center;}
     .textAlign p{width:50%;margin:0 auto;} /*margin属性，使整个容器居中显示*/
  </style>     
</head>
<body>
      <P class="text1">文本左对齐：HTML 指的是超文本标记语言 (Hyper Text Markup Language),
        HTML 不是一种编程语言，而是一种标记语言 (markup language),HTML 指的是超文本标记语言 (Hyper Text Markup Language),而是一种标记语言 (markup language)。</P>

     <P class="text2">文本居中对齐：HTML 指的是超文本标记语言 (Hyper Text Markup Language),
        HTML 不是一种编程语言，而是一种标记语言 (markup language),HTML 指的是超文本标记语言 (Hyper Text Markup Language),而是一种标记语言 (markup language)。</P> 
        
     <P class="text3">文本右对齐：HTML 指的是超文本标记语言 (Hyper Text Markup Language),
        HTML 不是一种编程语言，而是一种标记语言 (markup language),HTML 指的是超文本标记语言 (Hyper Text Markup Language),而是一种标记语言 (markup language)。</P> 

     <P class="text4">文本两端对齐：HTML 指的是超文本标记语言 (Hyper Text Markup Language),
        HTML 不是一种编程语言，而是一种标记语言 (markup language),HTML 指的是超文本标记语言 (Hyper Text Markup Language),而是一种标记语言 (markup language)。</P> 

      <img src="img/logo.png"/>
      <div><img src="img/logo.png"/></div>

     <div class="textAlign">
          <P>指定宽度HTML 指的是超文本标记语言 (Hyper Text Markup Language),
            HTML 不是一种编程语言，而是一种标记语言 (markup language),
            标记语言是一套标记标签 (markup tag)。</P>
      </div>
</body>
</html>

垂直对齐方式（vertical-align）---仅针对行内元素、表格元素生效

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文本样式</title>
	<style type="text/css">
		p{background-color: #ececec; height: 80px;font-size: 20px;}
		span{color:red;font-size: 14px;}    
        .sub{vertical-align: sub;}
        .super{vertical-align: super;}
		img{width: 130px;height:40px;}

		.baseLine{vertical-align: baseline;}
		.top{vertical-align: top;}
		.textTop{vertical-align: text-top;}
		.middle{vertical-align: middle;}
		.textBottom{vertical-align: text-bottom;}
		.bottom{vertical-align: bottom;}
        
        td{height:80px; width:100px;} 
	</style>
</head>
<body>
	<b>----sub和super值----</b>
	<p>CSS层叠样式表<span class="sub">sub</span></p>
    <p class="sub">CSS层叠样式表<span >sub</span></p>
	<p>CSS层叠样式表<span class="super">super</span></p>


	<b>----baseline、top、text-top、middle、bottom、text-bottom值----</b>
	<p>
		CSS层叠样式表			
		<span>（Cascading Style Sheets）</span>
		<img src="img/logo.png"/>
	</p>
	<p>
		CSS层叠样式表		
		<span class="baseLine">基线baseline</span>
		<img src="img/logo.png" class="baseLine"/>	
	</p>
	<p>
		CSS层叠样式表
		<span class="top">顶端对齐top</span>
		<img src="img/logo.png"/>				
	</p>
	<p>
		CSS层叠样式表
		<span class="textTop">文本的顶端对齐textTop</span>
		<img src="img/logo.png"/>		
	</p>
	<p>
		CSS层叠样式表
		<span class="middle">中部对齐middle</span>
		<img src="img/logo.png" class="middle"/>			
	</p>	
	
	<p>
		CSS层叠样式表
		<span class="textBottom">文字底端对齐textBottom</span>
		<img src="img/logo.png"/>		
	</p>
	<p>
		CSS层叠样式表
		<span class="bottom">底端对齐bottom</span>
		<img src="img/logo.png" class="bottom"/>		
	</p>

	<b>----长度和百分比的值----</b>    
	<p>
		CSS层叠样式表
		<span style="vertical-align:-15px;">长度值</span>
		<img src="img/logo.png"/>			
	</p>

	<p style="line-height: 1.5em;">
		CSS层叠样式表
		<span style="vertical-align:-100%;">百分比值</span>  //正数向上，负数向下
		<img src="img/logo.png"/>			
	</p>

	<b>----应用于单元格元素----</b>
	<table border="1px" class="one" cellspacing="0" >
		<tr>
			<td class="top"><span>top</span></td>
			<td class="middle"><span>middle</span></td>
			<td class="bottom"><span>bottom</span></td>
		</tr>		
	</table>
	
</body>
</html>

【？？单行文字实现了垂直居中，那么多行文字如何实现垂直居中呢？？】

---- 单行文字居中，只需要将line-height的值设置跟height一样即可

<!DOCTYPE html>
<html>
    <head>
   <meta charset="UTF-8">
   <title>输入文本</title>
   <style type="text/css">
     .warp{
              height:400px;
              width: 100%;
              border:1px blue solid;              
              display:table;      
             }
     .content{
              text-align: center;             
              display:table-cell;
              vertical-align:middle;              
              }
    /*由于垂直居中只能应用在行内元素、表格元素中，这里图片、文字外部有个div块级元素，所以不能实现，
因此，需要在父级元素中先添加 display:table，子级元素中添加 display:table-cell*/
   </style>
</head>
<body>
 <div class="warp">
        <div class="content">
            <img src="img\logo.jpg"/>
            <h1>Welcome to Website</h1>
            <h2>CSS层叠样式，用于网页样式设置，使网页更美观。</h2>
        </div>   
</div>
</body>
</html>

行高（line-height）

//当行高为px值时，如果改动字体大小，则会出现字体叠层显示

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>文本属性</title>
      <style type="text/css">
        .text3{font-size:20px;text-indent:2em;line-height:120%(或者使用em);} /*首行缩进2em，行高=字体大小*120% */
        .text4{line-height:1em;} /*默认字体为16px，浏览器默认有行高，不同浏览器默认行高不一样*/

        .content{font-size:20px;line-height:1.3em;} /*行高是可以继承的*/
        .text3{font-size:30px;} /*不设置行高，则会重叠，因为text3继承的是父元素行高20px*1.3=26px <30px （行高继承的为计算后的值）*/
      </style>
</head>
<body>
     <h1>HTML\CSS\JS关系</h1>       
     <div class="content">               
        <p class="text1">网页必备技术，<span style="line-height:20px;">结构:HTML</span> ,<span style="line-height:40px;">样式:CSS ,<span style="line-height:50px;">动作:JavaScript。 </span></p>

        <p class="text2">HTML（Hyper Text Markup Language）“超级文本标记语言”，是Internet上用于设计网页的主要语言。使用标签将内容展示在网页中。</p>

        <p class="text3">CSS（Cascading Style Sheets）译为“层叠样式表”，简称样式表。顾名思义就是设计网页样式的。“样式”就是网页的文字、颜色、图片位置等格式；“层叠”的意思是当HTML中引用了多个样式时，当样式文件中的样式发生冲突时，浏览器将依据层叠顺序处理。</p>   
     
        <p class="text4">JavaScript在一定程度上弥补了HTML和CSS的缺陷，HTML和CSS的配合使用，提供给用户的只是一种静态的信息，缺少交互性。<span>JavaScript</span>的出现使得用户与信息之间不只是一种浏览与显示的关系，而是实现了一种实时、动态、交互的页面功能。静态的HTML页面也逐渐被客户端可做出响应的动态页面所取代。</span>
     </div> 	
</body>
</html>

其他文本样式属性

//text-decoration属性不限定块级、行内

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文本样式</title>
	<style type="text/css">
		.one{word-spacing: 1em;}  /*或者为 10px...*/
		/*单词之间的间距(中文不会发生变化,但是要是中文之间有空格也会生效，因为这个是根据空格来判断是否为单词)*/
		.two{letter-spacing: -0.5em;} /*默认值为0，负数会重叠*/
		/*每个字符后边都会空格（包括英文字母、中文汉字）*/

        /*text-transform样式属性值：*/
        .one{text-transform: capitalize;}
		.two{text-transform: uppercase;}
		.three{text-transform: lowercase;}
		.four{text-transform: none;} /*默认*/

        /*text-decoration样式属性值：*/
        /*underline：下划线，overline：上划线，line-through：贯穿线(删除线)，blink：闪烁效果，none：没有装饰效果，默认值*/
		.one{text-decoration: underline overline none;}
		.two{color:red;text-decoration: overline;}
		.three{text-decoration:line-through;}
		.four{text-decoration: blink;}/*会出现兼容性问题*/
		.five{text-decoration: none;}
		a{text-decoration: none;} /*将链接的样式删除*/
		span{color:blue;text-decoration: underline;}
		/*该属性没有继承效果，不能继承p标签的属性值*/
	</style>
</head>
<body>
	<p>word-spacing、letter-spacings样式演示：</p>
	<p class="one">CSS层叠样式表（Cascading Style Sheets）</p>
	<p class="one">CSS层 叠 样 式 表（Cascading Style Sheets）</p>
	<p class="two">CSS层叠样式表（Cascading Style Sheets）</p>	

    <!--text-transform样式演示：-->
    <p>text-transform样式演示：</p>
	<p class="one">CSS层叠样式表（Cascading style sheets）,text-align</p>	
	<p class="two">CSS层叠样式表（Cascading style sheets）</p>
	<p class="three">CSS层叠样式表（Cascading style sheets）</p>
	<p class="four">CSS层叠样式表（Cascading style sheets）</p>

    <a href="#">text-decoration属性设置：</a>
	<p class="one">CSS层叠样式表（Cascading Style Sheets）</p>
	<p class="two">CSS层叠样式表<span>（Cascading Style Sheets）</span></p>
	<p class="three">CSS层叠样式表（Cascading Style Sheets）</p>
	<p class="four">CSS层叠样式表（Cascading Style Sheets）</p>
	<p class="five">CSS层叠样式表（Cascading Style Sheets）</p>
</body>
</body>
</html>