HTML5开发系列（2）之 CSS文本样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			p{
				color: green;
				font-size: 14px;
				/*设置字体的时候,如果设置多个字体,系统依次会去查找电脑中的字体进行选择
				 * 但是在早前的版本不支持汉字的话，可以通过uncode编码进行设置字体  黑体：font-family: "\9ED1\4F53"
				 * */
				font-family: "微软雅黑","agency fb","blackadder itc";
				font-weight: 900;/*字体的粗细*/
				font-style: italic; /*斜体*/
				
				/*上面都是全写的方式,当然还有简写的形式进行实现   不过必须按照这个样的顺序进行编写
				 *倾斜   加粗  字体大小  字体样式   其中 前两个可以省略采用默认值，但是后面两个是绝对不能省略的，不然不会体作用的；
				 */
				/*font:italic 100 14px "微软雅黑";*/
				/*font:14px "微软雅黑";*/
			}
			em{
				font-style: normal; /*让斜体变得不倾斜*/
			}
			
		</style>
	</head>
	<body>
		<h1>css字体样式设置</h1>
		<p>这是一个段落，介绍html的相关知识；</p>
		<p>这是一个段落，<em>介绍html的相关知识</em>；</p>
	</body>
</html>

字体颜色，和阴影的设置，对齐，间距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.red{
				color: red;
			}
			#p1{
				color: #ff00ff; /* 颜色也可以是16进制的*/
			}
			
			#p2{
				color: rgb(0,205,0);
			}
			
			#p3{
				line-height: 30px;/*文本行间距*/
				text-align: center;/*文本对齐*/
				text-indent: 2em;/*首行缩进,1em就是一个汉字的宽度*/
			}
			
			#div1{
				letter-spacing: 15px; /*字间距*/
				
			}
			#div2{
				word-spacing: 100px;/*单词之间的间距,针对英文，中文无效*/
			}
			
			
			/*颜色半透明 css3的新特性*/
			h1{
				color: rgb(255,0,0,0.2);/*透明值的取值范围是0--1 之间;*/
			}
			
			/*文字阴影*/
			h2{
							/*水平偏移  垂直偏移  模糊偏移  背景色;前面两个参数必须写,后面两个可以省略*/
				text-shadow: 2px 2px 3px rgba(0,0,0,0.4);
			}
		</style>
	</head>
	<body>
		<h1>这个是一个标题</h1>
		<h2>TEST文字阴影</h2>
		<p class="red">这个是一个段落的文本内容；</p>
		<p id="p1">这个是一个段落的文本内容；</p>
		<p id="p2">这个是一个段落的文本内容；</p>
		
		<hr />
		
		
		<p id="p3">2009年7月29日，Z武器软件开发团队在其网站上贴出公告，决定正式将“Z武器”更名为“鲁大师”。据该公告说明，此次更名为“鲁大师”的背景原因为：鲁班是中国历史上能工巧匠的化身，而拳打镇关西、倒拔垂杨柳的鲁智深更在民间广为流传。鲁大师（原：Z武器）希望能秉承中国文化和Z武器的传统，继续打造这款助人为乐的免费软件。（现加入起飞计划，成为360旗下产品）</p>
		<div id="div1">我是熊大</div>
		<div id="div2">I am hero</div>
	</body>
</html>

HTML5开发系列（2） 之 CSS文本样式

猜你喜欢

HTML5开发系列（2）之 CSS文本样式