002CSS层叠样式表

最新推荐文章于 2023-09-13 08:53:29 发布

一个射手座程序猿

最新推荐文章于 2023-09-13 08:53:29 发布

阅读量85

点赞数

分类专栏： Java-Web

本文链接：https://blog.csdn.net/weixin_40440225/article/details/96450327

版权

Java-Web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一.CSS三种引用方式

1.行内样式

<div style="color: #930000;">
		HelloWorld	
	</div>

2.内部样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				color: aqua;
				font-size: xx-large;
			}
		</style>
	</head>
	<body>
	<div>
		HelloWorld
	</div>

	</body>
</html>

3.外部样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 定义一个input.css文件,然后按下面的方法引入 -->
		<link rel="stylesheet" type="text/css" href="input.css"/>
	</head>
	<body>
		
		<div>
			HelloWorld 
		</div>
	</body>
</html>

二.选择器

<body>
		<!-- 1.标签选择器 -->
		<style type="text/css">
			div{
				color: #00FFFF;
			}
		</style>	
		
		<div>
			HelloWorld
		</div>
		<!-- 2.ID选择器 -->
		<style type="text/css">
			#id{
				color: red;
			}
		</style>
		<div id="id">
				HelloWorld
		</div>
		
		<!-- 3.类选择器 -->
		<style type="text/css">
			.class{
				color: blue;
			}
		</style>
		<div class="class">
			类选择器
		</div>
		<!-- 4.标签选择器与类选择器共用 -->
		
		<style type="text/css">
			div.class1{color: blueviolet;}
		</style>
		
		<div class="class1">
			标签选择器与类选择器共用
		</div>
		<!-- 5.属性选择器 -->
		<style type="text/css">
			input[type="button"]{
				color: darkcyan;
			}
		</style>
		
		<input type="button" value="属性选择器" />
		
		<!-- 6.包含选择器 -->
		<style type="text/css">
			div p{
				color: crimson;
			}
		</style>
		
		<div>
			<p>包含选择器</p>
		</div>
		
		<!-- 7.伪类选择器(在超链接中经常使用) -->
		<style type="text/css">
		 a:link{color: #0000FF;} /*未访问的链接显示的颜色*/
		  a:visited{color: #DC143C;} /*已访问的链接显示的颜色*/
		   a:hover{color: #0000FF;} /*鼠标移动到链接上显示的颜色*/
		    a:active{color: #0000FF;} /*选定链接显示的颜色*/
		</style>
		<a href="#">伪类选择器(超链接)</a>
		
	</body>

三.CSS样式的属性使用

1.边框和尺寸

<body>
		<!-- 边框和尺寸
		 solid表示边框为实线
		 double表示边框为双线
		 none 表示边框为无边
		 
			  border-top    设置顶部的边框
			  border-left   设置左边的边框
			  border-right  设置右边的边框
			  border-bottom 设置底部的边框
			  
			     width 宽
				 heigth高
		 -->
		<style type="text/css">
			div{
				border: 5px #0000FF double;
				width:200px;
				height: 400px;
				
				
				border-top:#0000FF double;
				border-left:  #0000FF solid;
				border-right : #0000FF solid;
				border-bottom: #FF0000 double;
			}
		</style>
		<div>
			div边框和尺寸
		</div>
	</body>

2.转换属性

	<body>	
	<!-- display属性: none(不显示,隐藏)  block(显示为块元素)  inline(显示为行内元素)
			块: 占用屏幕一行
			行: 不会占用屏幕一行 -->
	<div style="display: inline;">
		显示为行内元素
	</div>
	 
	<span style="display: block;">
		
		(显示为块元素)
	</span>
		<div style="display: none;">
	此区域不会显示
	</div>

	</body>

3.字体属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			div{
				font-size: 66px;
				color: red;
				font-family: "楷体";
				/*文本加粗*/
				font-weight:bold;
				/*文本斜体*/
				font-style: italic;
			}
		</style>
		
	</head>
	<body>
		<div>
			CSS字体属性
		</div>
	</body>
</html>

4.背景色

<body>
			<style type="text/css">
		div{
			background-color: #008B8B;
			width: 200px;
		}
		
		</style>
		<div>
			CSS背景颜色
		</div>
	</body>

5.布局属性

	<body>
	<!-- 元素浮动
	 两个属性
	 float:浮动 none:元素不浮动
	 clear:清除浮动 both:清除两侧浮动
	 -->
		
		<div style="float: left;">向左浮动</div>
		<div style="float: right;">向右浮动</div>
		<div style="clear: both;">清除两侧浮动</div>
				
	</body>

6.盒子模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			.class{
				
					border: 5px #0000FF double;
		
				border-top:#0000FF double;
				border-left:  #0000FF solid;
				border-right : #0000FF solid;
				border-bottom: #FF0000 double;
						width:200px;
				height: 400px;
			margin-top: 120px; /*距离上沿距离*/
				margin-left: 200px;/*距离右侧距离*/
				padding-top: 200px;/*距离左侧距离*/
				padding-left: 200px;/*距离底沿距离*/
			}
		</style>
	</head>
	<body>
		
		<div class="class">
			我是一个盒子模型
		</div>
	</body>
</html>

一个射手座程序猿

关注

0
点赞
踩
0

收藏

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

一.CSS三种引用方式1.行内样式<div style="color: #930000;"> HelloWorld </div>2.内部样式<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></...
复制链接

扫一扫