资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

css公用样式,引用css样式表的方式有哪些

css公共样式能更高效,为什么不抽公共样式呢?

这个要看具体情况的,需要看场景来抽公共的。

成都创新互联公司坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站建设、网站设计、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的兴隆网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

比如:常见的抽公共是以模块为单位的集合,比如按钮、布局类的(如栅格布局flex)等,能经常用到的模块。

那如果所有属性都抽公共的话,会导致html页面里class的值太多,比如color属性抽一个,font抽一个,padding抽一个等。会使得class值太长,从而导致html页面的大小变大,同样会不利于页面的加载。

所以最好适中,把常用的抽公共,比较独立的就单独写样式。

CSS公共样式

如果你担心你的颜色值经常变动

建议,你用SCSS来写CSS代码

把经常,或者 可能 变动的值 写成变量。

具体,你可以查看scss的官网。

DIV+CSS页面公共区域样式问题?

在一个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}

使用CSS样式表有什么好处

使用css样式表的好处有:

1、使用较少的代码,来实现更多的功能;

2、使用属性继承方法,可以轻松地维护相同标记的不同样式;

3、代码比率更高的内容;

4、页面加载变得很快;

5、定义风格的灵活性。

知识补充:

CSS全称Cascading Style Sheet,表示层叠样式表。CSS用于改进HTML标记内容的呈现。使用CSS我们可以基于媒体定义不同的内容显示方式。

CSS的优点:

一、CSS的代码更少

在公共样式类中可以定义具有值的属性,并且能在不同位置使用相同的类,因此可以使用较少的代码,来实现更多的功能。更少的代码意味着更少的带宽消耗并且易于维护内容。

二、易于维护

当在全局或共同的地方定义样式时,任何变化都变得容易操作。例如,在网站中,使用特定的样式属性显示产品的所有名称。现在,可以通过在外部样式表中更改产品名称的样式类,可以在整个站点中更改样式。可以保留多个样式表并根据需要使用它们。使用属性继承方法,可以轻松地维护相同标记的不同样式。

三、代码(标签)比率更高的内容

可以通过使用CSS在页面中实现更高的代码比例内容,因为可以将样式声明转换为外部文件。这对搜索引擎的观点很重要。可以向蜘蛛提供较少的标签(样式标签)和更多内容以进行索引。

四、下载页面

当浏览器缓存样式表页面时,页面加载变得很快。每次使用相同CSS的同一站点的不同页面时,都不会从服务器加载样式类。

五、定义风格的灵活性

名称级联表示可以使用多种样式,并且优先考虑本地样式。可以覆盖声明的全局样式,并将样式本地分配给标记。

如何在CSS中调用公用css

在所有需要该公用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" /

div+css公共样式给div定好的margin:0 auto样式,怎么样在局部定义不居中

比如你给页面中所有的div定义样式为div { margin:0 auto;}

如果要给其中某个div重新定义,你可以用id选择器或者类别选择器,div id="left_box" class="left_box"文字/div

样式:

#left_box { 定义单独的样式将公用样式覆盖掉}

或者.left_box{ 定义单独的样式将公用样式覆盖掉}


网站题目:css公用样式,引用css样式表的方式有哪些
新闻来源:http://cdkjz.cn/article/dsiccoc.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:400-028-6601 / 大客户专线   成都:13518219792   座机:028-86922220