CSS样式论文-盘古文库

CSS样式论文（精选9篇）

CSS样式论文第1篇

1 需求分析

如何将自己的qq空间布置的越来越漂亮，如何提高用户空间点击率以及浏览量，qq空间文章的精美图文混排越来越成为空间布置的一个重要组成部分。很多用户由于不懂html代码，所以不知道如何进行比较美观的文章图文混排，该文给出了一个实例来具体讲解这种qq空间图文混排方法的使用。

2 前提条件

拥有qq号码，开通qq空间，准备好一段文字和几张图片。

3 举例

现在以作者自己的空间为例来讲述一下css样式在qq空间文章编辑中的应用，重点讲述以文章编辑的图文混排的方法。具体操作步骤如下：

第一步：打开自己的qq空间如图1所示。点击写日志按钮。

第二步：选择一个信纸样式，在日志编辑区域输入准备好的一篇文章，如下图2所示;点击按钮，点击按钮进入如图3的界面;

第三步：给第一段文字加代码，做底纹、首字下沉、边框等;具体代码为：

给文字加边框，给文字加底纹，给文字做首字下沉，做分栏，做图文混排。

首字下沉的代码单独为：

然后插入第一段的图片，并且对第一段图片做代码如下：

第四步：做图片的跑马灯。跑马灯代码如下：

第五步：给第二段文字做分栏、底纹、边框操作，具体代码为：

以此类推，制作第三段文字靠右分栏。代码为：

大功告成!

第六步：将图片上传到空间，然后将照片地址换成空间的照片地址，如图4所示;最后点击，最终效果如图5所示。

3 小结

以上我们通过一个实例来详细讲述了通过CSS样式来给qq空间文章进行精美的图文混排，讲述了给段落文字进行底纹、边框、首字下沉分栏以及图文混排的各种方法，这里我们把所有的CSS样式写在style=“”中，其次首字下沉以及分栏的操作都是通过CSS代码中的浮动代码来实现，跑马灯效果主要通过对marquee写入CSS代码来实现。掌握好CSS样式可以使我们的空间装扮得更加美观，更漂亮的东西留给我们读者去认真思考!

参考文献

[1]姜楠.dreamweaver 8完美网页设计与制作[M].北京:中国青年出版社, 2006.

电子教案-CSS层叠样式表第2篇

学习目标：

1.了解样式表的概念

2.掌握样式表的分类及编写规则的语法 3.掌握CSS样式表的使用要点导航：

1.样式表简介 2.样式表的规则 3.样式表中的属性 4.样式表的引用案例带样式表的网页

步骤1：通过依次单击任务栏上的【开始】→【程序】→【附件】→【记事本】菜单命令打开记事本。

步骤2：在记事本的编辑面板中输入如下代码代码，创建了使用样式的页面css1.html

样式表举例

这段文字将显示为红色

这段文字的背景色为黄色

这段文字将以黑体显示

CSS样式论文第3篇

关键词：案例教学；CSS样式布局；教学运用

中图分类号：G71 文献标识码：A 文章编号：1673-9132（2016）29-0103-02

DOI：10.16657/j.cnki.issn1673-9132.2016.29.063

《CSS样式布局》是网页制作的基础入门课程，制作网页基本上均采用CSS样式布局，但由于中职生基础薄弱、学习能力参差不齐等原因，在传统的教学模式中，学生仅仅停留在获得那些固定的原理、规则的层面上，教学收获不大。

案例教学法是一种通过分析各种案例来开展教学活动的教学方法，在教师的精心策划和指导下，运用典型案例将学生带入特定教学情境，精心设计各种案例，努力实现教学理念、教学模式等的根本变革，从而带动教学效益和学生实践能力的全面提高。

一、案例教学的好处

（一）学生真正成为课堂主人

将知识点、经验、技巧等诸多因素融入案例教学，可以使学生在教学中获取较大的自主权。例如，在讲授项目列表时，学生原先在word中学过相应知识，所以，对此并不怎么感兴趣，但采用菜单案例引入时，他们表现出了前所未有的积极性，有的学生主动借助网络去查找方法，使课堂焕发了生机。

（二）提升教师的业务水平

“CSS样式布局”是一门实践性很强的课程，面对基础较差，积极性低的中职生，在教学中必须选择适宜的案例进行教学。这就要求教师不仅要有娴熟的学科知识，还要“懂”学生。例如，介绍CSS盒子模型时，采用班级照片墙的案例来讲授，让每位学生都出现在案例中，课堂气氛顿时活跃起来，原本枯燥的教学内容变得生动，学生自然乐意学。

（三）增进师生交流

学生历来有 “畏师性”，中职生因本身学习成绩不理想、自信心不足，很少主动和教师交流，而教学相长需要建立在师生充分互信和交流的基础上，但中心话题还是要回归到教学内容上。例如，抓住男同学喜欢玩网游的特点，选择一些游戏网页作为案例教学内容；女同学喜欢狂淘宝店，选择一些作为精美布局的网店作为案例教学内容，投其所好，学生学习兴趣自然浓了，授与学也在和谐的氛围中循序渐进地升华。

（四）学以致用

随着计算机网络的普及，网页布局技术的发展十分迅速，教材的滞后性就暴露出来。采用案例教学后，能很好地对这些知识内容进行延伸拓展，针对教材的不足，教师可以选择一些实用性较强、紧跟当前主流的设计理念的典型教学案例展开教学。例如，时下比较流行的CSS滑动门技术，先进之处即背景图像的可层叠性，并允许它们在彼此之上进行滑动，以创造一些特殊的效果。课上，教师重点讨论剖析了“滑动门”技术，既让学生开拓了眼界，又得到了充分煅练，逐步帮助学生形成自己的知识体系，以便将来更好地适应工作岗位。

