一.初识CSS:
CSS中文称层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
1)每个CSS样式由两部分组成,即选择符和声明,声明又分为属性和属性值
2)属性必须放在花括号中,属性与属性值用冒号链接
3)每条声明用分号结束
4)当一个属性具有多种属性值时,属性与属性值不分先后顺序
选择符{
属性1:属性值1;
属性2:属性值2;
...
}
二.CSS的使用方法:
根据CSS样式书写的样式(使用方式)的不同,CSS样式表可分为三种:
为方便讲解,下述都以改变字体颜色为例子,同时也改善使用HTML改变字体样式复杂的问题
1.内部样式表(嵌入式):
内部样式表是写在html⻚⾯内部,是将所有的CSS代码抽取出来,单独放到⼀个 <style> 标签中,例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
h1{
color:blue;
}
</style>
<h1>111111111</h1>
<h1>111111111</h1>
<h1>111111111</h1>
</body>
</html>
我们尝试运行上述代码
我们发现字体的颜色真的改变了,另外为了以后书写多行代码方便使用,我们通常将CSS部分放在<head>标签中,同时也是不抢占HTML的地盘,如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
color:blue;
}
</style>
</head>
<body>
</body>
</html>
通过这种方式我们可以方便的控制整个页面的元素样式设置
2.行内样式表(内联样式表):
⾏内样式表是在元素标签内部的<style>属性中设定CSS样式,例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 style="color:aqua">111111</h1>
</body>
</html>
我们尝试运行上述代码
注:1)<style>其实是标签属性
2)双引号中间遵循CSS写法规范
3.外部样式表:
但我们书写的代码行极多的时候,为方便我们更改修饰方式,我们通常为CSS单独建立一个文件,将样式单独写到CSS⽂件中,之后把CSS⽂件引⼊到HTML⻚⾯中使⽤
引入方式:<link rel="stylesheet" href="css ⽂件路径 ">
我们新建一个文件夹,设置扩展名为.CSS,在CSS文件下写好我们修饰的代码,例如:
h1{
color: aqua;
}
接着我们回到.html中,写好我们的代码及引入方式,例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="class.css">
</head>
<body>
<h1>1111111111</h1>
</body>
</html>
我们尝试运行上述代码
在外部样式表中的<herf>使用与超链接使用方式一致
三.CSS样式表的优先级:
在CSS中,如果我们对一个选择符的同一属性进行了多种样式表的修饰,那么CSS会默认使用的显示方法(优先级)为:行内样式表>内部样式表>外部样式表,例如:
我们尝试运行上述代码
我们发现果然是按照行内的来显示,其他两个的比较在此就不做演示了,感兴趣的小伙伴可自行尝试。