六、字体样式和文本样式

最新推荐文章于 2024-04-30 19:38:51 发布
最新推荐文章于 2024-04-30 19:38:51 发布
阅读量874 收藏 3
点赞数
分类专栏： WEB基础-CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45602227/article/details/117319312
版权

一、字体样式

1.1 color、font-weight、font-style

	
	字体相关
			1. color 用来设置字体颜色

			2. font-weight 设置字体的加粗
						可选值：
								normal      默认值，正常
								bold    	加粗
								100-900     九个级别 （一般不用）


			3. font-style 设置字体风格
						可选值：
								normal      默认值，正常
								italic      表示斜体

1.2 font-size 设置字体所占的字体框大小

1）字体框

	+++ 字体框
			字体框就是字体存在的格子。
			设置font-size，实质就是设置字体框的大小。
			
			单位：px（pc端常用）  rem（移动端） em  pt（打印）  vw（视窗宽度的百分比）  vh（视窗高度的百分比）  vmin  vmax
	
	+++ font-size和line-height区别
			font-size设置字体框的大小;
			line-height设置字体框的实际大小
2）font-size

	+++ font-size
				
				font-size  用来设置字体框大小
				

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        

            #b1{
                font-size:200px;                
             }

    </style>
</head>
<body>
    
    <div id="b1">查询的速度的人</div>
   
</body>
</html>

1.3 line-heiht 行高

1）line-heiht 行高
	
	line-heiht 行高
				
				1、行高指的是文字占有的实际高度。 行高会在字体框的上下平均分配。
				   利用这一点，可以使单行文字在盒子内垂直居中。
				   
				2、单位
						1）直接指定一个大小
									 line-height：16px;
						2）也可以写一个整数，表示是字体大小的倍数 
									font-size:12px; 
								    line-height：2;
											此刻行高表示24px;
											
				3、默认行高  line-heihgt：1.33	

				4、利用行高，可以设置单行文字垂直居中。
				   【注意，行高可以撑起盒子的高度，所以高度可以不用设置】

>>>>>> 案例：行高指的是文字占有的实际高度，字体框指的是文字所在的框。行高会在字体框的上下平均分配

	
		div的高度被内容撑开，此时div没有设置高度，所以此刻div的高度被行高撑开。
		所以div的高度就是行高。
		

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

   
    <style>
        div{
            border:1px solid red;


            line-height:200px;
        }



    </style>

</head>


<body>

    <div>
        我是大厦IE
    </div>

</body>
</html>

在这里插入图片描述

2）行高应用
>>>>>> 1）设置单行文字、行内元素、行内块元素、图片在元素中垂直居中
	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

   
    <style>
        div{
            width:500px;
            border:1px solid red;


            /**设置单行文字水平居中 */
            height:500px;
            line-height:500px;
        }



    </style>

</head>


<body>

    <div>
        我是大厦IE
    </div>

</body>
</html>

在这里插入图片描述

>>>>>> 2）height可以省略不写，line-height可以撑起盒子的高度
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

           #b1{
              background-color: pink;   
              line-height: 200px;   
           } 

       
     
    </style>
</head>
<body>
    
   <div id="b1">
        xxxxxxxxxxx
    </div>
    

</body>
</html>

在这里插入图片描述

>>>>>> 3）处理一段文字行与行之间的高度

1.4 font-family 指定字体格式


	font-family 指定字体格式
			
			1.可选值：
					字体组
							serif       衬线字体
							sans-serif  非衬线字体
							monospace	等宽字体	
							cursive     草书字体
							fantasy     虚幻字体
					
							这五类表示字体组，它只是指定了字体的类别，浏览器会自动使用该类别下的字体。
							【浏览器决定具体的字体类型，我们只决定了字体类别】
					
					字体
							微软雅黑
							...
							


			2.font-family：'微软雅黑' ,'华彩','宋体';
			  font-family：'微软雅黑' ;
					
					font-family可以指定多个字体，
					字体生效时，优先使用第一个，第一个失效，使用第二个，依次递推。

1.5 @font-face 引入自定义字体格式

