CSS

CSS样式表详解

最新推荐文章于 2025-03-22 01:30:05 发布

weixin_34290096

最新推荐文章于 2025-03-22 01:30:05 发布

阅读量73

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2320342/blog/391634

2019独角兽企业重金招聘Python工程师标准>>>

1、为什么需要样式表

2、概述

3、div标签

4、样式表的基本结构

5、选择器分类

*标签选择器

*类选择器

*ID选择器

6、选择器的集体声明

7、使用CSS控制页面的方法

*行内样式表

*内嵌样式表

*外部样式表

1）行内样式表

2）链接外部样式表

3）导入外部样式表

4）链接外部样式表与导入外部样式表区别

8、css属性

1）字体属性

注：顺序（font-style,font-weight,font-size,font-family）

2）文本属性

3）列表属性

.nav{list-style-image:url(images/dot.gif);}

注：顺序list-style-type,list-style-position,list-style-image

4）浮动属性

5）背景属性

6）盒子模型

7）定位属性

position；

样例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>定位</title>
    <link href="css/index-5.css" rel="stylesheet" type="text/css"/>
</head>
<body>
 <div id="father">
     <div id="child"></div>
    </div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
body{margin:10px;}
#father{border:1px dashed #FF0000; height:100px;}
#child{background:#0F9;
  position:absolute;
  width:100px;
  height:50px;
  left:15px;
  top:20px;}

z-index:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>z-index</title>
    <link href="css/index-6.css" rel="stylesheet" type="text/css"/>
</head>
<body>
 <div id="block1">第1个div</div>
    <div id="block2">第2个div</div>
    <div id="block3">第3个div</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
body{margin:10px;}
div{width:200px; height:60px; position:absolute; border:1px dashed #00FF00;}
#block1{left:20px; top:20px; z-index:1; background:#0F0;}
#block2{left:40px; top:40px; z-index:3; background:#00F;}
#block3{left:60px; top:60px; z-index:5; background:#FF0;}

8）综合样例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>综合样例</title>
    <link href="css/index-4.css" rel="stylesheet" type="text/css"/>
</head>
<body>
 <div id="welcome" class="wrap">
     <ul>
         <li class="login">欢迎光临当当网，请<a href="#">登录</a><a href="#">免费注册</a></li>
            <li class="shopping"><a href="#">购物车</a></li>
            <li><em></em><a href="#">我的订单</a></li>
            <li><em></em><a class="arrow" href="#">我的当当</a></li>
            <li><em></em><a class="arrow" href="#">礼品卡</a></li>
            <li><em></em><a href="#">帮助</a></li>
        </ul>
    </div>
    <div id="mainNav" class="wrap">
     <div id="logo"><img src="images/logo.png"/></div>
        <div class="large">
         <div class="orange">网上购物享当当</div>
            <ul>
             <li class="home"><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>
        <div class="side">
         <ul>
             <li><a href="#">商家</a></li>
                <li><em></em><a href="#">当当榜</a></li>
                <li><em></em><a class="arrow" href="#">礼物</a></li>
                <li><em></em><a class="arrow" href="#">在线读书</a></li>
                <li><em></em><a href="#">更多服务</a></li>
            </ul>
        </div>
    </div>
    <div id="navbar">
     <ul>
         <li><a href="#">影视</a></li>
            <li><em></em><a href="#">影视</a></li>
            <li><em></em><a href="#">影视</a></li>
            <li><em></em><a href="#">影视</a></li>
            <li><em></em><a href="#">影视</a></li>
            <li><em></em><a href="#">影视</a></li>
            <li><em></em><a href="#">影视</a></li>
            <li><em></em><a href="#">影视</a></li>
        </ul>
    </div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
body{padding:0; margin:0; font-size:12px; line-height:22px;}
ul,li{margin:0; padding:0;}
ul{list-style:none;}
.wrap{width:1366px; margin:0 auto;}
#welcome ul{margin-left:860px;}
#welcome ul li{float:left;}
#welcome ul li.login a{color:#00F;}
#welcome ul li a{color:#000; text-decoration:none; margin:0 5px;}
#welcome ul li.shopping{background:url(../images/shopping.jpeg) left center no-repeat; padding-left:12px;}
#welcome ul li em{display:block; float:left; height:7px; margin:4px 0; border-left:1px solid #CCC;}
#welcome ul li a.arrow{background:url(../images/shopping.jpeg) right center no-repeat; padding-right:12px;} 
#mainNav #logo{float:left; width:160px; text-align:center;}
#mainNav .large{float:left; width:450px;}
#mainNav .large .orange{color:#F66;}
#mainNav .large ul li{float:left; margin:0 4px; line-height:30px; font-size:14px; text-align:center; font-weight:bold;}
#mainNav .large ul li a{display:block; background:#CCC; width:77px; text-decoration:none; color:#00F;}
#mainNav .large ul li.home a{background:#FC0; width:59px; color:#FFF;}
#mainNav .side{float:right;}
#mainNav .side ul li{float:left; font-weight:bold; height:30px; padding-top:22px;}
#mainNav .side ul li em{display:block; float:left; height:7px; margin:4px 0; border-right:1px solid #CCC;}
#mainNav .side ul li a{margin:0 5px; text-decoration:none;}
#mainNav .side ul li a.arrow{background:url(../images/shopping.jpeg) right center no-repeat; padding-right:12px;}
#navbar{clear:both; background-color:#F60; height:30px;}
#navbar ul li{float:left; line-height:30px;}
#navbar ul li a{color:#FFF; text-decoration:none; padding:0 5px;}
#navbar ul li em{display:block; float:left; height:7px; margin:12px 0; border-left:1px solid #FF0; border-right:1px solid #000;}