【css】我的 css 框架——base.css
今天发下我自己的 css 框架——base.css,作用是重设浏览器默认样式和提供通用原子类。
@charset "utf-8";/*!* @名称:base.css* @功能:1、重设浏览器默认样式* 2、设置通用原子类*/ /*防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体*/html{background:white;color:black; } /*内外边距通常让各个浏览器样式的表现位置不同*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0; } /*要注意表单元素并不继承父级 font 的问题*/body,button,input,select,textarea{font:12px \5b8b\4f53,arial,sans-serif; }input,select,textarea{font-size:100%; } /*去掉 table cell 的边距并让其边重合*/table{border-collapse:collapse;border-spacing:0; } /*ie bug:th 不继承 text-align*/th{text-align:inherit; } /*去除默认边框*/fieldset,img{border:none; } /*ie6 7 8(q) bug 显示为行内表现*/iframe{display:block; } /*去掉 firefox 下此元素的边框*/abbr,acronym{border:none;font-variant:normal; } /*一致的 del 样式*/del{text-decoration:line-through; }address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500; } /*去掉列表前的标识,li 会继承*/ol,ul{list-style:none; } /*对齐是排版最重要的因素,别让什么都居中*/caption,th{text-align:left; } /*来自yahoo,让标题都自定义,适应多个系统应用*/h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500; }q:before,q:after{content:''; } /*统一上标和下标*/sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline; }sup{top:-0.5em; }sub{bottom:-0.25em; } /*让链接在 hover 状态下显示下划线*/a:hover{text-decoration:underline; } /*默认不显示下划线,保持页面简洁*/ins,a{text-decoration:none; } /*去除 ie6 & ie7 焦点点状线*/a:focus,*:focus{outline:none; } /*清除浮动*/.clearfix:before,.clearfix:after{content:"";display:table; }.clearfix:after{clear:both;overflow:hidden; }.clearfix{zoom:1; /*for ie6 & ie7*/ }.clear{clear:both;display:block;font-size:0;height:0;line-height:0;overflow:hidden; } /*设置显示和隐藏,通常用来与 js 配合*/.hide{display:none; }.block{display:block; } /*设置浮动,减少浮动带来的 bug*/.fl,.fr{display:inline; }.fl{float:left; }.fr{float:right; }
【css】我的 css 框架——base.css相关推荐
- 前端:CSS/09/行内框架,CSS简介,CSS选择器,组合选择器,CSS注释,CSS尺寸属性,CSS字体属性,CSS文本属性
内嵌框架(行内框架,浮动框架) 语法格式:<iframe 属性="值">不支持时的提示信息</iframe> 描述:内嵌框架,相当于在现有的网页中,挖了一个 ...
- jQuery系列 第三章 jQuery框架操作CSS
第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScr ...
- CSS的class、id、css文件名的常用命名规则
CSS的class.id.css文件名的常用命名规则 (一)常用的CSS命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sid ...
- css动画在线生成,在线制作css动画——cssanimate
熟悉CSS的人都知道,CSS可以实现很多漂亮的动画,特别是它的在线功能,能够帮助人们解决很多制作动画的效果.今天特别推荐一个在线CSS插件功能--cssanimate,这个最大的特色就是以图形界面方式 ...
- Web前端框架(JavaScript,CSS)、html组件、CSS规范与第三方库
1.什么是前端框架 前端框架一般指用于简化网页设计的框架,使用广泛的前端开发套件,比如,jquery,extjs,bootstrap等等,这些框架封装了一些功能,比如html文档操作,漂亮的各种控件( ...
- 您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus
2019独角兽企业重金招聘Python工程师标准>>> CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS ...
- yii引入php文件,Yii2框架中CSS、JS文件引入要领_PHP开发框架教程
在yii2中,因为yii2版本升级致使了,许多yii2的用法跟yii1有着很大的区分,这几天一直在view层的视图界面徜徉着,碰到什么问题呢? (引荐进修:yii框架) 问题就是搞不清我该怎样去引入C ...
- 9 个基于JavaScript 和 CSS 的 Web 图表框架
jQuery, MooTools, Prototype 等优秀的 JavaScript 框架拥有各种强大的功能,包括绘制 Web 图表,使用这些框架以及相应插件,我们可以非常轻松地实现曲线图,圆饼图, ...
- css之去除html标签默认的外边距margin和内边距padding,通用工具类 base.css
@charset "utf-8";/*!* @名称:base.css* @功能:1.重设浏览器默认样式* 2.设置通用原子类*/ /*防止用户自定义背景颜色对网页的影响,添加让用户 ...
最新文章
- 【KVM系列04】KVM的I/O 设备直接分配和SR-IOV
- [转]Oracle 服务器名配置
- apache应用进阶
- linux2.6版及以后内核:支持实时、抢占
- 网络爬虫--22.【CrawlSpider实战】实现微信小程序社区爬虫
- 熬夜给这个C语言游戏项目找了几个bug
- QT每日一练day3:Qt的编译机制
- Kali Linux破解WiFi教程
- CSS3渐变——gradient
- 利用wordpress搭建自己的网站(百度云虚拟主机)
- Java使用jfreechart画饼图_JFreeChart饼图
- vue项目调用企业微信扫码权限skd,js-sdk
- java计算机毕业设计房屋租赁系统源码+数据库+系统+lw文档+部署
- 川土微电子 | 超小型封装隔离式半双工485收发器
- RabbitMQ在windows10环境下安装步骤
- 服务器系统安装优盘启动工具,u盘启动大师在Win10上安装和卸载远程服务器管理工具的方法...
- OBS点播电影电视剧添加场景
- 语义分割丨PSPNet源码解析「训练阶段」
- [CISCN2019 总决赛 Day2 Web1]Easyweb 1
- 【热门主题*热舞派对卡通xp主题*】
热门文章
- SQL注入的几种实用办法
- Golang 垃圾回收剖析
- sigaction函数使用实例
- [route]Add up route for deb rpm and windows / 为RPM系DEB系和Windows添加路由
- scrapy---Logging
- cordova插件开发
- editor多功能文本框在有些计算机上不能正常加载,解决方法,本人用的是把js调用方法放到body/body后面)...
- 《编程之美》读书笔记(十):“链表相交”扩展问题
- WEB前端 vue学习二 组件之间的数据传递
- java统计词频算法_java实现的统计字符算法示例