前端學習(3)-CSS

時間 2020-10-03

標籤前端學習 css 欄目 CSS 简体版

原文原文鏈接

一 CSScss

CSS是Cascading Style Sheets的縮寫，層疊樣式表，用來控制網頁數據的顯示，能夠使網頁的顯示與數據內容分離。html

二引入方式api

　　（1）行內式：在標記的style屬性中設置CSS樣式，不推薦使用。瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello CSS</title>
</head>
<body>
    <div style="color: aqua;background-color: bisque">hello world</div>
</body>
</html>

行內式

　　（2）嵌入式：將CSS樣式集中寫在網頁的<head></head>標籤找那個的<style></style>標籤中。結果和上圖一致；ide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello CSS</title>
    <style>
        div{
            color: aqua;
            background-color: bisque;
        }
    </style>
</head>
<body>
    <div >hello world</div>
</body>
</html>

嵌入式

　　（3）連接式：寫一個*.css文件引入到HTML文件中。不知道爲何用Chrome瀏覽器和IE都不能顯示，但在Windows Edge瀏覽器中能夠。推薦使用這種方式。函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello CSS</title>
    <link  href="myCss.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <div >hello world</div>
</body>
</html>

連接式

div{
    color: aqua;
    background-color: bisque;
}

CSS文件

　　（4）導入式：在<head></head>標籤中的<style></style>標籤中導入*.css文件。仍是隻能在Windows Edge中正常顯示佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello CSS</title>
    <style type="text/css">
        @import "myCss.css";
    </style>
</head>
<body>
    <div >hello world</div>
</body>
</html>

導入式

　　若是以上幾種方式同時使用，採起就近原則，離標籤最近的樣式將被適用。post

三 CSS選擇器字體

