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

文章目录

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

---

一、css代码代码格式

1、内联格式（不推荐）

写在html文件中，没有单独提取出来，没有做到结构和样式的分离;

每一个标签元素都有自己的css格式,每个标签元素中都有撰写自己的style属性，不利于复用；

例子：

<h1 style="color:red;">
文本内容
</h1>

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文件内容：

<html>
	<head>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
	</body>
</html>

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

---

二、css样式选择器

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

1、类型选择器

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

h1{
	color:red;
}

2、类选择器（推荐）

先写一个点'.'，然后写上类名+大括号{}，大括号内书写样式内容

前文内部格式和外部格式的代码例子中的css样式选择器就是类选择器

.box{
	color:green;
}

3、id选择器

先写一个'#'，然后写上id名字+大括号{}，大括号中书写样式内容

#id{
	color:green;
}

样式会存在冲突的情况，所以存在样式选择器的优先级：id选择器>类选择器>类型选择器

<h1 class="box",id="id">
</h1>

例如在这里，存在三种不同的样式选择器：类型选择器、类选择器、id选择器，样式就会优先选中id选择器，因为id选择器优先级最高；缺少id选择器，只使用了类选择器和类型选择器，则就会优先选中类选择器。

三、样式表的组合

前文提到的三种样式表的组合

1、Multiple Selectors

例子：

h1.container{
	color:red;
}

标签必须同时满足两个选择器的选择，既是标签h1，其类名又要是container

2、Hierachy Selectors

例子：

h1 .container{
	color:red;
}

（标签选择器和类选择器中有一个空格）

在h1标签中 的有个标签的类名是类选择器指定的名字，则修改这个标签的样式

外层是类型选择器，内层是类选择器

---

至此，结束。