CSS-概念和与HTML结合方式
CSS概念
css:页面美化和布局控制
概念:Cascading Style Sheets 层叠样式表
- 层叠:多个样式可以作用在同一个html的元素上 同时生效
好处
1.功能强大
2.将内容展示和样式控制分离
- 降低耦合度 解耦
- 让分工协作更容易
- 提高开发效率
CSS与HTML结合方式
css的使用：CSS与HTML结合方式
1.内联样式
- 在标签内使用style属性指定css代码
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS练习</title>
</head>
<body>
<div style="color:blueviolet;">hello css</div>
</body>
</html>
运行结果
2.内部样式
- 在head标签内 定义style标签 style标签的标签体内容就是css代码
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS练习2</title>
<style>
#a{
color:red;
}
</style>
</head>
<body>
<div id="a">hello css</div>
</body>
</html>
运行结果
3.外联样式
- 定义css资源文件
- 在head标签内 定义link标签 引入外部的资源文件
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS练习3</title>
<link rel="stylesheet" href="css/CSS练习3.css">
</head>
<body>
<div>hello css</div<>
</body>
</html>
css代码
div{
color:gray;
}
运行结果
注意
- 1，2，3种方式 css作用范围越来越大
- 1方式不常用 后期常用2，3
