快捷导航

扫一扫,访问微社区

QQ登录

只需一步,快速开始

切换风格

红色

css基础知识,网站Css技巧

少先队员 发表于 2011-9-3 20:20:29 | 显示全部
1、请养成良好的注释习惯,这是非常重要的;
  2、body是一个HTML元素,页面中所有的内容都应该写在这标签对之内,我就不多说了;
  3、讲解一些常用的CSS代码的含义:
    font:12px Tahoma;
    这里使用了缩写,完整的代码应该是:font-size:12px;font-family:Tahoma;说明字体为12像素大小,字体为Tahoma格式;
    margin:0px;
    也使用了缩写,完整的应该是:
    margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px
    或
    margin:0px 0px 0px 0px
    顺序是 上 / 右 / 下 / 左,你也可以书写为margin:0(缩写);
    以上样式说明body部分对上右下左边距为0像素,如果使用auto则是自动调整边距,
    另外还有以下几种写法:
    margin:0px auto;
    说明上下边距为0px,左右为自动调整;
    我们以后将使用到的padding属性和margin有许多相似之处,他们的参数是一样的,
    只不过各自表示的含义不相同,margin是外部距离,而padding则是内部距离。
    text-align:center
    文字对齐方式,可以设置为左、右、中,这里我将它设置为居中对齐。
    background:#FFF
    设置背景色为白色,这里颜色使用了缩写,完整的应该是background:#FFFFFF。
    background可以用来给指定的层填充背景色、背景图片,以后我们将用到如下格式:
    background:#ccc url('bg.gif') top left no-repeat;
    表示:使用#CCC(灰度色)填充整个层,使用bg.gif做为背景图片,
    top left
    表示图片位于当前层的左上端,no-repeat表示仅显示图片大小而不填充满整个层。
    top/right/left/bottom/center
    用于定位背景图片,分别表示 上 / 右 / 下 / 左 / 中;还可以使用
    background:url('bg.gif') 20px 100px;
    表示X座标为20像素,Y座标为100像素的精确定位;
    repeat/no-repeat/repeat-x/repeat-y
    分别表示 填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。
    height / width / color
    分别表示高度(px)、宽度(px)、字体颜色(HTML色系表)。
  4、如何使页面居中?
    大家将代码保存后可以看到,整个页面是居中显示的,那么究竟是什么原因使得页面居中显示呢?
    是因为我们在#container中使用了以下属性:
    margin:0 auto;
    按照前面的说明,可以知道,表示上下边距为0,左右为自动,因此该层就会自动居中了。
    如果要让页面居左,则取消掉auto值就可以了,因为默认就是居左显示的。
    通过margin:auto我们就可以轻易地使层自动居中了

回复

使用道具 举报

