黑松山资源网 Design By www.paidiu.com
一些新手容易忽略或者出现错漏的地方。
1.首先是对于布局标签的定义。
有时候写好了css,但是反复调试总发现效果差强人意,有那么一块空白,挥之不去。其实这就是对于标签定义的不严谨造成的。因为在xhtml的部分标签里,有一些的默认属性值不一定是为空或零的。例如form,p,他们的margin默认值并不是0,所以在定义时定要多加注意。我们可以这样写来更加严谨的定义:* { margin:0;padding:0 } /*注释:定义所有的标签的margin和padding为0*/
2.缩写和大小写问题
css对于class和id是区分大小写的,所以当样式不生效的时候建议先检查一下大小写问题。我建议所有名称统一小写,当然你有自己的编码风格也可以用。例如第二单词大写,oneTwo在css里有很多缩写的习惯,推荐使用缩写格式。基本的缩写有 属性缩写和颜色缩写等。
属性缩写的例子:
margin-top:1px;margin-left:1px;margin-right:1px;margin-bottom:1px;
可以简单的写成 marign:1px;代表了以上四个属性。节约了很多字节。
顺便提一下,margin的缩写比较特殊,给不会的朋友看看。
margin x;代表四个方向都为x
margin x y;代表上下为x,左右为y;
margin x y z a;x代表上,y代表右,z代表下,a代表左
其他的这种表示上下左右的属性同marign.
另一种缩写就是颜色缩写:比如 #aabbcc;可以简写为 #abc;
3.少用限定,多用继承
(1).少用限定:比如定义了一个类a,该类被用于一个id为b的div中,有人为了严谨,这样定义:#b.a {}
这样定义就违备了class的初衷-灵活性.所以一般定义class尽量不要限定他们的应用范围,除非有特殊需要。
子选择是一种不错的方法,比如一个li,我们可以不必为其定义id或class,一样可以设置它的属性。
例子:
<div id="header">
<ul><li></li></ul>
</div>
这种情况我们也可以这样写: #header ul li { 这里就是li的属性 }
(2).多用继承:
有人刚开始写css写的很死,例如这样写:
#a { font-size:12px;font-weight:bold;color:#abc; }
#b { font-size:12px;font-weight:bold;color:#123; }
其实在两个样式有许多雷同的时候,我们完全可发挥css的继承特性,例如把上面的例子改成这样:
#a,#b { font-size:12px;font-weight:bold;color:#abc; }
#b { color:#123; }
一组标签也同样适用此方法:h1,h2,h3 {....}
效果是完全一样的,是不是又节约了很多字节呢..
4.多重class及就近优先原则
如果一个标签相同时应用两个class,不要这样写:<div class="a" class="b">这样是不对的
正确写法:<div class="a b">
如果同时定了两个p margin属性,后面的将覆盖前面的。还有定义了一个span的color属性,又定义了一个class,名为a的color属性,当<span class="a">时候,a的属性就会覆盖原span的属性。这就是就近优先原则。。。。
5.链接的正确写法:
顺序是很重要的,一定要正确::link :visited :hover :active
否则有可能会出现错误。
学好css最需要的就是多动多实践,那样才能学的快。
黑松山资源网 Design By www.paidiu.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
黑松山资源网 Design By www.paidiu.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年11月16日
2024年11月16日
- 第五街的士高《印度激情版》3CD [WAV+CUE][2.4G]
- 三国志8重制版哪个武将智力高 三国志8重制版智力武将排行一览
- 三国志8重制版哪个武将好 三国志8重制版武将排行一览
- 三国志8重制版武将图像怎么保存 三国志8重制版武将图像设置方法
- 何方.1990-我不是那种人【林杰唱片】【WAV+CUE】
- 张惠妹.1999-妹力新世纪2CD【丰华】【WAV+CUE】
- 邓丽欣.2006-FANTASY【金牌大风】【WAV+CUE】
- 饭制《黑神话》蜘蛛四妹手办
- 《燕云十六声》回应跑路:年内公测版本完成95%
- 网友发现国内版《双城之战》第二季有删减:亲亲环节没了!
- 邓丽君2024-《漫步人生路》头版限量编号MQA-UHQCD[WAV+CUE]
- SergeProkofievplaysProkofiev[Dutton][FLAC+CUE]
- 永恒英文金曲精选4《TheBestOfEverlastingFavouritesVol.4》[WAV+CUE]
- 群星《国风超有戏 第9期》[320K/MP3][13.63MB]
- 群星《国风超有戏 第9期》[FLAC/分轨][72.56MB]