CSS知识点精简集合,一点点积累下来存点经验

html+div+css 1589 0 2013-11-14

CSS知识点精简集合,一点点积累下来存点经验
现在开始回顾CSS的知识点,一点点积累下来,自己也存点经验

第一
div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;}
说明:
1、filter:对win IE设置半透明滤镜效果,filter:alpha(Opacity=80)代表该对象80%半透明,火狐浏览器不认
2、-moz-opacity:对mozilla firefox火狐浏览器实现半透明,win IE不认此属性,-moz-opacity:0.5相当于设置半透明为50%
3、opacity:对除IE外所有浏览器支持包括谷歌,放最后主要针对谷歌浏览器,opacity: 0.5;表示设置50%半透明

第二: ie9字体不能垂直居中,line-height失效兼容问题(设置字体的习惯)
失效原因:css中使用了中文字体,而中文字体使用了汉字:例如:font-family:"微软雅黑"
解决方法一:将设置的字体类型用unicode字符来设置,以下列出各字体类型对应的unicode编号
      “黑体”对应Unicode编码为“\9ED1\4F53”
     “宋体”对应Unicode编码为“\5B8B\4F53”
      “仿宋”对应Unicode编码为“\4EFF\5B8B”
    “微软雅黑”对应Unicode编码为“\5FAE\8F6F\96C5\9ED1”

.div{ font-family:"\5FAE\8F6F\96C5\9ED1"} 
这样子使用就不会出问题了,而且大部分浏览器

解决方法二:将设置字体的汉字使用英文名,以下列出各字体类型对应的英文
“黑体”对应英文名为“SimHei”
“宋体”对应英文名为“SimSun”
“仿宋”对应英文名为“FangSong”
“微软雅黑”对应英文名为“Microsoft YaHei”
.div{ font-family:"Microsoft YaHei"} 
  这样子用就不会出问题了,而且兼容大部分浏览器


第三:
CSS省略号text-overflow超出溢出显示省略号
要素一:text-overflow:clip/ellipsis    (clip不显示省略标记点点点,而是简单的裁切)(ellipsis:当对象内文本溢出时显示省略标记点点点)
要素二:要想实现显示不完内容将显示省略号代替,还需要nobr标签完成(nobr禁止换行标签)使用方法:<nobr></nobr>
要素三:因为要避免内容过多撑破对象,所以我们对li再设一个overflow:hidden 用于隐藏超出内容


第四:
设置鼠标样式
设置自定义鼠标样式为自己自定义的图片的时候可以这样子:body{cursor:url("小图片的地址")};

第五:
css中设置 min-width  max-width
给一个div写了min-width 或者max-width就直接进行对这个div里面出现元素最小最大宽度限制,这个时候,放进div里面的图片应该是不用设置宽度的
例如设置图片在div 里面显示的最小或者最大宽度

    .divcss5-min-width,.divcss5-max-width{ height:100px; border:1px solid #F00} 
    .divcss5-min-width img{ min-width:200px}
    divcss5-max-width img{ max-width:200px; }

第六
解决图片撑破div层方法总结
第一种:最直接的方法是用图片软件处理图片的宽度或者高度小于div的宽度或者高度
第二种:可以用css样式来解决:“overflow:hidden”使超出div的图片部分隐藏
第三种:直接用<img src="" width="小于你的div宽度">这样子可以等比例缩小图片,不会影响图片画面的质量  或者直接用css样式设置
第四种:给这个div设置图片的的最大宽度max-width即可。


第七:
用css设置图片高度的时候,其图片实际显示的效果的宽度会等比列显示出来
注意:在<td height="50">或者<img src="" height="60">等设置高度里面,不用加单位px,因为默认就是的,如果加了反而是错了
高度不能设置百分比如“height:50%”,设置百分比的高度是无效的,如果设置了父节点的宽度的前提下,就可以设置百分比,宽度也是这个道理

第八:
padding左右的上下左右方向与个数的联系:
如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。
如果只提供一个,将用于全部的四条边。
如果提供两个,第一个用于上-下,第二个用于左-右。
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
内联对象要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute。

第九:text-indent缩进效果
通常text-indent缩进属性将对段落首行开头文本文字进行缩进显示。如果使用html br换行标签,第二个换行开始也不会出现缩进效果。如果使用了html P段落标签段落换行,将会出现每个p段落换行开头都将缩进
另外一种代替缩进效果的做法:使用"&nbsp";多打几个空格就可以实现空格字符占位缩进

第十:
overflow
overflow : visible | auto | hidden | scroll
当然overflow可以单独设置X(overflow-x )和Y(overflow-y)方向的滚动条样式其值与应用与overflow语法用法结构相同。
visible :  不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto :  此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条,DIV默认情况也是这个值,但需要设置时候设置即可
hidden :  不显示超过对象尺寸的内容
scroll :  总是显示滚动条


第十一:
z-index的使用
Z-index在使用绝对定位,相对定位下属性条件下使用才能使用,并且值必须为整数和正数


第十二:white-space语法:
normal :默认处理方式
nowrap :强制在同一行内显示,直到文本结束或者遭遇br标签对象才换行,当然,我们为了隐藏超出的文字内容我们可以再加一个css overflow:hidden样式


第十三:border边框的CSS样式

3、边框三个样式
通常我们可以对边框设置宽度(厚度)、边框样式、边框颜色这三个属性与参数。

1)、边框颜色:border-color:#000

