java 修饰css 3
CSS使用方式
2.1 内联方式
把CSS样式嵌入到html标签当中,类似属性的用法,示例如下:
<div style="color:blue;font-size:50px">This is my HTML page. </div>
好处:可以单独什么某个元素样式,缺点:不利于样式重用
1
2
3
2.2 内部方式
在head标签中使用style标签引入css,示例如下:
<style type=“text/css”> //告诉浏览器使用css解析器去解析
div{color:red;font-size:50px}
</style>
好处:可以控制页面中多个元素样式,缺点:只能一个页面使用
1
2
3
4
5
2.3 外部方式
将css样式抽成一个单独文件,谁用谁就引用,好处:多个页面可以同时使用。
示例如下:
单独文件div.css: 内容示例:div{color:green;font-size:50px}
引用语句写在head标签内部,
链接式:
<link rel="stylesheet" type="text/css" href=“div.css"></link>
rel:代表当前页面与href所指定文档的关系
type:文件类型,告诉浏览器使用css解析器去解析
href:css文件地址
导入式:
<style type="text/css">
@import url("div.css")
</style>
该内容放在head标签中
备注:link和@import区别:
1.link所有浏览器都支持,@import某些版本低的IE不支持
2.@import是等待html加载完成才加载,link解析到这个语句,就加载
3.@import不支持js动态修改
优先级:内联样式>内部样式>外部样式,就近原则。注意:内部样式和外部样式的位置
<link href="mycss.css" rel="stylesheets" type="text/css">
<style type="text/css">
</style>
<body>
</body>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 因为Apifox不支持离线,我果断选择了Apipost!
· 通过 API 将Deepseek响应流式内容输出到前端