diff --git a/README.md b/README.md index 76fa569..d9a4b65 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,9 @@ 目标:一致化浏览器排版效果,构建最适合中文阅读的网页排版。包括桌面和移动平台。 -预览:[typo.css](http://typo.sofish.de) + Alpha 中,各路牛人都来支持一下,加入开发啊! + +预览:[typo.css](http://webcoding.github.com/typo.css) 借鉴于sofish Lin的TYPO.CSS设计思想 ### 一、目录结构 . @@ -21,9 +23,11 @@ 目前的设计是这样的,尽量保持完整的 reset,比如让 ul/ol 无样式并且无多余的 `padding`/`margin`,这是必须的,因为一个网可能需要很多自定义的的内容,在实践中我们并不希望像 ul/ol 有样式,这样我们得用优先级去覆盖,这是非常麻烦的事。所以 typo.css 并不像 normalize.css,后者给每一个元素都预先定义了样式,这样在自定义的时候将是非常痛苦的。要大保持干净的所有元素一致化的 reset 才是最佳实践。 +为什么不是 [Han](http://i.minus.com/iQInhZPgOlHEj.png) 这个项目? + 2、`class="typo"` 阅读内容排版 -在文章/文档阅读的页面,需添加 `.typo` 这个 class,这样 table/ol/ul 等都会有预定的样式,让你的排版像 [http://typo.sofish.de](http://typo.sofish.de) 一样,让用户阅读起来更舒服。 +在文章/文档阅读的页面,需添加 `.typo` 这个 class,这样 table/ol/ul 等都会有预定的样式,让你的排版像 [http://typo.sofish.de]() 一样,让用户阅读起来更舒服。 3、增加类: diff --git a/bookmark.html b/bookmark.html index e7f3fd3..1775e04 100644 --- a/bookmark.html +++ b/bookmark.html @@ -3,7 +3,7 @@ 书签 - Typo.css - + html{background:#ccc;} diff --git a/noreset.css b/noreset.css new file mode 100644 index 0000000..4b86c81 --- /dev/null +++ b/noreset.css @@ -0,0 +1,413 @@ +@charset "utf-8"; +/* ------------------------------------------------------------ + Css Reset v0.9 + Created: 2012-12-19 + Last Updated: 2012-12-29 + Author: cloudYan + Contact: qqGroup:187260298 +------------------------------------------------------------ */ + +/* =更新日志 + * 2012-12-29 在normalize的基础上,添加清除浮动等常用样式 + * 2012-10-11 新计划noreset,精良保持浏览器默认的属性或统一默认属性值而非直接去掉默认的属性(如:ul,ol等) +------------------------------------------------------------ */ +/* RESET */ + +/*! normalize.css v2.0.1 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/* + * Corrects `block` display not defined in IE 8/9. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section, +summary { + display: block; +} + +/* + * Corrects `inline-block` display not defined in IE 8/9. + */ + +audio, +canvas, +video { + display: inline-block; +} + +/* + * Prevents modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/* + * Addresses styling for `hidden` attribute not present in IE 8/9. + */ + +[hidden] { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/* + * 1. Sets default font family to sans-serif. + * 2. Prevents iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ +} + +/* + * Removes default margin. + */ + +body { + margin: 0; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/* + * Addresses `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/* + * Improves readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/* + * Addresses `h1` font sizes within `section` and `article` in Firefox 4+, + * Safari 5, and Chrome. + */ + +h1 { + font-size: 2em; +} + +/* + * Addresses styling not present in IE 8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/* + * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/* + * Addresses styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/* + * Addresses styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + + +/* + * Corrects font family set oddly in Safari 5 and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; +} + +/* + * Improves readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +/* + * Sets consistent quote types. + */ + +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} + +/* + * Addresses inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/* + * Prevents `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/* + * Removes border when inside `a` element in IE 8/9. + */ + +img { + border: 0; +} + +/* + * Corrects overflow displayed oddly in IE 9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/* + * Addresses margin not present in IE 8/9 and Safari 5. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/* + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/* + * 1. Corrects color not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/* + * 1. Corrects font family not being inherited in all browsers. + * 2. Corrects font size not being inherited in all browsers. + * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome + */ + +button, +input, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 2 */ + margin: 0; /* 3 */ +} + +/* + * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/* + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Corrects inability to style clickable `input` types in iOS. + * 3. Improves usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/* + * Re-set default cursor for disabled elements. + */ + +button[disabled], +input[disabled] { + cursor: default; +} + +/* + * 1. Addresses box sizing set to `content-box` in IE 8/9. + * 2. Removes excess padding in IE 8/9. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/* + * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/* + * Removes inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* + * Removes inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* + * 1. Removes default vertical scrollbar in IE 8/9. + * 2. Improves readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/* + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* 这条分割线以上为normalize.css的样式 +==================================================================================================== */ + +/* 清除浮动 */ +.clearfix:after,.wrap:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0} +.clearfix,.wrap{*zoom:1}/* for IE6 IE7 */ +/* 空标签清除法 */ +.clear{clear:both;display:block;overflow:hidden;visibility:hidden;} + +a{ text-decoration:none} +a:hover{ text-decoration: underline} + + +/* + + + + +*/ \ No newline at end of file diff --git a/reset.css b/reset.css new file mode 100644 index 0000000..aafdef4 --- /dev/null +++ b/reset.css @@ -0,0 +1,141 @@ +@charset "utf-8"; +/* ------------------------------------------------------------ + Css Reset v0.9 + Created: 2011-04-25 + Last Updated: 2011-05-13 + Author: cloudYan + Contact: qqGroup:187260298 +------------------------------------------------------------ */ +/* =更新日志 + * 2012-10-11 新计划noreset,精良保持浏览器默认的属性或统一默认属性值而非直接去掉默认的属性(如:ul,ol等) + * 2012-05-11 html5新增语义化的标签(除figure外)不必重置样式,默认就没有样式-陈林 + + * 2012-04-04 新项目参考了alipay,yahoo,html5Doctor等结合模块化开发进行研究,html5的Doctype声明,不必写type="text/css" 但是必须要有 rel="stylesheet" + * 2011-09-24 解决了IE下超链接使用绝对定位后失效的问题(使用background:url(about:blank)解决是最佳方案) + * 2011-09-19 原项目代号Ocode取义Original code,参考http://www.tcreator.info/labs/projects/2011/css-reset.html + + * 研究规划 + * 第一步通用reset.css + * 第二步全站公共样式—common.css + 包括全站统一样式定义;如:a,a:hover等 + 基础的模块组合样式;如:.f14,.mt10,.tc等 + * 第三步css模块—c_common.css + 包括模块公共样式提取 + 公共模块样式 + 模块个性化样式(类似新模块,但多处使用的) + * 第四步网站架构css差异化如何书写及管理css + 单页面/项目css(个性化css)规划 +------------------------------------------------------------ */ +/* 升级原则——渐进增强(Progressive Enhancement) + +渐进增强(Progressive Enhancement)是为了确保没有页面特效后基本功能也是可用的。简单来讲,渐进增强是指在确保页面在禁用JavaScript后能正常运作后,再对页面添加各种特效(JavaScript动画、Ajax异步等等)。我们同样可以运用"渐进增强"原则来使用CSS3(或者一些CSS2)、HTML5以及其他IE6所不支持的web规范。 + +某些情况下,是无法让所有用户在任何浏览器下都完全一模一样,特别是那些使用IE6的用户。运用渐进增强策略,可以保证让那些用户至少能使用到你网站(或网络应用)的基本功能。 +------------------------------------------------------------ */ +/* RESET */ +/* 内外边距通常让各个浏览器样式的表现位置不同 */ +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,figure,menu{margin:0;padding:0;} + +ol,ul{list-style-type:none} +/* 新计划中涉及的属性 + + +/* 语义化的标签的样式默认的margin,padding都为0,不用reset */ +article,aside,details,figcaption,footer,header,hgroup,menu,nav,section{} + +/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */ +article,aside,details,embed,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;} + +/* HTML5 媒体文件跟 img 保持一致 */ +audio,canvas,video{display:inline-block;*display:inline;*zoom:1;} +command,datalist,keygen,mark,meter,progress,rp,rt,ruby,time,wbr{display:inline;} + +/* 去掉各Table cell 的边距并让其边重合 */ +table{border-collapse:collapse;border-spacing:0;} + +/* IE bug fixed: th 不继承 text-align*/ +th{text-align:inherit;} + +/* 去除默认边框 */ +fieldset,img{border:0;} + +/* ie6 7 8(q) bug 显示为行内表现 */ +iframe{display:block;} + +/* webkit内核浏览器会默认给:focus状态的元素加上outline的样式 没必要去除浏览器默认的outline属性 */ +:focus {outline:0;} + +/* 去掉 firefox 下此元素的边框 */ +abbr,acronym{border:0;font-variant:normal;} + +/* 一致的 del 样式 */ +del{text-decoration:line-through;} + +address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500;} + + +/* 对齐是排版最重要的因素, 别让什么都居中 */ +caption,th {text-align:left;} + +/* 来自yahoo, 让标题都自定义, 适应多个系统应用 */ +h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:500;} +button,input,select,textarea{font-size:100%;} +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;} + +/* 默认不显示下划线,保持页面简洁 */ +ins,a {text-decoration:none;} + +/* 让链接在 hover 状态下显示下划线 */ +a:hover {text-decoration:underline;} + +/* 修复火狐下图片和文字之间的间隙,添加img{vertical-align:top;}、img{vertical-align:middle;}或img{display:block}属性即可解决,推荐前者 */ +img{vertical-align:middle} + +/* 清除浮动 */ +.clearfix:after,.wrap:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0} +.clearfix,.wrap{*zoom:1}/* for IE6 IE7 */ +/* 空标签清除法 */ +.clear{clear:both;display:block;overflow:hidden;visibility:hidden;} +.wrap,.bc{margin-left:auto; margin-right:auto} +.wrap{ width:980px;} + +/* 这条分割线以上的属性会提取到css reset.css中 +==================================================================================================== */ + +/* 全站级公用样式 */ + +/* 要注意表单元素并不继承父级 font 的问题 根据自身需求设置 这里可以注意下建议在使用表单元素的时候再定义 */ +body,button,input,select,textarea{font:12px/1.5 Tahoma,Arial,\5b8b\4f53;} +blockquote,pre{white-space:pre-wrap;word-wrap:break-word;} + +/* 使Chrome支持12px以下的字体 */ +.text-size{-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;} +/* 两端对齐 */ +.text-justify{text-align:justify;text-justify:inter-ideograph;} +/* 半透明 */ +.opacity {opacity:.5;filter:alpha(opacity=50);} +/* 文本过长变成省略号,需要定义宽度 */ +.text-ell{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;} +/* css3属性 */ +.css3_shadow{transition:all 1s ease-out 0s;border-radius:5px;box-shadow:0 0px 4px rgba(206, 201, 170, 0.8);} +.css3_shadow:hover{box-shadow:0 0px 5px rgba(206, 201, 170, 1);} + +/* 定义全站级统一样式 +a{color:#06c}a:hover{color:#c06;}.view_more{color:#06c;padding:0 2px;} +.yahei{font-family: "Microsoft YaHei","\5FAE\8F6F\96C5\9ED1"} + */ + +/* + + + + +*/