当前位置:Gxlcms > html代码 > css小贴士备忘录_html/css_WEB-ITnose

css小贴士备忘录_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:6人阅读

前言:在CSS的学习实践过程中,我经常遗忘一些貌似常用的代码,为了能够强化记忆特在此作归纳整理并将陆续增删,以备即时查阅。但愿今后能遇到问题及时解决,牢牢记住这些奇怪的字符们。

一、关于段落文本强制对齐

text-align:justify; text-justify:inter-ideograph;

若要文本两端对齐,必须先定义P的宽度,然后 { text-align:justify; text-justify :distribute-all-lines; }

二、给按钮的不同状态加CSS

Html代码

  1. onMouseOver="this.className='over';"
  2. onMouseOut="this.className=' ';"
  3. onMouseDown="this.className='down';"
  4. onMouseUp="this.className='over';"
  5. value="未被点击的按钮"
  6. onClick="this.value='被点击的按钮'" name="Button">

三、在一个CSS文件中导入另一个CSS

@import url(***.css);

四、渐变背景色(使用这个一定得加width或height)

FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#EEF5F8,endColorStr=#ffffff);

使用这个时必须注意要对该DIV定义width或height值。

Css代码

  1. .gradient {
  2. /* Firefox 3.6 */
  3. background-image: -moz-linear-gradient(top, #81a8cb, #4477a1);
  4. /* Safari & Chrome */
  5. background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb));
  6. /* IE6 & IE7 */
  7. filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');
  8. /* IE8 */
  9. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')";
  10. }

background:#f4faff\9;
background:linear-gradient(#fff 0%,#f1f9ff 100%) no-repeat;
background:-moz-linear-gradient(#fff 0%,#f1f9ff 100%) no-repeat;
background:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#f1f9ff)) no-repeat;
background:-o-linear-gradient(#fff 0%,#f1f9ff 100%) no-repeat

五、用PNG图片在IE6中做出透明效果

*html #id{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=images/*.png); background:none; }

六、单行省略文本

{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

使用这个时必须注意要对需要省略文本的单行(如div或li)定义width值。

七、设为首页和加入收藏的代码

Html代码

  1. 设为首页|联系我们|加入收藏

八、中文描边效果

Java代码

  1. 中文描边效果

九、调整字间距

{ text-transform: uppercase; letter-spacing: 2px }

十、margin加倍的问题

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline; 例如: <#div id=”imfloat”> 相应的css为 #IamFloat{ float:left; margin:5px; /*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/}

十一、把鼠标放在图片上会出现图片变亮的效果

可以用图片替换的技巧,也可以用如下的滤镜,代码如下:
.pictures img { filter: alpha(opacity=45); }
.pictures a:hover img { filter: alpha(opacity=90); }

十二、区分不同浏览器

区别 FF ,IE7 ,IE6 :

background: orange ;* background:green !important ;*background:blue ;

注:IE都能识别*;标准浏览器(如FF)不能识别*;

IE6能识别*,但不能识别 !important,

IE7能识别*,也能识别!important;

FF不能识别*,但能识别!important;

IE6 IE7 FF
* ×
!important ×

另外再补充一个,下划线”_ “,
IE6支持下划线,IE7和firefox均不支持下划线。

于是大家还可以这样来区分IE6 ,IE7 ,firefox
: background:orange ;* background:green ;_ background:blue ;

注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。

十三、单行图片文字垂直居中对齐

style *{vertical-align:middle;.....}

十四、input加样式(1)

input[type~=radio]
{
...
}

含义:请将所有的input应用下面的style,但是其type属性是radio的input则例外。

十五、input加样式(2)

十六、给文字加阴影

h1 { float: left; text-indent:0em; text-shadow:black 2px 2px 2px; filter: dropshadow(OffX=2, OffY=2, Color='black', Positive='true');

十七、用Javascript和CSS去掉链接中的虚线框和下划线

在链接标签中添加onFocus="if(this.blur)this.blur()"这句代码即可屏蔽点击时四周出现的虚线框,如:

十八、 input type="image"

十九、删除链接上的虚线框

a:active, a:focus { outline:none; }  

二十、改变上传按钮的样式

Html代码

Html代码

  1. 上传

Css代码

  1. #uploadImg{ font-size:12px; overflow:hidden; position:absolute; left:190px; top:6px; }
  2. #uploadImg a { color:#000; line-height:24px; text-align:center; display:block; width:70px; margin:0; height:24px; border:1px solid #aecbd3; background:url(../images/btnbj.gif) repeat-x 0 0; }
  3. #file{ position:absolute; z-index:100; margin-left:-180px; font-size:60px;opacity:0;filter:alpha(opacity=0); margin-top:-5px;}

Html代码

二十一、css bug

IE6 IE7 IE8 Firefox Chrome Safari
!important Y Y
_ Y
* Y Y
*+ Y
\9 Y Y Y
\0 Y
nth-of-type(1) Y Y

人气教程排行