html点击按钮换css文件夹,按钮如何使用外部css样式
按钮如何使用外部css样式
1、首先新建btn.css样式文件
将默认的button样式去除/**
* Reset button styles.
* It takes a bit of work to achieve a neutral look.
*/
button {
padding: 0;
border: none;
font: inherit;
color: inherit;
background-color: transparent;
/* show a hand cursor on hover; some argue that we
should keep the default arrow cursor for buttons */
cursor: pointer;
}
完成后标签显示如普通文本
button
(相关课程推荐:css视频教程)
2、自定义按钮样式
我们上面已经移除了默认样式,现在我们来定义自己的button样式
①“button”样式可以被用于link或是button
② 让样式变的可供选择,毕竟页面会存在各种各样的样式
使用class选择符 .btn (类似bootstrap中的使用).btn {
/* 默认为button 但是在上依然有效 */
display: inline-block;
text-align: center;
text-decoration: none;
/* 创造上下间距一定的空间 */
margin: 2px 0;
/* border透明 (当鼠标悬停时上色) */
border: solid 1px transparent;
border-radius: 4px;
/* padding大小与字体大小相关 (no width/height) */
padding: 0.5em 1em;
/* 确保字体颜色和背景色有足够区分度! */
color: #ffffff;
background-color: #9555af;
}
高对比度! strong contrast (5.00):
3、对button的hover,focus,active状态进行区分
由于button是一个需要交互的标签,用户在对button进行操作时肯定要得到反馈
浏览器本身对focus和active有默认的样式,但是我们的重置取消了这部分样式;因此我们需要添加一部分css代码完成这部分的操作,并让button变化的状态和我们此前的样式更搭!
①:active状态/* old-school "的button位置下移+ 颜色饱和度增加 */
.btn:active {
transform: translateY(1px);
filter: saturate(150%);
}
②我们可以改变按钮的颜色,但是我想为悬停时保留这种样式:/* 鼠标悬停时颜色反转 */
.btn:hover {
color: #9555af;
border-color: currentColor;
background-color: white;
}
③让我们增加focus样式,用户经常会用键盘或是虚拟键盘(ios或安卓等)来focus表单,button,links和其他一些交互性组件
一方面:这样可以加快交互效率
另一方面:对有的人而言,无法使用鼠标,那么就可能依赖键盘或是其他工具访问网站
在绝大多数我见过的项目中,设计师仅仅指定mouse-over样式而没有focus样式,我们应该怎么做呢?
答案:最简单的方法就是复用hover样式给focus/* 复用样式 */
.btn:hover,
.btn:focus {
color: #9555af;
border-color: currentColor;
background-color: white;
}
④如果要用到focus样式,那么就需要移除浏览器button默认的样式(否则当button是focus或active状态下都会有outline边框).btn {
/* ... */
/* all browsers: 移除默认focus样式 */
outline: none;
}
/* Firefox: 移除默认focus样式 */
.btn::-moz-focus-inner {
border: none;
}
试一试效果,如果有键盘可以尝试用tab和shift+tab进行导航从而触发focus!
4、在html页面中引入btn.css文件并使用
本文来自css答疑栏目,欢迎学习!
html点击按钮换css文件夹,按钮如何使用外部css样式相关推荐
- html创建目录6,VB6选择文件夹的时候有新建文件夹按钮
VB6选择文件夹的时候有新建文件夹按钮 Option Explicit Public Type SHFILEOPSTRUCT hwnd As Long wFunc As Long pFrom As S ...
- gulp压缩css文件夹,使用 gulp 压缩 CSS
压缩 css 代码可降低 css 文件大小,提高页面打开速度. 我们接着将规律转换为 gulp 代码 ## [](https://github.com/nimojs/gulp-book/blob/ma ...
- win7点击右键不能新建文件夹怎么办?win7右键不能新建文件夹解决方法
一般情况下,大家习惯在win7系统中新建文件夹,归类管理文件,但是一位用户发现win7点击右键不能新建文件夹,怎么回事?因为右键没有新建选项,整理后终于找到原因,发现是注册表有问题被破坏了.针对win ...
- 外联式css怎么写_如何链接外部CSS样式表
展开全部 链接外部样式文件 外部引入CSS样式文件是通过link标签实现的,它只能位于HTML文档的head标签内,且必须有href属性,该属性用于指定62616964757a686964616fe4 ...
- php实现浏览文件夹按钮,php实现文件管理与基础功能操作
php实现文件管理与基础功能操作2020-06-17 11:59:15 文件的基本操作 先来看一下PHP文件基础操作,请看强大注释 var_dump(filetype("./img/11.p ...
- java 读取css文件_如何用java解析css文件?
1.如何更换空间背景? 打开高级设置,再自定义CSS,看到里面的第3行和第4行都是 header div.lc{background:url(header div.lc{background:url ...
- php 使用压缩css文件,PHP-使用GZIP压缩静态CSS文件
所以我有一个CSS文件style.css.在同一目录中,我有images /文件夹. 如何制作一个从另一个文件夹压缩style.css的脚本? 现在我有这个: if(isset($_GET['css' ...
- PHP自动压缩CSS文件方法,php 压缩多个CSS文件的实现代码
/* * 压缩css文件 * by www.jbxue.com /* header('Content-type: text/css'); ob_start("compress"); ...
- 引用服务器上css文件,服务器加载不了css的解决方法
服务器加载不了css的解决方法 发布时间:2020-12-23 09:51:23 来源:亿速云 阅读:97 作者:小新 这篇文章将为大家详细讲解有关服务器加载不了css的解决方法,小编觉得挺实用的,因 ...
最新文章
- 【python教程入门学习】PyCharm 如何使用
- ue4android相机拍照插件,cordova-plugin-camera相機插件使用
- 初步了解超图桌面版导入CityGML数据
- 单片机驱动DM9000网卡芯片(详细调试过程)【下】
- readn writen实现linux下socket缓冲区读写
- ASP.NET Core学习——6
- core Animation动画
- 开学季,复旦老师教你玩转“0”“1”浪漫!| 人物志
- hadoop获取文件系统接口
- 在html中frame标签的作用,HTML框架标签frameset、frame、iframe、noframes
- 易语言 查询API之文本和字体函数
- Linux系统防火墙概述
- 跨页面的多选功能实现
- jquery.uploadView.js图片上传插件
- h5 数字变化_那些H5用到的技术(6)——数字滚动特效
- Kaiming He 何恺明
- 用Rest assured作API自动化集成测试
- 周鸿祎:如何做好产品经理
- K8s安全管理:认证、授权、准入控制
- K线类型识别—单K线之阴线