CSS 公共样式
global.css | reset.css(格式化样式)
common.css(公共组件样式)
layout.css(当前页面样式)
清除全站所有页面的浏览器默认样式,保证在初始样式在所有浏览器下一致。
common.css(公共组件样式)
一般一个网站所有页面头部、底部样式都是一致的,而且很长时间不会有大的改变,改变的大概就是产品、运营的经常需要添加、去掉某些入口的需求,要保证全站所有页面头部一次替换生效,只要把头文件,已经对应的样式一发,马上生效,很快就有响应。
比如翻页、表单(输入框、按钮)等样式也是全站统一的,把这些样式都放到common.css里面,如果哪天所有的按钮样式要变更,一次替换就成功了。
layout.css(当前页面样式)
公共组件以外的所有样式都写到这个样式文件里面,并且保证一个页面一个独立样式,页面html和css写法要模块化,保证迅速响应项目频繁的迭代。
为什么要保证一个页面一个独立样式,而且要模块化,肯定有朋友和我有过一样的经历,修改一行样式代码,整个页面甚至N个页面都会受影响,搞了半天还不知道哪里出了问题,返回到修改前的版本,就没问题了。终于找到原因了,却不能改以前的样式,更不能删除,只能增加,时间一长,css样式文件越来越大,最后是不堪重负,整个页面代码只能重写。
其实global.css和common.css也可以合并到一个文件,毕竟格式化样式也就那么几十行代码,而且格式化样式、头部、底部样式每个页面都会用到。
这样每个页面就只有2个样式:
common.css
layout.css
如果common.css里面组件太多,而且很多组件也不是常用的,也可以像下面这样做:
heads.css(格式话样式、头部、底部)
common.css(公共组件样式)
layout.css(当前页面样式)
一般情况下也只有2个样式,当需要用到组件的时候才去link组件样式,也不会有太多问题。
最后,不要把什么东西都往组件样式里面塞,有写东西宁愿每个页面重复拷贝也不要塞到组件样式里面去。某一天,你会发现这个组件样式大得让你可怕,而且很多都是无用的。
/***********通用基本类1************/
/*格式化样式*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}
ol,ul {list-style:none}
caption,th {text-align:left}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal}
q:before,q:after {content:''}
abbr,acronym { border:0}
/*文字排版、颜色*/
.f12{font-size:12px}
.f13{font-size:13px}
.f14{font-size:14px}
.f16{font-size:16px}
.f20{font-size:20px}
.fb{font-weight:bold}
.fn{font-weight:normal}
.t2{text-indent:2em}
.red,a.red{color:#cc0031}
.darkblue,a.darkblue{color:#039}
.gray,a.gray{color:#878787}
.lh150{line-height:150%}
.lh180{line-height:180%}
.lh200{line-height:200%}
.unl{text-decoration:underline;}
.no_unl{text-decoration:none;}
/*定位*/
.tl{text-align:left}
.tc{text-align:center}
.tr{text-align:right}
.fl{float:left;display:inline}
.fr{float:right;display:inline}
.cb{clear:both}
.cl{clear:left}
.cr{clear:right}
.vm{vertical-align:middle}
.pr{position:relative}
.pa{position:absolute}
.abs-right{position:absolute;right:0}
.zoom{zoom:1}
.hidden{visibility:hidden}
.none{display:none}
/*长度高度*/
.w10{width:10px}
.w20{width:20px}
.w50{width:50px}
.w90{width:90px}
.w100{width:100px}
.w200{width:200px}
.w250{width:250px}
.w500{width:500px}
.w800{width:800px}
.w{width:100%}
.h50{height:50px}
.h80{height:80px}
.h100{height:100px}
.h200{height:200px}
.h{height:100%}
/*边距*/
.m10{margin:10px}
.m15{margin:15px}
.m30{margin:30px}
.mt5{margin-top:5px}
.mt10{margin-top:10px}
.mt15{margin-top:15px}
.mt50{margin-top:50px}
.mt100{margin-top:100px}
.mb5{margin-bottom:5px}
.mb10{margin-bottom:10px}
.mb15{margin-bottom:15px}
.mb100{margin-bottom:100px}
.ml5{margin-left:5px}
.ml10{margin-left:10px}
.ml15{margin-left:15px}
.ml20{margin-left:20px}
.ml30{margin-left:30px}
.ml50{margin-left:50px}
.ml100{margin-left:100px}
.mr5{margin-right:5px}
.mr10{margin-right:10px}
.mr15{margin-right:15px}
.mr50{margin-right:50px}
.mr100{margin-right:100px}
.p10{padding:10px;}
.p15{padding:15px;}
.p30{padding:30px;}
.pt5{padding-top:5px}
.pt10{padding-top:10px}
.pt15{padding-top:15px}
.pt20{padding-top:20px}
.pt30{padding-top:30px}
.pt50{padding-top:50px}
.pb5{padding-bottom:5px}
.pb100{padding-bottom:100px}
.pl5{padding-left:5px}
.pl10{padding-left:10px}
.pl50{padding-left:50px}
.pl100{padding-left:100px}
.pr5{padding-right:5px}
.pr10{padding-right:10px}
.pr15{padding-right:15px}
.pr100{padding-right:100px}
/***********通用基本类2************/
/* Copyright 2008 TSXMLOVE. All Rights Reserved. */
* {
padding: 0px;
margin: 0px;
text-align: left;
font-family:Arial, Verdana, Tahoma, "宋体", Helvetica, sans-serif;
line-height: 150%;
}
body {
font-size: 14px;
text-align: center;
color: #000000;
background-image: url(../Images/body_bg.jpg);
background-repeat: repeat-x;
}
table {
border-collapse: collapse;
}
td {
padding: 3px;
}
img {
border: none;
}
input {
padding: 1px;
vertical-align: middle;
line-height: normal;
}
.main-box {
margin-right: auto;
margin-left: auto;
width: 960px;
clear: both;
zoom:1;
overflow:hidden;
}
.text-overflow-hidden {
white-space: nowrap;
word-spacing: normal;
letter-spacing: normal;
overflow: hidden;
}
.box-align-center {
margin-right: auto;
margin-left: auto;
}
/*css定义超链接四个状态也有顺序的。*/
a:link, a:visited {
text-decoration: none;
color: #1F376D;
}
a:hover, a:active {
text-decoration: underline;
color: #BD0A01;
border: none;
}
/*以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。
注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。*/
ul {
clear:both;
overflow:hidden;
width: 100%;
}
ul, li {
list-style:none;
}
.valign {
display:table-cell;
*display: inline;
zoom:1;
vertical-align:middle;
}
.text{word-wrap:break-word;overflow:hidden;word-break:break-all;}
/*======================CSS垂直居中=======================*/
.holder {
width:740px;
height:300px;
border:1px solid #777;
text-align:center;
display:table-cell;
vertical-align:middle;
}
/*以下样式针对IE*/
.edge {
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
.container {
vertical-align:middle;
display:inline-block;
}
/*===============================================*/
/*CSS Hack*/
.class {
/*所有浏览器*/
*background-color:#00FF00;/*IE*/
_/*IE6*/
}
/*======万能Float闭合======*/
.clear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clear {display: inline-block;} /* for IE/Mac */
/*<!-- main stylesheet ends, CC with new stylesheet below... -->*/
.clear {
zoom: 1; /* triggers hasLayout */
display: block; /* resets display for IE/Win */
} /* Only IE can see inside the conditional comment
and read this CSS rule. Don't ever use a normal HTML
comment inside the CC or it will close prematurely. */
/*======万能Float闭合2======*/
.overflow-hidden{overflow:hidden;} /*控制背景溢出*/
.equal-height{margin-bottom:-32800px;padding-bottom:32800px;} /*控制高度足够小*/
/*======万能Float闭合3======*/
.clear
{
height:0px;
clear:both;
font-size:0px;
line-height:0px;
zoom: 1;
}
CSS 公共样式的更多相关文章
- CSS 公共样式分享
global.css | reset.css(格式化样式) common.css(公共组件样式) layout.css(当前页面样式) 清除全站所有页面的浏览器默认样式,保证在初始样式在所有浏览器下一 ...
- css公共样式 | 标签元素初始化
PC参考样式1: @charset "utf-8"; html{background:#fff;overflow:auto;} body{min-width:1200px;font ...
- CSS公共样式模版
CSS文件命名为global.css,一般此CSS文件是用于装全站主要框架CSS样式代码和初始化的CSS样式. 通常会放初始化CSS代码如下: body, div, ul, ol, dl, dt, d ...
- css公共样式,初始化
/* CSS Document */ body, button, select, textarea, input, label, option, fieldset, legend{font-famil ...
- 项目初始化CSS公共样式
/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document =========== ...
- css公共样式
/* ==================================================================== @ set browser style ======== ...
- CSS覆盖公共样式中的某个属性
CSS如何覆盖公共样式中的某个属性?利用CSS样式的优先级. 如下例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
- css中一些必要的公共样式
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend ...
- css清除默认样式和设置公共样式
/*公共样式--开始*/ html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textar ...
随机推荐
- git 分支的创建与提交
我们在开发的过程中会遇到很多团队协作的问题,怎么来解决团队合作呢,就是靠分支来管理代码.一般来说一个功能就要创建一个分支,这样才能减少代码的冲突,给开发带来很大的方便. 首先需要克隆代码 git cl ...
- 使用Docker
1. 使用镜像 1.1 在Docker Hub上查找镜像 我们查找一下之前博客里面,推送到Docker Hub里面的bage88/docker-demo,能看到有2个仓库,第一个就是我们上次上传的镜像 ...
- codeforces 757F Team Rocket Rises Again
链接:http://codeforces.com/problemset/problem/757/F 正解:灭绝树. mdzz倍增lca的根节点深度必须是1..我因为这个错误调了好久. 我们考虑先求最短 ...
- JQuery速成大法
什么是JQuery呢,很多都是只闻其名. jQuery是一个快速.简洁的JavaScript框架,是一个优秀的JavaScript代码库.jQuery设计的宗旨是"write Less,Do ...
- VMware Ubuntu 安装
最近对Linux系统有兴趣,本想装个双系统,考虑自己是以Windows为主,所以装了个虚拟机 VMware Workstation 12 Pro 版Ubuntu镜源文件下载地址:https://www ...
- poj1269计算几何直线和直线的关系
We all know that a pair of distinct points on a plane defines a line and that a pair of lines on a p ...
- SQL SERVER 的前世今生--各版本功能对比
背景 今天举办的 Data Amp 大会上,微软向开发者们强调了 数据如何影响他们的应用和服务 ,顺道还宣布了几个小新闻.这个免费的线上研讨会不仅展示了未来的机器学习远景,还发布了 SQL Serve ...
- JS立即执行函数表达式(IIFE)
原文为 http://benalman.com/news/2010/11/immediately-invoked-function-expression/#iife ----------------- ...
- 华硕 F1A55-M LX3系列跳线图
天啊,第一次遇到这么变态的主板跳线...浪费我好久时间找到这跳线图
- 转:MySQL表名不区分大小写
在LINUX下调一个程序老说找不到表,但是我明明是建了表的,在MYSQL的命令行下也可以查到,为什么程序就找不到表呢? 一.linux中mysql大小写详情: 1.数据库名严格区分大小写 2.表名严格 ...