D15——C語言基礎學PYTHON

時間 2019-12-07

標籤 d15 c語言基礎 python 欄目 Python 简体版

原文原文鏈接

C語言基礎學習PYTHON——基礎學習D15css

20180926內容綱要：html

　　一、CSS介紹編程

　　二、CSS的四種引入方式api

　　三、CSS選擇器瀏覽器

　　四、CSS經常使用屬性編輯器

　　五、小結ide

　　六、練習工具

1 CSS介紹學習

層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。開發工具

CSS不只能夠靜態地修飾網頁，還能夠配合各類腳本語言動態地對網頁各元素進行格式化。

CSS 可以對網頁中元素位置的排版進行像素級精確控制，支持幾乎全部的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。

編程工具：

記事本：使用Windows系統自帶的記事本能夠編輯網頁。只須要在保存文檔時，以.html爲後綴名進行保存便可。

Dreamweaver：它與Flash、Fireworks並稱網頁三劍客。Dreamweaver是集網頁製做和管理網站於一身的所見即所得網頁編輯器，它是第一套針對專業網頁設計師特別開發的視覺化網頁開發工具，利用它能夠垂手可得地製做出充滿動感的網頁。

功能介紹：

CSS提供了豐富的文檔樣式外觀，以及設置文本和背景屬性的能力；容許爲任何元素建立邊框，以及元素邊框與其餘元素間的距離，以及元素邊框與元素內容間的距離；容許隨意改變文本的大小寫方式、修飾方式以及其餘頁面效果。

CSS能夠將樣式定義在HTML元素的style屬性中，也能夠將其定義在HTML文檔的header部分，也能夠將樣式聲明在一個專門的CSS文件中，以供HTML頁面引用。總之，CSS樣式表能夠將全部的樣式聲明統一存放，進行統一管理。

2 CSS四種引入方式

（1）行內式

行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優點，代碼的重用性不夠高，不推薦使用，但若是隻是個別標籤能夠這麼作。

<div style="background-color: #2459a2; height:48px;"></div>

（2）嵌入式

嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1 {
            background-color: teal;
            height: 48px;
        }
        .c1{
            background-color: teal;
            height: 48px;
        }
    </style>
</head>

（3）連接式

將一個.css文件引入到HTML文件中。

首先建立一個Stylesheet，存爲common.css

.c1{
    background-color: yellow;
    color: black;
}
.c2{
    font-size: 28px;
    color: #2459a2;
}

引用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="commons.css"/>
</head>

（4）導入式

將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import "commons.css";
    </style>
</head>

3 CSS選擇器

（1）id選擇區

（2）class選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1 {
            background-color: teal;
            height: 48px;
        }
        .c1{
            background-color: teal;
            height: 48px;
        }
    </style>
</head>
<body>
    <div style="background-color: #2459a2; height:48px;"></div>
    <div id="i1"></div>
    <div class="c1"></div>
    <span class="c1"></span>
    <div class="c1"></div>
</body>
</html>

（3）標籤選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color:black;
            color: white;
        }
        span div{
            background-color:green;
            color: yellow;
        }
        input[type="text"]{width: 100px;height: 200px;}
    </style>
</head>
<body>
    <div>1</div>
    <span>
        <div>1</div>
    </span>
    <div>1</div>
    <div>1</div>
    <input type="text" />
    <input type="password" />
    <input class="c3" type="password"  n="kanghui" />
</body>
</html>

（4）層級選擇器（空格）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 .c2 div{
            background-color:black;
            color: white;
                   }
        span div{
            background-color:green;
            color: yellow;
        }
    </style>
</head>

（5）組合選擇器（逗號）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1,#i2,#i3{
            background-color:green;
            color: yellow;
        }
        .c1,.c2{
            background-color:green;
            color: yellow;
        }
    </style>
</head>

（6）屬性選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
　　　.c3[n="kanghui"]{width: 100px;height: 200px;}
　　</style> 
</head>

PS：優先級，標籤上style優先，編寫順序，就近原則

4 CSS經常使用屬性

（1）顏色屬性

<div style="color:blueviolet">ppppp</div>

rgb顏色查詢對照表：http://tool.oschina.net/commons?type=3

（2）字體屬性

1 font-size: 20px/50%/larger
2 font-family:'Lucida Bright'
3 font-weight: lighter/bold/border/

<h1 style="font-style: oblique">qqqq</h1>

（3）背景屬性

