手机
当前位置:查字典教程网 >网页设计 >心得技巧 >面试时可能被问到的一些CSS问题
面试时可能被问到的一些CSS问题
摘要:仅以此篇缅怀那些笔试100次,问100次的CSS问题。问:CSS选择符有哪些?哪些属性可以继承?优先级?内联和important哪个优先级高...

仅以此篇缅怀那些笔试100次,问100次的CSS问题。

问:

CSS选择符有哪些?哪些属性可以继承?优先级?内联和important哪个优先级高?

选择符

1 通配选择符(*) 表示页面内所有元素的样式 *{font-size:12px;margin:0;padding:0;}
2 类型选择符(body、div、p、span等) 网页中已有的标签类型作为名称的选择符 div{width:10px;height:10px;}
3 群组选择符(,) 对一组对象同时进行相同的样式指派 a:link,a:visited{color:#fff;}
4 层次选择符(空格) 包含选择符对某对象中的子对象进行样式指派 #header top{width:100px;}
5 id选择符(#) id选择符具有唯一性,在页面中不能重复使用 #header{width:300px;}
6 class选择符(.) 可以在页面中重复使用 .title{width:300px;}
7 IEhack选择符(_、*、、9;) 兼容不同的浏览器 .title{_width:50px;*height:30px;}
可继承的属性

azimuth, border-collapse, border-spacing,

caption-side, color, cursor, direction, elevation,

empty-cells, font-family, font-size, font-style,

font-variant, font-weight, font, letter-spacing,

line-height, list-style-image, list-style-position,

list-style-type, list-style, orphans, pitch-range,

pitch, quotes, richness, speak-header, speaknumeral,

speak-punctuation, speak, speechrate,

stress, text-align, text-indent, texttransform,

visibility, voice-family, volume, whitespace,

widows, word-spacing

优先级的四大原则

原则1:继承没指定的牛B

demo1:

<style type="text/css">

*{font-size:20px}

.class3{ font-size: 12px; }

</style> </p> <p><span>我是多大字号?</span> <>

demo2:

<style type="text/css">

#id1 #id2{font-size:20px}

.class3{font-size:12px}

</style> </p> <p><div id="id1">

<p id="id2"> <span id="id3">我是多大字号?</span> </p>

</div> <>

原则2:#ID > .class > 标签

demo1:

<style type="text/css">

#id3 { font-size: 25px; }

.class3{ font-size: 18px; }

span{font-size:12px}

</style> </p> <p><span id="id3">我是多大字号?</span> <>

原则3:越具体越牛B

demo1:

<style type="text/css">

.class1 .class2 .class3{font-size: 25px;}

.class2 .class3{font-size:18px}

.class3 { font-size: 12px; }

</style> </p> <p><div>

<p> <span>我是多大字号?</span> </p>

</div> <>

原则4:标签#ID > 标签.class

demo1:

<style type="text/css">

span#id3{font-size:18px}

#id3{font-size:12px}

span.class3{font-size:18px}

.class3{font-size:12px}

</style></p> <p><span id="id3">我是多大字号?</span>

<span>我是多大字号?</span> <>

最后:当原则之前冲突的时候,原则1 >原则2>原则3>原则4

!important

IE6到底认不认识!important???

答:认识,但是有一个小bug。

例如:

<style>

#ida {size:18px}

.classb { font-size: 12px; }

</style></p> <p><div id=“ida” class=“classb”>!important测试:18px</div>

加入!important

<style>

#ida{font-size:18px}

.classb{ font-size: 12px !important; }

</style></p> <p><div id=“ida” class=“classb”>!important测试:12px</div>

IE6 BUG:

<style>

.classb{ font-size: 18px !important; font-size: 12px }

</style></p> <p><div class=“classA”>!important测试:12px</div>

原因和办法:

这里在ie6下是12像素的字,而其他浏览器下是18px的字。

但是当我们把样式改一下,!important放在后面,即.classb{ font-size: 12px;font-size: 18px !important; },那么ie6下和其他浏览器一样也是18px的字。

【面试时可能被问到的一些CSS问题】相关文章:

浅析制作404错误页面时应该注意的问题

关于开发手机网站的一些总结

网页变灰的笔记 细节问题处理

网页设计技巧:iframe自适应高度的问题

页面包含img src时的重复载入问题

整理CSS中遇到的一些常见问题(Hack标识/固定容器/图片垂直居中)

倾斜鼠标翻转导航的问题研究

网页设计中的6个小技巧分享

网页访问速度的关键问题和解决方法

如何让一个网站前端有气质可以吸引住用户

精品推荐
分类导航