WEB前端了解的HTML+CSS编码的一些基础小经验

1.为body标签赋予id:

同一个网站的不同页面,虽然HTML代码相同,但是可以通过CSS来取得不同的表现效果。如果这些页面用的是同一个CSS文件,怎样精确的定义相同内容的不同表现呢?通过给body标签赋予id以区别不同的页面,然后使用CSS后代选择器可以精确的选择目标。例如:首页的body赋予id=”home”, 内页的body赋予id=”inner”,如果选取首页文章标题的话,可以用:“#home #main h1”,而要选取内页中的标题的话就可以用:“#inner #main h1”。这样的话,同一个网站中不容的页面,HTML代码相同的也可以有同的表现效果了。

2.相对长度em与段落首行缩进两个汉字的空格:

相对长度单位em根据元素的不同而不同,相对,顾名思义,是根据其他事物的关系来度量。如果一个div中文字的大小为12px, 再设置其外边距为3em, 则这个外边距的值就是12*3=36px,如果将文字大小改为15px, 那么这个外边距的值就成了15*3=45px 了。

汉字书写都有首行空两格的习惯,相当于插入了两个汉字宽度的空格,如果用  显然无法达到令人满意的效果。这时候我们就可以用CSS来实现两个汉字的缩进,如果文字的大小为12px; 那我们缩进24px就可以了,但是在同一个页面不可能所有的文字大小都是12px, 这里我们就可以通过相对长度单位em来设置文本缩进2em,这样的话,不管文字多大,始终都会保持两个汉字宽度的随进。

3.id与class命名需要注意技巧:

在HTML编码中,对id与class的命名需要注意技巧,尽可能以区域所在的含义命名,如header、footer等,不要以表现或所在的位置命名,如width500、left、right。左边的侧边栏可以用side,如果你用left命名的话,后面的内容如果重构,这个侧边栏放到了右边,那么显然此时的left不适合了。

4.关于通配选择器“*”(Universal Selector):

通配选择器可以对一些CSS属性进行全局设置,也就是全局默认样式的定义。这样做可以提高CSS编码效率,缩减代码,这样声明了,就不必在后面编码中再进行单独的定义。例如全局定义文字大小为12px, 而导航栏、侧边栏、内容区域中的文字正好也是12px, 有了这全局定义,那这3块儿区域就不用再单独设置了。

如果出现与全局定义冲突的定义,在后面的编码中直接再定义新的样式,CSS的继承和层叠经以新的样式作用于选择的对象。例如,外边距*{margin:0;}, 这里把外边距都设置为0,在后面的编码中单独定义某一元素的外边距为auto,如h3{margin:auto;}即可实现水平居中对齐。

5.关于position定位:

top、right、bottom和left这4个CSS属性,都是配合position属性使用的,表示的是块的各边界离页面边框(当position为absolute时)的距离,或各个边界离原来位置(position为relative时)的距离。也就是说只有当position属性的值设置为absolute或relative时才有效,如果position属性设置为static,则子块不会有任何变化。

6.选择合适的标签:

什么是时候用<div>,什么时候用<span>呢,这样根据实际情况来定,通常情况下,对于页面中大的区块儿使用<div>标签,?0?2而<span>标签仅仅用于需要单独设置样式风格的小元素,比如说一个单词,一个图片或是一个超链接等等。

7.关于盒子模型:

一个盒子的实际宽度(高度)是由 content + padding + border + margin组成的。在浏览器中(无论是IE还是FireFox),width和height的值都指的是width + padding和height + padding的值,在实际制作网页的时候需要特别注意。?0?2

8.关于表单的id与name:

表单中id与name都是为了标记对象名称。id是后来引入的,在这之前Netscape用name属性来实现这样的功能。目前还有很多网站后台程序都是用name属性来获取表单元素的值,所以有必要同时为元素设定id与name属性,这样不但可以通过id选择器为元素定义CSS样式,还可以兼顾到表单接受页面能正确获取表单元素的值(通过name属性获取表单数据)。

9.维护CSS样式表时需要注意的事项:

在进行重构的编码修改时要注意合理的调整。有些不再使用的代码要坚决的删掉;对于新增加的代码根据CSS规则进行添加。在调整前要对将要修改的代码进行详细的阅读,避免重复定义。在调整的时候注意保存备份代码,当调整出问题的时候,可以查看原来的代码进行对比。

10.将多个图片组合至一个图片文件:

目前大型网站基本都是采取这样的做法:一些尺寸相同但内容不同的图片,这些图片可能是页面上的图标、栏目标题或是导航栏的背景图片。这样的图片尺寸往往不大但是数目众多,这时候我们就可以把这些图片组合至一个图片文件,比如说一个网页有六个图标,但我们打开网站的时候需要加载6个图片才能将网页显示出来,而组合至一个图片后,只需要加载一个图片就可以了。而且组合以后的图片文件体积与未组合之前的图片体积相当,甚至还会变小而不增加字节数,最经典的应用是链接背景图片交互效果制作,也可以将网站所有的icon图标集中在一个图片上。当然,这种方法不能滥用。

未经允许不得转载:爱前端网 » WEB前端了解的HTML+CSS编码的一些基础小经验

赞 (0) 打赏


觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