background-position這個很重要！後面作多層背景時會用到！

1 background-color: cornflowerblue
2 background-image: url('1.jpg');
3 background-repeat: no-repeat;(repeat:平鋪滿)
4 background-position: right top（20px 20px）;(橫向：left center right)(縱向：top center bottom)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style="height: 100px"></div>
 9     <div style="background-image: url(icon_18_118.png);
10     background-repeat: no-repeat;
11     height: 20px;
12     width: 20px;
13     border: 1px;
14     background-position-x: 0;
15     background-position-y: 0;
16     ></div>
17 </body>
18 </html>

背景色填充

（4）文本屬性

1 font-size: 10px;
2 text-align: center;   橫向排列
3 line-height: 200px;   文本行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基於字體大小的百分比
4 vertical-align:－4px  設置元素內容的垂直對齊方式 ,只對行內元素有效，對塊級元素無效
5 text-indent: 150px;   首行縮進
6 letter-spacing: 10px;
7 word-spacing: 20px;
8 text-transform: capitalize;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8 
 9 
10         .outer .item {
11             width: 300px;
12             height: 200px;
13             background-color: chartreuse;
14             display: inline-block;
15         }
16 
17 
18     </style>
19 </head>
20 <body>
21     <div class="outer">
22         <div class="item" style="vertical-align: top">ll
23         </div>
24         <div class="item">
25         </div>
26     </div>
27 
28     <script>
29 
30     </script>
31 </body>
32 </html>
33 
34 vertical-align

小試牛刀1

 1 <body>
 2     <div class="c1 c2" style="color:pink"></div>
 3     <div style="border:1px solid red;"></div>
 4     <div style="border:4px dotted red;"></div>
 5     <div style="height: 48px;
 6     width: 80%;
 7     border: 1px solid blue;
 8     font-size: 16px;
 9     text-align: center;
10     line-height: 48px;
11     font-weight: bold;">
12     </div>
13 </body>

小試牛刀2

（5）邊框屬性

1 border-style: solid;
2 border-color: chartreuse;
3 border-width: 20px;
4 簡寫：border: 30px rebeccapurple solid;

（6）display屬性

1 none
2 block
3 inline

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style="background-color: red;display: inline">sdsf</div>
 9     <span style="background-color: red;display: block">sdsd</span>
10     <span style="background-color:red;height: 50px;width: 70px;">sdsds</span>
11     <a style="background-color: red;"></a>
12 </body>
13 </html>

display

（7）內邊距和外邊距

margin: 用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
padding: 用於控制內容與邊框之間的距離；

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div style="height: 35px;width: 400px;position: relative;">
 9     <input type="text" style="height: 35px;width: 370px;padding-right: 30px;"/>
10     <span style="position: absolute;right: 10px;top: 10px;background-image:url(i_name.png);height: 20px;width: 20px;display: inline-block;"></span>
11     </div>
12 </body>
13 </html>

邊距

練習： 300px*300px的盒子裝着100px*100px的盒子，分別經過margin和padding設置將小盒子移到大盒子的中間

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8         .div1{
 9             background-color: aqua;
10             width: 300px;
11             height: 300px;
12         }
13         .div2{
14             background-color: blueviolet;
15             width: 100px;
16             height: 100px;
17         }
18     </style>
19 </head>
20 <body>
21        <div class="div1">
22            <div class="div2"></div>
23            <div class="div2"></div>
24        </div>
25 </body>
26 </html>

練習

思考1:

邊框在默認狀況下會定位於瀏覽器窗口的左上角，可是並無緊貼着瀏覽器的窗口的邊框，這是由於body自己也是一個盒子（外層還有html），在默認狀況下， body距離html會有若干像素的margin，具體數值因各個瀏覽器不盡相同，因此body中的盒子不會緊貼瀏覽器窗口的邊框了。

（8）float屬性

常見的塊級元素有 div、form、table、p、pre、h1～h五、dl、ol、ul 等。
常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .pg-header{
 8             height: 38px;
 9             background-color: #dddddd;
10             line-height: 38px;
11         }
12     </style>
13 </head>
14 <body style="margin: 0 auto">
15     <div class="pg-header">
16         <div style="width: 960px;margin: auto">
17             <div style="float: left">收藏本站</div>
18             <div style="float: right">
19                 <a>登陸</a>
20                 <a>註冊</a>
21             </div>
22             <div style="clear: both"></div>
23         </div>
24     </div>
25     <div style="width: 300px;border: 1px solid red;">
26         <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
27         <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
28         <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
29         <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
30         <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
31         <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
32         <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
33         <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
34         <div style="clear: both;"></div>
35     </div>
36 </body>
37 </html>

