CSS学习3

最新推荐文章于 2023-09-05 15:52:47 发布

aneyal

最新推荐文章于 2023-09-05 15:52:47 发布

阅读量419

点赞数 1

分类专栏：前端学习文章标签： css 学习 css3

本文链接：https://blog.csdn.net/aneyal/article/details/123450039

版权

前端学习专栏收录该内容

47 篇文章 2 订阅

订阅专栏

CSS中的颜色表示

CSS中的颜色的取值方式有三种：

1 预定义的颜色值，如red,blue,green

2 十六进制，如#FF0000,#FF6600,#29D794,实际应用时，提倡采用十六进制，并且提倡采取简写，即当六个位上的数两两相同（第一和第二，第三和第四，第五和第六）时，可以将每两个相同的简写为一个，注意要三对都是两个数相同时才能简写，例如#FF6600可以简写为#F60，但#FF003e不能简写，因为最后一对3e不是两两相同。

3 RGB代码，如红色为rgb(255,0,0)或rgb(100%,0%,0%)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS中的颜色表示</title>
		<style>
			.r1{
				color: red;
			}
			.r2{
				color: #FF0000;
			}
			.r3{
				color: rgb(255,0,0);
			}
		</style>
	</head>
	<body>
		<p class="r1">预定义的颜色</p>
		<p class="r2">十六进制</p>
		<p class="r3">rgb代码</p>
	</body>
</html>

效果：

行高、对齐、首行缩进、字间距和单词间距

行高用line-height进行设定，单位有px,em和百分百，实际使用最多的是像素px

一般情况下，行高比字号大7、8像素就可以了

使用text-align设定水平对齐方式。当其取值为Left表示左对齐，为center时为居中对齐，为right时表示右对齐

使用text-indent设置首行缩进，其属性可以为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口的百分比，可以使用负值，一般建议使用em

字间距使用letter-spacing设置，其属性可以为不同单位的数值，可以使用负值，默认为normal

单词间距使用word-spacing设置，用于定义英文单词之间的间距，对中文字符无效，其属性可以为不同单位的数值，可以使用负值，默认为normal

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>行高对齐和首行缩进</title>
		<style>
			p{
				/* 设置行高 */
				line-height:30px ;
				/* 设置首行缩进 */
				text-indent: 2em;
				/* 设置单词间距 */
				word-spacing: 2px;
			}
			h4{
				/* 设置居中对齐 */
				text-align: center;
				/* 设置字间距 */
				letter-spacing: 2px;
			}
		</style>
	</head>
	<body>
		<h4>脸书危机</h4>
		<p>在2018年3月被媒体曝光的脸书公司接近九千万之多的用户的个人数据被泄露的事件。在这个事件中，一位剑桥大学的讲师通过一个测试个性的应用访问并采集到了接近6000万的脸书用户的个人数据，并将其卖给了一家专职分析数据并且以此牟利的公司—— “Cambridge Analytica（剑桥分析）”。</p>
		<p>“剑桥分析”公司利用这些数据，使用大数据分析技术，分析得出用户的个人爱好、性格及政治立场，并且利用这些信息，针对性地对用户发送政治广告，从而在2016年的美国总统竞选期间，给总统候选人之一的特朗普的团队参选美国总统给予了一定程度上的帮助。</p>
	</body>
</html>

效果：

颜色半透明

CSS3中新增的外观

格式：color:rgba(r,g,b,a)，a是alpha，透明的意思,a的范围为0-1，越小越透明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p{
				/* a的取值范围是0-1，越小越透明*/
				color: rgba(255,0,0,0.2);
			}
		</style>
	</head>
	<body>
		<p>使用颜色半透明</p>
	</body>
</html>

文字阴影

这也是CSS3中新增的，可以给文字添加阴影效果

使用text-shadow，其中有四个属性：h-shadow（必需，水平阴影的位置，允许负值），v-shadow（必需，垂直阴影的位置，允许负值），blur(可选，模糊的距离），color（可选，阴影的颜色）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文字阴影</title>
		<style>
			h1{
				/* 设置文字阴影，其颜色为黑色半透明 */
				text-shadow: 10px 7px 2px rgba(0,0,0,0.7);
			}
		</style>
	</head>
	<body>
		<h1>给文字添加阴影</h1>
	</body>
</html>

效果：

综合实践

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>综合训练</title>
		<style>
			body{
				/* 一般网页不用纯黑色，用灰黑色 */
				color:#3c3c3c;
				font-size: 16px;	
			}
			h1{
				text-align: center;
				font-size: 25px;
				font-weight: normal;
			}
			div{
				text-align: center;
				font-size: 14px;
			}
			span{
				color: #0000FF;
			}
			.num{
				color: #FF0000;
			}
			.sc{
				color: #FFC0CB;
				font-weight: 700;
			}
			a:hover{
				color: #0000FF;
			}
			p{
				font-size: 14px;
				line-height: 24px;
				text-indent: 2em;
				letter-spacing: 2px;
			}
			em{
				font-style: normal;
				color:skyblue;
			}
		</style>
	</head>
	<body>
		<h1>中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1>
		<div>2017年07月16日20:11  
			<span>新浪体育 我有话说</span>
			(<a href="#" class="num">195人 </a>参与)
			<a href="#" class="sc">收藏本文</a>
			</div>
		<hr />
		<p>新浪体育讯　7月16日是燕京啤酒<em>[微博]</em>中国足协杯第三轮比赛，丽江嘉云昊队主场迎战
		哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄
		然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由
		此前的教练员杨贵东代理指挥了本场比赛。</p>
		
		<p>在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎
		由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并
		言已经向俱乐部提出了辞呈。</p>
		
		
		<p>据记者多方了解的情况，李虎<em>[微博]</em>极其教练组近来在执教成绩上承受了不小的压力，在联赛间
		歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投
		入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。</p>
		
		<p>这样的情况并没有影响到丽江嘉云昊队<em>[微博]</em>的队员，在比赛中丽江队在主场拼的非常凶，在暴
		雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下
		一轮比赛。根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</p>
	</body>
</html>

效果：