关键词:
原文地址:http://whosmall.com/?post=419
本文标签: Chrome扩展 Chrome浏览器 Chrome插件 Chrome扩展Stylish Stylish是什么
Stylish 是什么?
开门见山,Stylish 的作用是,它可以把百度首页变成这样:
它还能把知乎「拍扁」,让微博网页版变得简洁无比,让 Feedly 用上 Material Design……
这个神奇的 Stylish 实际上是一个浏览器插件,适用于 Chrome,Firefox,Opera 以及 Safari 浏览器(点击浏览器名称即可下载)。Stylish 通过替换网页本身的 CSS 来达到的「美化」的目的。
什么是 CSS?CSS 的中文全称是 层叠样式表,是一种用来表现HTML 或 XML ……这是个晦涩的东西。换个通俗易懂说法,CSS 就好比是一个网页的衣服,虽然不能添加网页本身的功能,但可以决定排版、字体,甚至滚动条等一切与外表有关的东西。至于外表的重要性,我想不必多言,你也许比我更有体会。
CSS 高深但 Stylish 也可以很易用
Stylish 的基本用法非常简单,从官网安装 Stylish 到你的浏览器。在 Stylish 的选项菜单中你可以更新、停用、卸载、编辑已经安装的 CSS,这和 Chrome 的扩展程序管理类似。
* 不同浏览器界面略有区别,但使用方法相同,本文以 Chrome 为例
现在你的 Stylish 里面空空如也,接下来就是要添加 CSS 样式模板了。别怕,你只需要信手打开一个网站,打开 Stylish 的菜单,点击「查找适合此网站的更多样式」,Stylish 就会为你列出该网站合适的 CSS 模板。
你也可以直接前往 userstyles.org 寻找已经编写好的 CSS 模板,这里就是 Stylish 的「应用商店」,不过网站的界面并不友好,建议善用左上角的搜索功能。
找到心仪的模板之后,点击绿色按钮即可安装,像安装浏览器插件一样无痛。而某些 CSS 还有更多可选项,如图。
你应该试试这些 CSS 模板
1. 给你一个干净的微博:Weibo_v6
这款 CSS 和一款叫做「微博急简」的 Chrome 插件有同样的功效,把微博来个大换装,去掉广告等多余元素,重新排版,给你一个干净的微博。
2. 百度也用上 Material Design:百度轻
这就是文首看到的能让百度用上 Material Design 风格的 CSS 了。它同样适用于搜索结果页面。
3. Google 搜索的再美化:Google Search - Material Design
这款 CSS 是根据 Dribbble 上的设计师 Aurélien Salomon ? 重新设计的 Google 搜索做出来的。类似上文的百度轻,由于 Google 本身已经很干净,所以效果提升并没有百度那么明显,好看倒是真的。
4. 扁平版知乎:Flat_Zhihu
这款 CSS 不仅是把知乎拍平,还优化了字体,动效,以及页面宽度。总之看起来比原版舒服多了,看知乎终于不用开页面缩放了。
5. 全局夜间模式:NightShift - eye care
这款全局 CSS 能将页面中白色的部分变黑,图片亮度降低,用起来就像开了「夜间模式」一样。会出现些许兼容问题,不影响使用。
6. Mac 风格滚动条:Universial Minimalist Scroll Bar
这是针对 Windows 系统的全局 CSS 样式。他能让你的浏览器拥有 Mac OS X 样式的透明极简滚动条。
使用 Stylish 自定义网页字体
除了使用上面的模板改变网页样式之外,很多人都希望能用自己喜欢的字体来浏览网页,使用 Stylish 可以轻松达到这个目的,在 userstyles 网站搜索「字体」,你可以轻松找到很多现成的模板供你挑选使用,下载后几乎不需调整即可直接使用。
在这里要推荐一款叫做 ForceMyFont 的模板,这个模板内置的选项非常丰富,允许你手动选择多款中英文字体,即使你对于 CSS 一窍不通,也可以轻松地完成字体设置,在列表中选定你要使用的字体,之后选择安装即可,非常方便。不过要注意你的电脑上是否已经安装了对应字体,如果没有则需要额外下载安装。
如果你懂一些 CSS 样式,你当然也可以手动编写页面效果。这样做的好处是自由度高,可以按自己的喜好想改啥改啥,但使用门槛也成正比的高。在这里我举一个自定义字体 CSS 的例子。
首先,打开 Stylish 的选项菜单,选择「编写新样式」,填入下面的代码:
*{font-weight:600!important;}
*{font-family: Arial, ”方正兰亭黑简体”;}
其中第一行是定义字体的粗细,越大越粗。第二行是指定的字体,填入一个电脑中已安装的字体就好。
如果你喜欢字体阴影,可以加入下面这行代码:
*{text-shadow:0.01em 0.01em 0.01em #999999 !important;}
其中的数值依次代表阴影的 X 轴偏移、Y 轴偏移、阴影大小,以及字体颜色。
当填写好「应用对象」之后去页面查看一下效果吧。如果想要应用到全局,如上图配置即可。
最后要说一下,如果你是 Mac 用户,想要调用最新的 San Francisco 字体,可能会发现这个字体并不在 Font Book 里,而在 CSS 中直接键入"San Francisco"
也没有效果,这是因为苹果并没有把这个字体放在 Font Book 中供大家使用,如果想在网页上使用这个字体,需要用 -apple-system, BlinkMacSystemFont,
才行
最后
可以看到,Stylish 可以优化页面的样式。对于大多数普通用户来说,使用 Stylish 套用那些现成的模板,来优化那些设计不佳或风格不喜欢的网站,是个很好的解决方案。
更进阶一点的话,Stylish 实际上还可以实现去除广告、补全浏览器部分功能。但这不在本文的范围之中,这篇文章仅作为抛砖引玉,以便让更多人先知道并初步了解这样一款浏览器扩展。
欢迎各位在评论里一起讨论 Stylish 的更多用法,或分享你喜欢的 CSS 模板。
写在最后:FOR Freedom 看看外边的世界,以及IT这一行,少不了去Google查资料,最后,安利一些速器代理。
加速器推荐 | 免费方案 | 付费方案 | 官方网站 |
一枝红杏加速器 | 免费方案暂无,稳定高速 | 输入8折优惠码wh80,年付只需80元/年 | 官网直达 |
安云加速器 | 最好用的外贸VPN | 最低¥30/月 | 官网直达 |
LoCo加速器 | 每天免费2小时 | 最低¥15/月 | 官网直达 |
本文标签: Chrome扩展 Chrome浏览器 Chrome插件 Chrome扩展Stylish Stylish是什么 Extentions Google
转自 SUN‘S BLOG - 专注互联网知识,分享互联网精神!
原文地址: 《Chrome 扩展 Stylish :给不喜欢某个网站一键「换肤」》
相关阅读:《将 QQ 音乐、网易云音乐和虾米音乐资源「整合」一起的Chrome 扩展Listen 1》
相关阅读:《8 个「新标签页」Chrome 扩展: 教你把 New Tab 页面玩的溜溜溜》
相关阅读:《7 款实用 Chrome 扩展推荐:帮你提升 Chrome 使用体验》
相关阅读:《无扩展就不是 Chrome 了:15 款优质的Chrome 扩展推荐给大家》
相关阅读:《12 款不能少的使网页浏览获得的最佳体验Chrome 扩展》
相关阅读:《5 款可以带来幸福感的 Chrome 扩展》
相关阅读: 《关于 Android 中的 Palette 类的使用案例:色彩自适应的 Toolbar》
相关阅读:《GIT能做什么、它和SVN在深层次上究竟有什么不同》
相关阅读:《分享一些对开发者最有用的、用户友好和功能丰富的Google Chrome扩展工具》
相关阅读:《分享一些实际Android开发过程中很多相见恨晚的工具或网站》
相关阅读:《我是 G 粉,一直关注 Google,最近 Google 有一些小动作,可能很多人不太了解》
相关阅读:《机器学习引领认知领域的技术创新,那么SaaS行业会被机器学习如何改变?》
相关阅读:《VPS 教程系列:Dnsmasq + DNSCrypt + SNI Proxy 顺畅访问 Google 配置教程》
相关阅读: 对程序员有用:2017最新能上Google的hosts文件下载及总结网友遇到的各种hosts问题解决方法及配置详解
原文地址:http://whosmall.com/?post=419
chrome将给不安全的http连接贴标签
谷歌终于开始推进其在Chrome上给不安全的HTTP连接贴标签的计划。不过新的安全计划也会一步一步来实现(腾云科技ty300.com),计划从2017年1月起,Chrome56将给不安全传输密码和信用卡信息的网站进行标记。"Chrome目前扮演的是HTTP... 查看详情
5款让微博等社交网站更加清爽好用chrome扩展
本文标签:Chrome扩展Extentions社交网站审美Google原文地址:《5款让微博等社交网站更加清爽好用Chrome扩展》不论你是在新浪微博上了解朋友近况还是浏览各种段子,或者是去Facebook和Twitter上看一看外面的世界follow一下自己喜欢的... 查看详情
5款让微博等社交网站更加清爽好用chrome扩展
本文标签:Chrome扩展Extentions社交网站审美Google原文地址:《5款让微博等社交网站更加清爽好用Chrome扩展》不论你是在新浪微博上了解朋友近况还是浏览各种段子,或者是去Facebook和Twitter上看一看外面的世界follow一下自己喜欢的... 查看详情
stylish——一键为网页换肤,改变字体大小,去除广告
今天给大家介绍的是一款非常好用的插件stylishstylish是一款可以为网站自定义主题的插件可以在chrome的应用商店找到也可以通过网址访问https://userstyles.org/应用商店找到安装即可 点击网站也可以进入官网进入网站后输入你想... 查看详情
制作chrome插件/扩展程序,禁止谷歌浏览器访问某些网站
chrome地址栏输入chrome://extensions/,可以看到当前谷歌浏览器的全部扩展程序开启开发者模式,可以加载自己制作的扩展程序,或者把自己制作的扩展程序打包 打包第一扩展程序,生成crx插件和pem密钥 查看详情
2022年我们最喜欢的chrome扩展程序
...太难。我喜欢它是一个浏览器应用程序的方式,这意味着Chromebook之类的东西可以使用它,即使它感觉像是一个本机应用程序。Mote与Loom的精神相似——用你的声音留下反馈 查看详情
chrome 扩展:如何将某个选项卡中的所有音频静音
】chrome扩展:如何将某个选项卡中的所有音频静音【英文标题】:chromeextension:howtomuteallaudiofromcertaintab【发布时间】:2014-09-1416:57:14【问题描述】:我一直在chrome扩展参考中搜索一些东西,以找到任何可以让我操纵标签的音频级... 查看详情
网站是不是可以跟踪用户的 chrome 扩展程序或他们的行为?
】网站是不是可以跟踪用户的chrome扩展程序或他们的行为?【英文标题】:Possibilityforawebsitetotracktheuser\'schromeextensions,ortheirbehaviour?网站是否可以跟踪用户的chrome扩展程序或他们的行为?【发布时间】:2016-11-1810:37:09【问题描述... 查看详情
chrome扩展content.js使动态网站崩溃[重复]
】chrome扩展content.js使动态网站崩溃[重复]【英文标题】:chromeextensioncontent.jscrashesdynamicwebsites[duplicate]【发布时间】:2021-01-2805:56:52【问题描述】:我尝试通过自定义chrome扩展插入覆盖,但是,当简单地将HTML添加到文档正文时,... 查看详情
可以使用 chrome 扩展将 HTML 标记添加到网站吗?
】可以使用chrome扩展将HTML标记添加到网站吗?【英文标题】:CanHTMLmarkupbeaddedtoawebsiteusingachromeextension?【发布时间】:2015-02-0118:20:48【问题描述】:我正在尝试创建一个Chrome扩展程序,该扩展程序创建一个像普通按钮一样的按钮... 查看详情
使用 chrome 扩展程序登录网站并从中获取数据
】使用chrome扩展程序登录网站并从中获取数据【英文标题】:Logintowebsitewithchromeextensionandgetdatafromit【发布时间】:2011-07-1806:19:16【问题描述】:我正在开发一个Chrome/Chromium扩展程序,它将从学校系统读取学校成绩和成绩。问题... 查看详情
跨域 Chrome 扩展
】跨域Chrome扩展【英文标题】:CrossOriginChromeExtension【发布时间】:2016-08-2808:17:47【问题描述】:上周左右我一直在阅读和使用Chrome扩展程序,但我在尝试实现我想要的东西时遇到了麻烦。我要创建的是一个扩展,它在后台(或... 查看详情
我的浏览器和常用扩展
Chrome浏览器对于国内的网络环境想使用基于原版的chrome,可以使用CentBrowser+Chrome同步助手扩展。?CentBorwser(百分浏览器):https://www.centbrowser.cn/相对来说是一款很干净的Chrome内核浏览器对于国内的浏览器,我推荐360极速浏览器当然... 查看详情
为啥程序员都喜欢用chrome浏览器?
Chrome浏览器作为浏览器中的一大巨头,无论是在程序员人群或是整个上网人群之中都占据着极大的比例,而Chrome浏览器之所以能够受到众人欢迎的原因有:其一是内核很高效;其二是界面很简洁;其三是扩展功能丰富;其四是浏... 查看详情
用于刷新页面的 Chrome 扩展
】用于刷新页面的Chrome扩展【英文标题】:Chromeextensionusedtorefreshpages【发布时间】:2012-02-1102:13:54【问题描述】:我正在尝试开发一个Chrome扩展程序,它可以通过每5分钟刷新一次来向我显示来自足球新闻网站的最近3条新闻(显... 查看详情
谷歌浏览器chrome的扩展程序安装目录(代码片段)
默认安装在:C:\\Users\\Administrator\\AppData\\Local\\Google\\Chrome\\UserData\\Default\\Extensions\\推荐一种快捷方法。在谷歌浏览器的扩展中chrome://extensions/可以复制ID,通过Everything快速搜索工具查找某个扩展的文件夹 查看详情
谷歌浏览器chrome的扩展程序安装目录(代码片段)
默认安装在:C:\\Users\\Administrator\\AppData\\Local\\Google\\Chrome\\UserData\\Default\\Extensions\\推荐一种快捷方法。在谷歌浏览器的扩展中chrome://extensions/可以复制ID,通过Everything快速搜索工具查找某个扩展的文件夹 查看详情
chrome扩展程序中的javascript点击行为问题
我目前正在开发一个chrome扩展,以自动执行手动任务,为SpringboardVR上的VR机器设置分配时间。我遇到过我的脚本问题,在此过程中按下最后一个按钮似乎没有触发正确的网站响应。该过程只需点击一系列提示(每次点击之间有一... 查看详情