1）@font-face用于引入自定义字体
		
		@font-face 可以将服务器中的字体给用户使用。

		1.引入自定义字体使用步骤:
				1.从网络上下载字体
				2.在页面引入字体然后使用		  
											
					 			@font-face {
					 				/** 自定义字体的名字 */
					                font-family: "myfont";
					                /** 可以指定多个下载的字体的路径，优先使用第一个，不支持下一个 */
					                src: url(./font/Font.ttf),
					               		 url(./font/Font.ttf2);
					            } 
								
								/** 使用字体 */
					  			body{
					                color:red;
					                font-size: 20px;
					                font-family: 'myfont';
					            }
    
    		2.引入自定义字体存在问题
    				1.加载速度
    				2.版权
2）步骤
>>>>>> 1、在网页上下载字体
		https://font.chinaz.com/YingWenZiTiF.html

在这里插入图片描述

>>>>>> 2、将字体文件ttf 引入项目，然后使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

            @font-face {
                font-family: "myfont";
                src: url(./font2/Font.ttf);
            }


            p{
                color:red;
                font-size: 20px;
                font-family: 'myfont';
            }

    </style>
</head>
<body>

    <p>wewwewe我最帅</p>
    
</body>
</html>

在这里插入图片描述

1.6 字体的简写属性

		
		font可以设置字体所有相关属性		
				语法：
					font: [font-weihgt]  [font-style]  [font-size/line-heihgt] [font-family]
				
				例如：
					font：20px;
					font：20px 微软雅黑;
					font：20px/1 微软雅黑;
					font：bold italic 20px/1 微软雅黑，‘Aria’，‘宋体’;
					
			
			注意：
				1.font的属性可以省略不写，不写代表使用默认值。
				  所以如果使用font属性，注意font属性和其他字体相关属性重叠问题。
				
				2.属性的书写方式必须按照这个顺序
>>>>>> font设置属性和分别设置相同
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

   
    <style>
        
        .b1{
            font-size:12px;
            font-weight:bold;
            font-style:normal;
            line-height: 2;
            font-family: '宋体','微软雅黑';
        }


        .b2{
            font:bold normal 12px/2 '宋体','微软雅黑';
        }

    </style>

</head>


<body>

    <div class="b1">
        我是大厦IE
    </div>

    <div class="b2">
        我是大厦IE
    </div>

</body>
</html>

在这里插入图片描述

>>>>>> 使用font设置属性时，如果不写属性，则使用默认值，注意属性重叠问题
		如下代码，设置的line-heihgt失效。原因是因为font原因。
        
        font:bold normal 12px '宋体','微软雅黑';
        虽然 font没有设置line-heihgt值，但是没有值表示使用了默认值1.33。
        所以font把line-heihgt的属性重叠了。
        	

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

   
    <style>
        
     

        .b2{
            line-height:200px;
            font:bold normal 12px '宋体','微软雅黑';
        }

    </style>

</head>


<body>

    <div class="b2">
        我是大厦IE
    </div>

</body>
</html>

二、字体样式 – 图标字体库（iconfont）

2.1 图标字体的使用

1) 来源

	1.来源
		   在网页中经常使用一些小图标，可以通过图片来引入图标，但是图片大小本身很大，并且非常的不灵活。
	 	   所以在使用图标时，我们可以将图标直接设置为字体，
	 	   然后通过 @font-face的形式对字体引入，这样我们就可以通过使用字体的形式来使用图标。
2) 图标字体库的种类
	   2.图标字体库
	 	 	
				图标字体库有多种。常用的：
									1) fontawesome
									2) 阿里巴巴图标字体库
									
 		我们不用管图标字体是如何制作，只需要下载图标字体库，
	 	按照其指定的使用方式使用即可。
3) 使用步骤
				
		3.图标字体库的使用步骤：
					1.把字体库从官网上下载下来
					2.引入图标字体库的css
					3.参照css中的用法使用	（重点）

2.2 fontawesome图标字体库使用

1）帮助文档
		在zeal中搜索fontawesome，即可

在这里插入图片描述

