1.css是什么
css 层叠样式表 ,可以是实现美化页面的效果,能够做到页面的样式和结构分离
2.语法:
选择器+{一条/n条声明}
选择器决定对谁修改,声明决定修改啥
css要写到style标签中
3.引入方式
a.内部样式表
写在style标签中,内嵌到html内部,style一般放到head标签中
行内样式表(通过style属性,指定某个标签的样式)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
color:blue ;
font-size:10px;
}
</style>
</head>
<body>
我的博客
<style>
p{
color:blueviolet;
}
</style>
<p style="font-size:20px; color: red;">css内部样式表</p>
<p> 内部样式表 </p>
<!-- 行内样式表优先级高 -->
<h1 style="color:green;" >字体颜色蓝色</h1>
</body>
</html>
b.外部样式表
创建一个css文件,使用link标签在html文件中引入css文件
rel="stylesheet"引入的文件是一个样式表 href="css文件的路径"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./demo.css">
</head>
<body>
<p>hello css</p>
</body>
</html>
4.选择器的种类
选择器分为 基础选择器(单个选择器构成)和复合选择器(多种基础选择器综合起来使用)
基础选择器
a.标签选择器(上述内部样式表引入p标签,h1标签)
能快速为同一类的标签都选择出来
b.类选择器
可以让多个标签使用,差异化表示不同标签
类名用.开头 ,一个类可以被多个标签使用,一个标签也可以使用多个类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.blue{
color: blue;
width: 200px;
}
</style>
<style>
.red{
color: red;
}
.green{
background-color: green;
}
.box{
font-size:20px ;
}
</style>
</head>
<body>
<div class="blue">这个是蓝色的</div>
<div>这个是蓝色的吗?</div>
<!-- 使用多个类名 -->
<div class="box red">
<span>这个是红色的字吗</span>
</div>
<div class="box green">
<span>这个是绿色的背景吗</span>
</div>
</body>
</html>
c. id选择器
css中使用#开头表示id选择器
id选择器的值和html中某个元素的id值相同
html的元素id值不用带#号
/*id是唯一的,不能被多个标签使用*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./demo.css">
<style>
#he{
color:green;
font-size:60px ;
background-color: red;
}
</style>
</head>
<body>
<p>hello css</p>
<div id="he">我爱学习</div>
<div id="he">学习使我快乐</div>
<p id="he">hahahah</p>
</body>
</html>
d.通配符选择器
使用*定义,选取所有的标签
<style>
#he{
color:green;
font-size:60px ;
}
* {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<p>hello css</p>
<div id="he">我爱学习</div>
<div>学习使我快乐</div>
<div>前端后端</div>
<p id="t">hahahah</p>
</body>
</html>