css的文本属性

css的文本属性

1.文本颜色

div{
color: red;
}
这个颜色还可以用#开头的16进制 #ff0000(红色) / rgb(255,0,0)/rgb(100%,0%,0%);


<html>
  <head>
   <!--!+tab键生成基本格式 只写针对知识点的写法-->
   <title> 练习</title>
   <style>
     div{
	    color: red;
		}

   </style>
   </head>
   <body>
     <div> 文字复合属性</div>
	  
   </body>
 </html>

2.对齐文本
textt-align 只能是水平对齐方式
left 左对齐
right 右对齐
center 居中对齐
默认的是左对齐

<html>
  <head>
   <!--!+tab键生成基本格式 只写针对知识点的写法-->
   <title> 练习</title>
   <style>
     div{
	    text-align: center;
		}

   </style>
   </head>
   <body>
  /*本质是让盒子里面的文字水平居中*/
     <div> 文本练习</div>
	  
   </body>
 </html>

3.装饰文本
下划线标签
text-decoration睡醒规定调价到文本的装饰,可以给文本添加下划线,删除线,上划线
none 默认 没有装饰线
underline 下划线.链接a自带下划线
overline 上划线
line-through 删除线

 
 <html>
  <head>
   <!--!+tab键生成基本格式 只写针对知识点的写法-->
   <title> 练习</title>
   <style>
     div{
	    text-decoration: underline;
		}

   </style>
   </head>
   <body>
     <div> 文本练习</div>
	  
   </body>
 </html>

平常的链接不要下划线

<html>
  <head>
   <!--!+tab键生成基本格式 只写针对知识点的写法-->
   <title> 练习</title>
   <style>
     div{
	    text-decoration: underline;
		}
	a{
	    text-decoration: none;
		color: #333;
		}

   </style>
   </head>
   <body>
     <div> 文本练习</div>
	 <ins> 文本练习</ins> 
	 <a href="#">baidu</a>
	  
   </body>
 </html>

4.文本缩进
text-indent属性用来指定文本的第一行缩进,通常是将段落的首行缩进
注意缩进的数值可以是负值.


 <html>
  <head>
   <!--!+tab键生成基本格式 只写针对知识点的写法-->
   <title> 练习</title>
   <style>
     p{
	  text-indent: 12px;
	  }

   </style>
   </head>
   <body>
   <p> 巴拉巴拉一大堆,啊啊啊啦啦啦啦啦啦啦,不够一行接着凑,效果不明显,啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>
   <p> 巴拉巴拉一大堆,啊啊啊啦啦啦啦啦啦啦,佩奇的爸爸喜欢玩泥坑,佩奇的妈妈也喜欢玩泥坑,大家都喜欢玩泥坑</p>
     
	  
   </body>
 </html>

注:em是一个相对单位,就是当前元素1
个文字的大小,如果当前元素没有设置大小,则会按照父元素的一个文字大小

<html>
  <head>
   <!--!+tab键生成基本格式 只写针对知识点的写法-->
   <title> 练习</title>
   <style>
   /* 还是24px*2 */
     p{
	  font-size: 24px;
	  text-indent: 2em;
	  }

   </style>
   </head>
   <body>
   <p> 巴拉巴拉一大堆,啊啊啊啦啦啦啦啦啦啦,不够一行接着凑,效果不明显,啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>
   <p> 巴拉巴拉一大堆,啊啊啊啦啦啦啦啦啦啦,佩奇的爸爸喜欢玩泥坑,佩奇的妈妈也喜欢玩泥坑,大家都喜欢玩泥坑</p>
     
	  
   </body>
 </html>

5.行间距
line-height 属性用于设置行间的距离(行高),可以将控制文字行与行之间的距离
行间距包括上间距 文本高度 下间距

<html>
  <head>
   <!--!+tab键生成基本格式 只写针对知识点的写法-->
   <title> 练习</title>
   <style>
     div{
	  line-height: 26px;
	  }

   </style>
   </head>
   <body>
   <div> 巴拉巴拉</div>
   <p> 巴拉巴拉一大堆,啊啊啊啦啦啦啦啦啦啦,不够一行接着凑,效果不明显,啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啊啊啊啦啦啦啦啦啦啦啊啊啊啦啦啦啦啦啦啦啊啊啊啦啦啦啦啦啦啦啊啊啊啦啦啦啦啦啦啦啊啊啊啦啦啦啦啦啦啦啊啊啊啦啦啦啦啦啦啦啊啊啊啦啦啦啦啦啦啦啊啊啊啦啦啦啦啦啦啦啊啊啊啦啦啦啦啦啦啦啊啊啊啦啦啦啦啦啦啦啊啊啊啦啦啦啦啦啦啦啊啊啊啦啦啦啦啦啦啦</p>
   <p> 巴拉巴拉一大堆,啊啊啊啦啦啦啦啦啦啦,佩奇的爸爸喜欢玩泥坑,佩奇的妈妈也喜欢玩泥坑,大家都
	  
   </body>
 </html>
   
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值