HTML引入css样式的三种方式，css选择器的三种样式

Posted 2021-07-20 汤米先生

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML引入css样式的三种方式，css选择器的三种样式相关的知识，希望对你有一定的参考价值。

文章目录

前言

前言

刚刚学过html引入css样式的三种方式和选择器的三种样式，下面就来分享一下我的笔记吧

一. css样式的三种方式

第一种：内联定义方式

<body>
	<div style ="样式名：样式值"></div>
</body>

第二种：样式块

<head>
	<title></title>
	<style type="text/css">
    /*选择器*/	
	</style>
</head>

第三种：引入外部独立css文件

在css文件中写入选择器及内容，可以是多个
css文件的引入：

二. 选择器的三种样式

第一种：id选择器

#id{
样式名：样式值；
样式名：样式值；
样式名：样式值；
…}
例如:

<head>
	<title></title>
	<style type="text/css">
    #a{
       color:red;
       font-size:12px;
     }
	</style>
</head>	
<body>
	<span id="a">你好!</span>
</body>

第二种：标签选择器

标签{
样式名：样式值；
样式名：样式值；
样式名：样式值；
…}
例如：

<head>
	<title></title>
	<style type="text/css">
   div{
       color:red;
       font-size:12px;
     }
	</style>
</head>	
<body>
	<div>你好!</div>
</body>

第三种：类选择器

.类名{
样式名：样式值；
样式名：样式值；
样式名：样式值；
…
}
例如：

<head>
	<title></title>
	<style type="text/css">
   .student{
       color:red;
       font-size:12px;
     }
	</style>
</head>	
<body>
	<div class="student">你好，我是学生！</div>
	<span class="student">你好，我是一名学生！</span> 
</body>

三. css的绝对定位

对某一部分的位置进行设定

<head>
	<title></title>
	<style type="text/css">
		#div1{
		background-color: red;
		border :1px black solid;
		width: 300px;
		height: 300px;
		position: absolute;/*绝对定位*/
		left: 100px;  /*距离左边框*/
		top: 100px; /*距离上边框*/
		}
	</style>
</head>
<body>
	<div id="div1"></div>
</body>