CSS（3）

来源：互联网发布：js弹出窗口编辑：程序博客网时间：2024/06/06 02:19

一、标准的清理浮动的方法.clear:after{   display:block;   height:0;   content:".";   visibility:hidden;   clear:both;}.clear{   zoom:1;}二、文本属性color描述:设置文本颜色语法:color:value;font-size描述:设置字号语法:font-size:value;说明:标题:16px~24px正文:12px~16pxfont-family描述:设置字体语法:font-family:value,value,...;font-style描述:文本倾斜语法:font-style:italic|normal;font-weight描述:文本加粗语法:font-weight:bold|normal;text-align描述:设置文本水平对齐方式语法:text-align:left|center|right;text-decoration描述:设置修饰线语法:text-decoration:none|underline|line-through|overline;text-indent描述:首行缩进语法:text-indent:value;line-height描述:设置行高语法:line-height:value;说明:行高一般设置为1.5em~2emcursor描述:设置鼠标指针类型语法:cursor:pointer(手形)|help(帮助)|text(文本)|crosshair(十字光标);三、显示方式display描述:设置对象的显示方式语法:display:none|block|inline;哪些对象为块级对象?A.默认情况下,div,p,h1~h6,ul,li,ol等;B.内联对象使用display:block;属性后;C.对象使用float属性后;四、表格属性vertical-align描述:设置垂直对齐方式语法:vertical-align:top|middle|bottom;border-spacing描述:单元格的外边距语法:border-spacing:value;border-collapse描述:设置单元格框线是否合并语法:border-collapse:separate(分隔)|collapse(合并);

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transtional.dtd"><html xmlns="http://www.w3.org/1999/xhml">  <head>    <title>页面布局</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>    <style type="text/css">        body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li{            margin:0;            padding:0;        }        body{           font-size:14px;           font-family:宋体;        }        ul,ol{            list-style:none;        }        img{            border:none;        }        /*标准的清理浮动的方法start*/        .clear:after{            display:block;            height:0;            content:".";            visibility:hidden;            clear:both;        }        .clear{            zoom:1;        }        /*标准的清理浮动的方法end*/        #container{            width:960px;            margin:0 auto;        }        #logo{            height:84px;        }        #navi{            height:32px;            background:#FF7E00;        }        #navi li{           float:left;           line-height:32px;        }        #navi a{            color:#fff;            display:block;            width:100px;            height:32px;            text-align:center;            text-decoration:none;            margin-right:2px;            background:url(images/navi_bg.png);        }        #main{                  }        #left,#center,#right{            float:left;            width:300px;                    }        #left{        }        #center{            margin:0 30px;                  background:#0f0;        }        #right{            background:#00f;        }        .list li{           padding-left:12px;           line-height:1.7em;           background:url(images/dot.jpg) no-repeat left center;        }        .list a{           color:#000;           text-decoration:none;        }        .list a:hover{           color:#f00;           text-decoration:underline;        }        .subject{           font-size:18px;           font-family:微软雅黑;        }    </style>  </head>    <body>     <div id="container">        <!--Logo begin-->        <div id="logo"><a href="#"><img src="images/logo.jpg" alt=""/></a></div>        <!--Logo end-->        <!--Navi begin-->        <div id="navi">           <ul class="clear">                <li><a href="#">首页</a></li>                <li><a href="#">新闻</a></li>                <li><a href="#">财经</a></li>                <li><a href="#">金融</a></li>                <li><a href="#">社会</a></li>           </ul>        </div>        <!--Navi end-->        <!--Main begin-->        <div id="main" class="clear">             <div id="left">                 <h2 class="subject">国内要闻</h2>                 <ul class="list">                    <li><a href="#">国内新闻标题1</a></li>                    <li><a href="#">国内新闻标题1</a></li>                    <li><a href="#">国内新闻标题1</a></li>                    <li><a href="#">国内新闻标题1</a></li>                    <li><a href="#">国内新闻标题1</a></li>                    <li><a href="#">国内新闻标题1</a></li>                    <li><a href="#">国内新闻标题1</a></li>                 </ul>             </div>             <div id="center">B</div>             <div id="right">C</div>                     </div>        <!--Main end-->    </div>     </body></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transtional.dtd"><html xmlns="http://www.w3.org/1999/xhml">  <head>    <title>文本属性</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>    <style type="text/css">       p{          font-size:20px;          font-family:隶书;          font-style:italic;/*斜体*/          font-weight:bold;/*粗体*/          text-align:left;          text-indent:2em;/*首行文本的缩进*/          line-height:1.5em;/*行高*/       }    </style>  </head>    <body>     <p>文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式</p>        <p>文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式</p>            <p>文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式</p>    <p style="text-decoration:underline;">我是通过CSS设置的下划线</p>    <p style="text-decoration:line-through;">我是通过CSS设置的删除线</p>    <p style="text-decoration:overline;">我是通过CSS设置的上划线</p>    <p style="text-decoration:underline overline line-through">我什么线都有</p>  </body></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transtional.dtd"><html xmlns="http://www.w3.org/1999/xhml">  <head>    <title>鼠标指针</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>  </head>    <body>     <p style="cursor:pointer;">我是手形的鼠标</p>    <p style="cursor:help;">我是帮助的鼠标</p>    <p style="cursor:text;">我是文本的鼠标</p>    <p style="cursor:crosshair;">我是十字光标的鼠标</p>    <p style="cursor:wait;">我是等待的鼠标</p>  </body></html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transtional.dtd"><html xmlns="http://www.w3.org/1999/xhml">  <head>    <title>页面布局</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>   <style type="text/css">   .a1{     width:500px;     border:2px solid #f00;     /*border-top:2px solid #f00;     border-left:2px solid #f00;*/     border-spacing:0px;/*单元格的外边距*/     border-collapse:collapse;/*表示边框合并在一起（2条线变为1条线）*/   }   .a1 td{     padding:10px;/*内边距*/     /*border-right:2px solid #f00;     border-bottom:2px solid #f00;*/     border:2px solid #f00;   }   </style>  </head>    <body>     <table class="a1">        <tr>                <td>1111</td>            <td>1111</td>        </tr>        <tr>                <td>1111</td>            <td>1111</td>        </tr>           </table>  </body></html>

