怎么编写CSS

2016-02-19 18:35 2 1 收藏

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享怎么编写CSS的教程,热爱PS的朋友们快点看过来吧!

【 tulaoshi.com - Web开发 】

   从上面的例子中,我们可以看到CSS的语句是内嵌在HTML文档内的。所以,编写CSS的方法和编写HTML文档的方法是一样的。

   您可以用任何一种文本编辑工具来编写。比如Windows下的记事本和写字板、专门的HTML文本编辑工具(Frontpage、Ultraedit等),都可以用来编辑CSS文档。

   那么您可能会问,独立编辑好的CSS文档怎样加入到HTML文档中呢?其实在第一章中的例子里已经介绍了两种方法。

   一种是把CSS文档放到head文档中:

   style type=“text/css” …… /style

   其中style中的“type=‘text/css’”的意思是style中的代码是定义样式表单的。

   另一种方法是把CSS样式表写在HTML的行内,比如下面的代码:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

   p style=“font-size:14pt;color:blue”蓝色14号文字/p

   这是采用Style=“ ”的格式把样式写在html中的任意行内,这样比较方便灵活。

   还有一种方法是:把您编辑好的CSS文档保存成“.CSS”文件,然后在head中定义。定义的格式是这样的:

   head link rel=stylesheet href=“style.css” …… /head

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

   我们看到这里应用了一个Link,“rel=stylesheet”指连接的元素是一个样式表(stylesheet)文档。一般这里是不需要您改动的。

   而后面的“href=‘style.css’”指的是需要连接的文件地址。您只需把编辑好的“.CSS”文件的详细路径名写进去就可以了。这种方法非常适宜同时定义多个文档。它能使多个文档同时使用相同的样式,从而减少了大量的冗余代码。

  本章主要介绍了编写CSS的方法以及如何把作好的CSS文档与HTML结合起来运用。您可以根据自己编写的HTML代码的结构、长度来选择用哪一种方法将CSS与之结合。

   下一章我们将进入CSS的具体知识的学习,我们将先从最基本的属性开始讲起。

来源:https://www.tulaoshi.com/n/20160219/1618224.html

延伸阅读
标签: Web开发
如何编写CSS代码才能更有效率?这是许多网页制作者与开发者都关心的问题。大概没有什么魔法,可以保证一下就把你的样式表缩小到百分之多少,但合理的 CSS 编码与组织技巧,的确能够帮助你的更有效率地写出更清晰高效的代码,自然,样式表大小的缩减还能减少下载的时间。  一、排版: 1.关键词和操作符之间加适当的空格。 ...
标签: Web开发
很多做前端开发的在为页面元素定class的时候经常会拿不定主意,导致随意使用class,一个好的class要能够描述出某个特定元素的表现,在符合团队开发流程、规范的情况下也要注意在工作中形成一套自己的风格,下面是我最经常使用的个人认为命名比较恰当和有一定作用的10个class。 1.class=fixed fixed这个class几乎出现在没个样式文件中,用在...
标签: Web开发
如果使用注释的方法得当的话,为你的CSS文件添加注释可以在开发过程中给予你和其他人很大的帮助。最常见的是为CSS样式规则添加提示信息,不过使用注释对优化组织结构和提升效用也很有帮助。 提示和标签 这是注释最常用的途径,可以为自己或其他开发人员留下提示信息可以避免后期引起的不必要的困惑和麻烦。这种应用简洁性最...
标签: Web开发
命名一直是个让我头痛的问题,特别是那些看上去差不多的模块,所以就得想办法啦,我总结了下面的方法,虽然还在试验中。希望对大家有帮助。欢迎大家提出改进的意见。具体如下: 要注意的内容: 一,命名所选用的单词应选择不过于具体表示某一状态(如颜色、字号大小等)的单词,以避免当状态改变时名称失去意义。 二,样式类名由以字母开头的...
标签: Web开发
最近在研究CSS,正好结合项目做了一个灵活的Tab页,使用纯HTML+CSS实现,正好总结一下。 首先看一下预览界面: 样例HTML可以访问:http://www.demo2do.com/htmldemo/school/attendance/AttendanceGlobal.html 下面开始讲述一下完成上述页面的步骤。 1. 构建HTML 构建HTML是整个过程最基础的部分。我们构...

经验教程

671

收藏

67
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部