从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式、嵌入式和外部式三种。
1:内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码:
<p style="color:red";font-size:12px>这里文字是红色。</p>2:嵌入式,嵌入式css样式,就是可以把css样式代码写在 <style type="text/css">XXX</style>标签之间。
3:外部式css样式,写在单独的一个文件中.
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码:
<link href="base.css" rel="stylesheet" type="text/css" />
优先级: 内联式 > 嵌入式 > 外部式,但是 嵌入式> 外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。
其实总结来说,就是--就近原则(离被设置元素越近优先级别越高)。
优先级:内联式 > 嵌入式 > 外部式
对于同一个元素我们同时用了三种方法设置css样式,那么哪种方法真正有效呢?在下面代码中就出现了这种情况
1、使用内联式CSS设置“超酷的互联网”文字为粉色。
2、然后使用嵌入式CSS来设置文字为红色。
3、最后又使用外部式设置文字为蓝色(style.css文件中设置)。
css的样式语法是:
1、css规则由选择器和一条或多条声明两个部分构成;
2、选择器通常是需要改变样式的HTML元素;
3、每条声明由一个属性和一个值组成;
4、属性和属性值被冒号分隔开。css样式语法规则由两个主要的部分构成:选择器,以及一条或多条声明。
1. 清除浮动
我对清除浮动的理解是这样的,
要想清除浮动,首先要知道什么是浮动,我们在做app,pc端页面的时候,它里面有这个块元素和内联元素,尤其块元素在布局的时候,文档流的形式往下刷,这种形势下呢,每一个块元素都是独占一行的,要想改变这种现状,比如说,abc 我们给ab浮动,ab并列排列,ab浮动之后呢,对c会产生影响,这时候我们就要给c加上clearboth清除浮动,这样做就是要使ab浮动产生的影响,不要影响到c,这是清除浮动的作用,那么清除浮动往往与什么有关系呢,比如说与我们的一些特效,比如图片轮播比如tab切换,这些特效的时候,往往需要我们用浮动去控制他,所以这是我们在使用浮动当中,清除浮动的工作内容,另外,清除浮动有很多种方式,比较常见的有clearboth overflowhidden,after伪类,最后,清除浮动有优势也有缺点,那么我认为他的缺点是,有时候在某些浏览器使用的时候会不起作用,会失效,当然说这个缺点不是不可以解决的,可以通过整理上下文,或者使用其他的清除浮动方式来解决。
这就是我对清除浮动的理解。
2. DIV CSS display (block none inline)属性的用法!
我对DIV CSS中display的看法是这样的:
display常见的值有四个block、none、inline、inline-block,常见的用法有两种,一种是元素的隐藏与显示之间的切换,这是none和block之间的切换,另一种是块元素和行元素之间的转换;
第一种用法主要用在一些效果当中,比如说table的切换,又比如说隔行变色,它都是用到这种用法,所以说它与效果有一些关系,另外的话是display:block和display:inline的切换,因为我们知道像span、a等行标签,在默认情况下改变宽高是没有效果的,这种时候我们就要把span等行元素转换成block元素,然后再设置宽高就会行之有效,另外有时候我们需要把像div、form表单等块元素转换成inline元素,也是有效的,总之一句话,我们为了实现元素之间的切换常用这个用法。display还有一种比较常用的用法是它经常加position、z-index、overflow:hidden去实现各种各样的效果,比如说页面的手风琴效果、图片无缝轮播的效果等,都是这些属性联合起来实现的。
以上就是我对display的看法。
3. 关于网页编码的理解!
我对网页编码的理解是这样的:
在国内,我们常用的编码有3种,分别是utf-8,GB2312,GBK。utf-8是国际标准字符集,它里面包含了一些国际上常用的一些语言,以及一些特殊符号、字符集等;但我们国家也有这种类似的语言协会,它概括的是GBK,叫做中文字符集,它涵盖了中文,把那些多余的比如希腊文、法文就去掉了,只保留一些常用的,如中文、英文字母,还有一些日文、韩文这些常用的语言,以及一些特殊符号;GB2312我们叫做简体中文字符集,是在GBK的范围上又提炼了一些。
以上就是我对网页编码的理解。
4. 了解外边距叠加的相关问题
我对外边距叠加的理解是这样的:
首先,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
触发条件:a)当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。b)当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。
注释:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
以上就是我对外边距叠加的理解。
5. img的title和alt的异同!
我对img的title和alt的理解是这样的:
(1)、含义不同
alt:使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明,也就是图片显示不了的时候显示的文字。
title:图片正常显示时,鼠标悬停在图片上方显示的提示文字。
(2)、在浏览器中的表现不同
在firefox和ie8中,当鼠标经过图片时title值会显示,而alt的值不会显示;只有在ie6中,当鼠标经过图片时title和alt的值都会显示。
以上就是我对img的title和alt的理解。
6. 请例举css中position的参数和作用?
我对css中position的理解是这样的:
position是用来定位的,常见的值有四个,它们分别是:static、absolute、fixed、relative。
static是相对于默认位置去定位的,fixed是相对于浏览器窗口定位的,而我们最常用的有两个,一个是absolute,一个是relative,relative是相对定位,是相对于自身的原来的位置定位的,不会对文档流产生影响,也就是说A和B两个元素堆叠放置的时候,如果给A元素relative属性,加top和left值以后对B是没有影响的,但A漂移走了;absolute是绝对定位,如果父元素有position属性,这个元素相对于父元素定位的,如果父元素没有position属性,这个元素相对于body定位的,而且它这个定位会对后面的元素产生元素,它是脱离文档流的,脱离文档流以后其他元素是会来补缺的,把这个位置填充掉。总而言之,position和display一样也是常用在各种特效当中,我们常用的就是absolute和relative,它经常和overflow:hidden、z-index、left、top等属性联合使用,去实现一些图片堆叠的效果,比如说常见的折页效果,轮播图等效果都用到这个属性。
position在使用的过程中有两个问题需要注意,第一、因为我们的浏览器分为IE和非IE浏览器,在标准的W3C盒模型下和IE盒模型下像素的解释是不一样的,这就说明一个问题,在定位的时候,如果同样都是left:100px,那到了IE6、IE7下就可能不是left:100px,而变成left:102px了,这可了不得,是致命的缺点,所以要在left前加*,来解决这一问题。第二,我们在使用position时最关键的一点是,在配合其他属性的时候一定要注意position是使用相对定位还是绝对定位,包括父元素是相对定位还是绝对定位。
以上就是我对css中position的理解。
7. css选择器的权重和优先规则!
对于优先级我是这么理解的,
包括选择器的样式,包括调用样式的一些方式的判断,决定了样式有一些执行次序的问题,从优先级的角度来说的话,谁的优先级最高呢,当然是内联的优先级最高,在这种情况下,比如说id class派生有其他的一些优先级的排序方式,所以他的优先级一般是按照这样的排序方式来进行。当然在这个里面,执行完优先级以后,他还有一个权值的问题,内联样式的权值是1000,ID是100,class是10,标签是1,那么这些优先级包括这个权值的问题,两个结合起来,我们一般呢,在写项目的时候也有可能是这样的,一个元素又有id又有class或者又有一些其他的选择方式,那么在选中这些元素以后呢,他所有的选择方式其实是一种结合使用的方式,这个时候就要讲究优先的次序了,所以页面中写样式的时候他就会前后次序清晰,不会出现样式冲突这种现象
这就是我对样式优先级和权值的一个理解。
8. 内联和!important哪个优先级高?
我的理解是这样的:
首先,肯定是!important优先级高。
!important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权,。语法格式{ cssRule !important },即写在定义的最后面,例如:box{color:red !important;}
在CSS中,通过对某一样式声明! important ,可以更改默认的CSS样式优先级规则,使该条样式属性声明具有最高优先级,也就是相当于写在最下面。
ie7,ie8,firefox,chrome等高端浏览器下,已经可以识别 !important属性, 但是IE 6.0仍然不能完全识别.!important的样式属性和覆盖它的样式属性单独使用时(不在一个{}里),IE 6.0认为!important优先级较高,否则当含!important的样式属性被同一个{}里的样式覆盖时,IE 6.0认为!important较低!
以上就是我对这个问题的理解。
9. table标签中border,cellpadding,td 标签中colspan , rowspan分别起什么作用?
我是这样理解这个问题的:
table border:表格边框, table-cellpadding: 单元格填充
td colspan:单元格纵向合并(列与列), table-rowspan: 单元格横向合并(行与行)
以上就是我对这个问题的理解。
10. 实现三列布局的三种方法,具体描述?
我是这样理解这个问题的:
(1)、绝对定位法
这或许是三种方法里最直观,最容易理解的:左右两栏采用绝对定位,分别固定于页面的左右两侧,中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。
(2)、margin负值法
首先,中间的主体要使用双层标签。外层div宽度100%显示,并且浮动(本例左浮动,下面所述依次为基础),内层div为真正的主体内容,含有左右210像素的margin值。左栏与右栏都是采用margin负值定位的,左栏左浮动,margin-left为-100%,由于前面的div宽度100%与浏览器,所以这里的-100%margin值正好使左栏div定位到了页面的左侧;右侧栏也是左浮动,其margin-left也是负值,大小为其本身的宽度即200像素。
(3)自身浮动法
应用了标签浮动跟随的特性。左栏左浮动,右栏右浮动,主体直接放后面,就实现了自适应。
以上就是我对这个问题的理解。
11. IE与宽度和高度的问题
我是这样理解这个问题的:
IE 不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。
比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
以上就是我对这个问题的理解。
12. 页面的最小宽度
我是这样理解这个问题的:
min -width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把width当 做最小宽度来使。为了让这一命令在IE上也能用,可以把一个<div> 放到 <body> 标签下,然后为div指定一个类,
以上就是我对这个问题的理解。
13. DIV浮动IE文本产生3象素的bug
我是这样理解这个问题的:
左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.
*html #left{ margin-right:-3px; //这句是关键}
以上就是我对这个问题的理解。
14. 高度不适应
我是这样理解这个问题的:
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin 或padding 时。
解决方法2个:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}
为DIV加上border属性。
以上就是我对这个问题的理解。
15. 如何对齐文本与文本输入框
我是这样理解这个问题的:
加上 vertical-align:middle;
以上就是我对这个问题的理解。
16. web标准中定义id与class有什么区别吗
我是这样理解这个问题的:
id和class都是元素中的属性,这也是每个元素都有的属性,他们是应用的很多领域中的,第一个应用的领域是css领域,在css领域中,有id选择器和class选择器,id的优先级要高于class,id选择器是#加id,class选择器是 . 加class,此外id的权重是100,class的权重是10,id要大于class;除了这个领域外在原生js中也是有使用的,而且使用的范围还是很大的,一个是getElementById,一个是getElementsByClassName,而且在封装像jQuery等其他语言中,也是有封装类似于id、类似于class这种选择器的,另外他们最核心的区别是用id选择器只能选择单个元素,而用class选择器可以选择多个元素,在js中,如果用class选择的元素,往往是要遍历元素才有效,才能在页面渲染到这些数据,这就是他们俩之间的一些区别。所以在做项目的时候id和class我都用,但是我用的更多的是class,因为页面上雷同的元素太多了,所以class用的更多一些。
以上就是我对这个问题的理解。
17. LI中内容超过长度后以省略号显示的方法
我是这样理解这个问题的:
此方法适用与IE与OP浏览器
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;
以上就是我对这个问题的理解。
18. 为什么web标准中IE无法设置滚动条颜色了
我是这样理解这个问题的:
解决办法是将body换成html
以上就是我对这个问题的理解。
19. 怎么样才能让层显示在FLASH之上呢
我是这样理解这个问题的:
解决的办法是给FLASH设置透明
<param name="wmode" value="transparent" />
以上就是我对这个问题的理解。
20. 怎样使一个层垂直居中于浏览器中
我是这样理解这个问题的:
要使一个层垂直居中于浏览器中,有4种方法
1. 行高,缺点,需要高度,只能文字
2. 定位+margin负值,缺点,需要高度
3. 弹性盒子,缺点,css3新增属性,不太兼容
4. 转table,缺点,ie6不支持,利用table垂直居中的特性,配合vertical-align,垂直居中
5. Css+定位
以上就是我对这个问题的理解。
21. Div居中问题
我是这样理解这个问题的:
div设置 margin-left, margin-right 为 auto 时已经居中,IE 不行,IE需要设定body居中,首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。
以上就是我对这个问题的理解。
22. 链接(a标签)的边框与背景
我是这样理解这个问题的:
a 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
以上就是我对这个问题的理解。
23. 超链接访问过后hover样式就不出现的问题
我是这样理解这个问题的:
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A
Code:
<style type="text/css">
<!--
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
</style>
以上就是我对这个问题的理解。
24. 游标手指cursor
我是这样理解这个问题的:
cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以
以上就是我对这个问题的理解。
25. UL的padding与margin
我是这样理解这个问题的:
ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题
以上就是我对这个问题的理解。
26. FORM标签
我是这样理解这个问题的:
这 个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,所以后 面就不会为这个头疼了.
以上就是我对这个问题的理解。