CSS样式学习
1.css概述
css（cascading style sheet）:是一种层叠样式表语言
css的作用是修饰HTML页面，设置html元素的样式，让HTML页面更加好看。
css样式能写在html文件中，css的存在就是修饰HTML。
html中使用css样式的方法
方式一：在style属性中设置元素的css样式，这种方式称为内联定义
格式：
<标签 style="样式名:样式值;样式值:样式名······"></标签>
方式二：样式块（在head标签当中使用style块）
格式：
<head>
<style>
选择器{
样式名:样式值；
样式名:样式值；
······
}
选择器{
样式名:样式值；
样式名:样式值；
······
}
</style>
</head>
第三种方式：链入外部外部样式表文件（将样式写到一个独立的xxx.css文件中）
链入语法格式：
<link type="text/css" rel="stylesheet" href="文件路径"/>
这种方式易于维护
第一种方式：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>html中用css样式第一种方式</title>
</head>
<body>
<div style="width:300px;height:300px; border:1px solid black"></div>
<div style="width:300px;height:300px;background-color:red ; border-width:1px; border-style:solid"></div>
</body>
</html>
第二种方式引入：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>html中用css样式第一种方式</title>
<style>
#use{
color:red;
font-size:10px;
}
div{
background-color:blue;
}
.mystyle{
background-color:red;
}
</style>
</head>
<body>
<div id="use">这里是div块,使用了id选择器</div>
<div >这里是div块,使用了id选择器</div>
</body>
</html>
CSS样式定义的优先级顺序总结https://blog.csdn.net/zztfj/article/details/6731008
第三种方式
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>html中用css样式第一种方式</title>
<link rel="stylesheet" type="text/css" href="文件路径"/>
</head>
<body>
<div></div>
</body>
</html>
本文只介绍简单的样式，不做深入探索。
下一章：js基础总结https://blog.csdn.net/qq_43203949/article/details/106404883.
来源：https://www.cnblogs.com/yalier/p/17505003.html |
发表于 2020-5-1 14:15:00