（五）缩短了教学情境与实际生活的差距

让被培训者学会像某一特定的专业人员一样思考，即让学生像一个真正的网页设计师那样去思考问题、分析问题、解决问题，这往往是传统的课程中所不能涵盖的，要把一些真实的问题展现在学生面前，要求他们像一个成熟的、老练的网页设计师那样去做出反应，也就给他们提供了像网页设计师一样去思维的实践机会，增强了他们处理实际问题的本领。同样，由于案例来自于知识的延续，是发生在学生实际生活身边的事情，他们就会设想可能遇到的种种障碍，解决问题的多种可能方案，这样一旦他们走上工作岗位，就可以把这些真才实学应用其中。

二、怎样进行案例教学案例

在案例教学中，教师首先要做的不是匆匆忙忙地去选择若干案例，而是要确定掌握基本原理，然后再选择出能够说明这些原理、理论的案例来，可以充分借助网络、各大出版社官网资料库或借鉴他人分享的经验。

（一）准备阶段

教师课前的准备始于课程设计，在课程设计中选择并确定案例，在完成课程设计后，教师就要着手做教学前的其他准备工作了，其中主要是教学过程的安排。

1.仔细地通读教材，吃透教材，分析所选案例中运用的主要知识点，利用各种资源，找出最具代表性的案例。

2.课前教师要根据案例和教材内容，把握本课的教学重难点，让学生根据案例问题去探索和思考课本知识，学会运用课本上的理论知识去解决问题；或让学生在生动的教学情境中去发现问题、提出问题，并寻找相应的解决方法。

3.考虑案例的延续性，如何帮助学生从此案例中找出解决下一个案例（实际问题）。教师要考虑知识的完整性，一门学科不能以一个个首尾不能衔接的分散案例代替，案例高于教材，但必须源于教材，一般采用书本各章各节的重难点作为案例的重难。

4.创造特定教学情境，考虑到教学交互、学生能力培养，教师要兼顾到不同层次的学生，设计不同目标。问题的设置要切合学生的认知发展水平和思维习惯，设置问题要循序渐进，由简单到复杂，从课本走向课外，由案例到教材内容，难度适宜，有典型性。

（二）实施阶段

1.案例的选择。教师可以适当借助优秀的案例来展开教学。例如，介绍CSS样式规则时，教材配套光盘中的案例就非常详细，此时就可以用它来进行教学，对介绍不详细的部分进行适当补充。如光盘中的背景图片的处理就过于简单，在教学中笔者替换成“一张背景的导航栏”案例，从背景图片的位置、重复等出发，对教材内容进行了必要的补充又很好地结合了当前主流技术。

2.案例的拓展。进行案例拓展，就是创设新的教学情境，提出问题，让学生去思考并解决问题，它是对案例教学效果的最好检验。例如，介绍了“1-2-1”的网页布局案例后，学生能解决“1-3-1”的网页布局，那证明他们的确掌握了。

（三）总结阶段

教育家苏霍姆休斯基说：“一堂好课并不是教师一字不差地把事先制订好的课时计划搬到课堂上来。一堂成功的课事先也只能由教师在心中粗略地勾画出它的轮廓，而它的诞生只能是在课堂上。”因此，一个好教师应当把握课堂教学的发展逻辑，洞察学生脑力劳动的细微变化，从而能够对计划作适当变动。”

1.课内总结。知识点、书本的回归，让学生回归到知识体系中。例如，介绍DIV布局时，学生仅仅掌握几个固定模式的案例是远远不够的，必须要了解布局的实质，所以在案例教学中要针对出现的不足，在案例教学基础上采用多样的教学模式，扩充学生的认知体系，使他们能够真正获取知识、掌握知识、运用知识。

2.课外总结。针对教学过程中所发现的问题，教师需要进行总结，以避免问题进一步被继承到新的案例中。而案例库的积累也十分必要，大容量案例库的存在将使教学本身更趋近于实际。总结案例教学的得失，不断积累经验也是提高案例教学水平重要途径之一。

笔者对案例教学仍处在摸索阶段，但只要学生有进步，教师就应当做更多的努力，帮助他们。教学模式并不是唯一的，而好坏的评判标准只一个：最有效的就是最好的！

探析CSS样式表的不同用法第4篇

CSS样式表根据应用的范围可分为内部样式表和外部样式表。内部样式表是包含在HTML文件中，可分为行内式和内嵌式。外部样式表是一个完全的纯文本文件，独立于HTML文件，通常以“css”为扩展名作为单独的文件来使用，可分为链接式和导入式。

1.1 行内式

行内式是所有样式方法中最为直接的一种，直接对HTML的标记使用style属性，然后将CSS代码直接写在其中。例如：

行内式是最为简单的CSS使用方法,但由于需要为每一个标记设置style属性,后期维护成本很高,网页容易过“胖”,因此不推荐使用。

1.2 内嵌式

在HTML页面内部定义的CSS样式表，叫做内嵌样式表，也就是在HTML文档的head部分中，使用style标签并在该标签中定义一系列CSS规则。例如：

内嵌式样式表中CSS的代码部分被集中在了同一个区域,方便了后期维护,页面本身也大大瘦身。但如果一个网站,拥有很多的页面,对于不同页面上的同一标记都要采用相同的风格时,内嵌式的方法就略显麻烦,维护成本也高,因此仅适用于对特殊的页面设置单独的样式风格。

1.3 链接式

链接式CSS样式表是使用频率最高，也是最为实用的方法。将HTML页面本身CSS样式风格分离为两个或多个文件，实现了页面框架HTML代码与美工CSS代码的完全分离，使得前期制作和后期维护都十分方便，网站后台的技术人员与美工设计者也可以很好地分工合作。

