CSS

CSS基礎語法

1.selector{
property:value 屬性：值
}
eg:h1{color:red;font-size:14px;}

屬性>1個，屬性之間用分號隔開：
值>1個單詞，則需要加上引號；
eg:p{font-family:“sans”;}

CSS高級語法：

1.選擇器分組：
h1,h2,h3,h4,h5,h6{color:red;}
2.繼承
body{color:green;}

CSS派生選擇器：

  派生選擇器：通過依據元素在其位置的上下文關係來定義樣式。

一、 CSS ID選擇器
1.id選擇器
（1） id選擇器可以爲標有id的html元素指定特定的樣式。
（2）id選擇器以’#'來定義。
2.id選擇器和派生選擇器：
目前比較常用的方式是id選擇器常常用於建立派生選擇器。

二、CSS類選擇器
1.類選擇器：
類選擇器以一個點顯示。
2.class也可以用作派生選擇器。

三、CSS基礎—屬性選擇器
1.屬性選擇器：
對帶有指定屬性的HTML元素設置樣式
2.屬性和值

CSS背景

1.背景：
CSS允許應用純色作爲背景，也允許使用背景圖像創建相當複雜的效果

  屬性                     描述
  background-attachment   背景圖像是否固定或者隨着頁面的其餘部分滾動
  background-color       設置元素的背景顏色
  background-image       把圖片設置爲背景
  background-position    設置背景圖片的起始位置
  background-repeat      設置背景圖片是否允許重複

CSS3背景
（1）background-size:規定背景圖片的尺寸
（2）background-origin:規定背景圖片的定位區域
（3）background-clip:規定背景的繪製區域

CSS文本

css文本屬性可定義文本外觀
通過文本屬性，可以改變文本的顏色、字符間距、對齊文本、裝飾文本、對文本縮進

css文本

屬性                                 描述
color                              文本顏色
direction                          文本方向
line-height                        行高
letter-spacing                     字符間距
text-align                         對齊元素中的文本
text-decoration                    向文本添加修飾
text-indent                        縮進元素中文本的首行
text-transform                     元素中的字母
unicode-bidi                       設置文本方向
white-space                        元素中空白的處理方式
word-spacing                       字間距

CSS文本效果
text-shadow:向文本添加陰影
word-wrap:規定文本的換行規則

CSS字體

css字體屬性定義文本的字體系列、大小、加粗、風格和變形

屬性                     描述
font-family         設置字體系列
font-size           設置字體的尺寸
font-style          設置字體風格
font-variant        以小型大寫字體或正常字體顯示文本
font-weight         設置字體的粗細

CSS鏈接

1.css鏈接的四種狀態
（1）a:link 普通的、未被訪問的鏈接。
（2）a:visited 用戶已訪問的鏈接。
（3）a:hove 鼠標之戰位於鏈接的上方。
（4）a:active 鏈接被點擊的時刻。
2.常見的鏈接樣式
text-decoration 屬性大多用於去掉鏈接中的下劃線
3.設置背景顏色
background-color

CSS列表

1.css列表
css列表屬性允許你設置、改變列表標誌，或者將圖像作爲列表項標誌
屬性 描述
list-style 簡寫列表項
list-style-image 列表項圖像
list-style-position 列表標誌位置
list-style-type 列表類型

css表格

1.css表格
css表格屬性可以幫助我們極大的改善表格的外觀
2.表格邊框
（1） 寬度和高度 width height
（2）實線和虛線 solid dashed(虛線) dotted（圓圈）
（3）邊框顏色border-color、border-left-color、border-right-color、border-top-color、border-bottom-color
3.摺疊邊框
border-collapse:separate 邊框會被分開。
border-collapse:collapse 如果可能，邊框會合併爲一個單一的變框。
border-collapse:inherit 規定應該從父元素繼承border-collapse屬性的值。
4.表格寬高
border-radius:10px;
width:160px;
height:20px;

5.表格文本對齊
text-align:left/center/right
6.表格內邊距
padding-top:20px;
padding-left:100px;
padding-right:100px;
padding-bottom:20px;
7.表格顏色
background-color:blueviolet;

CSS輪廓

1.輪廓主要是用來突出元素的作用
屬性 描述
outline 設置輪廓屬性
outline-color 輪廓的顏色
outline-style 輪廓的樣式
outline-width 輪廓的寬度

CSS定位和CSS浮動

1.css定位：
改變元素在頁面上的位置
2.css定位機制
普通流：元素按照其在HTML中位置排序決定排布的過程
浮動
絕對佈局
3.css定位屬性

   屬性                       描述
    position             把元素放在一個靜態的、相對的、絕對的、或固定的位置中。
    top                  元素向上偏移量
    left                 元素向左偏移量
    right                元素向右偏移量
    bottom               元素向下偏移量
    overflow             設置元素溢出其區域發送的事情
    clip                 設置元素顯示的形狀
    vertical-align       設置元素垂直對齊方式
    z-index              設置元素的堆疊順序

1.css position屬性
static
relative
absolute
fixed

