CSS学习笔记 -- day01 CSS简介、常见属性、基础选择器

本文链接：https://blog.youkuaiyun.com/wingzhezhe/article/details/76549038

一、CSS整体感知

1、解释

css是cascading style sheet 层叠式样式表的简写。

2、图片示例

type表示“类型” ， text就是“纯文本”。css也是纯文本的。

注意：

我们写css的地方是style标签，就是“样式”的意思，写在head里面。

css对换行不敏感，对空格也不敏感。但是一定要有标准的语法。冒号，分号都不能省略。

二、CSS常见的属性

1、字符颜色

	color:red;

color属性的值，可以是英语单词，比如red、blue、yellow等等；也可以是rgb、十六进制

2、字号大小

	font-size:40px;

font就是“字体”，size就是“尺寸”。px是“像素”。单位必须加，不加不行。

3、背景颜色

	background-color: blue;

4、加粗

	font-weight: bold;

font是“字体” weight是“重量”的意思，bold粗。

5、不加粗

	font-weight: normal;

6、斜体

	font-style: italic;

7、不斜体

	font-style: normal;

8、下划线

	text-decoration: underline;

9、没有下划线

	text-decoration:none;

三、基础选择器

1、标签选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			span{
				color:red;
			}
			
		</style>
	</head>
	<body>
		<h1>前端与移动开发<span>1期</span>基础班</h1>
	</body>
</html>

注意：

所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input

无论这个标签藏的多深，一定能够被选择上

选择的所有，而不是一个。

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”的。

2、id 选择器

id选择器的选择符是“#”。

任何的HTML标签都可以有id属性。表示这个标签的名字。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#para2{
				color:red;
			}

			
		</style>
	</head>
	<body>
		<p>我是段落1</p>
		<p id="para2">我是段落2</p>
		<p>我是段落3</p>

	</body>
</html>

注意：

1）只能有字母、数字、下划线

2）必须以字母开头

3）不能和标签同名。比如id不能叫做body、img、a

4）这个标签的名字，可以任取，但是：一个HTML页面，不能出现相同的id，哪怕他们不是一个类型。比如页面上有一个id为pp的p，一个id为pp的div，是非法的！

5）一个标签可以被多个css选择器选择，共同作用，这就是“层叠式”的第一层含义。

3、类选择器

. 就是类的符号。类的英语叫做class。所谓的类，就是class属性，class属性和id非常相似，任何的标签都可以携带class属性。class属性可以重复。

（1）、页面上可能有很多标签都有teshu这个类：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.teshu{
				color: red;
			}

		</style>
	</head>
	<body>
	<h3>我是一个h3啊</h3>
		<h3 class="teshu">我是一个h3啊</h3>
		<h3>我是一个h3啊</h3>
		<p>我是一个段落啊</p>
		<p class="teshu">我是一个段落啊</p>
		<p class="teshu">我是一个段落啊</p>

	</body>
</html>

（2）、同一个标签，可能同时属于多个类，用空格隔开：

<h3 class="teshu  zhongyao">我是一个h3啊</h3>

h3 就同时属于 teshu 类，也同时属于 zhongyao类。

（3）、总结：

1）不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式。

2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

（4）、到底用id还是用class？

答案：尽可能的用class，除非极特殊的情况可以用id。

原因：id是js用的。也就是说，js要通过id属性得到标签，所以我们css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。