2）使用步骤
		
		1.下载 https://fontawesome.com/start
		2.解压
		3.将css、webfonts移到项目中
		4.将all.css引入到html中。
		5.使用图标字体
   					 <i class="fab xxx"></i>
   					 <i class="fas xxx"></i>		
   					 
   					 xxx在帮助文档中可以查找。
   					 fas或fab随便使用一个，哪一个有用就用哪一个
>>>>>> 1. 进入fontawesome官网，下载fontawesome字体库
		https://fontawesome.com/start

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

>>>>>> 2. 解压fontawesome字体库

在这里插入图片描述

>>>>>> 3. 将解压文件中的css文件夹和webfonts文件夹拷贝到项目下的同一目录下。

在这里插入图片描述
在这里插入图片描述

>>>>>> 4. 引入css样式，然后使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link  rel="stylesheet"  href="/c/css/all.css"   >
</head>


<body>
    <i class="fab fa-affiliatetheme"></i>


</body>
</html>

在这里插入图片描述

3）图标字体库的原理
>>>>>> 进入引入的all.css文件中

在这里插入图片描述

>>>>>> 解析
	由上图可知，fontawesome将图标制作成了字体图，我们引入的all.css文件，该文件引入了这个字体库。
	然后我们按照它指定的使用方式使用即可。
4）图标字体库的其他用法
>>>>>> 方式一：使用伪元素
		
		通过伪元素来设置图标字体库。
			1.找到要设置的元素通过before或after进行选中。
			2.在content中设置图标的编码
			3.设置字体样式
					font-family: 'Font Awesome 5 Brands';  //其中字体名称在all.css中查找
			
		实质：通过上述的方法来设置图标，实质上可以参考all.css中的用法。	
			

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link  rel="stylesheet"  href="/c/css/all.css"   >

    <style>

        li{
            list-style: none;
        }

        li::before{
        	//指定字体
            font-family: 'Font Awesome 5 Brands';
            //
            content:'\f296';
        }
    </style>
</head>


<body>

    <ul>
            <li>    明月几时有</li>
            <li>    把酒问青天</li>
            <li>    不知天上宫阙</li>
            <li>    今夕是何年</li>
    </ul>

</body>
</html>

在这里插入图片描述

>>>>>> 方式二：使用实体
  	 <i class="fab">&#xf296;</i>

2.3 阿里巴巴图标字体库使用

>>>>>> 进入官网，搜索想要的图标，加入购物车，并下载

https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.dc64b3430&cid=29483
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

>>>>>> 将下载的文件解压然后复制到项目下

在这里插入图片描述
在这里插入图片描述

>>>>>> 引入图标字体库的css，并使用。【使用时，可参考css文件】
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!--阿里图标库-->
    <link  rel="stylesheet"  href="/c/css2/iconfont.css"   >

   
</head>


<body>

    <i class="iconfont    icon-dacong"> </i>
   

</body>
</html>

在这里插入图片描述

三、文本样式

3.1 文本样式

  
		1. text-indent:2em  首行缩进
		
		2. letter-spacing：12px； 设置字符间距
		
		3. word-spacing:2px;  设置词间距
		
		4. text-shadow设置文字阴影
				
				1)text-shadow:水平偏移量  垂直偏移量  模糊半径  颜色
				2)可以同时设置多组，中间用逗号隔开。
				3)该属性的作用是在文字下面在写一行相同的文字。

				 
		5. text-transform:uppercase （转大写）/ lowercase（转小写）/capitalize(首字母大写) 


      		
		6.text-decortion 设置文本下划线
					
					1) 可选值
							none 默认值
							underline 下划线
							overine  上划线
							line-through 删除线
					
					2）语法
							text-decortion:underline ; 
										设置下划线，浏览器都支持
										
							text-decortion:underline red ;
										设置下划线，并且为红色，IE不支持
	
							text-decortion:underline red dotted;
										设置下划线，并且为红色、虚线，IE不支持
				
					3) 可以设置多条线
							text-decortion:underline overine  line-through ;