一、标准的清理浮动的方法.clear:after{   display:block;   height:0;   content:".";   visibility:hidden;   clear:both;}.clear{   zoom:1;}二、文本属性color描述:设置文本颜色语法:color:value;font-size描述:设置字号语法:font-size:value;说明:标题:16px~24px正文:12px~16pxfont-family描述:设置字体语法:font-family:value,value,...;font-style描述:文本倾斜语法:font-style:italic|normal;font-weight描述:文本加粗语法:font-weight:bold|normal;text-align描述:设置文本水平对齐方式语法:text-align:left|center|right;text-decoration描述:设置修饰线语法:text-decoration:none|underline|line-through|overline;text-indent描述:首行缩进语法:text-indent:value;line-height描述:设置行高语法:line-height:value;说明:行高一般设置为1.5em~2emcursor描述:设置鼠标指针类型语法:cursor:pointer(手形)|help(帮助)|text(文本)|crosshair(十字光标);三、显示方式display描述:设置对象的显示方式语法:display:none|block|inline;哪些对象为块级对象?A.默认情况下,div,p,h1~h6,ul,li,ol等;B.内联对象使用display:block;属性后;C.对象使用float属性后;四、表格属性vertical-align描述:设置垂直对齐方式语法:vertical-align:top|middle|bottom;border-spacing描述:单元格的外边距语法:border-spacing:value;border-collapse描述:设置单元格框线是否合并语法:border-collapse:separate(分隔)|collapse(合并);五、定位属性position描述:设置定位类型语法:position:static|fixed(固定)|absolute(绝对)|relative(相对);fixed,脱离正常文档流,其位置在页面是固定的,并且可以通过top、right、bottom、left进行控制。absolute,脱离正常文档流,其位置可以通过top、right、bottom、left进行控制。relative,没有脱离文档流,在通过top、right、bottom、left进行位置控制时，其实只是在原始出现位置上发生偏移。z-index描述:设置Z轴叠放顺序语法:z-index:value;六、透明度(补P121)Chrome、 Firefox等opacity:value(0~1);IEfilter:alpha(opacity=value[0~100]);

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transtional.dtd"><html xmlns="http://www.w3.org/1999/xhml">  <head>    <title>定位属性</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>   <style type="text/css">    #topNav{        /*fixed总是以body为定位时的对象，        总是根据浏览器的窗口来进行元素的定位，        通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。*/       position:fixed;       top:0;       left:0;       right:50px ;       height:50px;       background:red;    }    body{        padding-top:50px;    }   </style>  </head>    <body>     <div id="topNav">111</div>    <p>heheh</p>    <p>科技</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>          </body></html>

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transtional.dtd"><html xmlns="http://www.w3.org/1999/xhml">  <head>    <title>定位属性</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>   <style type="text/css">    #mask{       position:absolute;       width:400px;       height:250px;       background:#000;       top:0px;       left:0px;       opacity:.1;/*透明度*/       filter:alpha(opacity=30);    }   </style>  </head>    <body>     <div id="mask"></div>    <p>hehe </p>    <p>科技</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>    <p>文本样式</p>          </body></html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transtional.dtd"><html xmlns="http://www.w3.org/1999/xhml">  <head>    <title>定位属性</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>   <style type="text/css">     #parent{        border:5px solid #f00;     }     #son{        position:relative;        top:15px;        left:20px;        width:150px;        height:100px;        border:5px solid #0f0;     }   </style>  </head>    <body>        <div id="parent">            <div id="son"></div>       </div>   </body></html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transtional.dtd"><html xmlns="http://www.w3.org/1999/xhml">  <head>    <title>定位属性</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>   <style type="text/css">     #d1{        position:absolute;        width:250px;        height:250px;        background:#f00;        z-index:56;/*设置Z轴叠放顺序*/     }     #d2{        position:absolute;        width:300px;        height:300px;        background:#000;        z-index:55;     }   </style>  </head>    <body>        <div id="d1"></div>       <div id="d2"></div>   </body></html>

0 0