css是什么
给html做美化的一种语言
大概分为三种
内嵌式
一般写在head里面建一个style标签
一个选择器(来匹配不同的字段)-可以是我们的标签,也可以是我们自建的选择器,然后写标签的时候加上选择器属性
{
}
<style>
p {
color: red;
font-size: 30px;
background-color:green;
}
</style>
</head>
<body>
<p>应为css的标记,所有的p标签的内容都变成了红色文字</p>
</body>
外联式
外联式
是外面写一个css文件然后用link标签
link属性
p{
color:red;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--1.内联式写法 直接在head标签里面用style标签-->
<!-- <style>-->
<!-- p {-->
<!-- color: red;-->
<!-- font-size: 30px;-->
<!-- background-color:green;-->
<!-- }-->
<!-- </style>-->
<!--2.外联式写法-单独写一个css文件,在head里用link标签 -->
<link rel="stylesheet" href="./外联式.css">
</head>
<body>
<p style="color:red;">应为css的标记,所有的p标签的内容都变成了红色文字</p>
<!--上面那个p标签里面的style标签就是我们的内联拉,真是idea对应css的好像没有提示-->
</body>
</html>
行内式
<body>
<p style="color:red;">行内为css的标记,该p标签的内容变成了红色文字</p>
<!--上面那个p标签里面的style标签就是我们的行内拉,真是idea对应css的好像没有提示-->
</body>
和上面的效果一样
执行顺序
对应离谁近就执行哪个