5.23日音讯,CSS初学者的“通病”和基本语法
日期:2013-05-23发布:首创网络浏览:658次
5.23日音讯,CSS初学者的通病和基本语法。CSS规则由两个主要的部分构成:选择器,以及一条或多条声明。 selector{declaration1;declaration2;...declarationN} 选择器通常是您需要改变样式的HTM···
本文关键字:5.23日,音讯,CSS,初学者,的,“,通病,”,和,基本,
5.23日音讯,CSS初学者的“通病”和基本语法。CSS规则由两个主要的部分构成:选择器,以及一条或多条声明。
selector{declaration1;declaration2;...declarationN}
选择器通常是您需要改变样式的HTML元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(styleattribute)。每个属性有一个值。属性和值被冒号分开。
selector{property:value}
下面这行代码的作用是将h1元素内的文字颜色定义为红色,同时将字体大小设置为14像素。
在这个例子中,h1是选择器,color和font-size是属性,red和14px是值。
h1{color:red;font-size:14px;}
下面的示意图为您展示了上面这段代码的结构:
提示:请使用花括号来包围声明。
值的不同写法和单位
除了英文单词red,我们还可以使用十六进制的颜色值#ff0000:
p{color:#ff0000;}
为了节约字节,我们可以使用CSS的缩写形式:
p{color:#f00;}
我们还可以通过两种方法使用RGB值:
p{color:rgb(255,0,0);}
p{color:rgb(100%,0%,0%);}
请注意,当使用RGB百分比时,即使当值为0时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说,当尺寸为0像素时,0之后不需要使用px单位,因为0就是0,无论单位是什么。
记得写引号
提示:如果值为若干单词,则要给值加引号:
p{font-family:"sansserif";}
多重声明:
提示:如果要定义不止一个声明,则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的,因为分号在英语中是一个分隔符号,不是结束符号。然而,大多数有经验的设计师会在每条声明的末尾都加上分号,这么的好处是,当你从现有的规则中增减声明时,会尽可能的减少出错的可能性。就像这样:
p{text-align:center;color:red;}
你应该在每行只描述一个属性,这样可以增强样式定义的可读性,就像这样:
p{
text-align:center;
color:black;
font-family:arial;
}
空格和大小写
大多数样式表包含不止一条规则,而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑:
body{
color:#000;
background:#fff;
margin:0;
padding:0;
font-family:Georgia,Palatino,serif;
}
是否包含空格不会影响CSS在浏览器的工作效果,同样,与XHTML不同,CSS对大小写不敏感。不过存在一个例外:如果涉及到与HTML文档一起工作的话,class和id名称对大小写是敏感的。
网页的制作中对于用p和css结构写静态页目前已经很成熟,但许多新入行的朋友对于使用p和css结构还有很多误区,这些误区也是我曾经经历过的并且被“老鸟”指正的地方,所以总结下来分享给大家,希望对写网页有所帮助。
1、用div+css结构制作静态html网页不等于彻底抛弃古老的table写法。
之所以不建议用table来布局网页是因为在网页加载很慢的时候要等table结构加载完成才能看到网页,其次是table的布局没有一定的语义,网页代码修改起来比较麻烦。
在写一些栏目块时,特别是数据分类较多,比如“求购信息”的栏目块,顶部可能出现“发布人、发布时间、信息标题、联系方式”等项目,像这样的地方建议还是要用table来写,因为table是专门用来写数据表格的,控制起来很方便,而且符合语义要求,还有页面中出现类似excel数据的地方,也建议用table来写。
2、div+css结构不等于通篇区域都用p包起来。
遇到一个区块就用一个p标签,这样你写完代码后全篇都是p,失去了语义的存在价值,区块修改起来也不容易找到,合理的利用dl、ul、ol、span、等标签,不仅让你的网页看起来条理清晰,而且修改起来很方便,见名知意,比如你要修改一个新闻列表,先找到新闻列表所在的p或者dl标签,然后再找其中的ul,修改具体内容就很容易。
3、并不是css文件一定要和html代码分开。
之所以将css文件和html分开,是因为有些css同时为多个页面服务,而用户访问时css文件可以缓存在本地,这样下次再访问其他页面时就不用重复加载css,可以节约时间和流量,提高访问速度,但是如果你的页面有些区域的css是独一无二的,其他页面用不到的,就不用把css剥离出去,直接用style标签包括在html网页里就可以。
4、用p和css写网页一定要在不同类型和不同版本的浏览器进行测试。
建议最好是同时打开多个浏览器,如果说你认为你的网站访客还没有养成使用火狐、谷歌等浏览器的习惯,那最少也得兼容ie6、7、8几个版本,由于软件限制,没有办法在一个电脑上装不同版本的多个浏览器,因此要借助版本模拟软件,我常用的是ietest,用来测试网页足够了。
对于经验不太丰富的页面制作者来说最好是写一个小区块就在不同浏览器下看一看效果,如果出现问题可以及时调整代码,不要只在一个浏览器里测试,一口气写完,那么当你在其他浏览器测试时发现网页奇形怪状时你就抓狂了(我曾经就这么干过)。
总结的要点暂时就这么多,剩下的就是拼写代码的功力了,建议新手还是不要用代码提示类的软件,最好是自己动手写出完整的语句,当你写熟练的时候你会发现你写代码的速度比用代码提示要快的多。
- 欢迎大家阅读浏览,部分内容来源于网络,如有侵权,请联系我们删除!
- 上一条:5.22日音讯,访问Win磁盘详解
- 下一条:5.23日音讯,使表单行高适应多浏览器
服务项目
热门信息
- 邯郸网络公司:模板建站的好处有哪些?
- 3642024-04-25
- 4.20日音讯,邯郸网络公司:企业官网有必要做吗?
- 2132024-04-20
- 4.20日音讯,邯郸网络公司:为什么模板建站如此便宜?
- 2872024-04-20
- 4.9日讯,企业网站建设如何发挥网络营销功能?
- 4092024-04-09
- 4.9日音讯,企业网站维护的日常工作
- 2912024-04-09
- 4.5日讯,建设一个外贸网站多少钱?
- 4862024-04-05
- 邯郸网络公司:网站建设开发有哪些细节需要注意?
- 5402024-03-07
- 邯郸网络公司:外贸网站制作的8个步骤
- 3772024-03-05
- 企业网站如何制作才能取得更好的效果
- 5662024-02-29
- 简单3步,轻松做企业官网
- 6822024-02-18