CSS

時間 2019-11-20

標籤 css 欄目 CSS 简体版

原文原文鏈接

一、爲何須要樣式表css

二、概述html

三、div標籤ide

四、樣式表的基本結構字體

五、選擇器分類網站

*標籤選擇器ui

*類選擇器url

*ID選擇器spa

六、選擇器的集體聲明指針

七、使用CSS控制頁面的方法code

*行內樣式表

*內嵌樣式表

*外部樣式表

1）行內樣式表

2）連接外部樣式表

3）導入外部樣式表

4）連接外部樣式表與導入外部樣式表區別

八、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;}

九、使用CSS控制超連接

注意先後設置順序

十、控制鼠標指針效果

十一、span標籤

十二、網站製做流程

1三、知識梳理