外部CSS样式表是一个以.css为后缀的外部文件，定义一个外部样式表可以链接到整个网站的所有页面中，使网站整体风格统一、协调，并且后期维护的工作量也大大减少。语法：

其中rel属性表示样式表将以何种方式与HTML文档结合。rel取值stylesheet，表示指定一个外部的样式表。觹.css是单独保存的样式表文件。

该条语句放在所有需要使用外部样式表的HTML文件的

和

标记之间，同一个CSS文件可以被不同的HTML文件链接使用。这样既可以统一整个网站的页面风格，又方便了后期维护，如果整个网站要进行样式上的修改，就只需要修改与之链接的外部样式表即可。

1.4 导入式

导入样式表与链接样式表的功能基本相同，只是在语法和运作方式等方面略有区别。采用import方式导入的样式表，在页面下载完以后才被加载。而链接式样式表是与HTML文件同时加载。

在HTML文件中导入样式表，常用的有如下几种@import语句，可以任选一种放在标记之间。

导入样式表不仅仅可以出现在HTML文件的头部，在CSS文件内也可以导入其他的样式表，当网页需要引入几个外部CSS文件时，可以使用link引入一个CSS，然后在这个CSS文件中用@import方式引入其它几个CSS文件，这样更容易管理。

2 CSS样式表的不同应用

在网页制作中CSS的这几种方式的用法。当有多个网页要统一外观和格式，采用外连CSS文件的方式，即外部样式表，这样网页的代码大大减少，修改起来非常方便。而导入式通常会在CSS文件中使用，这样做的好处是，把多个样式表导入到一个样式表中，在页面里只需要导入一个样式表即可。只在单个网页中多处使用的特殊样式，采用内嵌式样式表。只在单个网页的一、两个地方才用到的格式，采用行内插入方式，即行内式。

外部样式表的链接式和导入式虽然都是要单独建立一个以css为扩展名的外部样式文件，但还是有些不同，具体表现在以下几个方面：

(1)加载顺序有差别，link是页面加载的时候同时加载，@import是在整个页面加载完之后加载css文件的，如果页面加载很慢，会出现一开始无样式，然后才恢复正常(加载样式后的页面)，Link没有这个问题。@import会使得CSS整体载入时间变长，并且在IE中会导致文件下载次序被更改，例如放置在@import后面的script文件会在CSS之前被下载。

(2)link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@impor就只能加载CSS了。

(3)浏览器的兼容性不同，link在支持CSS的浏览器上都支持，而@import只在5.0以上的版本有效，要兼容一些老版本的浏览器，最好还是使用link，其通用性更强。

在实际应用中，网页上的同一个对象可能由多个样式修饰，样式如果冲突，则采用高优先级样式;如果不冲突，则采用叠加的样式效果，这实际上也是CSS层叠样式表名称的由来。在IE浏览器中，行内式CSS优先级最高，对于内嵌式与链接式样式发生冲突，样式的优先级遵循“就近优先”的原则，距离所修饰对象越近的样式，其优先级越高;若链接式与导入式发生冲突，也遵循此原则;若内嵌式与导入式发生冲突，那不遵循此原则，内嵌式优先于导入式。例如：

“正文内容”显示为01.CSS样式定义的红色，link距离p标签比import近。如果二者位置互换，“正文内容”显示为02.CSS样式定义的绿色。

3 结束语

CSS样式表在网页制作上发挥的作用越来越大，开发一个优秀的符合Web标准的网站需要网站后台的技术人员与前台的美工设计者很好地分工合作。制作出的网页更要便于后期维护，这些都需要使用CSS技术，因此网页制作离不开CSS。在HTML中使用CSS的方法还有许多地方值得去深思、去探讨。

参考文献

[1]温谦.CSS网页设计标准教程[M].北京:人民邮电出版社,2009:20-23.

CSS样式论文第5篇

第一步:学会如何组合选择器

什么是选择器?

如果你还不知道什么叫做”选择器”，你可以先参考一下w3schools.com的CSS语法概述。

未优化的CSS代码

在下面的图例中，你会看到来自三个不同选择器的同样的CSS属性声明。

点击小图浏览清晰大图

优化的CSS代码

你可以将上面的css代码优化组合，让所有CSS选择器使用同一组属性。每个选择器之间用逗号分割开，像下面这样。

h2,p,.block{

font-size:1.5em;

padding:10px10px10px25px;

margin:10px0;

border:1pxsolid#ddd;

background:#f0f0f0url(crown.gif)no-repeat5px10px;

}

查看Demo实例

第二步:了解CSS选择器优先级

什么是CSS优先级?

选择器优先级是用于在CSS代码中同一个选择器使用不同属性时CSS优选处理哪些属性的规则。对选择器优先级不了解的话可以参考:Juicy Studio –选择器优先级

未优化的CSS代码

理解优先级规则中不同等级重要性是很必要的，如果写了同样优先级的CSS声明将有可能导致代码冲突和代码臃肿。

点击小图浏览清晰大图

查看Demo实例

优化的CSS代码

当你完全掌握CSS选择器优先级之后，你便能通过合并统一的属性声明来所见代码量，然后再单独声明元素的独有属性。你会很快找到优化CSS代码的技巧，对完成合并和匹配代码。下面是关于优化上图代码的实例:

h2{

font-size:1.5em;

padding:10px10px10px25px;

margin:10px0;

border:1pxsolid#ddd;

background:#f0f0f0no-repeat5px10px;

}

h2.best{background-image:url(crown.gif);}

h2.fav{background-image:url(heart.gif);}

h2.comments{background-image:url(balloon.gif);}

h2.twitter{background-image:url(balloon_twitter.gif);}

#featuredh2.twitter{

background-color:#fffdd7;