float演示

（9）position屬性

1 fixed
2 relative
3 absolute

opcity: 0.5 透明度
z-index: 層級順序
overflow: hidden,auto
hover

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style="width: 50px;height: 50px;background-color: black;position: absolute;"></div>
 9     <div style="height: 5000px;background-color: #dddddd"></div>
10 </body>
11 </html>

absolute

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style="position: relative;width: 500px;height: 400px;border: 1px solid red;margin: 0 auto">
 9 
10         <div style="position: absolute;left:0; bottom:0; width: 50px;height: 50px;background-color: black"></div>
11     </div>
12     <div style="position: relative;width: 500px;height: 400px;border: 1px solid red;margin: 0 auto"></div>
13     <div style="position: relative;width: 500px;height: 400px;border: 1px solid red;margin: 0 auto"></div>
14 
15 </body>
16 </html>

position演示

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style="z-index: 10;position: fixed;
 9     width: 500px;
10     height: 500px;
11     left: 50%;
12     top: 50%;
13     margin-top: -200px;
14     margin-left: -250px;
15     background-color: white
16     "></div>
17 
18     <div style="z-index: 9;position: fixed;background-color: black;
19     top: 0;
20     left: 0;
21     bottom: 0;
22     right: 0;
23     opacity: 0.6;
24     "></div>
25     <div style="height: 5000px;background-color: red"></div>
26 </body>
27 </html>

z-index

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style="height: 200px;width: 300px;overflow: auto">
 9         <img src="1.jpg">
10     </div>
11       <div style="height: 200px;width: 300px;overflow: hidden ">
12         <img src="1.jpg">
13     </div>
14 </body>
15 </html>

overflow

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .pg-header{
 8             position: fixed;
 9             right: 0px;
10             left: 0px;
11             top: 0px;
12             height: 48px;
13             background-color: #24592a;
14             line-height: 48px;
15         }
16         .pg-body {
17             margin-top: 50px;
18         }
19         .w {
20             width: 980px;
21             margin: 0 auto;
22         }
23         .pg-header .menu{
24             display: inline-block;
25             padding: 0 10px 0 10px;
26             color: white;
27         }
28         .pg-header .menu:hover{
29             background-color: green;
30         }
31     </style>
32 </head>
33 <body>
34     <div class="pg-header">
35         <div class="w">
36             <a class="logo">LOGO</a>
37             <a class="menu">所有</a>
38             <a class="menu">段子</a>
39             <a class="menu">社區</a>
40         </div>
41     </div>
42     <div class="pg-body">
43         <div class="w"></div>
44     </div>
45 </body>
46 </html>

hover

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div style="height: 35px;width: 400px;position: relative;">
 9     <input type="text" style="height: 35px;width: 370px;padding-right: 30px;"/>
10     <span style="position: absolute;right: 10px;top: 10px;background-image:url(i_name.png);height: 20px;width: 20px;display: inline-block;"></span>
11     </div>
12 </body>
13 </html>

相對絕對位置

5 小結

一氣呵成，再而衰，三而竭！

要學的東西太多了，學不過來了。

酷狗上有些歌已經沒有版權了，可是還能聽，不能分享。心情有點糟~

6 練習

練習1：返回頂部

需用用到JavaScript，下節內容。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div onclick="GoTop();" style="width: 50px;height: 50px;background-color: black;color: white;
 9     position: fixed;
10     bottom: 20px;
11     right: 20px;
12     ">返回頂部</div>
13     <div style="height: 5000px;background-color: #dddddd"></div>
14     <div>
15         <script>
16             function GoTop() {
17                 document.body.scrollTop =0;
18             }
19         </script>
20     </div>
21 </body>
22 </html>

返回頂部

練習2：頂部固定

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .pg-header{
 8             height: 48px;
 9             background-color: black;
10             color: white;
11             position: fixed;
12             top: 0px;
13             right: 0px;
14             left: 0px;
15         }
16         .pg-body{
17             background-color: #dddddd;
18             height: 5000px;
19         }
20     </style>
21 </head>
22 <body>
23     <div class="pg-header">頭部</div>
24     <div class="pg-body;" style="margin-top: 48px" >內容</div>
25 </body>
26 </html>