摘要:本篇HTML+CSS入门教程探讨了构架CSS基础样式库,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS的入门。
CSS 基础库构思
为什么要做基础库
我上一章节的末尾抛出了几个问题:
1.假设你要做一个游戏单页面,网页上并不存在表单内容,那么你就要移除一些冗余的代码,开始自定义Normalize.css样式来满足自己的需求。
2.假设你要做一份文案策划的网页,包含很多文字排版时,此时Normalize.css也许并不完全适合你,因为它的默认字体设置和排版布局可能不能满足你的要求。
3.假设你要做一个企业类型的网站,并考虑跨浏览器兼容性,网站包含内容元素也很丰富,那么你可以选择使用Normalize.css来统一你的浏览器样式,但是它仅仅帮助我们解决了样式统一的问题是不够的,你是不是还要设计一套布局系统,来解决该网站的布局问题呢?
从以上几个问题可以看出,在构建大型网站的时候,我们可以把Normalize.css作为基础样式,然后根据不同的页面需求,进行添加样式覆盖它。
但是这只是我们的第一步,关于网页开发中更多的基础解决方案还有很多,比如刚刚说的布局系统,或许你还会用到很多常用的CSS问题解决方法,如浮动和清除浮动,自适应两端对其等等。
那么下一节,我们就来分析一下CSS 基础库到底包含什么内容?
什么是基础库
我认为基础样式库 始终 能帮我们解决开发时遇到的一些基础性问题:
· 如浏览器样式不统一,需要重置样式;
· 如基础表单样式过于难看不易操作,需要优化其样式;
· 如布局样式需要重复编写,需要一套稳定复用的解决方案;
· 如一些样式的浮动,对齐操作,需要统一管理起来进行多次复用;
· 如常见的CSS动画效果,需要统一起来管理方便复用;
· 如一些常用的图标,需要一套可复用的字体图标;
· 如需要打印,提供一套更为合理的打印样式
基础库初衷和未来方向:
· 最大程度减少开发难度
· 提供简洁高效开发体验
· 趋于模块化样式构建规范
· 做为未来UI组件库核心基础
· 始终站在巨人肩上
基础库的结构
normal.css [基于Normalize.css自定义模块,继承其优势,改善文字与部分细节]html5.css [html5样式修复,默认会导入normal.css,可按需引用]
form.css [表单的一些基础样式,可按需引用]
grid.css [响应式网格系统,优化命名与精简代码,可按需引用]
utils.css [HTML中直接使用的工具类,可按需引用]
iconfont.css [一套复用率极高的字体图标,可按需引用]
animate.css [常用的动画效果组合,可按需引用]
print.css [优化默认的打印样式,可按需使用]
我们按照需求,初步划分了基础样式库的结构,起初html5.css的内容是考虑直接放在normal.css里面的,但是为了考虑一部分人在页面中使用了像html5shiv的解决方案来兼容低版本浏览器,所以这里就体现出了分模块的便捷性,拆分为一个独立的css文件,需要时再进行使用,不过这里默认使用@import "html5.css"进行导入只是为了预览调试,请在实际使用中将代码拷贝至normal.css,或者使用yuicompressor进行压缩合并后再使用。
下一节我们来细化基础样式库的内容,看一看它都需要帮我们做哪一些事情。
CSS 基础库内容
样式重置方案 normal.css
Normalize.css不仅统一了样式,还保留元素的可辨识性,这是我们应该继承和发扬的优点,normal.css也会参考借鉴Normalize.css所有优势,不过为了让其更简洁,让开发者更容易上手,我选择对它进行瘦身,比如移除一些不会用到的元素标签hgroup,将一些元素进行分模块管理,比如html5.css,form.css等,方便按需求灵活引用。
normal.css 包含内容以及调整部分
· 字体约定62.5%,方便单位转换
· 统一元素的内外边距
· 设置全局字体,修复表单元素不继承父级font的问题
· 添加链接基本样式
· 移除列表元素的默认标识
· 移除元素默认边框
· 移除链接默认的下划线
· 移除单元格间距让其边重合
· 修复th不继承text-align,默认左对齐
· 重置标题,采用自定义
· 把所有斜体标签默认扶正
· 统一引用标记
· 统一上标和下标
HTML5元素 html5.css
html5.css主要是用于解决html5新元素在旧浏览器中的不识别,并且修复一些元素存在的隐性问题。
但是为什么不把html5.css这部分内容直接放入normal.css,而是考虑将其进行分模块管理呢? 是为了考虑一部分人在页面中已经使用了像html5shiv的解决方案来兼容低版本浏览器,所以这里就体现出了分模块的灵活性,拆分为一个独立的css文件,需要时再进行使用。
不过这里默认使用@import "html5.css"进行导入只是为了预览调试,请在实际使用中将代码拷贝合并至normal.css,或者使用yuicompressor,Grunt进行压缩合并后再使用。
html5.css 包含内容以及调整部分
· 修复HTML5新元素不能正确显示的问题
· 修复progress元素的对其问题
· 修复没有controls属性的audio显示出来
· 修复hidden属性不起作用的问题
· 修复svg元素overflow不正常的问题
· 统一mark标签的样式
· 修复拖动元素添加拖动的光标
表单元素 form.css
form.css修复表单元素在不同浏览器下的默认样式,尤其是IE低浏览器版本下的一些怪异问题;并且还修复了一些表单显示状态,致力于提升用户体验;
form.css 包含内容以及调整部分
· 统一fieldset元素的显示样式
· 修复'legend'元素的若干问题
· 修复表单元素字体与字号不继承的问题
· 统一表单元素的垂直对其方式
· 统一表单元素的overflow属性为visible
· 重置按钮禁用时光标样式
· 修复checkbox,radio的属性box-sizing: border-box;
· 统一button,input内边距和内边框
· 统一select的样式
· 修复textarea只能为纵向拉伸
ui-btn 按钮组件包含的内容
· 初始化默认按钮样式,增加不同状态下的效果
· 提供多种场景按钮,如主要,警告与错误
· 提供可定制的大小按钮,如较小,更小,一般,较大,更大
· 提供组合式按钮
· 支持iconfont.css,搭配图标按钮使用
使用示例
<button type="button" class="ui-btn">默认</button>
栅格系统 grid.css
借鉴了Bootstrap的一套响应式流式栅格布局系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
对栅格系统的样式命名进行重新组织,简化和移除工具代码,只保留核心布局样式。
简洁即是高效率。
grid.css包含内容以
· .ui-grid-container(固定宽度)和.ui-grid-fluid(100%宽度)用于包裹.ui-row
· .ui-grid-container(固定宽度)通过媒体查询来实现响应式宽度
· .ui-row用于包裹一组.ui-col-1–.ui-col-12列
· xs,sm,lg通过媒体查询来实现响应式
· .ui-col-xs-* 超小屏幕 手机 (<768px)
· .ui-col-sm-* 小屏幕 平板 (≥768px)
· .ui-col-* (默认)中等屏幕 桌面显示器 (≥992px)
· .ui-col-lg-* 大屏幕 大桌面显示器 (≥1200px)
· 支持列嵌套,必须包裹在.ui-row行中
· 简化代码,不支持列偏移,列排序
<div class="ui-grid-fluid">
<div class="ui-row">
<div class="ui-col-8">.ui-col-8</div>
<div class="ui-col-4">.ui-col-8</div>
</div>
</div>
辅助工具 utils.css
提供最常用的功能类class,命名使用fn-前缀来进行区别表示,如果在项目中能够灵活复用这些类,那将大大提升开发效率。 utils.css 包含内容以及调整部分
o 浮动元素与清楚浮动元素
· 垂直与水平滚动
· 元素显示类型
· 元素与文本隐藏
· 文本不换行
· 文本强制换行
· 文本溢出显示省略号
· 文本左右对齐
· 文本垂直对齐
· 常用符号(关闭,箭头,下三角等)
· 自适应两端对齐
· 未知高度垂直居中
· 列表平铺
使用示例
<!-- 文字溢出显示省略号 --> <div class="fn-text-ellipsis">文字那是相当的长</div>
字体图标 iconfont.css
iconfont都已经很熟悉了,是一种把图标放入自定义字体中,然后使用字体图标来替代普通图标的技术,使用起来方便灵活。iconfont.css包含内容以及调整部分 •提供网页中66个最常用的字体图标 •可搭配form.css`按钮组件使用
使用示例
<button class="ui-btn"><b class="iconfont">~</b>提交</button>
动画库 animate.css
CSS3的动画让网页变的更加有活力,所以这里引入一套CSS3动画库,可以通过简单的引用类名的方式在你的项目中实现最常见的动画效果。
animate.css 包含内容以及调整部分
· 弹跳
· 闪烁
· 摇动
· 淡入 (up,down,left,righ)
· 淡出
· 滑入 (up,down,left,righ)
· 滑出
使用示例
<div class="animated fadeIn">淡入效果
</div
打印 print.css
可以优化打印出的网页更适合浏览,并且加快打印速度,节省打印机耗材。
print.css 包含内容以及调整部分
· 修复打印时的背景和文字颜色
· 删除所有的阴影效果
· 标注超链接,并显示URL链接
CSS 基础库的产出
项目地址
通过对以往开发中遇到问题的总结,以及对CSS基础库的需求进一步细化,当我们明确的知道需要什么了以后,从参考业内最优秀的CSS框架,到提取出能够解决我们实际问题的代码;从以往的开发经验中整理出最高效复用的方案,再到一次次的“取之精华去之糟粕”; 最终这篇文章有了产出:
项目名称:Koala – 更简洁高效的基础样式库 项目版本:alpha(内部测试与学习参考使用) 项目地址:https://github.com/Alsiso/Koala
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML/CSS频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号