0031 如何使用css文件对网页内容和样式进行分离 - 产品运营 - 优派
o 1月前发布
上节课，学习了针对文字可以设置很多种样式。这节课，学习如何将内容和样式进行分离。上节课的课后练习1.将斜体字体效果去除2.将工作经历和工作经验(部分)这2行文字也做成简介这行文字的效果完成代码如下：页面效果如下：可以看到3个标题都是一样的效果了。但是，在编写代码的时候，发现一个问题，就是3个div的代码是一模一样的，复制起来很长，而且假如要将三个标题的字体全部都改小一点的话，要修改3处地方，有没有一个简便的方法，只改一次就好了呢？新建css文件并使用之前在div中利用属性style来设置css属性的方法是一种比较直接的方法，适合编写某个特殊的样式。如果有大量相同的重复的style的时候，一般不采用style属性，而是采用class属性来实现。也就是将相关的css属性和值存放到一个单独的以.css做为后缀名的文件中，然后html文件引用这个css文件，然后使用class属性来使用。首先，在代码编辑器中新建一个文件，编写代码如下，就是将div里面style的值复制过来，并增加换行，保存为index.css，注意保存到目录要和index.html位于同一个目录下：然后，在index.html当中在meta这一行下面新增一行，引入index.css然后，将div里面的style="......"这一大段删除，修改为class="bigtitle"：刷新页面，可以看到页面效果是一样的：接下来，要将标题的文字从30px修改为20px，修改index.css文件中的font-size的值为20px，然后注意保存文件：刷新页面可以看到页面的3个标题的字体同时变小了，只修改了一处地方就实现了目的：这里要注意一点，在css文件中，设置一个样式，需要样式起一个名字，例如这里的bigtitle，然后名称前面有一个点。点的意思表示这个样式需要用css="样式名"来使用。对特定标签使用css文件定义现在index.html里面还有一个地方使用了style，把它也挪到index.css文件中，插入如下代码：index.html删除掉body开始标签的后面的style的部分：刷新页面发现没有变化：修改index.css文件中body里面的background-color的值如下：刷新页面发现背景颜色变得更淡了：这里，发现对css文件中样式的定义有一点不一样，而且html文件中没有使用class="样式名"，为何样式仍然起作用了呢？关键点在于css文件中样式的名字为body，并且前面没有点。这样的设置方式就是告诉浏览器，这个样式只对body标签起作用，对其他标签不起作用，因此也不需要在body标签里面使用class了。关键点在于css里面样式名和html元素标签名一致来完成。假如把css文件里面的第一行的body修改为div，那么里面的背景颜色值就对所有的div起作用了。假如把css文件里面的第一行的body修改为dddd一个无效的名字，那么里面的背景颜色值就找不到对应的标签从而没有作用，这样的话body标签也就没有设置背景色了。这种设置方式在某些情况下是有好处的，可以灵活设置大量相同设置而无需设置class属性，特别是在不同的html页面都需要一样的设置的时候，只要html都是引用同样一个css文件，那么不同的html同样的标签都会自动匹配一样的样式了。设置通用样式和特殊样式如果要求所有页面中所有的文字都是12px，但是标题内容行都是20px，该如何做呢？先在css文件中的body里面增加文字大小的定义：index.html不做修改，刷新页面后可以看到，3段内容没有任何样式定义，但是所有的字体都变小了，同时标题内容行的字体大小仍然是20px，这是因为修改了body标签的样式，那么对于body里面包含的子元素标签，该样式都会起作用，除非子元素自己重新定义了这个样式：然后，需要将简介的具体内容部分的字体大小调整为16px，而工作经历和工作经验的字体仍然保持12px不变，应该这样修改：在index.css 里面增加一个样式，名字为smallcontent，里面只有font-size，如下：然后修改index.html里面在简介的具体内容前面加上&div class="smallcontent"&，最后一行删掉&br/&，然后加上&/div&，如下：刷新页面可以看到因为简介这块做了特殊样式定义，因此字体大小就变大了，其他2部分没有设置，则字体不变：内容和样式分离的好处通过上面将样式都放在css文件的方法，可以将页面内容和显示效果进行分离。分离的好处有很多：1.修改一处地方，同时可以影响多个地方，修改更方便。2.css文件中可以针对标签设置，也可以特殊定义样式名然后引用，可以更灵活，也可以减少样式重复定义。3.可以将内容的编写任务交给程序员，将样式的编写交给设计人员或者美工，从而互不干扰，提高开发效率。课后练习使用css样式将工作经历和工作经验部分的文字大小修改为14px，文字颜色修改为#222222。往期教程因为教程是系列教程，前后关联性非常强，请大家按照微信公众号【零基础学编程】的历史消息发布时间先后次序进行阅读。QQ群简介欢迎大家加入QQ群
零基础学编程，交流学习，共同进步。
创业者们，如果你或你的朋友想被优派网报道，请狠戳这里&&&&
文章总数0万总阅读量 最新文章
微信扫描，关注心理学与生活，在这里找到你内心的答案！
客服邮箱：
APP推广服务：
优派QQ2群()：
优派QQ1群()：HTML中样式分哪几种？CSS样式定义有哪些？
HTML中样式分哪几种？CSS样式定义有哪些？
,引入css的方法主要有行内式、内嵌式、导入式和链接式4种
&&&& 即在标记的style属性中设定css样式
方式本质上没体现出css的优势，因此不推荐使用。
&& 在对页面中各种
元素的设置集中写在&head&和&/head&之间的，对于单个页面来说，这种
方式很方便
&& 导入式格式如下：
&& &style type=&text/css&&
&&&&&&&& @import &mystyle.css&;
&& 格式如下：
&& &link href=&mystyle.css& rel=&stylesheet& type=&text/css&/&
采用后两种
方式后的显示效果略有区别，区别如下：
1。连接式：会在装载页面主体部分
之前装载css文件，这样显示出来的网页从一开始就是带有样式
&&& 导入式：会在整个页面装载完成后再装载CSS文件，对于有的浏览器来说，在一些情况下，如果网页文件的体积比较大，则会出现先显示无样式
&&&&&&&&&&&&&&& ，闪烁一下之后再出现设置样式
后的效果，从浏览者的感受来说，这是导入式的一个缺陷。
对于一些比较大的网站，为了便于维护，可能会希望把所有的css
类别放到几
个CSS文件中，这样如果使用连接式引入，就需要几
别导入CSS文件
如果要调整CSS文件的分
类，就需要同时调整HTML文件，这对于维护工作来说，是一个缺陷，如果使用导入式，则可以只引进一个总的CSS文件，在这个文件中再
导入其他独立CSS文件；而连接则不具备这个特性。
因此给大家的建议是：如果仅需要引入一个CSS文件，则使用连接方式，如果需要引入多个CSS文件，则首先用连接方式引入一个&目录&CSS文件，这个&目录&
CSS文件中再使用导入式引入其他CSS文件。
如果希望用javascript来动态决定引入哪
个css文件，则必须使用连接式才能实现
我的热门文章
即使是一小步也想与你分享CSS如何隐藏div及html内容-常见问题-Css教程-壹聚教程网CSS如何隐藏div及html内容
网页制作中我们经常会人为的隐藏一些网页元素，比如站长统计的图标，或者鼠标滑过隐藏效果，现在我们来讲讲CSS如何隐藏div及html内容。
CSS隐藏div盒子及html内容方法
Html中怎么使用CSS样式隐藏内容，又不影响代码功能使用。
我们常常想隐藏一些内容，比如网站添加第三方统计显示的图标，如何通过CSS隐藏，但又不影响网站统计;怎么让图片作为背景，但文字又不显示，如何隐藏等问题。divcss5给大家分享分享。
一、普通隐藏网页内容
CSS样式单词：display:none
假如我们想隐藏一段统计代码，但又不想显示出统计代码图标，又不影响统计功能，我们即可使用此CSS样式单词display:none(这单词意思不显示对象及对象内容)。
.tongji{display:none}
HTML片段：
说明：此DIV CSS隐藏，将隐藏对象DIV及对象内容，但功能不受影响。对于来说，无论你此样式是标签内使用还是向这个实例一般分开CSS与HTML，搜索引擎都会不读取和索引你隐藏内容，对于隐藏关键字的朋友来说，千万不要使用此CSS隐藏方式来隐藏关键字或锚文本链接，不然只是个徒劳。
二、图片做背景，隐藏图片上文字，又不影响A超链接 锚文本
我们平时会遇到，我们想以图片作为对象背景，内容用文字+超链接来做优化，同时又想隐藏文字，超链接不受影响，这样来优化网页，即不影响美观又达到了搜索引擎优化的效果。
所用关键CSS样式：text-indent:-9999px
div css隐藏内容样式方法
一般情况下，css隐藏的用途,如下：
1、对文本的隐藏
2、隐藏超链接(另类黑链)
3、对统计代码隐藏
4、隐藏超出图片
5、css隐藏滚动条
6、css隐藏div层
一、使用css隐藏方法用到CSS样式单词及对应解释
1、使用display:来隐藏所有信息(无空白位占据)推荐，CSS display手册查看
2、使用overflow:来隐藏溢出的文字或图片 适用推荐，css overflow手册查看
3、使用overflow-y:和overflow-x:hidden控制滚动条的隐藏与否，css overflow-y手册查看，css手册查看overflow-x
二、常见div css隐藏案例
1、css隐藏DIV及内容，完全隐藏内容与布局
解释：使用CSS单词display:完全隐藏文本及图片
&div style=&display:&&你是看不见我的&/div&
使用div 中css样式display:将使得div内的内容隐藏通过浏览器什么也看不见，并且隐藏的内容也不会占用空间，通常用于JS特效隐藏、隐藏统计代码显示图标。
通过对象盒子设置缩进样式(text-indent:-9999px)方法可以隐藏超链接文本内容
2、overflow: hidden 隐藏溢出DIV内容或图片
实例代码如：
我是可以看见的&br/&&br/&
&div style=&overflow: width:30 height:20&&你是看不见我的。&/div&
同样我也是可以看见的
案例截图：
隐藏溢出内容截图
使用css样式通过对&你是看不见我的&div css层设置固定的高和宽，然后通过overflow: hidden样式即可使得超出(溢出)固定的高宽内容隐藏同时也不占用被隐藏地方位置。
3、css隐藏滚动条
使用overflow-y:和overflow-x:hidden来隐藏或显示对应横或竖方向的滚动条。此案例可以进入css手册的overflow-y和css在线手册的overflow-x有详细的讲解对滚动条的设置隐藏或显示方法。
上一页： &&&&&下一页：相关内容出处：http://blog.csdn.net
CSS和HTML一样，也是一种标记语言，代码简单，通过浏览器解释执行，是一种用于为HTML文档定义布局的样式表语言。
HTML用于结构化内容；CSS用于格式化结构化的内容
CSS的出现弥补了HTML对标记属性控制的不足，如“背景图像重复”只能用CSS的“background-repeat”才能实现
CSS将网页内容与样式进行了分离，实现了对两者的“解耦和”，因此使得样式内容可以被很好的复用，大大提高了网站开发者的工作效率和后期的维护工作
指被包在内部的标签将拥有外部标签的的样式性质。
指当有多个选择器都作用于同一元素时，即多个选择器的范围发生了重叠，CSS该怎样处理？
若多个选择器定义的样式不发生冲突，则元素应用所有选择器定义的样式
若多个选择器定义的样式发生冲突（比如：同时定义了字体颜色属性），则CSS按选择器的优先级，让元素应用优先级高的选择器样式。
CSS定义的选择优先级从高到低为：
行内样式 & ID样式 &类别样式&标记样式
&title&css层叠测试21&/title&
&style type=&text/css&&
/*标记样式*/
p{color:yellow}
/*类别样式*/
.classStyle{color:blue}
/*ID样式*/
#idStyle{color:green}
&!--行内样式--&
&p class=&classStyle& id=&idStyle& style=&color:red&&Hello World&/p&
分别用四种样式设置“Hello World”的颜色属性，最终显示样式是“行内样式”的red。如下：
注：我们可以通过“
!important“属性强制改变选择器优先级，加！important的选择器优先级最高。
例：将上例中的标签样式语句改为“p{color:yellow !important}”，这样运行结果会变为黄色，通过加！important，将本来优先级最低的“标签样式”变为了优先级最高。
CSS在HTML中的三种用法：
（1）内联样式表：
直接将使用HTML元素的style属性来改变元素的样式，style属性可以应用于任意body元素（包括body本身）
&title&css内联样式表测试&/title&
style=&color:red&&这里应用css内联样式表，为红色字体&/p&
运行结果：
（2）内部样式表：
采用HTML元素的style属性，将样式表的内容定义在HTML文件的&head&标记内，例：
&title&css内部样式表测试&/title&
&style type=&text/css&&
.csstest{color:blue}
&p class=&csstest&&这里应用css内部样式表，为蓝色字体&/p&
运行结果：
（3）外部样式表：
指引用一个样式表文件（是一个扩展名为.css的文本文件），可以将一个文件应用于多个html页，使得
样式可复用，大大提高了网站开发效率。
引用一个样式表有两种方法：（1）链入外部样式表 （2）导入外部样式表
（3.1）链入外部样式表：
在HTML文件的&head&区域内使用&link&标记进行链接，语法：
&link rel=”stylesheet” type=”text/css”href=”url”/&
其中url为样式表文件的地址，可以是相对地址和绝对地址
&title&css外部样式表-链入外部样式表测试&/title&
&link rel=”stylesheet” type=”text/css” href=”style/style.css”/&
&p class=&csstest&&这里应用css外部样式表，为红色字体&/p&
原理：&link rel=”stylesheet”type=”text/css” href=”url”/&告诉浏览器，在执行html文件时，应使用相应url下的css文件进行布局和格式化。（文件style.css放在style目录下，代码为 .csstest{color:red}）
（3.2）导入外部样式表：
在HTML文件的&style&
区域内引用一个外部样式表文件，语法如下：
&style type=&text/css&&
@import url(样式表目录地址)
@import声明可以放到&head&标记之外，也可以放到&head&标记之内，但根据语法规则，一般放到&head&内使用，举例如下：
&title&css外部样式表-导入外部样式表测试&/title&
&style type=&text/css&&
@import url(style/style.css)；
&p class=&csstest&&这里应用css外部样式表的导入外部样式表形式，为红色字体&/p&
原理同上面的“链入外部样式表”;
注：@import声明后的“； ”不能省略，此外，某些浏览器可能不支持导入外部样式表的@import声明，所有最好别用这种方法，见到了认识即可。
作者：wang 发表于 19:39:06
阅读：101 评论：1
相关 [css html] 推荐：
- 博客园_首页
JavaScript(交互行为).
&meta name=&参数& content=&name属性值&/&.
&title&网页标题&/title&.
- ITeye资讯频道
当前在互联网上，任何一个稍微复杂的网站或者应用程序都会包含许多HTML、CSS和JavaScript. 随着互联网运用的发展以及我们对它的依赖性日益增加，设定一个关于组织和维护你的前端代码的计划是绝对需要的. 当今的一些大型互联网公司，由于越来越多的人会接触到日益增加的前端代码，它们会试图去坚持代码的模块化.
- Albert - [米随随] s5s5
如题，以后同人讲代码时可以用到. 日 -- MSN中文专业站 (0). 日 -- 读“疲倦的博客们”有感 (9). 日 -- 基于web2.0的网站创意 (33).
- chacoo - 所有文章 - UCD大社区
本文标题的这副图片，是用Phosotshop制作的. 但是，在搜索引擎中你却无法搜索到它，搜索引擎还没有强大到能够识别图片里面的文字. 并且由于图片的体积不算太小，可能网速慢的网友在浏览的时候不得不耐心的等待图片的刷新. 那么，有没有一种新的方法可以避免这些缺点呢. 有的，HTML5和CSS3就可以满足你的需求.
- CSDN博客推荐文章
// 根据id获取dom元素. // 将label绑定到input上作为输入提示. // 获取输入焦点时，隐藏提示标签. // 失去输入焦点时，判断输入框的是否有值，有则显示提示标签. // 窗口加载完dom结构时. &label for=&txt-search& id=&lbl-search& class=&lbl-default&&请输入要搜索的内容&/label&.
- SHTION官方网站
HTML 和 CSS 代码规范究竟是怎么样的. 做网站时，
HTML 和 CSS 代码有什么要求. HTML 和 CSS 代码的写法是否影响网站的SEO. 写好
HTML 和 CSS 代码需要注意些什么. 一般大型WEB站点开发设计人员，要求使用者具有一定的
HTML、CSS基础知识，对原代码具有较强的控制能力.
- Ling:(TM) patient() - 博客园新闻频道
　　写HTML5和CSS3，以及JavaScript，前端开发者有了大大的用武之地. 大家都在用很多的工具和技术来武装自己，以加快前段的开发. 　　本文分享了6中最有效的方法，希望能提供你的效率，为你节约时间. Dynamic CSS（动态 CSS）. 　　如果你想加速你的CSS代码编写，那么你需要学习并掌握动态CSS.
- Mikel - 博客园-首页原创精华区
　　当你需要在短时间内设计出一个网站的时候，网站模板就非常有用了. 这也就是为什么这些设计模板已成为设计领域的最新趋势的原因. 在这篇文章中，收集了各式各样的网站模板，您可以免费下载使用，希望这些设计模板不仅带给您灵感，也让您回到创作轨迹. Coffee Maker
( 演示 | 下载 ). BusinessTemplate
( 演示 | 下载 ).
- ITeye资讯频道
英文原文： 13 Most Used Speedy Tools To Write CSS And HTML Code. CleverCSS是个用于CSS开发的小型标记语言，从Python中得到灵感. 可以开发出干净、结构清晰的样式表. 在许多方面它比CSS2都更简洁、强大. 它与CSS最明显不同之处在于语法：CleverCSS采用了缩进式语法而不是对齐.
- ria之家--RIA三部曲：jquery、ext、flex
最近需要配合用研同学做个问卷调查的邮件模板，表现形式不是纯文本，需要有美观的布局和多彩的内容，也就是说邮件里面需要用html/css来表现内容. 这种应用已经非常普遍了，如今邮箱里面充斥着各种facebook动态、团购网站推荐、支付宝提醒等等的富文本邮件，这就是EDM（Email Direct Marketing ）电子邮件营销，那如何利用html/css/js更好地在邮件客户端（web邮箱就不讨论了）中表现富文本内容呢.
坚持分享优质有趣的原创文章，并保留作者信息和版权声明，任何问题请联系：@。推荐这篇日记的豆列
······}