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

青旅半醒 2022-10-05 00:53 241阅读 0赞

#  #

### 文章目录 ###

*  
 *  前言
 *   *  一. css样式的三种方式
     *   *  第一种：内联定义方式
         *  第二种： 样式块
         *  第三种：引入外部独立css文件
     *  二. 选择器的三种样式
     *   *  第一种：id选择器
         *  第二种：标签选择器
         *  第三种：类选择器
     *  三. css的绝对定位

--------------------

# 前言 #

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

--------------------

## 一. css样式的三种方式 ##

### 第一种：内联定义方式 ###

### 第二种： 样式块 ###

### 第三种：引入外部独立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>