一、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