border:1pxsolid#ddd991;

}

你还可以参考以下相关文章:

HTML Dog – 优先级

Smashing Magazine – 一些你应该知道的东西

CSS Tricks – CSS优先级特性

Jonathan Snook – 理解CSS优先级

第三步:学会如何合并类和ID

和之前类似，你也可以通过匹配合并class名和id值来优化你的CSS代码。请记住,为同一个元素添加不同的多个class，你就可以通过组合不同的属性声明在实现你希望的效果。在适当的位置添加id属性也是可以让你对样式有更多的控制权。

HTML

Best of

网站重构CSS样式表的优化技巧第6篇

1 使用css缩写

使用缩写可以帮助减少你CSS文件的大小, 更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》, 这里就不展开描述。

2 明确定义单位, 除非值为0

忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100, 但是在CSS中, 你必须给一个准确的单位, 比如:width:100px width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外, 其他值都必须紧跟单位, 注意, 不要在数值和单位之间加空格。

3 区分大小写

当在XHTML中使用CSS, CSS里定义的元素名称是区分大小写的。为了避免这种错误, 我建议所有的定义名称都采用小写。

class和id的值在HTML和XHTML中也是区分大小写的, 如果你一定要大小写混合写, 请仔细确认你在CSS的定义和XHTML里的标签是一致的。

4 取消class和id前的元素限定

当你写给一个元素定义class或者id, 你可以省略前面的元素限定, 因为ID在一个页面里是唯一的, class可以在页面中多次使用。你限定某个元素毫无意义。例如:

可以写成

这样可以节省一些字节。

5 默认值

通常padding的默认值为0, background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突, 可以在样式表一开始就先定义所有元素的margin和padding值都为0, 象这样:

6 不需要重复定义可继承的值

CSS中, 子元素自动继承父元素的属性值, 象颜色、字体等, 已经在父元素中定义过的, 在子元素中可以直接继承, 不需要重复定义。但是要注意, 浏览器可能用一些默认值覆盖你的定义。

7 最近优先原则

如果对同一个元素的定义有多种, 以最接近 (最小一级) 的定义为最优先, 例如有这么一段代码

Update:Lorem ipsum dolor set

在CSS文件中, 你已经定义了元素p, 又定义了一个classupdate

这两个定义中, class=update将被使用, 因为class比p更近。你可以查阅W3C的《Calculating a selector’s specificity》了解更多。

8 多重class定义

一个标签可以同时定义多个class。例如:我们先定义两个样式, 第一个样式背景为#666;第二个样式有10 px的边框。

在页面代码中, 我们可以这样调用。

这样最终的显示效果是这个div既有#666的背景, 也有10px的边框。是的, 这样做是可以的, 你可以尝试一下。

9 使用子选择器 (descendant selectors)

CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码:

这段代码的CSS定义是:

你可以用下面的方法替代上面的代码

样式定义是:

用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。

1 0 不需要给背景图片路径加引号

为了节省字节, 我建议不要给背景图片路径加引号, 因为引号不是必须的。例如:

但是IE5/Win不能正确显示这个定义, 我们采用一个非常有用的技巧来解决:用text-align属性。就象这样:

第一个body的text-align:center;规则定义IE5/Win中body的所有元素居中 (其他浏览器只是将文字居中) , 第二个text-align:left;是将#warp中的文字居左。

1 1 导入 (Import) 和隐藏CSS

因为老版本浏览器不支持CSS, 一个通常的做法是使用@import技巧来把CSS隐藏起来。例如:

@import url (main.css) ;

然而, 这个方法对IE4不起作用, 这让我很是头疼了一阵子。后来我用这样的写法:

@import main.css;

这样就可以在IE4中也隐藏CSS了, 呵呵, 还节省了5个字节呢。想了解@import语法的详细说明, 可以看这里《centricle’s css filter chart》

1 2 针对IE的优化

有些时候, 你需要对IE浏览器的bug定义一些特别的规则, 这里有太多的CSS技巧 (hacks) , 我只使用其中的两种方法, 不管微软在即将发布的IE7 beta版里是否更好的支持CSS, 这两种方法都是最安全的。

1 2.1 注释的方法

(a) 在IE中隐藏一个CSS定义, 你可以使用子选择器 (child selector) :

(b) 下面这个写法只有IE浏览器可以理解 (对其他浏览器都隐藏)

1 2.2 条件注释 (conditional comments) 的方法

另外一种方法, 我认为比CSS Hacks更加经得起考验就是采用微软的私有属性条件注释 (conditional comments) 。用这个方法你可以给IE单独定义一些样式, 而不影响主样式表的定义。

1 3 调试技巧:层有多大

当调试CSS发生错误, 你就要象排版工人, 逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色, 这样就能很明显看到层占据多大空间。有些人建议用border, 一般情况也是可以的, 但问题是, 有时候border会增加元素的尺寸, border-top和boeder-bottom会破坏纵向margin的值, 所以使用background更加安全些。

另外一个经常出问题的属性是outline。outline看起来象boeder, 但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性, 我所知道的只有Safari、OmniWeb、和Opera。

1 4 CSS代码书写样式

在写CSS代码的时候, 对于缩进、断行、空格, 每个人有每个人的书写习惯。在经过不断实践后, 我决定采用下面这样的书写样式:

当使用联合定义时, 我通常将每个选择器单独写一行, 这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格, 每个定义也单独写一行, 分号直接在属性值后, 不要加空格。

我习惯在每个属性值后面都加分号, 虽然规则上允许最后一个属性值后面可以不写分号, 但是如果你要加新样式时容易忘记补上分号而产生错误, 所以还是都加比较好。

最后, 关闭的大括号}单独写一行。

