CSS样式（上）

易23

于 2021-07-24 17:28:46 发布

阅读量128

点赞数

分类专栏： HTML/CSS/JS

本文链接：https://blog.csdn.net/ygb_2739555482/article/details/112618440

版权

HTML/CSS/JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS样式（上）

CSS语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			/*div{
				background-color: greenyellow;
			}*/
		</style>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<!--
			border: 2px solid red;
			CSS样式属性：CSS样式属性值；CSS声明
		-->
		<div style="text-align: center;border: 2px solid red;">郑州高新技术开发区</div>
		<!--
			CSS定义位置：
			1、style标签属性中
			2、style标签中
			3、CSS文件中，使用link标签引入该文件
		-->
	</body>
</html>

选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{/*标签选择器*/
				letter-spacing: 10px;
				text-align: center;
			}
			.text-size{/*类选择器*/
				font-size: 36px;
				text-align: center;
			}
			#indent{/*id选择器*/
				text-indent: 50px;
				text-align: center;
			}
		</style>
	</head>
	<body>
			<!--选择器
			为什么需要选择器？
			            使用styleb标签属性可以为html标签添加样式。
			            但是这种方式和html标签进行耦合，不便于后期维护代码。
			是什么？
			            是浏览器选择为那些标签添加样式的标识符 -->
		<div>河南工业大学</div>     
		<div>hello world</div>
		<span class="text-size";>郑州</span>
		<i class="text-size";>高新区</i>
		<input id="indent" />
	</body>
</html>

其他选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*分组选择器：由一组选择器构成的选择器*/
			.s1,#p1{
				font-size: 36px;
			}
			/*后代选择器：由父子选择器构成的选择器*/
			html body .s1{
				color: red;
			}
			/*通配符选择器：匹配所有标签*/
			/**{
				font-family: 华文彩云;
			}*/
			/*html,head,meta,title,style,body,span,p{
				font-family: 华文彩云;
			}*/
			*{
				padding: 0px;
				margin: 0px;
			}
			
	/*伪类选择器*/
			a:hover{ 
				text-decoration: underline;
				color: #f50;
			}
			a{
				text-decoration: none;
				color: #333;
			}
			
		</style>
	</head>
	<body>
		<span class="s1" style="border: 1px solid red;">郑州</span>   <!--(注意：选择器的命名不能以数字开头，例如：能以s1命名，但不能以1s命名)-->
		<p id="p1" style="border: 1px solid red;">工业大学</p>
		<a href="http://www.baidu.com">百度</a>
	</body>
</html>

常用CSS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#button{
				width:300px ;
				height:45px;
				line-height:45px;
				color: white;
				letter-spacing: 20px;
				cursor: pointer;  /*鼠标悬停时显示手指图案*/
				background-color: red;
				text-align: center;
				
			}
			a{
				background-color: greenyellow;			
			}
		</style>
	</head>
	<body>
		<div id="button">登录</div>
		<a href="http://www.baidu.com" target="_blank">百度</a>
		<!--
			有些css样式在行内元素中无效，添加display：block可以实现行内元素转化为块级元素
		-->
		<span style="width:500px;display: inline-block;">江西</span>
		<div style="display:inline;">吉安</div>
		
		
		<span style="display block;">中国</span>
		<div style="display inline; ">郑州</div>
		<div style="display inline;">高新区</div>
	</body>
</html>

font

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			p{
				font-style: initial;				
				font-weight: bold;
				font-size: 36px;
				font-family: "微软雅黑";
				/*font:initial bold 36px "微软雅黑";font可以缩写或省略，但一定要size和family*/				
				
				/*font(注意):
				a.顺序style weight size family;
				b.必须包含size family*/
			}
		</style>
	</head>
	<body>
		<p>This is a boy</p>
		<p>这是一个男孩</p>
	</body>
</html>