评论列表 ( 评论2 ) 显示全部 倒序浏览

  • 少先队员

    楼主| 2011-9-3 20:21:21
    1.鼠标移上去是出现一个window的保存收藏打印的那个小框框,能不能限制它的出现?
    在HEAD中加入
    <META HTTP-EQUIV="imagetoolbar" CONTENT="no">
    2. 图片上用新属性galleryimg
    <img width=500 height=500 src=a.gif galleryimg="no">
    3.div实现滚动条 (某些情况下可以替代iframe)
    <style>
    .gb { overflow:auto; white-space:normal; height:100px; padding:3px;}
    </style>
    <div class="gb"></div>
    其中高度height和overflow是必须设置的!
    ps:在IE下有的时候水平滚动条会出来,但是事实上,水平滚动条不没有实际的用途,貌似这个是IE的bug,解决方法:overflow-x: hidden
     加上这个.把水平滚动条隐藏掉~
    4.用css来实现三角形
    HTML代码
    <style>
    .t{
      width:50px;
      border-style:solid;
      border-color:#a6a2f7 #fff;
      border-width:0 50px 50px 50px;
    }
    </style>
    <span class="t"></span>
    5. 用vml来画圆角...
    HTML代码
    <html xmlns:v>
    <head>
    <style>
    v\:* {behavior: url(#default#VML);}
    #lone {
    width:200;
    height:70px;
    }
    </style>
    </head>
    <body>
    <v:RoundRect id="lone" strokecolor="#000" strokeweight="4px" arcsize="0.8" fillcolor="#ff0000">
    <!--arcsize 弧度值 fillcolor 圆的填充色 strokecolor 圆的边框色 strokeweight 边框大小-->
    </body>
    </html>
    6 . IE下,当使用了FLOAT之后.用margin-left和margin-right 会变成用双倍的数值,例子:
    margin-left:10px; 实际的效果是20PX;
    解决的方法1),用display:inline;(2)用clear:float
    方法1适应的范围比较广一些,(2)的话.只适合那些可以清除浮动的元素.不能清除的,不能用~
    7.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:
    div{margin:30px!important;margin:28px;}
    注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:
    div{maring:30px;margin:28px}
    重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;
    8.IE5和IE6的BOX解释不一致IE5下
    div{width:300px;margin:0 10px 0 10px;}
    div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改:
    div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
    这个/**/是IE5和firefox都支持但IE6不支持.
    9.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义
    ul{margin:0;padding:0;}
    10.关于脚本,在xhtml1.1中不支持language属性,只需要把代码改为
    <script type="text/javascript">
    11.JS 的页面跳转脚本
    HTML代码
    <script language="javascript">
    location.assign ("<a href="HTTP://webjx.com" target="_blank">HTTP://webjx.com</a>")
    </script>

    12. IE下用JS去掉所有链接和图片的焦点(因点击而产生的虚线框)
    function bluring(){
    if(event.srcElement.tagName=="A"||event.srcElement.tagName=="IMG") document.body.focus();
    }
    document.onfocusin=bluring;
    </script>
    13. 屏蔽右键类的代码
    <body>
    14。div+css布局用了float之后背景不能延伸的解决方案
    <div style="clear: both; font-size: 0;"></div>
    原因:背景的自适应高度并不继承float的高度,背景会继承float底线所在容器中的位置高度,所以背景一定会找到最后一个标签去测定,这样我们在如上的标签,这个标签中什么也不放。也就是一个没有高度的空容器,这样它就可以把背影拉下来了。
    15.用JS来处理图片变形的问题,等比例缩放图片,还能防止图片在加载过程中因为图片太大而引起的变形
    <script language="JavaScript" type="text/javascript">
    <!--
    function DrawImage(ImgD,FitWidth,FitHeight){
    var image=new Image();
    image.src=ImgD.src;
    if(image.width>0 && image.height>0){
    if(image.width/image.height>= FitWidth/FitHeight){
    if(image.width>FitWidth){
    ImgD.width=FitWidth;
    ImgD.height=(image.height*FitWidth)/image.width;
    }else{
    ImgD.width=image.width;
    ImgD.height=image.height;
    }
    } else{
    if(image.height>FitHeight){
    ImgD.height=FitHeight;
    ImgD.width=(image.width*FitHeight)/image.height;
    }else{
    ImgD.width=image.width;
    ImgD.height=image.height;
    }
    }
    }
    }
    //-->
    </script>
    应用:
    <img src="XXXX" alt="自动缩放后的效果" width="200" height="200"200","200");" />
    这里给图片设置了固定的大小。用了JS函数之后,不影响效果:)
    16.用 CSS 实现 Firefox 和 IE 都支持的 Alpha 透明效果
    filter:alpha(opacity=50); /* IE */
    -moz-opacity:0.5; /* Moz + FF */
    opacity: 0.5; /* 支持CSS3的浏览器(FF 1.5也支持)*/
    IE使用私有属性filter:alpha(opacity),Moz Family使用私有属性-moz-opacity,而标准的属性是opacity(CSS 3, Moz Family部分支持CSS3)。后面的数值是透明度,使用百分比或者小数。
    17.未知大小的图片在一个已知大小容器中的水平和垂直居中
    这个水平和垂直居中的例子能正常工作在IE5.x, IE6, IE7, Firefox, Opera, Mozilla, Netscape,为IE和非IE分别写了二套简单的样式。
    IE使用inline-blocks,非IE使用table-cell and vertical-align。
    CSS
    /* for non-IE browsers */
    div.holder {width:750px; height:300px; background:#f8f8f8;
    border:1px solid #777; text-align:center; display:table-cell; vertical-align:middle;}
    }
    18 .在IE里面元素浮动之后.原来的边距(margin)会加倍,但是FF等就不会.解决方法
    在浮动的元素的代码中加入:display: inline;,可使浮动被忽略,IE中不至于产生双倍距离.
    19. 首页下沉的效果:
    .post-body:first-letter {font-size:2.5em; float:left; padding:0 2px 0 0; line-height:1em; font-family:"楷体_GB2312"; font-weight:bold; color:#b00;}
    20.半透明的效果
    HTML代码
    <div style="width:100px;height:100px;background-color:#f00;filter:alpha(opacity=50); /* IE */ ; -moz-opacity:0.5; /* Moz + FF */ ; opacity: 0.5; /* 支持CSS3的浏览器(FF 1.5也支持)*/">我在任何浏览器里都是半透明的
    </div>


    回复 支持 反对 使用道具 举报
  • 少先队员

    楼主| 2011-9-3 20:21:58
    1.CSS字体属性简写规则
    一般用CSS设定字体属性是这样做的:
    font-weight:bold;
    font-style:italic;
    font-varient:small-caps;
    font-size:1em;
    line-height:1.5em;
    font-family:verdana,sans-serif;
    但也可以把它们全部写到一行上去:
    font: bold italic small-caps 1em/1.5em verdana,sans-serif;
    真不错!只有一点要提醒的:这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且,如果你没有设定font-weight, font-style, 以及 font-varient ,他们会使用缺省值,这点要记上。
    2. 同时使用两个类
    一般只能给一个元素设定一个类(Class),但这并不意味着不能用两个。事实上,你可以这样:
    <p class="text side">...</p>
    同时给P元素两个类,中间用空格格开,这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话,后设置的起作用,即在CSS文件中放在后面的类的属性起作用。
    补充:对于一个ID,不能这样写<p id="text side">...</p>也不能这样写
    3. CSS border的缺省值
    通常可以设定边界的颜色,宽度和风格,如:
    border: 3px solid #000
    这位把边界显示成3像素宽,黑色,实线。但实际上这里只需要指定风格即可。
    如果只指定了风格,其他属性就会使用缺省值。一般地,Border的宽度缺省是medium,一般等于3到4个像素;缺省的颜色是其中文字的颜色。如果这个值正好合适的话,就不用设那么多了。
    4. CSS用于文档打印
    许多网站上都有一个针对打印的版本,但实际上这并不需要,因为可以用CSS来设定打印风格。
    也就是说,可以为页面指定两个CSS文件,一个用于屏幕显示,一个用于打印:
    <link type="text/CSS" rel="stylesheet" href="../../stylesheet.CSS" media="screen" /> <link type="text/CSS" rel="stylesheet" href="../../printstyle.CSS" media="print" />
    第1行就是显示,第2行是打印,注意其中的media属性。
    但应该在打印CSS中写什么东西呢?你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片,再关掉一些导航按钮。要想了解更多,可以看“打印差异”这一篇。
    5. 图片替换技巧
    一般都建议用标准的HTML来显示文字,而不要使用图片,这样不但快,也更具可读性。但如果你想用一些特殊字体时,就只能用图片了。
    比如你想整个卖东西的图标,你就用了这个图片:
    <h1><img src="../../widget-image.gif" alt="Buy widgets" /></h1>
    这当然可以,但对搜索引擎来说,和正常文字相比,它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的:
    <h1>Buy widgets</h1>
    但这样就没有特殊字体了。要想达到同样效果,可以这样设计CSS:
    h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }
    注意把image height换成真的图片的高度。这里,图片会当作背景显示出来,而真正的文字由于设定了-2000像素这个缩进,它们会出现在屏幕左边2000点的地方,就看不见了。但这对于关闭图片的人来说,可能全部看不到了,这点要注意。
    6. CSS box模型的另一种调整技巧
    这个Box模型的调整主要是针对IE6之前的IE浏览器的,它们把边界宽度和空白都算在元素宽度上。比如:
    #box { width: 100px; border: 5px; padding: 20px }
    这样调用它:
    <div id="box">...</div>
    这时盒子的全宽应该是150点,这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上,它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。
    但用CSS也可以达到同样的目的,让它们显示效果一致。
    #box { width: 150px } #box div { border: 5px; padding: 20px }
    这样调用:
    <div id="box"><div>...</div></div>
    这样,不管什么浏览器,宽度都是150点了。
    7. 块元素居中对齐
    如果想做个固定宽度的网页并且想让网页水平居中的话,通常是这样:
    #content { width: 700px; margin: 0 auto }
    你会使用 <div id="content"> 来围上所有元素。这很简单,但不够好,IE6之前版本会显示不出这种效果。改CSS如下:
    body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }
    这会把网页内容都居中,所以在Content中又加入了:text-align: left 。
    8. 用CSS来处理垂直对齐
    垂直对齐用表格可以很方便地实现,设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高,而想让导航文字垂直居中的话,设定这个属性是没用的。
    CSS方法是什么呢?对了,把这些文字的行高设为 2em:line-height: 2em ,这就可以了。
    9. CSS在容器内定位
    CSS的一个好处是可以把一个元素任意定位,在一个容器内也可以。比如对这个容器:
    #container { position: relative }
    这样容器内所有的元素都会相对定位,可以这样用:
    <div id="container"><div id="navigation">...</div></div>
    如果想定位到距左30点,距上5点,可以这样:
    #navigation { position: absolute; left: 30px; top: 5px }
    当然,你还可以这样:
    margin: 5px 0 0 30px
    注意4个数字的顺序是:上、右、下、左。当然,有时候定位的方法而不是边距的方法更好些。
    10. 直通到屏幕底部的背景色
    在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部,用表格是很方便的,但如果只用这样的CSS:
    #navigation { background: blue; width: 150px }
    较短的导航条是不会直通到底部的,半路内容结束时它就结束了。该怎么办呢?
    不幸的是,只能采用欺骗的手段了,给这较短的一栏加上个背景图,宽度和栏宽一样,并让它的颜色和设定的背景色一样。
    body { background: url(blue-image.gif) 0 0 repeat-y }
    此时不能用em做单位,因为那样的话,一旦读者改变了字体大小,这个花招就会露馅,只能使用px。

    回复 支持 反对 使用道具 举报
  • 您需要登录后才可以回帖 登录 | 注册入村

    首页

    论坛

    导读

    我的

    快速回复 返回顶部 返回列表