CSS技术介绍
css是层叠样式表单，用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言
选择器：浏览器根据“选择器”决定受css样式影响的HTML元素
属性:要改变的样式名，并且每一个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明
多个声明:如果要定义不止一个声明，则需要用分号将每个声明分开。
一般每行只描述一个属性
p{
color:red;
font-size:30px;
}CSS和HTML的结合方式
第一种
在标签的style属性上设置“key:value vlaue",修改标签样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
div标签默认独占一行
span标签长度是封装数据的长度
p段落标签，默认在段落的上方/下方各空出一行
-->
<div style="border:1px ;border-style:solid;border-color:red">div标签</div>
<div style="border:1px ;border-style:solid;border-color:red">div标签</div>
<span style="border:1px ;border-style:solid;border-color:red">span标签1</span>
<span style="border:1px ;border-style:solid;border-color:red">span标签2</span>
<p style="border:1px ;border-style:solid;border-color:red">p段落标签1</p>
<p style="border:1px ;border-style:solid;border-color:red">p段落标签2</p>
</body>
</html>缺点：
1.如果标签多了。样式多了，代码量非常庞大。
2.可读性非常差
3.CSS代码没有体现出复用性
第二种
在head标签中，使用style标签来定义各种自己需要的样式
xxx{
key:value vlaue;
}删除 ctrl+R全部替换成空白
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--style标签专门用来定义css样式代码-->
<style type="text/css">
div{
border:1px solid red;
}
</style>
</head>
<body>
<!--
div标签默认独占一行
span标签长度是封装数据的长度
p段落标签，默认在段落的上方/下方各空出一行
-->
<div >div标签</div>
<div >div标签</div>
<span >span标签1</span>
<span >span标签2</span>
<p >p段落标签1</p>
<p style="border:1px red solid;">p段落标签2</p>
</body>
</html>注意html注释不能放到style标签里，style标签里都是css，应该用/* */
缺点：
1.只能在同一页面内复用代码，不能在多个页面中复用css代码
2.维护起来不方便，实际项目中有成千上百个页面，要到每个页面中去修改，工作量太大了
第三种
把css样式写成一个单独的css文件，再通过link标签引入即可复用
使用html的
<link rel="stylesheet" type="text/css" href="./styles.css"/>标签，导入css样式文件
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