a）text-shadow
	
	 text-shadow设置文字阴影
				
				1)text-shadow:水平偏移量  垂直偏移量  模糊半径  颜色
				2)可以同时设置多组，中间用逗号隔开。
				3)该属性的作用是在文字下面在写一行相同的文字。
>>>>>> 设置文字阴影
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            font-size: 17px;
            text-shadow: 3px 1px 1px red;
        }
    </style>

</head>
<body>

    <div>
        我爱你中国！！
    </div>
  

</body>
</html>

在这里插入图片描述

>>>>>> 设置文字阴影，可以设置多组
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            font-size: 17px;
            text-shadow: 3px 1px 1px red,-3px 1px 1px blue;
        }
    </style>

</head>
<body>

    <div>
        我爱你中国！！
    </div>
  

</body>
</html>

在这里插入图片描述

b）text-decoration
>>>>>> 设置下划线
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

   
    <style>
        
        .b1{
            text-decoration: underline;
        }

        .b2{
            text-decoration: underline red;
        }

        .b3{
            text-decoration: underline red dotted;
        }
    </style>

</head>


<body>

    <p class="b1">ewwe二二二恶</p>
    <p class="b2">ewwe二二二恶</p>
    <p class="b3">ewwe二二二恶</p>

</body>
</html>

在这里插入图片描述

>>>>>> 设置下划线，可以设置多组
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            font-size: 17px;
            text-decoration: line-through overline underline;
        }
    </style>

</head>
<body>

    <div>
        我爱你中国！！
    </div>
  

</body>
</html>

在这里插入图片描述

3.2 text-align、vertical-align

		
	 text-align、vertical-align
				1.主要用于操作文本、行内元素和行内块元素的居中问题。
				2.还可操作img标签。
	
					

		
		1.text-align 设置文本、行内元素、行内块元素水平对齐方式
				 	
				 	可选值:	left    居左对齐
							center  居中对齐
							right   居右对齐
							justify 两端对齐
			
		 用于操作文本/行内元素居中。即操作行内标签和行内块标签居中。（图片也是行内标签）
			



		2.vertical-align 设置文本、行内元素、行内块元素垂直对齐方式，只会

				可选值
						baseline 默认值，基线对齐（基线指的就是文字框的底部）
						top      顶部对齐  （文字框的上部与父元素对齐）
						bottom   底部对齐  （文字框的底部与父元素对齐）
						middle   居中对齐  （一般不用，非正式居中）
						
						12px	 设置像素（一般使用这个，直接指定像素即可）
				
				
				示例：
						vertical-align:12px;
						vertical-align:-200px;
				
				注意事项:
						1）vertical-align只在单元格元素设置才会有效。
									
									display:table-cell。将元素类型转为单元格。
1）text-align
>>>>>> 操作文本居中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

           #b1{
             width:200px;
             height:200px; 
             background-color: pink;    
             text-align: center;
           } 

     
    </style>
</head>
<body>
    
   <div id="b1">
                xxxxxxxx

  </div>
    

</body>
</html>

在这里插入图片描述

>>>>>> 操作行内元素居中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

           #b1{
             width:200px;
             height:200px; 
             background-color: pink;    
             text-align: center;
           } 

           #b2{
             background-color: blue;    
           }
     
    </style>
</head>
<body>
    
   <div id="b1">
               <span id="b2">xxxxxxxx</span> 

  </div>
    

</body>
</html>

在这里插入图片描述

>>>>>> 操作图片居中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

           #b1{
             width:200px;
             height:200px; 
             background-color: pink;    
             text-align: center;
           } 

     
    </style>
</head>
<body>
    
   <div id="b1">
       <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" width="50px" height="50px">
   </div>
    

</body>
</html>

在这里插入图片描述