摘要：网站重构能够实现加快网页解析的速度, 实现信息跨平台的可用性以及更加良好的用户体验, 通过使用CSS, 你可以将一个HTML文件的内容与有关它的表现形式或风格的信息分离开来。这就使你可以应用准确的格式化并达到想要得到的版面设计, 而无需使用可能会让屏幕阅读器和专门的浏览器软件产生困惑的HTML代码。

浅谈大型网站中CSS样式表的构建第7篇

对于中小型网站来说,由于页面数量比较少,一般只需要1到3个CSS样式表文档,即可完成对整个网站的样式控制,但当网站到达一定规模以后,包含的模块也越来越多,每个模块中页面风格各不相同。如果CSS代码过于集中,会造成代码的不必要调用。而文档过多,又会造成管理、维护、重构不方便。科学有效地对整个站点的样式代码进行架构,合理地进行文档组织与调用,能够让文档加载更加流畅,后期维护更加便捷。

一、样式表构建与编写优化原则

1. 标准化原则

随着手机平板等移动端设备的增多,对CSS样式表的编写,提出了更严格的要求。只有代码编写规范化,标准化,才能更好地兼容各种不同的设备。

标准化主要体现在:属性书写顺序;选择器命名规则;页面结构控制;文档命名与组织规则。

2. 重构性强原则

网站的定制化发展,要求页面在针对不同时间不同人物时,能够呈现出不同的风格。CSS文档的构建,必须充分考虑页面的重构性。网站重构不是一种技术,不是单纯的css+div,更不是标准,是一种思想,是一种理念。真正的页面重构应该包括页面结构、交互行为、内容表现三层次的分离以及优化,行内分工优化,以及以数据及体验为主导的交互优化。

3. 模块化原则

以功能块为单位进行程序设计,最后通过模块的选择和组合构成最终产品。这种软件开发思想目前也被运用在了网站前端开发中。如我们可以提取公用功能模块,如导航、版权信息等,实现部分公用模块的复用。

4. 求简去繁原则

CSS代码本身并不难,但在大型项目中,如果编写不注意就会变得很多很乱。特别是团队开发时,问题就会更严重,因此高效简洁易懂也是文档编写追求的原则。主要需要注意以下几点:不影响页面的布局;去掉不必要的样式;合并相同的样式;尽可能缩小样式的大小。

二、样式表构建优化手段

1. 文档组织优化

大型网站样式表文档组织没有固定的规则,针对不同情况,有几个基本策略可供参考:

(1)基于页面结构。我们可以针对页面结构比较相近的页面,创建一个CSS样式表文件进行控制。将默认字体、链接等共享属性,单独写入一个全局CSS文档。如global.css、index.css、content.css、list.css。

(2)基于页面布局。如果多张页面中有相同外观的元素,如网站的导航条,底部版权,头部广告,侧栏等。可以针对这些元素,单独创建CSS文档加以控制。

(3)基于标记元素。如果整个网站中不同页面中有很多表单、标题、项目列表等元素的外观较为统一,可以单独创建一个样式表文档,控制常用元素的外观,需要的页面中加以调用即可。

(4)基于网站功能模块。可以针对同一功能模块的相关页面,设计一个样式表文档控制外观,如订单相关、管理员后台,新闻搜索与显示等。命名为orders.css、admin.css、shownews.css等。

2. Reset优化

许多网站的reset.css的文件贪大贪全,造成代码过于繁杂。笔者认为,reset.css重置文件的编写应根据自身站点进行重置。有些地方可以适当精简。如有些不常用的标签,不需要重置。

3. HTML标签的语义化

“语义化”指的是计算机在更少的人为设定解释的情况下能够研究和收集信息,让网页直接能够被浏览器理解,提升执行效率。HTML标签语义化是让大家直观的认识标签(markup)和属性(attribute)的用途和作用,如Hx系列一看就明白是标题,HTML5中更是增加了许多语义标签,如header、article、aside等。

4. 合理使用嵌入式样式

在一些较为重要,或访问次数相当多等页面(如首页、订购页、详情页等)中,可以考虑使用嵌入式CSS代码,既能防止加载过多等无用代码,在带宽较为紧张的情况下也能让重要的内容可以正常显示。

三、结语

大型项目的CSS样式架构经常需要在追求灵活还是严谨、高效还是可扩展等问题上纠结,解决方法还是需要具体问题,具体分析,应该说没有最优秀,只有最适合的架构方案。

参考文献

[1]张明.网页设计中的CSS技术及优化分析[J].信息与电脑(理论版),2016(1).

[2]李梦,江山,黄幸,安立鹏.基于前端的WEB优化设计[J].电子设计工程,2016(9).

CSS样式论文第8篇

1.1 CSS兼容问题

由于不同的浏览器, 甚至同一浏览器的不同版本对C SS的解析不一致, 从而展示出不同的页面效果。写出针对不同浏览器且具有相同展示效果的C SS code就称为C SS hack。常用的C SS hack有两种方式, 内部hack和选择器hack, 其中第一种最常用。

1.1.1 C SS内部hack

