innerHTML,outerHTML,innerText之间的区别如下: 1.innerHTML设置或获取位于对象起始和结束标签内的HTML; 2.outerHTML设置或获取对象及其内容的HTML形式; 3.innerText设置或获取位于对象起始和结束标签内的文本; 4.innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析,而innerText与outerText则不会. 5.在设置时,innerHTML与innerText仅设置标签内的文本,而outerHTML与outerText设置包括标签在内的文本. 6.innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签.
HTML页面有三种使用CSS样式表的方式: 1.内联样式表:样式规定在单个的元素中,写在元素的style属性里; 2.内部样式表:样式定义在HTML页面的头元素中; 3.外部样式表:将样式定义在一个外部的CSS文件中,然后由HTML页面引用样式表文件.
CSS使用层叠(Cascade)的原则来考虑继承,层叠次序和优先级等重要特性,从而判断相互冲突的规则中哪个规则应该起作用. 继承性是指,许多CSS的样式规则不但影响选择器所定义的元素,而且会被这些元素的后代继承. 层叠性是指,当一个Web页面使用多个样式表,多个样式表中的样式可层叠为一个.在多个样式表之间所定义的样式没有冲突的时候,浏览器会显示所有的样式. 优先级是指,当发生样式冲突时,浏览器首先会按照不同样式规则的优先级来应用样式.CSS样式的优先级如下所示(其中数字3拥有最高的优先权): 1.浏览器缺省设置; 2.外部样式表(.css文件)或者内部样式表(位于<head>元素内部); 3.内联样式(作为某个元素的style属性的值). 同等优先级下,以最后定义的样式为准.
元素选择器是最常见的CSS选择器,即,文档的元素就是最基本的选择器.选择器通常是某个HTML元素,比如<p>,<h1>,<em>,<a>等,甚至可以是<html>元素本身. 类选择器用于将样式规则与附带class属性的元素匹配,其中该class属性的值为类选择器中指定的值.使用类选择器时,首先需要定义样式类,其语法为:
.clasName { }所有能够附带class属性的元素都可以使用此样式声明.只需要将class属性的值设置为”className”,则可以将类选择器的样式与元素关联. 在实际使用时,如果需要为某种元素定义样式,则往往使用元素选择器;如果要应用样式而不考虑具体设计的元素,最常用的方法就是使用类选择器.
在DIV设计中,使用display:none属性后,HTML元素(对象)的宽度,高度等各种属性都将”丢失”;而使用visibility:hidden属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度,宽度等属性值.
上述每种定义方式的含义如下: 1.td {width:100%;}:用元素选择器设置td元素(表格当中)的宽度为100%; 2..td {width:100%}:用类选择器设置class属性值为td的元素的宽度为100%; 3.#td {width:100%}:用id选择器设置id值为td的元素的宽度为100%; 4.td input {font-size:20pt}:派生(后代)选择器设置td元素中的input元素的字体大小为20pt.
请看如下代码,通过css设置div的left和right属性,来使浮动元素div居中:
<html> <head> <title>如何居中一个浮动元素</title> <meta http-equiv="content-type" content="text/html; charset="UTF-8"> <style type="text/css"> div{ width:10px; height:10px; background-color:green; border:1px solid red; position:relative; left:50%; right:50% } </style> </head> <body> <div style="float:left;"></div> </body> </html>CSS盒子模式具备内容(content),填充(padding),边框(border),边界(margin)这些属性.这些属性我们可以把他转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫他盒子模式.那么内容(content)就是盒子里装的东西;而填充(padding)就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震辅料;边框(border)就是盒子本身了;至于边界(margin)则说明盒子摆放的时候不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出.在网页设计上,内容常指文字,图片等元素,但是也可以是小盒子(DIV嵌套),与现实生活中盒子不同的是,现实生活中的东西一般不能大于合资,否则盒子会被撑坏,而CSS盒子具有弹性,里面的东西打过盒子本身最大把它撑大,但不会损坏.填充只有宽度属性,可以理解为生活中盒子里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料左衡的,边界就是该盒子与其他东西要保留多大举例.每个HTML标记都可看作一个盒子;每个盒子都有:边界,边框,填充内容四个属性;每个属性都包括四个部分:上,右,下,左;这四部分可同时设置,也可分别设置;盒子模型的结构如下图所示:
上述各问题的参考答案如下: 1.CSS有如下几种常用选择符: 1)元素选择器 2)类选择器 3)分类选择器 4)id选择器 5)选择器分组 6)派生(后代)选择器 7)伪类选择器 2.CSS中可以继承的属性如下: 1)文本相关属性:font-family,font-size,font-style,font-variant,font-weight,font,letter-spacing,line-height,text-align,text-indent,text-transform,word-spacing; 2)列表相关属性:list-style-image,list-style-position,list-style-type,list-style; 3)color属性. 3.CSS优先级算法如下: 优先级为就近原则,样式定义最近者为准.相同的样式,如果重复定义,以最后一次的定义为准. 4.important比内联优先级高
1.margin和padding的区别如下: padding:边框的里面的一层边内补白 margin:边框的外面的一层边外补白 2.将样式定义在单独的.css的文件里,link和@import都可以在html页面引入css文件.有link和@import两种方式,导入方式如下 link方式:
<link rel="stylesheet" type="text/css" href="aa.css">@import方式:
<style type="text/css"> @import "aa.css"; </style>link和@import两种导入css文件的区别: 1)祖先的差别.link属于XHTML标签,而@import完全是CSS提供的一种方式.link标签除了可以加载CSS外,还可以做很多其他的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS; 2)加载顺序的差别.当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载.所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢时更为明显; 3)兼容性的差别.由于@import是CSS2.1提出的,所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题; 4)使用DOM控制样式时的差别.当使用JavaScript控制DOM去改变样式的时候,只能使用link标签,因为@import不是DOM可以控制的; 5)@import可以在CSS中再次引入其他样式表,比如可以创建一个主样式表,在主样式表中再引入其他的样式表.
