层叠样式表CSS

最新推荐文章于 2024-03-12 20:10:01 发布

fighting123678

最新推荐文章于 2024-03-12 20:10:01 发布

阅读量189

点赞数

本文链接：https://blog.csdn.net/fighting123678/article/details/84781373

版权

HTML与CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS样式是表现。就像网页的外衣。比如，标题字体大小、颜色变化，或为标题加入背景图片、边框，超链接的颜色等。所有这些用来改变内容外观的东西称之为表现。

http://www.w3school.com.cn/css/index.asp

CSS中的各种标记从上面的网页中找

一、内部文档格式

style是放在html内部，这样的话，这种修饰只能用于html这一个文件

（一）实例一

表格有边框
文本的大小和颜色都发生改变
刚开始超链接没有下划线
当移动鼠标到超链接上之后，超链接会改变颜色，也没有下划线

<html>
	<head>
		<meta http-equiv="Content-Type"  content="text/heml;charset=gb2312">
		<title>css实例1</title>
		<style type="text/CSS">//style是用来存放CSS的
		td//用来描述一列//用来  修饰  下面的  <td>表格样式</td>
		{
			font—size:16pt;//key-value  大小
			color:#FF0000;//key-value  颜色  红色
		}
		a:link//超链接有很多属性，link代表基本属性
		{
			text—decoration:none;//没有任何的修饰
		}
		a:hover//鼠标移上去之后的改变
		{
			color:#FF0000;//变颜色
			text—decoration:none;
		}
		</style>//从style到这里是CSS描述的
	</head>
	<body>
		<table width="50%"  border="1" cellspacing="0" cellpadding="0">
			<td>表格样式</td>   //td的属性在CSS中有设置
			</tr>
		</table>
		<a href="www.sina.com.cn">超级链接</a>  //超链接在上面有两种修饰符:link和:hover
	</body>
</html>

（二）实例二

<html>
	<head>
		<meta http-equiv="Content-Type"  content="text/heml;charset=gb2312">
		<title>css实例2</title>
		<style type="text/CSS">//style是用来存放CSS的
		.btnQQ//自己定义的选择符，"."是选择符的意思，后面是自己定义的名字btnQQ
		//括号中是属性
		{
			background-image:url(images/button1.jpg);//背景选用images目录下的button1.jpg
			font-size:12ps;
			height:23px;//高度
			width:71px;//宽度
			border:lpx;//边框
		}
		</style>//从style到这里是CSS描述的
	</head>
	<body>
		<input type="button" class="btnQQ" value="按钮">//通过btnQQ制定用哪种选择符
	</body>
</html>

<html>
	<head>
		<meta http-equiv="Content-Type"  content="text/heml;charset=gb2312">
		<title>css实例2</title>
		<style type="text/CSS">//style是用来存放CSS的
		.btnQQ//自己定义的选择符，"."是选择符的意思，后面是自己定义的名字btnQQ
		//括号中是属性
		{
			background-image:url(images/button1.jpg);//背景选用images目录下的button1.jpg
			font-size:12ps;
			height:23px;//高度
			width:71px;//宽度
			border:lpx;//边框
		}
		</style>//从style到这里是CSS描述的
	</head>
	<body>
		<input type="button" value="按钮">//通过btnQQ制定用哪种选择符
	</body>
</html>

二、外部文档格式

希望多个网页都能共享同一个格式，因为有时候同一个网站的配色等基本一样。

有时候遇到不同的节日等，需要更改格式的话，只需要改*.CSS即可

1、文件名必须是*.CSS

（一）实例1

/*修改超链接颜色为红色*/
a
{
	color:rgb(255,0,0);text—decoration:none;
}
a:visited
{
	color:rgb(255,0,0);text—decoration:none;
}
a:hover
{
	color:rgb(211,45,175);text—decoration:none;
}

1、

2、使用效果

（二）实例2

/*修改超链接颜色为红色*/
a
{
	color:rgb(0,0,0);text—decoration:none;//纯黑色
}
a:visited
{
	color:rgb(255,0,0);text—decoration:none;
}
a:hover
{
	color:rgb(135,131,121);text—decoration:none;
}

1、

2、使用效果

fighting123678

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
层叠样式表CSS

CSS样式是表现。就像网页的外衣。比如，标题字体大小、颜色变化，或为标题加入背景图片、边框，超链接的颜色等。所有这些用来改变内容外观的东西称之为表现。http://www.w3school.com.cn/css/index.aspCSS中的各种标记从上面的网页中找一、内部文档格式style是放在html内部，这样的话，这种修饰只能用于html这一个文件（一）实例一...
复制链接

扫一扫