2.css浮動
float:屬性可用的值
left:元素向左浮動
right:元素向右浮動
none:元素不浮動
inherit:從父級繼承浮動屬性
3.clear屬性
去掉浮動屬性（包括繼承來的屬性）
clear屬性值
left、right：去掉元素向左、向右浮動
bottom:左右兩側均去掉浮動
inherit:從父級繼承來clear的值

CSS盒子模型

1.盒子模型的內容範圍包括：
margin、border、padding、content部分組成
2.內邊距屬性：

  屬性                      描述
  padding               所有邊距
  padding-bottom        底邊距
  padding-left          左邊距
  padding-right         右邊距
  padding-top           上邊距

css邊框

1.css邊框
我們可以創建效果出色的邊框，並且可以應用任何元素
2.邊框的樣式
border-style:定義了10個不同的非繼承樣式，常用的包括none,solid,dotted，double,dashed
3.邊框的單邊樣式
border-top-style
border-left-style
border-right-style
border-bottom-style
4.邊框寬度：
border-width
5.邊框單邊的寬度：
border-top-width
border-left-width
border-right-width
border-bottom-width
6.邊框的顏色
border-color
7.邊框單邊的顏色：
border-top-color
border-left-color
border-right-color
border-bottom-color

CSS3邊框
1.css3邊框
  border-radius:圓角邊框
  box-shadow:10px 10px 5px #ff00ff;上下 左右 透明度  顏色

CSS外邊距

1.外邊距
圍繞在內容邊框的區域就是外邊距，外邊距默認爲透明區域
外邊距接受任何長度單位、百分數值
2.外邊距常用屬性
屬性 描述
margin 所有邊距
margin-bottom 底邊距
margin-left 左邊距
margin-right 右邊距
margin-top 上邊距

CSS常用操作

對齊操作
1.使用margin屬性進行水平對齊
2.使用position屬性進行左右對齊
3.使用float屬性進行左右對齊
float:left 向左對齊
float:right 向右對齊

分類屬性

屬性                     描述
height                 元素高度
line-height            行高
max-height             元素最大高度
max-width              元素最大寬度
min-width              元素最小寬度
min-height             元素最小高度
width                  設置元素寬度

分類操作

  屬性                     描述
 clear                  設置一個元素的側面是否允許其他的浮動元素
 cursor                 規定當指向某元素之上時顯示的指針類型
 display                設置是否及如何顯示元素
 float                  定義元素在哪個方向浮動
 position               把元素放置到一個靜態的、相對的、絕對的、固定的位置
 visibility             設置元素是否可見或不可見

導航欄
1.垂直導航欄
2.水平導航欄
3.導航欄效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>導航欄</title>
    <link rel="stylesheet" href="30.style.css">
</head>
<body>
    <ul>
        <li><a href="#" >導航1</a></li>
        <li><a href="#">導航2</a></li>
        <li><a href="#">導航3</a></li>
        <li><a href="#">導航4</a></li>
    </ul>
</body>
</html>

ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    background-color: antiquewhite;
    width:260px;
    text-align: center;
}
a:link,a:visited{
    font-weight: bold;
    text-decoration: none;
    display: block;
    background-color: burlywood;
    color: aliceblue;
    width: 50px;
    text-align: center;
}
a:active,a:hover{
    background-color: crimson;
}
li{
    display: inline;
    padding: 3px;
    padding-left: 5px;
    padding-right: 5px;
}

圖片操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圖片操作</title>
    <link rel="stylesheet" href="31.style.css" type="text/css">
</head>
<body>
    <div class="image">
        <a href="#" target="_self">
            <img src="./image/李子.jpg" alt="水果" width="200px" height="200px">
        </a>
        <div class="text">李子是一種很美味的水果</div>
    </div>
</body>
</html>


body{
    margin: 10px auto;
    width: 70%;
    height: auto;
    background-color: blueviolet;
}
.image{
    border: 1px solid darkblue;
    width: auto;
    height: auto;
    float: left;
    text-align: center;
    margin: 4px;
}
.img{
    margin: 5px;
    opacity: 0.8;
}
.text{
    font-size: 12px;
    margin-bottom: 5px;
}

CSS3選擇器

1.元素選擇器 如：h1{}、a{}

選擇器分組
1.例子 h1、h2{}
2.通配符 *{}