2）vertical-align
a）vertical-align
		
	vertical-align 设置文本框基线

				1）可选值
						baseline 默认值，基线对齐（基线指的就是文字框的底部）
						top      顶部对齐  （文字框的上部与父元素对齐）
						bottom   底部对齐  （文字框的底部与父元素对齐）
						middle   居中对齐  （一般不用，非正式居中）
						
						12px	 设置像素（一般使用这个，直接指定像素即可）
			
	

				2) 注意事项
						1. vertical-align设置元素居中，必须配置display：table-cell使用。						
						2. vertical-align既可以设置给子元素，也可以设置为父元素。可以被继承。
				
				3）作用
						1. 操作元素居中
						2. 解决子元素与父元素的空隙问题。
b）vertical-align 注意事项
>>>>>> vertical-align只是设置文本框的基线，如果想设置垂直居中，必须配合display：table-cell。（vertical-align只在单元格元素中设置垂直居中才有效）
		display：table-cell。是将元素设置为单元格。此时，设置基线在中间，肯定是
		居中的。

案例1：在块内元素中设置无效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

           #b1{
             width:200px;
             height:200px; 
             background-color: pink;    
             vertical-align: middle;
           } 

           #b2{
             background-color: blue;    
           }
     
    </style>
</head>
<body>
    
   <div id="b1">
           <span id="b2">xxxxxxxx</span> 
  </div>
    

</body>
</html>

在这里插入图片描述

案例2：只在单元格元素中设置有效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

           #b1{
             width:200px;
             height:200px; 
             background-color: pink;    
             display: table-cell;
             vertical-align: middle;
           } 

           #b2{
             background-color: blue;    
           }
     
    </style>
</head>
<body>
    
   <div id="b1">
           <span id="b2">xxxxxxxx</span> 
  </div>
    

</body>
</html>

在这里插入图片描述

>>>>>> vertical-align可以被子元素继承，所以既可以加在父元素上，也可以加在子元素上。

案例1：设置垂直居中，加在父元素中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <style>
      
      .box1{
          width:300px;
          height:400px;
          border:1px solid red;

          /** 设置子元素垂直居中  ，加在父元素中*/  
          display: table-cell;
          vertical-align: middle;
      }

      span{
            width:300px;
            height:300px;
       

        }
    </style>
</head>
<body>

        <div class="box1">
            <span>xxx</span>
        </div>
 
      

</body>
</html>

案例2：设置垂直居中，加在子元素中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <style>
      
      .box1{
          width:300px;
          height:400px;
          border:1px solid red;

        
      }

      span{
            width:300px;
            height:300px;
       
        /** 设置子元素垂直居中  ，加在子元素中*/  
        display: table-cell;
          vertical-align: middle;
        }
    </style>
</head>
<body>

        <div class="box1">
            <span>xxx</span>
        </div>
 
      

</body>
</html>

在这里插入图片描述

c) vertical-align 作用
>>> a、操作文本、行内、行内块元素居中
>>>>>> 操作文本垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

           #b1{
              width:200px;
              height:200px; 
              background-color: pink;   

              display: table-cell;   
              vertical-align: middle;
           } 

           #b2{
               width:50px;
               height:50px;
               background-color: blue;    

           }
     
    </style>
</head>
<body>
    
   <div id="b1">
           xxxx
  </div>
    

</body>
</html>

在这里插入图片描述

>>>>>> 操作行内元素垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

           #b1{
              width:200px;
              height:200px; 
              background-color: pink;   

              display: table-cell;   
              vertical-align: middle;
           } 

           #b2{
               width:50px;
               height:50px;
               background-color: blue;    

           }
     
    </style>
</head>
<body>
    
   <div id="b1">
           <span id="b2">xxxxx</span>
  </div>
    

</body>
</html>

在这里插入图片描述

>>>>>> 操作图片垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

           #b1{
              width:200px;
              height:200px; 
              background-color: pink;   

              display: table-cell;   
              vertical-align: middle;
           } 

       
     
    </style>
</head>
<body>
    
   <div id="b1">
           <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" width="50px" height="50px">
  </div>
    

</body>
</html>

在这里插入图片描述

>>> b、处理子元素与父元素的空隙问题
	
	注意：
	     1.img标签我们称之为替换元素，当做文字显示，所以在图片显示时，会发现
	       图片和父标签底部有一段距离，这是因为文字的基线问题。我们可以通过
	       vertical-align来修正。

		 2.默认情况下，元素在td中是垂直居中的，可以通过vertical-align来修改。

