日度归档:2020年6月27日

css word-wrap属性简介说明


摘要:
下文讲述css属性word-wrap的功能简介说明,如下所示;


css word-wrap属性功能说明

css word-wrap属性功能:
用于设置指定的html标签当内容超过容器的边界时,是否自动换行
此属性在css3中已经由overflow-wrap替换

css word-wrap语法:
  word-wrap:normal | break-word
 ------参数值说明-----
normal:
    允许内容顶开或溢出指定的容器边界
break-word:
   内容将在边界内换行,
   单词内部允许断行


css word-wrap属性举例

<meta charset="utf-8" />
<style>
.divTest p{width:100px;border:1px solid #000;background-color:#eee;}
.normal p{word-wrap:normal;}
.break-word p{word-wrap:break-word;}
</style>
<p>
maomao365.com <br />
 word-wrap属性示例说明
</p>
<hr />
<ul class="divTest">
	<li class="normal">
		<strong>normal:</strong>
		<p>maomao365.commaomao365.commaomao365.commaomao365.commaomao365.commaomao365.com</p>
	</li>
	<li class="break-word">
		<strong>break-word:</strong>
		<p>maomao365.commaomao365.commaomao365.commaomao365.commaomao365.commaomao365.commaomao365.com</p>
	</li>
	<li class="break-word">
		<strong>break-word:</strong>
		<p>maomao365.com猫猫教程maomao365.com猫猫教程maomao365.com猫猫教程</p>
	</li>
</ul> 
css word-wrap属性示例说明

css
word-wrap属性示例说明

css中font-stretch属性功能简介


摘要:
下文讲述css属性中font-stretch的功能说明,如下所示:


css font-stretch属性功能

css font-stretch属性的功能:
设置选中html标签中的文字是否横向拉伸
(注意文字拉伸相对于浏览器字体的正常宽度)

css font-stretch属性设置语法:
  font-stretch:ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded
  ---------------参数说明---------------
   normal:
     默认值,正常文字宽度,不进行拉伸操作
   ultra-condensed:
    比正常文字宽度窄4个基数
   extra-condensed:
    比正常文字宽度窄3个基数
   condensed:
    比正常文字宽度窄2个基数
   semi-condensed:
    比正常文字宽度窄1个基数
   semi-expanded:
     比正常文字宽度宽1个基数
   expanded:
     比正常文字宽度宽2个基数
   extra-expanded:
     比正常文字宽度宽3个基数
   ultra-expanded:  
     比正常文字宽度宽4个基数   


css font-stretch属性示例说明

 
 
<meta charset="utf-8" /> 
<style>
 li>p{margin:0;font-size:80px;font-weight:bold;background:#ddd;width:30px;}
.divTest .normal p{font-stretch:normal;}
.divTest .condensed p{font-stretch:condensed;}
.divTest .ultra-condensed p{font-stretch:ultra-condensed;}
.divTest .extra-condensed p{font-stretch:extra-condensed;}
.divTest .semi-expanded p{font-stretch:semi-expanded;}
.divTest .expanded p{font-stretch:expanded;}
.divTest .ultra-expanded p{font-stretch:ultra-expanded;}
.divTest .extra-expanded p{font-stretch:extra-expanded;}
.divTest .semi-condensed p{font-stretch:semi-condensed;}
</style>
<p>
 maomao365.com <br />
 css font-stretch属性示例说明
</p>
<hr />

<ul class="divTest">
	<li class="normal">
		<strong>normal</strong>
		<p>a</p>
	</li>
	<li class="condensed">
		<strong>condensed</strong>
		<p>a</p>
	</li>
	<li class="ultra-condensed">
		<strong>ultra-condensed</strong>
		<p>a</p>
	</li>
	<li class="extra-condensed">
		<strong>extra-condensed</strong>
		<p>a</p>
	</li>
	<li class="semi-expanded">
		<strong>semi-expanded</strong>
		<p>a</p>
	</li>
	<li class="expanded">
		<strong>expanded</strong>
		<p>a</p>
	</li>
	<li class="ultra-expanded">
		<strong>ultra-expanded</strong>
		<p>a</p>
	</li>
	<li class="extra-expanded">
		<strong>extra-expanded</strong>
		<p>a</p>
	</li>
	<li class="semi-condensed">
		<strong>semi-condensed</strong>
		<p>a</p>
	</li>
</ul>
</body>
</html>		
css之font-stretch属性示例说明

css之font-stretch属性示例说明

css中你知道color属性的作用吗?


摘要:
下文讲述css属性中color的功能说明,如下所示:


color 属性功能

color属性的功能:
用于设置指定的html元素中的文本颜色,无默认值

 color属性设置语法:
    color:<colorValue>
 ------参数值说明-----
    colorValue:可使用颜色名称,
     RGB,HEX,RGBA,HSL,HSLA,transparent


color 属性功能示例说明

 
<meta charset="utf-8" />
<style>
.colorname p{color:red;}
.hex p{color:#ff0000;}
.rgb p{color:rgb(0,0,0);}
.rgba p{color:rgba(0,0,0,.5);}
.hsl p{color:hsl(240,50%,50%);}
.hsla p{color:hsla(240,50%,50%,.5);}
.transparent p{color:transparent;}
</style>
<p>
 maomao365.com <br />
 color属性示例说明
</p>
<hr />
<ul class="test">
	<li class="colorname">
		<strong>使用颜色名称法</strong>
		<p>颜色示例:{color:red;}</p>
	</li>
	<li class="hex">
		<strong>HEX(十六进制数值表示法)</strong>
		<p>颜色示例:{color:#ff0000;}</p>
	</li>
	<li class="rgb">
		<strong>RGB</strong>
		<p>颜色示例:{color:rgb(0,0,0);}</p>
	</li>
	<li class="rgba">
		<strong>RGBA</strong> - IE8及以下浏览器不支持这种写法
		<p>颜色示例:{color:rgba(0,0,0,.5);}</p>
	</li>
	<li class="hsl">
		<strong>HSL</strong> - IE8及以下浏览器不支持这种写法
		<p>颜色示例:{color:hsl(240,50%,50%);}</p>
	</li>
	<li class="hsla">
		<strong>HSLA</strong> - IE8及以下浏览器不支持这种写法
		<p>颜色示例:{color:hsla(240,50%,50%,.5);}</p>
	</li>
	<li class="transparent">
		<strong>transparent</strong> - IE8及以下浏览器将文本颜色设置为transparent,文本将显示为黑色
		<p>颜色示例:{color:transparent;}</p>
	</li>
css  color属性示例说明

css
color属性示例说明