正常的css写法是:.w ap{w idth:100px;height:100px;bor-der:2pxsolid#333;background:#ddd;}

但是引入C SS3以后, 就增加了这样的写法:

.w ap{w idth:100px;height:100px;border:2px solid#333;background:#ddd;border-radius:10px;-m oz-border-radius:10px;-m s-border-radius:10px;-o-border-radius:10px;-w ebkit-border-radius:10px;}

由于各个浏览器有自己的表现形式, 所以加上不同的前缀表示支持不同的浏览器, 这是C SS hack基本理论的一种。具体写法规则如下:

根据N et M arket Share数据来看, 占据全球浏览器排行榜首位的仍然是IE浏览器, 总市场份额高达58.18%, 所以还需要对各个IE版本的浏览器设定不同的数值来解决版面移位问题。具体使用规则如下:

1.1.2 选择器hack

选择器hack主要是针对IE浏览器, 具体使用规则如下:

示列:针对IE9hack的写法, :root.w ap{w idth:100px;}

1.2 CSS常见语法问题

1.2.1 选择器

使用选择器时可以对选择器进行分组, 被分组的选择器可以共用相同的声明, 分组之间用逗号分隔。如下示列:.A, .B, .C{w idth:100px;}, 这个时候.A, .B, .C拥有相同的格式样式。

1.2.2 继承问题

C SS中的继承是指子元素继承父元素中的属性, 如下示列:B ody{color:#333;}。当一个网站的C SS定义body元素使用色值为#333的字体颜色时, 所有继承的子元素, 例如p、td、ul、li、dl、dt等文字都会使用色值为#333的字体颜色。

1.2.3 覆盖问题

在制作网页时, 有时并不希望子元素继承父元素的属性, 例如p标签的字体不希望使用色值为#333的字体颜色, 这时可以针对p元素定义一个其他字体颜色即可。

2 CSS优化方法

2.1 使用Reset但并非全局Reset (重置CSS)

不同浏览器元素的默认属性有所不同, 使用R eset可重置浏览器元素的一些默认属性, 以达到浏览器的兼容效果。但需要注意的是, 不要使用全局R eset:

*{m arign:0;padding:0;}

这样不仅效率低, 而且还会导致一些不必要的元素也重置了内、外边距。所以应该这么做针对以上写法, 这又不是一成不变的, 可以根据项目不同修改上面的代码。/*清除内外边距*/

body, h1, h2, h3, h4, h5, h6, div, hr, p, dl, dt, dd, ul, ol, li, im g, span{

m argin:0;padding:0;border:none;

}

2.2 良好的命名习惯

C SS的命名方式从写法上来看大概有三种, 第一种是“-”中划线 (示列:”.w ap-nav{}”) 。第二种是“_”下划线 (示列:”.w ap_nav{}”) 。第三种是驼峰式定义 (示列:“.W ap N av{}”) 。

这三种写法没有定性的规范来界定哪种写法是必须的, 这个可以根据项目要求以及团队的配合来确定, 保证团队代码的一致性即可。从C SS命名来看, 主要有两种方式, 分别为“面向属性定义” (示列:.m t10{m argin-top:10px;}) 和“面向对象定义” (示列:.logo{}) 。

这两种方式有各自的优缺点, 面向属性的优点是可以最大限度的利用好css的重用性, 但后期维护性很差;面向对象的优点是可以让后期维护更方便直接, 但它的重用性很差, 因此可以将两者结合起来使用。对于一些固定的、常用的、重用性非常高的css可以按面向属性进行命名。对于具体的版块使用面向对象的方式进行命名, 这样可以降低后期维护成本。

2.3 代码缩写

1) 对于两个不同的类, 但其中有部分相同甚至全部相同的属性及属性值时, 应对其加以合并缩写, 特别是有多个不同的类而有相同的属性及属性值时, 合并缩写可以减少代码量并易于控制。

缩写前:.m ain M enu{w idth:100px;height:100px;border:2pxsolid#333;}

.sub M enu{w idth:100px;height:200px;border:2pxsolid#333;}

缩写后:.m ain M enu, .sub M enu{w idth:100px;border:2pxsolid#333;}

.m ain M enu{height:00px;}

.sub M enu{height:200px;}

2) 同一属性的缩写, 同一属性根据它的属性值进行简写

缩写前:.m ain M enu{border-color:#333;border-w idth:2px;border-style:solid;}

缩写后:.m ain M enu{border:#3332pxsolid;}

3) 内外侧边框缩写, 在C SS中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的, 当这四个属性值不同时可直接进行缩写。

缩写前:

.btn{m argin-top:10px;m argin-right:8px;m argin-bottom:12px;m argin-left:5px;padding-top:10px;

padding-right:8px;padding-bottom:12px;padding-left:8px;}

缩写后:

.btn{m argin:10px8px12px5px;padding:10px8px12px5px;}

缩写前:

.btn{m argin-top:10px;m argin-right:5px;m argin-bottom:10px;m argin-left:5px;

padding-top:10px;padding-right:5px;padding-bottom:10px;padding-left:5px;}

缩写后:

.btn{m argin:10px5px;padding:10px5px;}

缩写前:

.btn{m argin-top:5px;m argin-right:5px;m argin-bottom:5px;m argin-left:5px;

padding-top:5px;padding-right:5px;padding-bottom:5px;padding-left:5px;}

缩写后:

.btn{m argin:5px;padding:5px;}

2.4 CSS代码注释

C SS基本的注释语法为/*注释内容*/

代码注释可以使人更加易懂, 合理的组织代码注释可使得结构更加清晰, 便于代码的查找与修改。同样对于代码的主体也应适当加以划分, 在必要的地方对代码进行注释说明, 有利于团队开发。

2.5 CSS代码排序

合理的代码排序可以提高代码的可读性、规范性, 便于后期维护人员快速准确的修改样式。具体的C SS属性排序可以参见下表:

2.6 使用<link>代替@import

im port和link在作用上是相同的, 二者不同之处在于服务的对象不同, @im port是为C SS服务, link是为当前的页面服务。除此以外二者还有着细微的差别。

1) link属于X H TM L标签, 而@im port完全是C SS提供的一种方式。link标签除了可以加载C SS外, 还可以做很多其它的事情, 比如定义R SS, 定义rel连接属性等, @im port只能加载C SS。

2) 加载顺序的差别。当一个页面被加载的时候, link引用的C SS会同时被加载, 而@im port会等到页面全部被下载完成再被加载。

3) @im port是C SS2.1提出的, 只有IE5以上的才能识别, 而link标签无此问题。

2.7 使用外部样式表

C SS样式主要有三种方式:内联样式表 (H TM L元素内部) 、内部样式表 (<head>标签内部) 、外部样式表。

页面加载的顺序也是按照以上顺序进行识别。在做项目时尽量采用外部样式表, 这样不但易于维护还可以提高页面访问速度, 因为C SS文件会在浏览器中产生缓存。而内置在H TM L文档中的C SS则会在每次请求中随H TM L文档重新加载。

3 结束语

规范的C SS代码可以减少网页的占用字节、加快网页浏览速度、同时便于网站的维护。因此灵活掌握、使用、优化C SS语句并制作出符合W 3C标准的W EB页面是学习C SS语言的最终目标。

摘要：CSS早在1996年已经出现, 并得到了浏览器的广泛支持, CSS语言已经成为了Web页面的重要技术支撑。由于CSS的广泛应用, 网站设计者对CSS的依赖度越来越大, 致使网站的CSS代码量不断膨胀, 产生了许多冗余的样式表文件, 给网站后期的代码维护带来困难。为此本文论述了CSS代码的常见问题与优化方法, 以实现CSS代码易读、规范, 从而提高网站开发效率。

关键词：css代码,代码规范,代码优化,开发效率,web技术

参考文献

[1]何丽.精通DIV+CSS网页样式与布局.清华大学出版社, 2011.

[2] (美) Dave Shea, Molly E.Holzschlag.CSS禅意花园 (修订版) .人民邮电出版社, 2012.

[3]李海燕.DIV+CSS布局与样式之网站设计精粹.清华大学出版社, 2014.

CSS样式论文第9篇

到目前为止,Web标准在Internet当中的应用已经得到了世界范围内的广泛认可,在这样一种良好的发展势态之下,Web更是以其显著的优势在全世界的互联网中得到了重要的地位。正是在此过程当中,对Web标准进行展现的CSS技术相应得到了前所未有的发展,使得无论是国内还是世界范围内,都有越来越多的网站设计者开始采用CSS技术来进行网站的重构和布局。在这样一种强劲的发展势头下,传统的表格形式网站布局应用基本上走向了没落和完结,而这也正是互联网的特征,新旧更替既彻底又迅速。尤其是在软件巨头微软对CSS标准妥协以后,CSS技术设计的网站在各大主流浏览器当中更是得到了充分的应用和展现,针对于CSS技术的进一步开发利用就显得非常重要。

2 CSS的基本概念

2.1 特点

CSS主要是指基于层叠在需要使用样式表的文字或图形之上的样式表,在实际的应用环境下属于HTML的辅助语言描。在进行多种网页样式控制或者是布局时,CSS所起到的作用就如同文字处理当中的Word,能够按照事先已经定义好的样式来对多重网页当中的元素实现格式化。但是在使用的过程当中,CSS能够表现出更加强大的灵活性来,这是因为在多重网页控制与布局中使用CSS不仅能够直接有效地对布局、字体、颜色以及背景等多个方面的因素进行精确掌握与控制,还能够在嵌入方式上有更多的选择,可以将其视作外部文件采用链接的方式采用,也可以直接将其视作当前网页内的内嵌式样式表来加以利用,还可以在HTML的源代码当中添加CSS的源代码。这样一些灵活多样的方式在实际的应用当中都是能够有非常理想的效果。

2.2 CSS的作用

在过去的网页设计当中,所设计出的网页最大的问题就是缺乏必要动感性,这样一种不足的存在主要是因为当时的编程环境下对网页内容进行排版非常有困难,即便是非常专业且非常有耐心的人,在那时候进行网页设计时仍然很难将自己的创意和构思都完整的在网页当中表现出来。即便是经过长期的训练和使用,对于HTML语言精髓掌握的极为到位的人而言,也需要通过多次重复的试验才能够最终驾驭好网页当中多种信息的良好排版,而这样一个过程则无疑是漫长而痛苦的。CSS实际上就是在这样一种背景和实际需求下催生出来的,因此其作用也主要是针对于上文当中所阐述的困难和不足的,其主要作用以下几点。

2.2.1 精确定位网页元素

CSS在应用过程当中你能够精确定位网页元素,其优势在于能够通过这样一种定位和控制来方便地对页面内的布局、字体、背景以及颜色等其他图文效果进行简便快捷的调节和控制,这样一方面是能够使得页面编排工作的进行显得更加容易,更重要的一个方面就是能够使得页面编排效果更加优良,从而真正达到和实现网页设计和布局的目的。

2.2.2 分离网页的内容结构和格式控制

这样一种要求的实现主要是因为在进行网页设计与布局的时候,考虑到作为浏览者而言最希望看到的是所设计出来的网页上的内容结构,而为了使浏览者更好地欣赏网页上的内容结构,就必然需要采用格式控制来进行辅助操作。在这样一种状况下将网页的内容结构和格式控制分开,主要是希望能够最大程度地方便与设计者的操作过程,使其能够对页面的布局掌握更多的主动控制权。分离网页的内容结构和格式控制的具体方式就是将CSS的代码直接独立出来,然后再从另外的角度上来对其页面外观进行控制。

2.2.3 控制页面布局

虽然说,采用HTML进行编程的过程当中能够实现较多方面的设计要求,如可以直接采用表格标签来生成边距,或者是采用工具直接进行字号编辑,但可以看到的是,采用HTML来进行上述各种方面的编辑范围是非常有限的,也不能够在整个网页范围内实现图像位置的准确定位。而CSS的出现则正好是针对性地处理和解决了这样一些问题,对页面布局实现了精确而完整的控制。采用CSS之后,最为显著的变化就是使得网页本身复杂无比的编码变得相对清晰和简单,无论是对其进行阅读还是进行编辑都非常清晰,更重要的一点就是使得在对文件进行编辑和修改时只需要对一个特定的文件进行修改就能够改变多个网页的格式和外观,而不需要再像以前一样一个页面一个页面地进行修改和更新。

2.2.4 制作体积更小性能更好的网页

CSS样式表只是简单的文本,并不需要复杂的图像或者是执行程序,这就使得在对其进行应用和操作时不需要插件,因此指令的执行速度非常理想。在这样一种情况之下,原先需要经过图片转化才能够实现的一系列功能在这里能够更为方便和简洁地实现,对于网页浏览者而言,页面的浏览速度自然会大大提升。除此之外,基于CSS样式表制作出的网页在不同的平台以及浏览器上都具备相当良好的兼容性,这同样为浏览者的使用方便度和舒适度提供了帮助。

3 CSS样式表的实现方法

通过上面的说明和分析不难看出,CSS样式在网页样式与布局设置当中的重要作用,它为整个网页样式与布局设计工作的进行提供了精确的定位控制并进一步实现创新机制,CSS在实践过程当中的具体实现方式如下所述:首先进行标准HTML文件的编写,然后在进行独立样式表的编写,最后基于此来告知浏览器解释具体文件的方式和途径。HTML的文件头部指向CSS样式表,在此情况之下将HTML文件和样式表一起发布到服务器当中来予以应用。需要注意的是,在实际的工作环境下,HTML文件是可以指向多个样式表的,这样就能够相当有效地对整个Web站点进行改变,与此同时不同的样式表会对应于不同的文件,具体来说就是通过不同的样式表来对不同文件的样式结构进行阐述。

3.1 链接样式表

链接样式表是样式的功能发挥到极致的地方,在此环节当中,将通过一个核心的样式表文件来将所有的HTML文件都链接到一起来,以此来形成一个外部的样式表文件,通过该外部样式表文件来对所有页面内的规则进行明确和设定。如果样式表当中文件的某一个细节点发生变化的话,则所有页面上的内容都会相应地发生变化。在实际应用的过程当中,就可以向发布HTML文件那样,将这样一个CSS文件发布到服务器当中去,浏览者在浏览器中进行观看的时候就会发现浏览器是按照链接标签当中的样式表规则来进行显示。

3.2 植入式样式表

样式表同样可以采用STYLE元素来实现在文档当中的嵌入。在这样一种模式下,所有样式表相关的信息都应当罗列到HTML文件的顶部位置,与此同时CSS样式表的代码也会予以显示,因此需要采用注释标签来尽可能避免上述状况的出现与发生。在植入样式表的相关规则之后,整个浏览器当中的HTML页面都会相应执行这样一种规则,以这样一种方法能够更好地应用于具有独一无二样式文档当中,此时如果多个文档都采用同样的样式表的话就更加有利于链接样式的使用。

3.3 输入样式表

输入样式表在使用的过程当中和链接式表的方法基本类似,其不同之处就在于链接样式表在使用过程当中不能够与其他的方式进行结合使用,但输入法仍然是可以的。在这样一种模式下,浏览器首先会输入样式表开始部分的相应规则,然后再进行植入式规则的加入,最后基于上述两个部分来形成网页当中的规则集合。通过这样一种说明就可以看到,在外部样式表文件和植入的样式表文件当中都有相关规则的设定,一旦两者之间发生冲突,植入的规则就将占据到主导的位置。而输入式样式表的灵活多样性则使得在实际的网页制作过程当中可以进行多个样式表的输入,使得不同的设计师都可以按照自己的喜好来采用凌驾于输入样式表之上的植入式样式表来达到自己的目的。

4 结语

通过上文的说明和分析就可以看到,在进行网页制作的过程当中按照既定的规则来进行CSS样式表的添加,其好处在于能够对网页的样式和布局实现精确的控制与把握,从而进一步良好地实现网页设计上的创新,最终制作出更加完美和和谐的网页作品,这样就能够在减少网页代码和复杂程度的前提之下提升网页的实际质量和传输速度,同时也为网站今后的维护与修改提供了极大的便利。

参考文献

[1]陈志松.CSS样式表在网页制作中的应用[J].池州师专学报,2004,(10).

[2]刘娜.网页制作中CSS样式表的运用[J].大学时代,2006,(1).

[3]吴明珠.浅谈CSS样式表在网页布局中的应用[J].人文社会科学:1994-2013.

CSS样式论文

CSS样式论文第1篇

电子教案-CSS层叠样式表第2篇

CSS样式论文第3篇

探析CSS样式表的不同用法第4篇

CSS样式论文第5篇

网站重构CSS样式表的优化技巧第6篇

浅谈大型网站中CSS样式表的构建第7篇

CSS样式论文第8篇

CSS样式论文第9篇

CSS样式论文

猜你喜欢

栏目

最近更新

热门标签

CSS样式论文

CSS样式论文 第1篇

电子教案-CSS层叠样式表 第2篇

CSS样式论文 第3篇

探析CSS样式表的不同用法 第4篇

CSS样式论文 第5篇

网站重构CSS样式表的优化技巧 第6篇

浅谈大型网站中CSS样式表的构建 第7篇

CSS样式论文 第8篇

CSS样式论文 第9篇

CSS样式论文

猜你喜欢

栏目

最近更新

热门标签

CSS样式论文第1篇

电子教案-CSS层叠样式表第2篇

CSS样式论文第3篇

探析CSS样式表的不同用法第4篇

CSS样式论文第5篇

网站重构CSS样式表的优化技巧第6篇

浅谈大型网站中CSS样式表的构建第7篇

CSS样式论文第8篇

CSS样式论文第9篇