前端学习笔记-CSS-外观属性

2019/7/24 9:44:07 人评论 次浏览 分类:学习教程

CSS外观属性

 

color:文本颜色

color属性用于定义文本的颜色,其取值方式有如下3种:

1.预定义的颜色值,如red,green,blue等。

2.十六进制,如#FF0000,#FF6600,#29D794等。实际工作中,十六进制是最常用的定义颜色的方式。

3.RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

需要注意的是,如果使用RGB代码的百分比颜色值,取值为0时也不能省略百分号,必须写为0%。

 

line-height:行间距

ine-height属性用于设置行间距,就是行与行之间的距离,即字符的垂直间距,一般称为行高。line-height常用的属性值单位有三种,分别为像素px,相对值em和百分比%,实际工作中使用最多的是像素px

一般情况下,行距比字号大7.8像素左右就可以了。

 

text-align:水平对齐方式

text-align属性用于设置文本内容的水平对齐,相当于html中的align对齐属性。其可用属性值如下:

left:左对齐(默认值)

right:右对齐

center:居中对齐

 

text-indent:首行缩进

text-indent属性用于设置首行文本的缩进,其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,允许使用负值, 建议使用em作为设置单位。

1em 就是一个字的宽度 如果是汉字的段落, 1em 就是一个汉字的宽度

练习:

<!DOCTYPE html>
<html lang="en">
<head>
	
	<meta charset="UTF-8">
	<title>字体综合案列</title>
	<style>
		*{
			font-family: "微软雅黑";
		}
		h1{
			font-weight: 400;  /*设置字体为正常大小,没有单位,normal相当于400*/
			text-align: center;
		}
		a{
			font-weight: bold;  /*设置字体加粗,没有单位,blod相当于700*/
		}
		em{
			font-style: normal;  /*修改斜体em标签为正常,因为em标签带有强调的意思,比用span好*/
			color: skyblue;
		}
		div{
			text-align: center;   /*盒子里面的字,水平居中对齐,不是盒子水平居中*/
		}
		p{
			font-size: 16px;
			line-height:24px;     /*行距比字号大7.8像素左右就可以了*/
			text-indent: 2em;    /*首行缩进两个字*/
		}
		span{
			color: orange;
		}
		.a{
			color: red;
			font-weight: 400;
		}
	</style>
</head>
<body>
	<h1>中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1>

 	<div>2017年07月16日20:11 <span>新浪体育 评论中大奖</span>(<a href="#" class="a">11</a>人参与) <a href="#">收藏本文</a></div>
 	<hr />
 	<p>新浪体育讯 7月16日是燕京啤酒<em>[微博]</em>2017中国足协杯第三轮比赛,丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午,丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈,并且收拾行囊准备离开。在这样的情况下,丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。</p>

 	<p>在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会,当时俱乐部给出的解释是李虎由于身体欠佳,去医院接受治疗。然而今日李虎出现在俱乐部时,向记者否认了这一说法,并且坦言已经向俱乐部提出了辞呈。</p>

 	<p>据记者多方了解的情况,李虎<em>[微博]</em>极其教练组近来在执教成绩上承受了不小的压力,在联赛间歇期期间,教练组曾向俱乐部提出能够多引进有实力的球员补强球队,然而由于和俱乐部在投入以及成绩指标上的分歧,李虎最终和教练组一起在比赛日辞职。</p>

 	<p>这样的情况并没有影响到丽江嘉云昊队<em>[微博]</em>的队员,在比赛中丽江队在主场拼的非常凶,在暴雨之中仍然发挥出了体能充沛的优势,最终凭借点球击败了中超球队哈尔滨毅腾,顺利晋级下一轮比赛。根据中国足协杯的赛程,丽江嘉云昊队将在本月23日迎战江苏舜天队。</p>
</body>
</html>

效果:

 

text-decoration 文本的装饰

text-decoration 通常我们用于给链接修改装饰效果

描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。下划线 也是我们链接自带的
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。

 

练习:

<!DOCTYPE html>
<html lang="en">
<head>
	
	<meta charset="UTF-8">
	<title>文本装饰</title>
	<style>
		.qxjc{
			font-weight: normal;/*取消加粗*/
			/*font-weight: bold; 加粗*/
		}
		.qxxt{
			font-style: normal;/*取消斜体*/
			/*font-style: italic; 斜体*/
		}
		.qxsc{
			text-decoration: none;/*取消修饰*/
			/*text-decoration: line-through; 删除线*/
		}
		.qxxh{
			text-decoration: none;/*取消修饰*/
			/*text-decoration: underline; 下划线*/
		}
	</style>
</head>
<body>
	<b class="qxjc">加粗</b> <strong>加粗</strong>
	<i class="qxxt">斜体</i> <em>斜体</em>
	<s class="qxsc">删除线</s> <del>删除线</del>
	<u class="qxxh">下划线</u> <ins>下划线</ins>
</body>
</html>

效果:

相关资讯

  • 那些我们不愿意承认的事

    很久没有见的老朋友,准确的说应该是很久没有见过的老师,一个比我大两岁的老师,我上初中的时候他从高中回来教我了一年。后来又回去上高中,我上高中的时候他上大学,现在我刚大学毕业他创办了公司。昨日一见依然如故,他还是热爱销售,而我却成了纯粹的技术人员。 看到他…

    2015/6/22 13:12:47

学习教程

共有访客发表了评论 网友评论

验证码: 看不清楚?

    立即查看