a. 问题再现

		如下图，我们会发现图片和父元素底部有空隙

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

   
    <style>
        
      .b2{
          border:1px solid red;
      }


    </style>

</head>


<body>

    <div class="b2">
        <img src="/c/2.png" />
    </div>

</body>
</html>

在这里插入图片描述
b. 图片底部空隙修正

	
		img标签是替换元素，浏览器在显示时把它当做文本处理，
		所以在显示时，图片底部空隙就是因为文字框的基线造成的。
		所以我们可以通过vertical-align来修正。
		

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

   
    <style>
        
      .b2{
          border:1px solid red;
      }

      img{
          vertical-align: bottom;
      }

    </style>

</head>


<body>

    <div class="b2">
        <img src="/c/2.png" />
    </div>

</body>
</html>

在这里插入图片描述

3.3 图片空隙问题

1）两个图片并列有空隙
>>>>>> 问题在线
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <style>
      

        img{
            width:300px;
            height:300px;
            vertical-align: bottom;

        }
    </style>
</head>
<body>
             <img src="./img/1 (1).png" />
             <img src="./img/1 (2).png" />

      

</body>
</html>

在这里插入图片描述

>>>>>> 解决方式
		
		原因：这是由于元素之间的空格会被解析为一个空格。所以会有空隙。
		解决方式：两个图片元素紧挨着，无空格。

		<body>
		         <img src="./img/1 (1).png" /><img src="./img/1 (2).png" />
		</body>
2）图片和父元素底部有空隙
>>>>>> 问题在线
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <style>
      
      .box1{
          border:1px solid red;
      }

        img{
            width:300px;
            height:300px;

        }
    </style>
</head>
<body>

        <div class="box1">
             <img src="./img/1 (1).png" />
        </div>
 
      

</body>
</html>

在这里插入图片描述

>>>>>> 解决方式
	原因：图片在div排列，会被当做文字处理。
	     而图片和div的空隙实质上就是字体框造成。
	
	解决方式：设置img的文本框底部与父元素对齐。     

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <style>
      
      .box1{
          border:1px solid red;
      }

        img{
            width:300px;
            height:300px;

            vertical-align: bottom;
        }
    </style>
</head>
<body>

        <div class="box1">
             <img src="./img/1 (1).png" />
        </div>
 
      

</body>
</html>

在这里插入图片描述

3）图片纵向在父元素中排列，图片之间有空隙
>>>>>> 问题在线
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <style>
      
      .box1{
          border:1px solid red;
          width:300px;

      }

      img{
            width:300px;
            height:300px;
      
        }
    </style>
</head>
<body>

        <div class="box1">
            <img src="img/1 (1).png">
            <img src="img/1 (1).png">
        </div>
 
      

</body>
</html>

在这里插入图片描述

>>>>>> 解决方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <style>
      
      .box1{
          border:1px solid red;
          width:300px;

      }

      img{
            width:300px;
            height:300px;
            vertical-align: bottom;
        }
    </style>
</head>
<body>

        <div class="box1">
            <img src="img/1 (1).png">
            <img src="img/1 (1).png">
        </div>
 
      

</body>
</html>

在这里插入图片描述

3.4 设置溢出的内容显示省略号

1）white-space 样式

		white-space  设置网页如何处理空白
					可选值：
							normal  正常，浏览器在处理空格时，会适度的换行显示
							nowrap  不换行，直接一行显示
							pre     保留空白，原样显示
		
		

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

   
    <style>
        
        .b1{
           white-space: normal;
        }

        .b2{
            white-space: nowrap;
        }

        .b3{
            white-space: pre;
        }
       
    </style>

</head>


<body>

    <p class="b1">ewwe二二二恶wwwwwwwwww    wwewewwwwwwwwwwww   wwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>
    <p class="b2">ewwe二二二恶wwwwwwwwww    wwewewwwwwwwwwwww   wwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>
    <p class="b3">ewwe二二二恶wwwwwwwwww    wwewewwwwwwwwwwww   wwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>