　　選擇器是用來指定樣式的做用對象，做用於哪些標籤。url

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello CSS</title>
    <style type="text/css">
        *{   {#通用選擇器#}
            background-color: aqua;
        }
        div{ {#標籤選擇器， 標籤名字#}
            font-size: 50px;
        }
        #name{ {#以標籤中的id做爲選擇器， 前面加"#" #}
            color: black;
        }
        .p2{ {#以標籤中的id做爲選擇器，前面加"." #}
            font-style: oblique;
        }
        .div1 p1{ {#後代選擇器， div1是父代標籤class，p1是子代標籤class 只要是有這種層級關係的都會被指定， 用空格隔開#}
            font-size: 60px;
        }
        .div1>.p1{ {#子代選擇器，div1是父代標籤class，p1是子代標籤class 只會把子代指定樣式， 用大於號隔開#}
            color: darkcyan;
        }
        #name, #sex{ {#同時指定多個沒有標籤樣式，並列選擇器，用逗號隔開#}
            color: coral;
        }
        .div1+#name{ {#毗鄰選擇器， 會指定class是div1的緊挨着的下一個id是name的標籤的樣式#}
            color: blue;
        }
        [class]{  {# 屬性選擇器 全部這類屬性的標籤都有這個樣式 #}
            color: red;
        }
        [class="p2"]{ {# 屬性選擇器 指定屬性值爲p2 的標籤的樣式 #}
            color: black;
        }
        [name]{     {# 爲本身建立的屬性添加樣式 #}
            font-size: 50px;
        }
        div [class="p2"]{ {# 當用屬性鍵值對區分不出時，能夠在前面加上標籤名，用來指定樣式 #}
            color:black;
        }
        p [class="p2"]{ {# 指定p標籤中屬性class值等於p2的標籤的樣式 #}
            color: blue;
        }
        [class~="div2"]{ {# 指定標籤屬性中只要有一個屬性是div2的標籤的樣式，能夠選中一個屬性多個值 #}
            background-color: yellow;
        }
        [class ^= "div2"]{ {# 指定class屬性的值得開頭爲div2的標籤的樣式 #}
            background-color: yellow;
        }
        [class $= "div2"]{ {# 指定class屬性的值以div2結尾的標籤的樣式 #}
            background-color: yellow;
        }
        [class *= "div2"]{ {# 指定class屬性的值包含div2的標籤的樣式 #}
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div >hello world</div>
    <div class="div1">
        <p class="p1">div p</p>
    </div>
    <p id="name">I'm damon</p>
    <p id="sex">Man</p>
    <p class="p2">p2標籤</p>
    <div class = "p2">classp2 div</div>
    <p name="damon">damon</p> {# 本身建立個name屬性 但瀏覽器不認識#}
    <div class="div2 div3">兩個屬性</div> {# 這個標籤的class屬性有兩個值div2 div3 #}
</body>
</html>

四僞類

僞類是對選擇器添加特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello CSS</title>
    <style type="text/css">
        a:link{ {# 定義連接時的樣式 #}
            color: yellow;
        }
        a:hover{ {# 定義鼠標懸浮到連接時的樣式 #}
            color: blue;
        }
        a:visited{  {# 定義連接被訪問後的樣式 #}
            color: black;
        }
        a:active{ {# 定義連接訪問時的樣式 #}
            color: red;
        }
    </style>
</head>
<body>
    <a href="www.baidu.com">anchor僞類</a>
</body>
</html>

anchor僞類

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello CSS</title>
    <style type="text/css">
        #p1:before{
            content: "僞類"; {# 在id是p1的標籤的內容前面加‘僞類’ #}
            color: red;
        }
        #p2:after{
            content: "僞類"; {# 在id是p2的標籤的內容後面加‘僞類’ #}
            color: darkcyan;
        }
    </style>
</head>
<body>
    <p id="p1"> before </p>
    <p id="p2"> after </p>
</body>
</html>

before,after僞類

五經常使用屬性

　　1.顏色屬性：下面是顏色屬性經常使用的四種表示方式

<div style="color: red">英文單詞</div>
<div style="color: #ff2233">十六進制</div>
<div style="color: rgb(255,0,0)">rgb</div>
<div style="color: rgba(255,0,0,0.5)">rgba</div>

　　2.字體屬性

<div style="font-size: smaller">字體大小</div>
<div style="font-family: 'Times New Roman'">字體樣式</div>
<div style="font-weight: lighter">字體粗細</div>
<div style="font-style: italic">字體傾斜</div>

　　3.背景屬性

background-color: red; {# 設置背景顏色 #}
background-image: url("1.jpg"); {# 設置背景圖片 #}
background-repeat: no-repeat; {# 背景圖片是否平鋪整個背景 #}
background-size: 100px 200px; {# 背景圖片大小 #}
background-position； center center; {#背景圖片位置在上下的中心 左右的中心 #}

也能夠直接這麼寫：

background: red no-repeat url("1.jpg") 100px 200px;

　　4.文本屬性

text-align: center; {# 文本居中 #}
line-height: 100px; {# 文本所佔行的高度 #}
text-indent: 10px; {# 文本首行縮進 #}
letter-spacing: 10px; {# 文本中每一個字母的間隙 #}
word-spacing: 10px; {# 文本中每一個單詞的間隙 #}
text-transform: capitalize; {# 文本中單詞首字母大寫 #}

　　5.外邊距和內邊距

　　在html中一切皆盒子。margin是盒子與盒子之間的距離，border是盒子的邊界，padding是盒子邊界距離內容的距離

　　注意：當指定一個CSS元素的長度和寬度時，指定的是內容區域的長寬，要指定徹底體的長寬，還需指定邊寬和邊距。

　　6.邊界屬性　

border-stype: solid

border-color: red

border-width: 20px

簡寫：border: 10px red solid

　　7.浮動屬性

　　塊級元素在排布上獨佔一行，每一個元素會獨立佔一行，能夠設置width,height,margin,padding屬性。

　　內聯元素不會獨佔一行，多個元素會排列在同一行內，內聯函數設置width,height無效，padding-left,padding-right,margin-left,margin-right有效果，但padding-top,padding-bottom,margin-top,margin-bottom不會有效果

　　常見文檔流：元素佈局會遵循從上到下，從左到右的規律。

　　脫離文檔流：元素不存在正常的佈局中，其餘元素會視其不存在而進行正常佈局。兩種方式：float（非徹底脫離），postion: absolute fixed（徹底脫離）

　　（1）Float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .div1{
            background-color: red;
            width: 100px;
            height: 100px;
            float: left;
        }
        .div2{
            background-color: green;
            width: 100px;
            height: 100px;
            float: left;
        }
        .div3{
            background-color: yellow;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>
</html>

float

　　能夠看到規律：當div2浮動時，若是div1也是浮動，那麼div2會緊跟着div1的後面，若是div1不是浮動，那麼div2會與div1相對位置不發生改變，而div3都會視浮動標籤不存在，位置向上頂替。

　　　　　　　　　在div3清除浮動後，div3沒有再頂替div1和div2的位置。

　　在佈局上推薦用float，不要用postion。

　　當給三個標籤加上文本，只有div2向左浮動，結果：

　　（2）Position　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background-color: red;
            width: 100px;
            height: 500px;
        }
        .div2{
            background-color: green;
            width: 100px;
            height: 500px;
        }
        a{
            position: fixed;
            bottom: 20px;
            right: 20px;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <a>返回頂部</a>
</body>
</html>

position: fixed

　　　能夠看到a標籤會在右下角，不隨着滾動條的滾動，位置發生改變。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .div1{
            background-color: red;
            width: 100px;
            height: 100px;
        }
        .div2{
            background-color: green;
            width: 100px;
            height: 100px;
            position: relative;
            top: 100px;
            left: 100px
        }
         .div3{
             background-color: yellow;
             width: 200px;
             height: 200px;
         }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>
</html>

position: relative

　　能夠看到div2的位置是相對原來的位置分別向右和下移動了100像素，div3沒有發生改變（因此div2沒有徹底脫離文檔流），這是position:relative的功能。

 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: red;
10             width: 100px;
11             height: 100px;
12         }
13         .div2{
14             background-color: green;
15             width: 100px;
16             height: 100px;
17             position: absolute;
18             top: 100px;
19             left: 100px
20         }
21          .div3{
22              background-color: yellow;
23              width: 200px;
24              height: 200px;
25          }
26     </style>
27 </head>
28 <body>
29     <div class="div1"></div>
30     <div class="div2"></div>
31     <div class="div3"></div>
32 </body>
33 </html>

position: absolute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .div1{
            background-color: red;
            width: 100px;
            height: 100px;
        }
        .div2{
            background-color: green;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 100px;
            left: 100px
        }
         .div3{
             background-color: yellow;
             width: 200px;
             height: 200px;
         }
        .div2parent{
            position: relative;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2parent">
        <div class="div2"></div>
    </div>
    <div class="div3"></div>
</body>
</html>

加了父標籤

　　能夠看到：在加了父標籤後，div2移動的位置發生了改變。這裏就是position: absolute的用法：div2會一直向上找position!=static（static就是正常文檔流,是默認的）的父標籤，而後根據這個父標籤的位置進行移動。

　　若是沒沒有符合要求的話，就根據最外層進行移動

　　8.display屬性

　　用來將塊級標籤和內聯標籤互相轉換　

display: block

display: inline

display: inline-block

六嵌套規則

　　1. 塊級元素能夠嵌套內聯元素或者某些塊級元素，內聯元素不能包含塊級元素而只能包含其餘內聯元素；

　　2. h1, h2, h3, h4, h5, h6 p, dt這些塊級元素只能包含內聯元素；

　　3. li內能夠包含div；

　　4. 塊級元素應該與塊級元素並列，內聯元素與內聯元素並列；

參考文獻：

https://www.cnblogs.com/yuanchenqi/articles/5977825.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。