分享
 
 
 

css应用笔记整理之结构编写

王朝html/css/js·作者佚名  2008-09-09
窄屏简体版  字體: |||超大  

很多时候大家对博客的优化并不是很在意,只是一味的追求模板的外观。尤其是对css的应用,更显得薄弱。

从几年前的TABLE+CSS网页编写结构到现在的DIV+CSS网页编写结构,至始至终css都占据着很重要的角色,因此css应用的得当在很大程度上能明显改善用户体验。

自从网络中提出SEO的概念之后,css的优化更加被得到重视,目前css框架也在不断被开放,通过css框架将提高我们的工作效率。

什么是css呢?他是Cascading Style Sheets的缩写,中文解释为层叠样式表,用于控制页面布局和外观。它有三种应用模式,应用的最广泛的就是外部调用样式表文件,我在这里不再探讨,有疑问的朋友可以在百度百科中查看相关解释。

对css编写结构和应用属性不了解的朋友可以论坛帖子博客大巴使用指南下载CSS样式表中文手册(chm电子书格式)和DIV+CSS布局大全(pdf文档格式)的压缩包(rar压缩包格式)

我将通过对HTML存在的下面代码进行css分析

<div id=”box”>

<h2 class=”hsize”><a href=”#” title=”标题”><span class=”title”>标题</span></a></h2>

<div id=”nav”>

<h3>菜单</h3>

<ul>

<li>菜单一</li>

<li>菜单二</li>

<li>菜单三</li>

<ul>

</div>

<div id=”main” class=”wd hg”>内容</div>

</div>

结构编写方面

1-1.给需要重点加强的类选择符(Class Selectors)增值

我们要定义span的属性,我们可以在css里面这样写:

.title {…}

但是我认为span里面的内容很重要,我想让页面重向加载span,于是我们可以写成

span.title {…}

1-2.不要为ID选择符(ID Selectors)增加额外的标签

我们让页面重向加载span,是否可以这样写呢?

div#box h2.hsize span.title {…}

这样写是可以的,但是我们没必要为#box前面添加div,因为id是唯一的,如果这样做将影响页面匹配效率。于是我们可以写成

#box h2.hsize span.title {…}

1-3.尽量对子对象选择符(Child Selectors)使用“>”符号

在例子代码中,li是ul的子对象选择符,我们要定义li的样式,不建议这样写

#nav ul li {…}

这种写法将很耗空间资源,我们可以这样写

#nav ul>li {…}

但是这种写法也不是很好,如果我们能定义li的class值则尽量使用类选择符,例如更改为<li class=”list”></li>,于是我们可以写成

li.list {…}

1-4.通配选择符“*”(Universal Selector)有选择性的使用

很多时候为了方面我们会直接甩出一个

* {margin: 0; padding: 0;}

来清除IE浏览器部分标签带来的间距问题,但是这里存在一个问题就是通配符“*”把所有标签都初始化一遍,以至消耗一定的空间资源。

其实很多标签在不同浏览器上的差异很小,并且很多标签都不是常用到的,所以可以有针对性的使用,比如

html, ul, form, h2 {margin: 0; padding: 0;}

让所有含有title属性的标签字体以黑色显示,可以用通配符这样写

*[title] {color: #000000;}

不建议对下面的标签进行通配选择符控制

div span button b

很少用到的标签有

ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, u, i, center, dl, dt, dd, ol, form, label, legend, caption, tbody, tfoot, thead

1-5.“a”标签的伪对象选择符(Pseudo Selectors)注意写法顺序

在例子代码中,如果我要定义a标签的鼠标过程:默认状态为黑色,当鼠标放在“标题”二字上面,字体变为红色,点击“标题”二字时字体呈绿色,点击“标题”二字后字体呈灰色,我们可以按下面的顺序写

/* 默认状态为黑色*/

a:link {color: #000000;}

/* 点击“标题”二字后字体呈灰色*/

a:visited {color: #999999;}

/* 当鼠标放在“标题”二字上面,字体变为红色*/

a:hover {color: #FF0000;}

/* 点击“标题”二字时字体呈绿色*/

a:active {color: #00FF00;}

浏览器解释CSS时遵循靠后优先原则,它会依次解释active-hover-visited-link,如果顺序错了,则显示效果也将不同。

1-6.ID选择符是唯一的,Class选择符是多样的

一个代码标签可以拥有多个class选择符并且可以和别的标签共用class选择符,但是只能拥有一个id选择符,因此id和class的选用因实际需要判定。一般地,唯一出现的标签使用id选择符,方便以后调用。和别的标签有共用属性则使用class选择符,可以节省空间资源。在例子代码中“<div id=”main” class=”wd hg”>内容</div>”就是这样一个应用。class选择符的多个参数之间用空格隔开。

1-7.“注释”避免使用

在第5条介绍中我使用了注释,在css文件中注释内容使用“/*”开头,“*/”结尾的注释结构,注意css注释方法不同于js脚本文件的注释方法和html的注释方法。注释的好处是方便以后修改查看,团队合作时注释更显得重要。注释不会被浏览器解释,但是注释会占用一定的空间资源。

1-8.标签之间使用的符号含义要分清

#box>h2.hsize>a>span.title {…} 定义span.title的样式

#box h2.hsize a span.title {…} 和上面一样定义span.title的样式,但是浏览器匹配速度没有上面快

#box,h2.hsize,span.title {…} 同时定义#box、h2.hsize、span.title的样式

#nav ul>li+li {…} 定义菜单二和菜单三的样式

#nav ul>li+li+li {…} 定义菜单三的样式

1-9.图片尽量放到css样式表中

为了让搜索引擎更好的抓取页面的内容,不宜在HTML中使用<img src=”" />图片代码,可以考虑在css中采取以图换字的方式,参考2-3

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有