样式表style
制作一个风格统一的网页,需要样式表对颜色、字体等属性的规范,同时也省去在body中多次定义的麻烦,所以一个样式表是必不可少的。
样式表有两种引用的方法:一种是直接写在html的<head>中,另一种是引用外部的.css文件。
第一种方法的使用(样式表选择器)
首先在head中用style标签声明
<style type="text/css">样式表内容</style>
1、用标签定位元素,设置属性
body { background-color:#CC0; background-image:url(../../xxx.jpg);<!--"(../../)"表示在html文件所在的文件夹的上两级--> background-repeat:no-repeat; } table { background-image:url(../../xxx.jpg); background-repeat:repeat; }
2、自定义名:(1)给样式组设置一个自定义名字,然后在<body>的标签中运用
.ming { background-image:url(../../xxx.jpg); background-repeat:no-repeat; background-size:contain }
<body class="ming"> <table class = "ming"></table> </body>
(2)"标签名 .自定义名"(只能在标签内使用,标签名和“.自定义名”之间有一个空格)
table .ming { color:#3F0; }
<body> <table class = "ming"></table> <font class = "ming"></font><!--此处是不能调用的--> </body>
(3)、".自定义名 标签"(自动寻找在“.自定义名”后存在标签的部分并赋给它样式)
.ming font { font:"华文彩云"; }
<body> <table class = "ming"> <tr> <td> <font>我会变色</font> </tr> </td> <tr> <td> <button>我不会变色</button> </tr> </td> </table> </body>
3、通过id值查找适合的元素:#id(在#后加上ID值,可以对此ID所在的元素单独设置)[#id也同样可以用自定义名的几种方法]
#id1 { color:#3F0; }
<body> <table> <tr> <td> <input type="text" id="id1" /> </td> </tr> </table> </body>
选择器优先级:
ID>class名>标签
第二种方法的使用(CSS)
导入:
在html文件的<head>中:<link rel=”stylesheet” href=”xxx.css”>
链接的style:
a:link 超链接被点前状态
a:visited 超链接点击后状态
a:hover 悬停在超链接时
a:active 点击超链接时
在定义这些状态时,有一个顺序l v h a
分类:
网页制作Dreamweaver
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?