</body>
</html>

在这里插入图片描述

1）溢出的内容显示省略号

	 text-overflow：ellipsis; 溢出的内容省略号显示。					

	 text-overflow必须配合overflow、white-space、widht一起使用。
	 才能设置长文本隐藏，并自带省略号。这几个值缺一不可。
	 	
	 	width 设置盒子宽度
	 	white-space  设置空格换行
	 	overflow 设置裁减
	 	text-overflow 设置溢出省略号
		 	

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

   
    <style>
        
        .b1{
           width: 300px;
           white-space: nowrap;
           overflow:hidden;
           text-overflow: ellipsis;
        }

      
    </style>

</head>


<body>

    <p class="b1">ewwe二二二恶wwwwwwwwww    wwewewwwwwwwwwwww   wwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>

</body>
</html>

在这里插入图片描述

四、字体、文本样式切记

	
	1.lint-height、text-align、verticle-align
			
			1）这三个属性既可以处理文字，也可以处理行内元素、行内块元素和图片。其效果一致。
			2）图片是替换元素，我们把它当做文字来显示，所以也使用这三个属性。
	
	2.字体文本样式可以被子类继承。切记。
二旬、
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
说一说我认为比较全的CSS字体与文本样式
Tcontinuous的博客
05-09 741
 CSS字体和文本样式 课程内容•       文字字体、字体大小、颜色、加粗等•       文本行高、对齐方式、文本装饰等    CSS文字样式文字样式属性•       字体：font-family•       文字大小：font-size•       文字颜色：font-color•       文字粗细：font-weight•       文字样式：font-style•     ...
