自定义网站的显示样式Stylus

2018-11-01 17:17:23

网站页面显示的样子是由网站开发者制定的,但它们并非无法改变,比如在Chrome浏览器中,右键点击页面,选择检查,你可以随意的改变网页内容及其样式,但作为访问者,并不能永久的更改样式。

Stylus是一款浏览器插件,可以用于Chrome、Firefox等浏览器,它的作用就是让用户自定义指定网页的样式,保存后即可永久生效。

新建样式它可以为指定的域名及网页制定样式,打开网页后,点击相应的链接就可以开始了。网页的样式是由一些CSS代码控制的,对于不了解的朋友,可以点击“查找更多样式”来寻找别人写好的样式,不过不热门的网站可能会找不到。

其实稍微了解点css,都可以自己做简单的修改,利用好浏览器的检查(或检查元素),以使用Chrome浏览器观看斗鱼直播为例。

打开任意播放页面后,右键点击页面,选择检查,下面会出现一些网页标签。如果是修改页面的指定区域,只需要右键点击那个区域,检查功能会自动定位到区域的网页标签。

找到对应的网页标签及其样式鼠标指向网页标签,网页上的对应区域会高亮显示,方便查找。确定标签后,左键选中它,在右边的Styles区域会显示所选标签的css代码,我们需要修改的是红色代码后面的值,如 margin-right: 后面的346,或者添加属性。

在Stylus编辑器中,复制粘贴css代码并做一些修改。由于css的相互影响,所以你可能需要修改不只一个标签的样式。

在编辑器中填写css代码比如上图中的css样式,将播放器的右边距修改成了0,但修改后聊天窗口会遮挡部分画面,所以将其隐藏了。而且播放器的样式还分为全屏及非全屏,这些都要修改。最后的效果就是,隐藏了聊天窗口,让播放器最大化。

编辑修改完成后,取个名字,点击保存就可以实时应用,或许需要刷新页面。

保存样式我们可以编写全局样式(影响所有网站),或者一个样式应用于多个域名、页面,只需要修改样式编辑器下面的“应用于”即可,甚至可以使用正则表达式匹配。

设置应用对象打开网页后,Stylus的图标会显示对当前页面生效的样式,同时可以通过勾选来控制是否应用样式。

取消与应用样式下载安装地址:https://add0n.com/stylus.html

本文链接 : https://www.xstui.com/read/676