類選擇器詳解
1.類選擇器允許以一種獨立與文檔元素的方式來指定樣式。
eg:.class{}
2.結合元素選擇器
eg:a.class{}
3.多類選擇器
eg:.class.class{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多類選擇器</title>
    <link rel="stylesheet" href="34.style.css" type="text/css"/>
</head>
<body>
    <p class="p1">this is my web page.</p>
    <p class="p2">this is my web page.</p>
    <p class="p1 p2">this is my web page.</p>
</body>
</html>
.p1{
    color: aliceblue;
}
.p2{
    font-size: 20px;
}
.p1.p2{
    font-style: italic;
}

ID選擇器
1.ID選擇器：
ID選擇器類似於選擇器，不過也有一些重要差別
eg:#id{}

2.類選擇器和id選擇器的差別
（1）id只能在文檔中使用一次，而類可以多次使用。
（2）id選擇器不能結合使用。
（3）當使用js時候，需要用到id。

屬性選擇器詳解
1.簡單屬性選擇
eg:[title]{}
2.根據具體屬性值選擇：
除了選擇擁有某些的元素，還可以進一步縮小選擇範圍，只選擇特定屬性值的元素。
eg:a[href=“http://www.baidu.com”]{};
3.屬性和屬性值必須完全匹配。
4.根據部分屬性值操作。

後代選擇器
1.後代選擇器
後代選擇器可以選擇作爲某元素後代的元素。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>ID選擇器</title>
        <link rel="stylesheet" href="35.style.css">
        <style>
         [title]{
             color: aqua;
         }
         [href="http://www.baidu.com"]{
             font-size: 30px;
         }
         [title~="title"]{
             font-size: 50px;
         }
        </style>
    </head>
    <body>
        <p title="tit">hello</p>
        <p title="t">hello</p>
        <p title="title">hello</p>
        <p title="ti">hello</p>
        <p title="titlt">hello</p>
        <p title="title ti">hello</p>
        <a href="http://www.baidu.com">百度</a>
        <p>this is <strong>my <i>web</i> page</strong><strong></strong>>.</p>
        <p>this is my <strong><i>web</i></strong> page.</p>
    </body>
    </html>
    #mydiv{
        color: aliceblue;
    }
    
    /* 後代選擇器 */
    /* p i{
        color: burlywood;
    } */
    
    /* 子選擇器 */
    p>strong>i{
        color: aqua;
    }

1.與後代選擇器相比，子元素選擇器只能作爲某些子元素的元素
eg:h1>strong{};

2.相鄰兄弟選擇器
可選擇緊接在另一個元素後的元素，且二者有相同的父元素
eg:h1+p

2D、3D轉換

1.通過CSS3轉換，我們能夠對元素進行移動、縮放、轉動、拉長或拉伸。
轉換是使元素改變形狀、尺寸和位置的一種效果
可以使用2D、3D來轉換元素
2.2D轉換方法:
translate(x,y)移動平移
rotate(deg度數) 旋轉 正值是順時針，負值是逆時針 eg:transform:rotate(45deg);
scale(x,y)縮放
skew(deg,deg)傾斜 eg:transform:skew(30deg,0deg);
matrix()變幻矩陣
3.3D轉換方法：
rotateX() 沿着x立體旋轉
rotateY() 沿着y立體旋轉

過渡
1.通過使用CSS3，可以給元素添加一些效果。
2.CSS3過渡時元素從一種樣式轉換成另一種樣式
動畫效果的css
動畫執行時間
3.屬性
屬性 描述
transition 四個過渡屬性
transition-property 過渡的名稱
transition-duration 過渡效果花費的時間
transition-timing-function 過渡效果的時間曲線
transition-delay 過渡效果開始時間

動畫

1.通過css3也可以進行創建動畫了。
2.css3的動畫需要遵循@keyframes規則。
規定動畫的時長
規定動畫的名稱

瀑布流
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多列</title>
    <link rel="stylesheet" href="41.style.css" type="text/css">
</head>
<body>
    <div class="div1">
        大家好，歡迎大家來到騰訊視頻，這裏有很多優質視頻分享給大家。
        大家好，歡迎大家來到騰訊視頻，這裏有很多優質視頻分享給大家。
        大家好，歡迎大家來到騰訊視頻，這裏有很多優質視頻分享給大家。
        大家好，歡迎大家來到騰訊視頻，這裏有很多優質視頻分享給大家。
        大家好，歡迎大家來到騰訊視頻，這裏有很多優質視頻分享給大家。
        大家好，歡迎大家來到騰訊視頻，這裏有很多優質視頻分享給大家。
        大家好，歡迎大家來到騰訊視頻，這裏有很多優質視頻分享給大家。
        大家好，歡迎大家來到騰訊視頻，這裏有很多優質視頻分享給大家。
        大家好，歡迎大家來到騰訊視頻，這裏有很多優質視頻分享給大家。
        大家好，歡迎大家來到騰訊視頻，這裏有很多優質視頻分享給大家。
        大家好，歡迎大家來到騰訊視頻，這裏有很多優質視頻分享給大家。
        大家好，歡迎大家來到騰訊視頻，這裏有很多優質視頻分享給大家。
        大家好，歡迎大家來到騰訊視頻，這裏有很多優質視頻分享給大家。
        大家好，歡迎大家來到騰訊視頻，這裏有很多優質視頻分享給大家。
        大家好，歡迎大家來到騰訊視頻，這裏有很多優質視頻分享給大家。
    </div>
</body>
</html>


.div1{
    column-count: 3;
    -webkit-column-count: 3;
    -webkit-column-gap: 50px;
    -moz-column-gap: 50px;
    column-gap: 50px;
    column-rule: 5px outset #ff0000;
    -webkit-column-rule: 5px outset #ff0000;
}