2)、边框厚度(宽度):border-width:1px
使用数字+单位设置边框厚度宽度,如1px(边框厚度宽度为1像素),边框必须为正数字,大于0的数值。否则设置边框border样式无效。

3)、border边框样式:border-style:solid

边框样式值如下:
none :  无边框。与任何指定的border-width值无关
hidden :  隐藏边框。IE不支持
dotted :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线(常用)
dashed :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线(常用)
solid :  实线边框(常用)
double :  双线边框。两条单线与其间隔的和等于指定的border-width值
groove :  根据border-color的值画3D凹槽
ridge :  根据border-color的值画菱形边框
inset :  根据border-color的值画3D凹边
outset :  根据border-color的值画3D凸边


第十四:倾斜效果设置

常用字体样式设置font-style: italic
兼容各大浏览器

normal : 正常的字体(默认字体样式,可用于去掉html i斜体标签默认斜体样式)

italic : 斜体。对于没有斜体变量的特殊字体,将应用oblique

oblique : 倾斜的字体

第十五:
设置英文或者拼音大小写
text-transform 值:

Capitalize 英文拼音的首字母大写

Uppercase 英文拼音字母全大写

Lowercase 英文拼音字母全小写


第十六:上下划线
text-decoration下划线CSS单词值参数:
none :  无装饰
blink :  闪烁
underline :  下划线
line-through :  贯穿线
overline :  上划线

第十六:
font-size:12px; 设置对象具体字体大小为12px
font-size:xx-small; 设置文字大小为最小
font-size:small; 设置文字字体大小为小
font-size:x-large;设置对象字体大小为较大
font-size:larger;设置对象字体大小为大
font-size:smaller;相对于父容器中字体尺寸进行相对减小
font-size:50%;相对于父容器中字体尺寸进行相应调整为50%大小
font-size:150%;相对于父容器中字体尺寸进行相应调整为150%大小


第十七:设置背景知识
background CSS手册查询-background手册
background-color 设置颜色作为对象背景颜色
background-image 设置图片作为背景图片
background-repeat 设置背景平铺重复方向
background-attachment 设置或检索背景图像是随对象内容滚动还是固定的。
background-position 设置或检索对象的背景图像位置。


第十八:行高line-height
1、对于文章类文字上下排间隔
一般我们对对象设置设置line-height行高属性即可实现让自动换行文字排版均匀间隔多少设置。
2、对单排文字上下垂直居中
假如我们一个固定30px高度div对象,如果要让其文字内容上下垂直居中,我们即可使用line-height:30px即可。
line-height行高上下居中属性样式,使用于多排文字如文章内容实现文字上下排间隔居中属性,以及单排高度固定的上下垂直居中。常常遇见内 容与图片混排,我们希望图片和文字内容上下居中在一排,但是文字会居图片下部,通常解决方法是使用两个盒子分别设置行高与高度。
在一排的文字或内容布局中,如果要让内容上下垂直居中,我们只需要设置line-height与height高度相同高度长度与html单位即可实现垂直居中;如果是多列的或文章内容通常我们会设置每行文字一定平均上下间隔,这个时候我们只需要设置line-height行高即可。
 

第十九
设置网页背景颜色
传统设置背景颜色使用“bgcolor=颜色取值”,而CSS中则“background:”+颜色取值。例如:设置背景为黑色,传统Html设置,即在标签内加入“bgcolor="#000"”即可实现颜色为黑色背景,如果在W3C中即在对应CSS选择器中始终“background:#000”实现。

设置边框颜色
传统“bordercolor=取值”,CSS中“border-color:”+颜色取值。例如:在传统html直接在table标签加入 “bordercolor="#000"”即可,在现在CSS中设置“border-color:#000;”即可让边框颜色为黑色,同时记得对包括设置 宽度和样式(虚线、实现)。


第二十:*号的有个特殊用法
.divcss5{border:1px solid #000;width:220px;*width:300px;}
在CSS选择器内星号+CSS样式属性单词,一般区别IE6和IE8、IE6和FF,IE7和IE8,IE7和FF浏览器之间属性CSS HACK
讲过各大浏览器测试,我们会发现在IE6和IE7中宽度为300px,而在IE8及以上MSIE版本、谷歌浏览器、火狐(FF)浏览器却显示为220px宽度。


第二十一:div与span
两个没啥区别。一个是块状元素,一个是内连元素


第二十二:
font-weight参数:
normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置
bold : 粗体。相当于number为700。也相当于b对象的作用
bolder : IE5+ 特粗体
lighter : IE5+ 细体
number : IE5+ 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 
对象值:从100到900,最常用font-weight的值为bold


第二十三:
设置CSS超链接颜色
首先我们认识下CSS 超链接基础
a:active是超级链接的初始状态
a:hover是把鼠标放上去时的状况
a:link是鼠标点击时
a:visited是访问过后的情况
这几个CSS样式一般情况下是默认的。
那CSS控制超链接的字体颜色CSS color是怎么实现的呢?
很简单和上面第2点的实例相同,唯一区别在于设置他们的对象为超链接A标签CSS样式。

实例:
Css代码:
a{ color:#00F}/* 带超链接字体为蓝色 */
a:hover{ color:#F00;}/* 鼠标放到超链接字上字体颜色为红色 */
对应html内容
我是<a href="http://www.hilo8.com">DIV CSS教程</a>实例关于超链接字体颜色

上一篇:关于文字内容溢出用点点点(…)省略号表示

下一篇:CSS实现DIV框固定在浏览器右下角(即不随滚动条滚动)

讨论数量:0

请先登录再发表讨论。 2024-04-25

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链