详解CSS3中常用的样式【基本文本和字体样式】
01-18
摘要：为了使你的网页看上去更美观，在这里你将会看到一些CSS3中常用到的样式。...2、字体样式 font-style ：normal(普通文本)/italic（斜体）； font-weight ：nomal(普通字体)/bold（加粗）； text-transfo
字体，文本相关的样式
Azure_c_c的博客
01-31 154
字体相关的样式 color - 字体颜色 font-size - 字体大小 相关单位： px ： css像素 em ：1em等于1个font-size（当前元素的font-size） rem：1rem等于1个根元素的font-size line-height - 行高， 文本在网页中都需要创建一个文本框，行高就是文本框的高度 文字默认在行高中居中 行高可以指定一个像素值，也可以指定一个整数，如果指定一个数字行高就会是字体的倍数 行高可以用来设置行间距 = 行高 - 字体大小 文字在垂直方向居中，可以将
CSS中文本样式（详解网页文本样式）
最新发布
百赢出品，必属精品
04-30 1179
CSS Text模块用于控制文本的外观和排版。它提供了一系列属性，允许开发者对文本进行格式化和布局，以实现各种视觉效果。文本样式属性：CSS提供了一系列属性来控制文本的外观，包括颜色、字体、大小、粗细等。这些属性包括colorfont-size等。文本对齐：通过text-align属性可以控制文本在其容器中的水平对齐方式，如左对齐、右对齐、居中对齐等。文本装饰：使用属性可以添加文本装饰效果，如下划线、删除线等。行高和间距属性用于设置行高，和属性分别控制字母和单词之间的间距。文本转换。
字体样式和文本样式
weixin_34413103的博客
07-23 108
一、字体样式 <!doctype html> <html><head> 　　 <style> 　　div{ 　　color: #000; 　　font-family: '微软雅黑','宋体'; 　　 font-weight: 900; /*这是没有单位的*/ 　　font-s...
字体样式&文本样式
weixin_43748930的博客
11-27 476
1，字体样式设置： 字体类型(风格)font-style / 字体粗细font-weight / 字体大小font-size / 字体系列font-family 组合值写法：字体风格和字体粗细可以都不写或者写一个，也可以换顺序，但是font-size和family的顺序不能换，也必须同时给。 注意：可以用font-size设置行高。例如：font-size:20px/100px;（20是字体大小，...
字体和文本样式(一)
weixin_45382875的博客
01-18 257
字体和文本样式(一) 黑马程序员web前端开发入门教程 HTML5+CSS3 2022/1/11 字体样式 字体大小：font-size 字体粗细：font-weight 字体样式：font-style 字体类型：font-family 字体类型：font属性连写 文本样式 line-height行高 一、 字体大小 属性名： font-size 取值： 数字 + px 注意点： 谷歌浏览器默认文字大小是16px 单位需要设置，否则无效 二、 字体粗细 属性名： font-weight 取值
微信小程序在text文本实现多种字体样式
10-16
主要介绍了微信小程序在text文本实现多种字体样式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Css样式--字体样式和链接样式详解
09-25
在CSS样式中，字体样式和链接样式是两个重要的概念，它们允许我们自定义网页上的文本外观和链接行为。本文将详细解析这两个方面的内容。 首先，我们来看字体样式。CSS提供了丰富的选项来控制文本的视觉呈现。 1. *...
2.字体和文本样式.html
09-24
2.字体和文本样式.html
03文本和字体相关样式.html
03-04
03文本和字体相关样式.html
zeal-for-develop.zip
07-05
这个工具包含java(spring,elasticsearch)，python(django)，node，redis, javascript(vue,angular,react), andro,swift等等开发的离线文档
【前端学习记录4】字体样式和文本样式
aftertasttea的博客
12-07 579
一、字体样式 1、简介：英文“font”前缀开头，是“字体”的意思。“font-size”表示字体大小，“font-weight”表示字体粗细。 2、字体类型：font-family 语法：font-family:字体1，字体2，... ，字体N； 设置一种字体：#div1{font-family:Arial;} 设置多种字体：p{font-family:Arial,Verdana,...
css字体样式和文本样式
cmyhahh的博客
04-29 284
字体样式 习题 文本样式 习题
文字样式与文本样式
weixin_50821119的博客
12-26 469
文字样式与文本样式font简写属性font-style字体样式font-variantfont-weight 字体粗细font-size 字体大小line-hight(行高)font-family 字体款式CSS文本样式（text）color属性text-align文=文本对齐text-decoration下划线，上划线等等text-indent文本缩进单行文本省略号与多行文本省略号word-wrapword-spacing 字体间距letter-spacing属性text-transform属性verti
＜html＞css样式学习（第四天） 文本样式
m0_70516782的博客
06-23 228
1、字体长度 2、颜色单位 3、字体样式 4字体的分类以及其他样式.........
第五节：文本样式、字体样式
qq_43220836的博客
09-28 373
属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小,主要用于定义小型大写字母文本。text-decoration-color 属性规定文本修饰（下划线 underline、上划线 overline、中划线 line-through）的颜色。font 简写属性在一个声明中设置所有字体属性。属性规定文本修饰要使用的线条类型。属性规定文本块中首行文本的缩进。属性指定文本的字体样式。属性控制文本的大小写。属性设置文本字体大小。
CSS 文本样式
drawlessonsfrom的博客
03-26 107
1、字体样式和文本样式的区别： 1、字体样式针对的是“文字本身”的形体效果。文本样式针对的是“整个段落”的排版效果。 2、字体样式注重个体，文本样式注重整体。 2、在CSS中如何大致上对字体样式和文本样式进行区分？ 可以通过相关的属性前缀的"font"和"text"来大致对字体样式和文本样式进行区分。 3、文本样式属性 文本样式的属性 属性 说明 text-indent 首行缩进 text-align 水平对齐 text-decoration 文本修饰 text-transfor
【web前端开发】CSS文字和文本样式
云泽野の编程日记
03-14 4027
本篇文章主要讲解CSS中的文字和文本样式及一些实用技巧.文章最后有思维导图.
vb.net DataGridView设置标题和单元格文本大小和字体样式：
06-07
要设置 DataGridView 的标题和单元格文本大小和字体样式，可以使用以下代码： 1. 设置标题文本大小和字体样式： ``` DataGridView1.ColumnHeadersDefaultCellStyle.Font = New Font("Arial", 12, FontStyle.Bold) ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值