前端——css学习（一）

一、css简介：

CSS是一种描述HTML文本样式的语言；
CSS描述应该如何显示HTML元素；
CSS指的是层叠样式表，描述了如何在屏幕上显示HTML元素；
CSS可以同时控制多张网页的布局；
外部样式表储存在css文件中，在使用外部样式表文件时，只需要通过更改一个文件即可修改整个网页的外观；

二、css语法：

css规则集由选择器和声明块组成：

h1 {
   color:red;font-size:14px}
h1:是选择器；
color:red;是声明；
color:属性；
red:属性值；

注意：
不要在属性值与单位格之间加空格；
选择器指向需要设置样式的HTML元素；
声明块包含了多个由“;”隔开的声明；
每个声明都包含一个属性和一个值；
声明块由花括号括起来；

三、css选择器：

（一）、简单选择器：

1.css元素选择器：

元素选择器根据元素名称选择HTML元素

p {
   
	text-align:center;
	color:red;
}

在上面，所有的<p>元素都得居中对齐，红色字体；

2.css id选择器：

通过使用HTML元素的id属性来选择特定元素；
因为元素的id在页面中是唯一的，所有id选择器用来选择一个唯一的元素；

#part1 {
   
	text-align:center;
	color:red;
}

上述代码将把id=“part1”的HTML元素设置为文本居中，红色字体；
注意：id不能由数字开头；

3.css类选择题：

用来选择有特定class属性的HTML元素；

.demo1 {
   
	text-align:center;
	color:red;
}

上述代码将把所有带有class="dome1"的HTML元素设置为文本居中，红色字体；

还可以指定特定的HTML元素中的类受到影响：

p.demo1 {
   
	text-align:center;
	color:red;
}

上面的代码只会对具有class="demo1"的<p>元素有影响；

并且，HTML元素可以同时设置多个类，然后会根据元素中的类对HTML元素进行设置；

<p class="demo1 demo2">这会引用两个类</p>

注意：类名也不能使用数字开头；

4.css通用选择器：

通用选择器（*）会选择页面上所有的HTML元素；

5.css分组选择器：

用来选取具有相同定义样式的HTML元素

h1,
h2,
p {
   
	text-align:center;
	color:yellow;
}

上述代码可以将h1，h2，p元素设置为红色字体，文本居中；
注意：元素与元素之间用“,”分隔；并且一行最好只写一个元素；

（二）、组合器选择器：

1.后代选择器：

可以设置属于指定元素【后代】的所有元素的样式

div p{
   
	background-color:yellow;
}

上述代码将把div元素中所有的p元素的背景设置为黄色；
注意：将元素与后代元素用空格隔开；

2.子选择器：

可以设置属于指定元素【子代】的所有元素的样式

div > p{
   
	background-color:yellow;
}