CSS概述以及与HTML结合方式以及css语法格式
CSS-概述
概念：Cascading Style Sheets 层叠样式表
层叠：多个样式可以作用在同一个HTML的元素上，同时生效
好处：
1.功能强大
2.将内容展示和样式控制分离，
1.降低耦合度，解耦
2.让分工协作更容易
3.提高开发效率
CSS-与HTML结合方式
1.内联样式：
<!-- 内联样式 在标签内使用style属性指定css代码 --> <div>hello css</div>
2.内部样式
<head> <meta charset="UTF-8"> <title>css与html结合方式</title> <style> div{ color: red; } </style> </head> <body> <!-- 内部样式 在head标签内,定义style标签,style标签的标签体内容就是css代码 --> <div>hello css</div> </body>
3.外部样式
<head> <meta charset="UTF-8"> <title>css与html结合方式</title> <!--引入外部的资源文件--> <link rel="stylesheet" href="css/a.css"> </head> <body> <!-- 外部样式 定义css资源文件 在head标签内,定义link标签,引入外部的资源文件 --> <div>hello css</div> </body>
外部文件：
div{
color: blue;
}
注意：
1，1,2,3种方式，css作用范围越来越大
2，1方式不常用，后期常用的方式2 ，3 种
3，3种格式可以写为：引入外部资源方式
<style> @import "css/a.css"; </style>
CSS-语法格式
格式：
选择器{
属性名1：属性值1；
属性名2：属性值2；
....
}
选择器：筛选具有相似特征的元素
注意：
每一对属性需要使用 ；隔开，最后一对属性可以不加 ；
css语法格式：
p{ color: aqua; font-size: 30px; width: 50px }
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本