在一个web程序中,我们往往希望页面中的一些最基本的样式是统一的,这样可以给人整齐划一的感觉,同时也可以省去很多重复冗余的css代码,下面是我经常用到的页面默认样式,也就是程序的每个页面都会首先载入这个样式,然后再依据其自身的特点载入自己特有的样式,可以参考一下
成都创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站制作、成都做网站、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的荔城网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
body{line-height:1.4;background:#fff}
body,input,textarea,select{font-size:13px;color:#333;font-family:arial}
body,h1,h3,h4,p,ul,ol{margin:0}
ul,ol{padding-left:0;list-style-type:none}a img{border:0}
a:link,a:active,a:visited{color:#003;text-decoration:none}
a:hover{color:blue;text-decoration:underline}
.biaoti1{height:25px;background:#e7e7e7}
.biaoti1 .tit{background:#3672ae;width:80px;height:25px;text-align:center;line-height:25px;color:#fff;font-size:14px;font-weight:700}.biaoti1 .more{float:right;font-size:12px;color:#06c;font-weight:700;line-height:25px;margin-right:5px}#clubsjihua_div_clubs .biaoti{width:389px;height:246px;float:left;margin-left:3px;border-right:0 solid #ccc}
#clubsjihua_div_clubs .biaoti h1{font-size:14px;color:#c00;height:30px;line-height:30px;border-bottom:1px solid #ccc;width:95%}
#clubsjihua_div_clubs .biaoti h1 span{color:#ccc;font-weight:400}
#clubsjihua_div_clubs .biaoti em{float:right;font-style:normal;font-weight:400}
#clubsjihua_div_clubs .biaoti em a{font-size:12px;color:#005a98;text-decoration:none;background:url(/images/arrow.jpg) no-repeat;padding-left:18px}#clubsjihua_div_clubs .biaoti em a:hover{color:red;text-decoration:underline}
比如你给页面中所有的div定义样式为div { margin:0 auto;}
如果要给其中某个div重新定义,你可以用id选择器或者类别选择器,div id="left_box" class="left_box"文字/div
样式:
#left_box { 定义单独的样式将公用样式覆盖掉}
或者.left_box{ 定义单独的样式将公用样式覆盖掉}
如果你担心你的颜色值经常变动
建议,你用SCSS来写CSS代码
把经常,或者 可能 变动的值 写成变量。
具体,你可以查看scss的官网。
这个要看具体情况的,需要看场景来抽公共的。
比如:常见的抽公共是以模块为单位的集合,比如按钮、布局类的(如栅格布局flex)等,能经常用到的模块。
那如果所有属性都抽公共的话,会导致html页面里class的值太多,比如color属性抽一个,font抽一个,padding抽一个等。会使得class值太长,从而导致html页面的大小变大,同样会不利于页面的加载。
所以最好适中,把常用的抽公共,比较独立的就单独写样式。
之前的文章介绍了[Markdown格式写作的优秀软件Ulysses],在定义排版样式时需要用到css文件,我自己参考了笑来老师公众号排版的css文件。
但对于不懂编程、不会代码的同学,依然不容易看懂里面的代码块究竟是什么含义。这篇文章会针对笑来老师的css文件内容中最重要的几个特征定义,逐行分析含义,另外,给出一些常用的css代码含义。
Css文件中的代码, {} 内的部分是定义规则, {} 外的部分是定义的规则所要施加的对象范围,所以,以上代码的含义是:
含义是:
含义是:
含义是:
含义:
含义是:
含义是:
含义:
含义:
含义:
含义:
以上为笑来老师所用css中的主要内容,也是常用样式css的主要内容,其中关于表格的部分没有写出来,是觉得通常公众号文章最重要的是几个级别的标题、强调、引用、分隔线这几部分。
定义css文件时,一定注意标点符号的格式,用英文格式。
每一级标题中都可以自定义其大小、颜色、位置、行距等等。
用Markdown格式书写文档时,每一段结束时要空一行,这样在公众号编辑器中最终呈现效果 才有段间距。
从Ulysses或其他编辑器中复制Markdown文档到公众号编辑器时,在粘贴之后,尽量先完成全部的后续编辑之后再渲染,后续编辑包括插图、定义超链接等等。
因为根据自己的体验,渲染过两次之后,字体会变成公众号编辑器默认的字号大小16px,以后的渲染,字体大小会失效。如果不是用这个字体的朋友,要注意下。
在所有需要该公用css的html页面的head/head中的任意位置加入link href="CSS文件的相对路径或绝对路径" rel="stylesheet" type="text/css" /,注意css的路径。
例如:
style.css 在 css文件夹里,html文件和css文件夹在同一目录下
link href="./style.css" rel="stylesheet" type="text/css" /