css格式和样式选择器-学习记录

心已赠人 2024-02-18 09:12 2阅读 0赞

#### 文章目录 ####

*  一、css代码代码格式
 *   *  1、内联格式（不推荐）
     *  2、内部格式（不推荐）
     *  3、外部格式 （推荐）
 *  二、css样式选择器
 *   *  1、类型选择器
     *  2、类选择器（推荐）
     *  3、id选择器
 *  三、样式表的组合
 *   *  1、Multiple Selectors
     *  2、Hierachy Selectors

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

## 一、css代码代码格式 ##

### 1、内联格式（不推荐） ###

写在html文件中，没有单独提取出来，没有做到结构和样式的分离;  
每一个标签元素都有自己的css格式,每个标签元素中都有撰写自己的style属性，不利于复用；  
例子：

### 2、内部格式（不推荐） ###

仍是写在html文件中，结构和样式没有做到完全分离，但就内联格式来说，相对较好；  
将写在标签中的style属性提取出来，单独作为标签，标签书写的位置是不固定的，在head标签和body标签中均可；  
例子：

<html>
    	<head>
    		<style>
    		 .bod{
          
    		 	color:red;
    		 	}
    		</style>
    	</head>
    	<body>
    	</body>
    </html>

### 3、外部格式 （推荐） ###

单独编写css文件以存储样式，结构（html）与样式完全分离，利于样式的复用，不同的html文件可以指定同一个css文件来控制样式。  
如果三种选择器混在一起使用，则很难分辨html文件中每个元素的样式，所以一般只使用类选择器。  
例子：  
style.css文件内容：

.box {
        
    	color:red;
    }

html文件内容：

通过link标签的书写内容就做到了html文件和css文件的关联，之后在html中就可以使用css的样式

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

## 二、css样式选择器 ##

使用外部格式书写css代码实例

### 1、类型选择器 ###

标签名字+大括号\{\}，大括号内书写样式

h1{
        
    	color:red;
    }

### 2、类选择器（推荐） ###