| 适用于所有页面的基础样式base.css | 您所在的位置：网站首页 › css基本代码 › 适用于所有页面的基础样式base.css |
|
这玩意，俗称base.css 几乎所有的页面，在搭建之前，都要用下面那个。BUT /*还在用这个？过时了吧？*/ *{ margin:0; padding:0; }一网打尽并不是最全的，最好的。还是要讲究需要什么用什么，小白知道怎么用就行了，而对于追求更高层次的而言，不仅要知其然，还要知其所以然。 什么文本域、什么a链接的默认下划线，通通都一边呆着去。我把这个base.css准备好，有利于下面的界面的开发。 之前总结过一次 ，但是在我新建一个工程的时候，在有些情况下，我有时候又会忘了如何去配置。所以还是总结在这个里面，使用起来更加的方便。 所以还是要先讲原理后上代码的： 【目录】 块元素 + 关于边距问题 + 关于字体的问题 + 关于列表的原点问题 + （可选）鼠标手势 + （可选）宽高设置 行内块元素 行内元素 + a标签 + i标签 + textarea标签 清除浮动类 版心——主体内容可视区 通用配置——（随意搭配） + 浮动 + 定位 + 一些固定边距 + 背景颜色 （可选）自定义表单设置 + 自定义单选框/复选框设置 + 自定义数值框设置 配置完整版代码base.css 块元素 关于边距问题有8px的外边距 有16px的外边距 ~都有内外边距，有默认字体加粗 标签就不用说了，前面还有间隙啊丑啊丑 所以要把这些块元素的间隙都要清除 margin:0;padding:0; 关于字体的问题 浏览器的默认字体大小是16px，字体为宋体,而不同的浏览器的文字样式是不一样的。现在基本上大多数页面的字体是14px，大多数为微软雅黑这种扁平化又常见的字体。 况且IE6（虽然现在很少会兼容IE6了）不认识奇数字号，所以为了便于显示，基本也都用偶数字号。 font-family: "Microsoft Yahei",sans-serif，tahoma; 这样写会依次加载三个字体。而且写的时候要注意，中文字体一定要加引号，英文下可以不加引号，英文之间有空格的必须加引号。 为了避免文件编码（GB2312,UTF-8）等不匹配时产生乱码的问题，XP系统不支持微软雅黑的中文等原因。我们也推荐使用css的unicode编码的字体。如： 宋体->\5B8B\4F53 微软雅黑->\5FAE\8F6F\96C5\9ED1 关于列表的原点问题这个也是一个头疼的事，现在基本上都是用ul和li搭建，所以就提前把那些东西去掉。这些list-style-type、list-style-position、list-style-position都不要所以写合写： list-style:none; 关于表格边框问题之前一直避免运用表格是因为表格有很多自己特有属性，导致css控制其样式非常困难。但是最近我需要大量的使用表格，用ul和li去做就比较心累。听说表格对于数据加载还是有其优势，所以我就冒险使用了表格。哈哈~~ 不过后来发现，其实也很简单。主要就是边框的问题么，所以就有了合并边框： border-collpase:collpase; 然后设置单元格之间的距离为0之后就可以为所欲为了哈哈 border-spacing:0; 其余的宽高什么的，都可以直接用css控制了，也很方便。 （可选）鼠标手势我在写页面的时候，发现我写的文本自动变成了光标的形式，其实有的地方要有的地方不要，所以这里做了可选，如果不要就在这里配置，什么时候需要用别的再覆盖就可以。如果无所谓不设置也是可以的。 cursor: default; （可选）宽高设置有的时候如果要适配的话，要求html标签和body标签按照百分比计算。 有的时候需要rem布局的时候，还要考虑font-size的值。这个根据不同的布局进行配置。 html,body{ width: 100%; height: 100%; font-size: 100px!important; } 行内块元素行内块元素有： 内外边距 margin: 0;padding: 0; 有边框 border: 0 none; 有蓝色轮廓线 outline-style: none; 因为默认基线对齐有默认3px的距离。 vertical-align: bottom; 行内元素 a标签a标签有自己默认的样式 a标签的默认样式是蓝色的，且下面有一条下划线。 a标签在点击active和visited的状态的时候也有下划线。 text-decoration文本的修饰 none 表示无修饰 blink 闪烁（一般不用） underline 下划线 line-through 贯穿线 overline 上划线 color:#333; a标签移动上去的时候会变颜色 a:hover{ color:#333; } i标签i标签是有语义的标签，是斜体，但是现在基本用来加载小图标。所以里面if要用到小的文字的时候就要去掉字体风格： 防止字体倾斜 normal italic oblique 后面两个是斜体，但是第三个基本上不使用，两者在web中都是一样的，但是在设计中是不一样的 font-style: normal; textarea标签表单默认都有很多的样式： 边框 border:none; 轮廓线 outline: none; 文本域可拖拽 resize: none; 清除浮动类浮动常用，清除浮动也就常用，封装成一个类，直接加类会更加方便 .clearfix 版心 ——主要内容可视区版心根据设计稿的不同设计，加上浏览器不同的分辨率，一般这个可以保证内容水平居中在页面上。注意的是一定要指定其宽度 .w 通用配置我们其实有的时候需要一些通用配置，什么是通用配置，就是经常用的一些css属性，有的时候为了结构看上去很明确，就单独一个成类。可以设置的属性就可以跟随自己的实际情况来定，到时候只要加到标签的类里面就可以了。 可以举一个栗子： —— ——— —— 上面的代码，nav是父盒子相对定位，nav-in是子盒子绝对定位（top和left就在类里面定位就可以了），里面的元素一个左浮动一个右浮动，外面的盒子再清除一下浮动。这样看上去，是不是结构清晰明了。：） 浮动.f_l{float:left;} .f_r{float:right;} 定位p_a{position:absolute;} p_r{position:relative;} 一些固定边距m_b10{margin_bottom:10px;} p_l10{padding_left:10px;} 背景颜色bgc-blue{background-color:#137ac6;} (可选)自定义表单设置 自定义单选框/复选框设置这个可以自己选择单选框和复选框的设置，因为有的时候，一套页面风格比较同意，单选框不会随意变。 注意这里只针对input+label的方式去自定义——这个详见css中的自定义表单的文章 自定义数值框设置因为input的type=number的数值框中的上下按钮，会有默认的样式，所以最好的办法就是隐藏，然后自己用div自己做一个上下按钮。 这个也在css中的自定义表单的文章会详细阐述。 下面来个完整版的base.css body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd{ /* 默认有边距，都要清除 */ margin: 0; padding: 0; /*字体设置*/ font-size: 14px; font-family: "Microsoft Yahei",sans-serif; color: #ccc; /* 去掉列表的原点 */ list-style: none; /* 默认鼠标 */ cursor: default; } /*可选*/ html,body{ width: 100%; height: 100%; font-size: 100px!important; } /*行内块元素*/ input,img{ margin: 0; padding: 0; border: 0 none; outline-style: none; vertical-align: bottom; } /*行内元素*/ a,a:active,a:visited{ /*下划线和颜色*/ text-decoration: none; color: #ccc; } a:hover{ color:#333; } textarea{ /* 边框清零 */ border:none; /* 轮廓线清零 */ outline: none; /* 防止文本域被随意拖拽 */ resize: none; } i{ /*文字样式*/ font-style: normal; } table{ /*边框合并*/ border-collapse:collapse; border-spacing:0; } /* 使用伪元素清除浮动 */ .clearfix::before, .clearfix::after{ content:""; height: 0; line-height: 0; display: block; visibility: none; clear: both; } .clearfix { *zoom: 1; } /* 版心*/ .w{ width: 1883px; margin: 0 auto; } /*可选*/ /*单选框和复选框的配置，一般是分开的*/ input[type="radio"],input[type="checkbox"]{ appearance: none; -webkit-appearance: none; outline: none; display: none; } label{ display: inline-block; cursor: pointer; } label input[type="radio"]+span,label input[type="checkbox"]+span{ width: 16px; height: 16px; display: inline-block; background: url("../images/nocheck.png") no-repeat; } label input[type="radio"]:checked+span,label input[type="checkbox"]:checked+span{ background: url("../images/check.png") no-repeat; } label input[type="radio"]:checked~i,label input[type="checkbox"]:checked~i{ color: #38d6ff; } /*可选*/ /* 自定义数字框配置 */ input[type="number"]{ width: 76px; height: 36px; background-color: rgba(5,45,82,0.4); border: 2px solid #ccc; border-radius: 4px; color: #fff; font-size: 20px; padding: 0 10px; } input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; } input[type="number"]+div{ width: 30px; height: 40px; padding-left: 2px; cursor: pointer; } input[type="number"]+div > .count_add{ display: block; width: 28px; height: 19px; background: url("../images/count_add.png") no-repeat; background-size: contain; margin-bottom: 2px; } input[type="number"]+div > .count_subtract{ display: block; width: 28px; height: 19px; background: url("../images/count_subtract.png") no-repeat; background-size: contain; }这样，在页面中直接引入base.css就可以啦。 是不是很方便？ @burning_韵七七 @version1.0 ——2018.01.17——创建文章【适用于所有页面的基础样式base.css】 @version1.1 ——2018.05.22——修改文章a的active和visited状态的下划线样式处理 |
| CopyRight 2018-2019 实验室设备网 版权所有 |