1什麼是CSS

如何學習
1. CSS是什麼
2. CSS怎麼用(快速入門)
3. CSS選擇器(重點+難點)
4. 美化網頁(文字陰影超連結清單…)
5. 盒子模型
6. 浮動
7. 定位
8. 網頁動畫(特效效果)

1.1什麼是CSS

Cascading Style Sheet 層疊級聯樣式表

CSS:表現層(美化網頁)

字型顔色邊距高度寬度背景圖檔網頁定位

2.CSS入門基礎1什麼是CSS2選擇器3美化網頁元素4.盒子模型5浮動6.定位7.動畫8總結

1.2發展史

CSS1.0

CSS2.0 DIV(塊)+CSS HTML和CSS結構分離網頁變得簡單 SEO

CSS2.1 浮動定位

CSS3.0 圓角邊框陰影動畫… 浏覽器相容性

1.3快速入門

練習格式

2.CSS入門基礎1什麼是CSS2選擇器3美化網頁元素4.盒子模型5浮動6.定位7.動畫8總結

基本入門

建議使用這種規範

2.CSS入門基礎1什麼是CSS2選擇器3美化網頁元素4.盒子模型5浮動6.定位7.動畫8總結

CSS的優勢

内容和表現分離
網頁結構表現同一可以實作複用
樣式十分豐富
建議使用獨立于html的css檔案
利用SEO 容易被搜尋引擎收錄

1.4CSS的三種導入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--2.内部樣式-->
    <style>
        h1 {
            color: green;
        }
    </style>
    <link rel="stylesheet" href="CSS/css.css">
</head>
<body>
<!--優先級:就近原則-->

<!--1.行内樣式 在标簽元素中 編寫一個style屬性 編寫樣式即可-->
<h1 style="color: red">我是标題</h1>
</body>
</html>

/*3.外部樣式*/
h1 {
    color: yellow;
}

拓展外部樣式兩種寫法

連結式 html内

/*3.外部樣式*/
h1 {
    color: yellow;
}

導入式 @import是CSS2.1特有的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--導入式-->
    <style>
        @import url("CSS/style.css");
    </style>
</head>
<body>
<h1>林宏程</h1>
</body>
</html>

2選擇器

作用:選擇頁面上的某一個或者某一類元素

2.1基本選擇器

2.1.1标簽選擇權

選擇一類标簽标簽{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标簽選擇器 會選擇到頁面上所有的這個标簽的元素
        */
        h1{
            color: red;
            background: aqua;
            border-radius: 24px;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>

<h1>學java</h1>
<h1>學java</h1>
<p>林宏程</p>
</body>
</html>

2.1.2類選擇器

選擇所有class屬性一緻的标簽跨标簽 .類名{}

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

    <style>
        /*類選擇器的格式 .class的名稱*/
        /*可以多個标簽歸類 是同一個class*/
        .title1{
            color: red;
        }
        .title2{
            color: aqua;
        }
    </style>
</head>
<body>
<h1 class="title1">标題1</h1>
<h2 class="title2">标題2</h2>
<h3 class="title1">标題3</h3>

<p class="title1">P标簽</p>
</body>
</html>

2.1.3ID選擇器

全局唯一 #id{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id選擇器 id必須保證全局唯一
          #id名稱{}
          不遵循就近原則
          id選擇器>類選擇器>标簽選擇器
        */

        #title1{
            color: red;
        }
        .style1{
            color: green;
        }
        h1{
            color: aqua;
        }
    </style>
</head>
<body>
<h1 id="title1">标題1</h1>
<h1 class="style1">标題2</h1>
<h1 class="style1">标題3</h1>
<h1>标題4</h1>
<h1>标題5</h1>
</body>
</html>

優先級

ID選擇器>類選擇器>标簽選擇權

2.2層次選擇器

總體代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*後代選擇器*/
        body p{
            color: red;
        }

        /*子選擇器*/
        body>p{
            background: aqua;
        }

        /*相鄰兄弟選擇器 隻有一個 向下一個*/
        .active +p{
            background: antiquewhite;
        }

        /*通用兄弟選擇器 目前選中元素的向下的所有兄弟元素*/
        .active~p{
            background: green;
        }
    </style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
<p>p7</p>
<p>p8</p>

</body>
</html>

html結構

2.CSS入門基礎1什麼是CSS2選擇器3美化網頁元素4.盒子模型5浮動6.定位7.動畫8總結

2.2.1後代選擇器

在某個元素後面所有标簽祖爺爺爺爺爸爸你

/*後代選擇器*/
body p{
    color: red;
}

2.CSS入門基礎1什麼是CSS2選擇器3美化網頁元素4.盒子模型5浮動6.定位7.動畫8總結

2.2.2子選擇器

在某個元素指定的後一代标簽兒子

/*子選擇器*/
body>p{
    background: aqua;
}

2.CSS入門基礎1什麼是CSS2選擇器3美化網頁元素4.盒子模型5浮動6.定位7.動畫8總結

2.2.3向下弟弟選擇器

隻有一個向下一個感覺應該叫弟弟選擇器因為他還隻能向下選擇

/*相鄰兄弟選擇器 隻有一個 向下一個*/
.active +p{
    background: antiquewhite;
}

2.CSS入門基礎1什麼是CSS2選擇器3美化網頁元素4.盒子模型5浮動6.定位7.動畫8總結

2.2.4向下所有弟弟選擇器

目前選中元素的向下的所有兄弟元素

/*通用兄弟選擇器 目前選中元素的向下的所有兄弟元素*/
.active~p{
    background: green;
}

2.CSS入門基礎1什麼是CSS2選擇器3美化網頁元素4.盒子模型5浮動6.定位7.動畫8總結

2.3結構僞類選擇器

僞類:條件

<!DOCTYPE html>
<html token string">"en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--避免使用class id選擇器-->
    <style>
        /*ul的第一個子元素*/
        ul li:first-child{
            background: green;
        }

        /*ul的最後一個子元素*/
        ul li:last-child{
            background: red;
        }

        /*選中p1:定位到父元素 選擇目前的第一個元素 按照元素
          nth-child(1) 選擇目前p元素的父級元素 選中父級元素的第一個 并且是目前元素才生效
        */
        p:nth-child(1){
            background:blue;
        }

        /*
            nth-of-type(2)選中父元素下的p元素的第二個 按照類型
        */
        p:nth-of-type(2){
            background: yellow;
        }
        /*動畫特效 選中更改背景顔色*/
        a:hover{
            background:black ;
        }

    </style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <a href="">a1</a>
    <h1>h1</h1>

    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
</body>
</html>

2.CSS入門基礎1什麼是CSS2選擇器3美化網頁元素4.盒子模型5浮動6.定位7.動畫8總結

2.4屬性選擇器(常用)

id+class 結合的選擇器

格式:

标簽[屬性名=屬性值(正則)] {

}

= 絕對等于

*=包含

^=以什麼開頭

$=以什麼結尾

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

    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            text-align: center;
            color: gray;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

        /*
        格式
        标簽[屬性名=屬性值(正則)] {}

        a[id]{}
        存在id屬性的元素

        a[id=first]{} 包含id=first的元素
        =絕對等于
        */
        a[id=first]{
            background: green;
        }

        /*
         class中有links的元素
         *=包含這個元素
        */
        a[class*=links]{
            background: yellow;
        }

        /*選中href中以http開頭的元素
        ^=以這個開頭
        */
        a[href^=http]{
            background: red;
        }

        /* 選中以href中以pdf結尾的元素
        $=以這個結尾*/
        a[href$=pdf]{
            background: aqua;
        }

    </style>
</head>
<body>
<p class="demo">
    <a href="https://www.baidu.com/" class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item active" >3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.png" class="links item">5</a>
    <a href="abc">6</a>
    <a href="/a.pdf">7</a>
    <a href="/abc.pdf">8</a>
    <a href="abc.doc">9</a>
    <a href="abcd.doc" class="links item last">10</a>
</p>


</body>
</html>

3美化網頁元素

3.1為什麼要美化

有效的傳遞頁面資訊
美化網頁頁面漂亮才能吸引使用者
凸顯頁面的主題
提高用的體驗

span标簽

重點要突出的字使用span套起來

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


    <style>
        #title1{
            font-size: 50px;
        }
    </style>
</head>
<body>
歡迎學習 <span id="title1">java</span>
</body>
</html>

3.2字型樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--{
            font-family: 字型 不同語言可以寫不同個數字型;
            font-size: 字型大小;
            font-weight: 字型粗細;
            color: 字型顔色;
            }  -->
    <style>
        body {
            font-family: "Arial Black",微軟雅黑;
            color: aqua;
        }

        h1 {
            font-size: 50px;
        }

        p {

        }

        .p1 {
            font-weight: lighter;
        }
    </style>
</head>
<body>
<h1>
    哼 &nbsp; 哼~~~
</h1>

<p class="p1">
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
</p>

<p>
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊!!!!!!!!!!!
</p>

<p>
    English is great
</p>
</body>
</html>

3.3文本樣式

color 顔色:

1.單詞

2.RGB:00~FF 紅綠藍三色調配 255 255 255

3.RGBA:00~FF 紅綠藍三色調配 255 255 255 A是透明度 0~1
text-align: 排版(如居中);

text-align: center;
text-indent: 縮進;

text-indent: 2em; em代表的是幾個字型的距離
line-height :行高

background: blue;

height: 300px;

line-height: 300px;

行高和塊的高度一緻就可以上下居中
裝飾

text-decoration: underline;
文本圖檔水準對齊

vertical-align: middle;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
    1.color 顔色:
        1.單詞
        2.RGB:00~FF 紅綠藍三色調配 255 255 255
        3.RGBA:00~FF 紅綠藍三色調配 255 255 255 A是透明度 0~1

    2.text-align: 排版(如 居中);
        text-align: center;
        vertical-align: middle;
    3.text-indent:  縮進;
        text-indent: 2em; em代表的是幾個字型的距離

    4.行高
        background: blue;
        height: 300px;
        line-height: 300px;
        行高和塊的高度一緻 就可以上下居中

    5.裝飾
        text-decoration: underline;

-->
    <style>
        img,span{
            vertical-align: middle;
        }

        h1{
            color:rgba(0,255,255,0.2) ;
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: blue;
            height: 100px;
            line-height: 100px;
        }

        .l1{
            /*下劃線*/
            text-decoration: underline;
        }
        .l2{
            /*中劃線*/
            text-decoration: line-through;
        }
        .l3{
            /*上劃線*/
            text-decoration: underline;
        }
        a{
            /*超連結去下劃線*/
            text-decoration: none;
        }
    </style>
</head>
<body>
<p class="l1">123123</p>
<p class="l2">123123</p>
<p class="l3">123123</p>

<h1>
    哼 &nbsp 哼~~~
</h1>

<p class="p1">
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
</p>

<p class="p2">
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊!!!!!!!!!!!
</p>

<p class="p3">
    English is great
</p>

<p>
    <img src="image/a.jpg" alt="圖檔錯誤">
    <spna>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</spna>
</p>
</body>
</html>

3.4文本陰影和超僞連結

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*預設的顔色*/
        a {
            text-decoration: none;
            color: blue;
        }

        /*滑鼠懸浮的狀态*/
        a:hover {
            color: orange;
            font-size: 20px;
        }

        /*滑鼠按住未釋放的狀态*/
        a:active {
            color: green;
            font-size: 100px;
        }

        /*未通路過連結*/
        a:link{
            color: aqua;
        }

        /*通路過連結*/
        a:visited{
            color: gray;
        }

        /*text-shadow: 陰影顔色 水準偏移 垂直偏移 模糊半徑;*/
        #price{
            text-shadow: cornflowerblue 10px 0px 2px;
        }
    </style>
</head>
<body>
<a href="#">
    <img src="image/a.jpg" alt="圖檔失效">
</a>

<p>
    <a href="#">驢</a>
</p>

<p>
    <a href="">作者 我</a>
</p>

<p id="price">
    $99
</p>
</body>
</html>

3.5清單

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部産品分類</h2>
    <ul>
        <li><a href="">圖書</a>&nbsp;&nbsp;&nbsp;<a href="">音箱</a>&nbsp;&nbsp;&nbsp;<a href="">數字商品</a></li>
        <li><a href="">家庭電器</a>&nbsp;&nbsp;&nbsp;<a href="">手機</a>&nbsp;&nbsp;&nbsp;<a href="">數位</a></li>
        <li><a href="">電腦</a>&nbsp;&nbsp;&nbsp;<a href="">耳機</a>&nbsp;&nbsp;&nbsp;<a href="">滑鼠</a></li>
    </ul>

</div>


</body>
</html>

css代碼

#nav{
    width: 300px;
}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 2em;
    line-height: 30px;
    background-color: red;
}
/*ul li*/
/*
list-style: ;
none   去掉圓點 去掉數字
circle 空心圓
decimal 數字
square 正方形
*/

ul{
    background-color: gray;
}

ul li{
    line-height: 30px;
    list-style: none;
    text-indent: 1em;
}

a{
    text-decoration: none;
    font-size:14px;
    color: black;
}

a:hover{
    color:orange;
}

3.6背景

背景顔色和背景圖檔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 1080px;
            height: 1920px;
            border: 1px solid #ff0000;
            background-image: url("image/a.jpg");
            /*預設是全部平鋪的*/
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }

    </style>
</head>
<body>
<div class="div1"></div>
<br>
<div class="div2"></div>
<br>
<div class="div3"></div>

</body>
</html>

對淘寶導航做個模仿

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部産品分類</h2>
    <ul>
        <li><a href="">圖書</a>&nbsp;&nbsp;&nbsp;<a href="">音箱</a>&nbsp;&nbsp;&nbsp;<a href="">數字商品</a></li>
        <li><a href="">家庭電器</a>&nbsp;&nbsp;&nbsp;<a href="">手機</a>&nbsp;&nbsp;&nbsp;<a href="">數位</a></li>
        <li><a href="">電腦</a>&nbsp;&nbsp;&nbsp;<a href="">耳機</a>&nbsp;&nbsp;&nbsp;<a href="">滑鼠</a></li>
    </ul>
</div>


</body>
</html>

CSS

#nav {
    width: 300px;
}

.title {
    font-size: 18px;
    font-weight: bold;
    text-indent: 2em;
    line-height: 30px;
    margin: 0px;
    /* 顔色 圖檔 圖檔位置 平鋪方式*/
    background: lightseagreen url("image/a.jpg") no-repeat 200px -33px;
}

/*ul li*/
/*
list-style: ;
none   去掉圓點 去掉數字
circle 空心圓
decimal 數字
square 正方形
*/

ul {
    background-color: gray;
    margin: 0px;
    padding: 0px;
}

ul li {
    line-height: 30px;
    list-style: none;
    text-indent: 1em;
    background-color: aqua;
    background-image: url("image/a.jpg");
    background-repeat: no-repeat;
    background-position: 200px -27px;
}

a {
    text-decoration: none;
    font-size: 14px;
    color: black;
}

a:hover {
    color: orange;
}

3.7漸變

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: #0093E9;
            background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);

        }
        
    </style>
</head>
<body>
    
</body>
</html>

4.盒子模型

4.1什麼是盒子模型

2.CSS入門基礎1什麼是CSS2選擇器3美化網頁元素4.盒子模型5浮動6.定位7.動畫8總結

margin 外邊距

padding 内邊距

border 邊框

4.2邊框

邊框的粗細
邊框的樣式
邊框的顔色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            /*body總有一個外邊距*/
            margin: 0px;
            padding: 0px;
            text-decoration: none;
        }
        #box{
            /*border 粗細 樣式 顔色*/
            width: 300px;
            border:1px solid red ;
        }

        form{
            background: aqua;
        }
        div:nth-of-type(1)>input{
            border: 3px solid black;
        }

        div:nth-of-type(2)>input{
            border: 3px dashed blue;
        }

        h2{
            font-size: 16px;
            background-color: aqua;
            line-height: 30px;
            margin: 0;
        }

    </style>
</head>
<body>

<div id="box">
    <h2>會員登入</h2>
    <form action="#">
        <div>
            <span>使用者名:</span>
            <input type="text">
        </div>

        <div>
            <span>密碼:</span>
            <input type="text">
        </div>

        <div>
            <span>郵箱:</span>
            <input type="text">
        </div>

    </form>
</div>
</body>
</html>

4.3内外邊距

盒子的計算方式你這個元素到底多大?

公式:margin+border+padding+内容寬度

2.CSS入門基礎1什麼是CSS2選擇器3美化網頁元素4.盒子模型5浮動6.定位7.動畫8總結

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

        #box {
            /*border 粗細 樣式 顔色*/
            /*外邊框的妙用 居中元素
              margin: 0 auto;

           */
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
        }

        h2 {
            font-size: 16px;
            background-color: aqua;
            line-height: 30px;
            margin: 0;
        }

        form {
            background: aqua;
        }

        input {
            border: 1px solid black;
        }

        div:nth-of-type(1){
            padding: 10px 2px;
        }

    </style>
</head>
<body>

<div id="box">
    <h2>會員登入</h2>
    <form action="#">
        <div>
            <span>使用者名:</span>
            <input type="text">
        </div>

        <div>
            <span>密碼:</span>
            <input type="text">
        </div>

        <div>
            <span>郵箱:</span>
            <input type="text">
        </div>

    </form>
</div>
</body>
</html>

4.4圓角邊框

圓角邊框

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

    <style>

        div{
            border: 10px solid red;
            width: 100px;
            height: 100px;
            /*圓圈:   圓角=半徑*/
            /*左上 右上 右下 左上 順時針方向*/
            border-radius: 50px 20px 10px 5px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

頭像模拟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 1px solid red;
            width: 100px;
            height: 50px;
            background: red;
            /*圓圈:   圓角=半徑*/
            /*左上 右上 右下 左上 順時針方向*/
            /*先配置好width和height在配置邊距會容易很多*/
            border-radius: 50px 50px 0px 0px;
        }
        img{
            /*頭像像素100*100  半徑是50 設定圓角50就是個圓  */
            border-radius: 50px;
        }
    </style>
</head>
<body>
<div></div>
<img src="image/a.jpg" alt="">
</body>
</html>

4.5盒子陰影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--margin:0 auto
    要求 塊元素塊元素有固定的寬度
    -->
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 10px solid red;
            /*陰影顔色 水準偏移 垂直偏移 模糊半徑*/
            box-shadow: yellow 10px 10px 100px;
            margin: 0 auto;
        }

        img {
            border-radius: 50px;
            /*陰影顔色 水準偏移 垂直偏移 模糊半徑*/
            box-shadow: yellow 10px 10px 100px;
        }
    </style>
</head>
<body>

<div><img src="image/a.jpg" alt=""></div>

</body>
</html>

5浮動

5.1标準文檔流

2.CSS入門基礎1什麼是CSS2選擇器3美化網頁元素4.盒子模型5浮動6.定位7.動畫8總結

塊級元素獨占一行

h1~h6 p div list...........

行内元素不獨占一行

span a img strong....

行内元素可以包括在塊級元素中反之不行

5.2display

block-inline 就是将img這種塊級元素放在行内元素中因為圖檔經常會另起一行想要多個圖檔放同一行就是用這個

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: red solid 10px;
            display: inline-block;
        }
        span{
            /*block 塊元素
              inline 行内元素
              block-inline 是塊元素 但是可以内聯 在一行
              none 消失
            */
            width: 100px;
            height: 100px;
            border: red solid 10px;
            display: inline-block;

    </style>
</head>
<body>
<div>div塊元素</div>
<span>span行内元素</span>
<p>浮動的盒子可以向左浮動 也可以向右浮動 直到它的邊緣碰到包含框或另一個浮動盒子為止</p>
</body>
</html>

這個也是一種實作行内元素排列的方式但是我們很多情況都使用float

5.3float

1.左右浮動 float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: red solid 10px;
            float: right;
        }
        span{
            /*
            float:
            right 右浮動
            left 左浮動
            */
            width: 100px;
            height: 100px;
            border: red solid 10px;
            float: right;
        }
    </style>
</head>
<body>
<div>div塊元素</div>
<span>span行内元素</span>
<p>浮動的盒子可以向左浮動 也可以向右浮動 直到它的邊緣碰到包含框或另一個浮動盒子為止</p>
</body>
</html>

5.4父級邊框塌陷的問題

clear

/*  clear: right;   右側不允許有浮動元素
    clear: left;    左側不允許有浮動元素
    clear: both     兩側不允許有浮動元素
    clear: none     允許有浮動元素
*/

解決方案

1.增加父級元素的高度

簡單元素假設有了固定的高度就會被限制

#father{
    border: 1px #000 solid;
    height: 800px;
}

2.在最後增加一個空的div 清除浮動

簡單代碼中盡量避免空div

<div class="clear"></div>


.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

3.overflow 在父級元素中增加一個overflow hidden屬性可以隐藏多出來的浮動元素

簡單下拉的一些場景避免使用

#father{
    border: 1px #000 solid;
    overflow: hidden;
}

4.父類增加一個僞類 after(推薦)

推薦寫法複雜一些但是沒有副作用

#father:after{
    content: '';
    display: block;
    clear: both;
}

5.5對比

display

方向不可控制
float

浮動起來會脫離标準文檔流是以要解決父級邊框塌陷的問題

6.定位

6.1相對定位

相對定位 position:relative

相對于原來的位置進行制定的偏移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 相對定位
        相對于自己原來的位置進行偏移~
        -->
    <style>
        body{
            padding: 20px;
        }
        div {
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }

        #father {
            border: 1px solid #de1717;
        }

        .first {
            background-color: #3e6a55;
            border: 1px dashed #3e6a45;
            position: relative;/*相對定位:上下左右*/
            /*距離上離近20px*/
            top: -20px;
            /*距離上離開10px*/
            left: 10px;
        }

        .second {
            background-color: #548555;
            border: 1px dashed #5485e5;
        }

        .third {
            background-color: #d59255;
            border: 1px dashed #d59230;
            position: relative;
            /*距離下離開10px*/
            bottom: 10px;
        }
    </style>
</head>
<body>
<div id="father">
    <div class="first">第一個盒子</div>
    <div class="second">第二個盒子</div>
    <div class="third">第三個盒子</div>
</div>
</body>
</html>

/*距離上離近20px*/
            top: -20px;
            /*距離上離開10px*/
            left: 10px;

 /*距離下離開10px*/
            bottom: 10px;

練習

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            border: red solid 2px;
            padding: 10px;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background-color: pink;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
            background-color: blue;
        }
        .a2{
            position: relative;
            top: -100px;
            right: -200px;
        }
        .a4{
            position: relative;
            top: -100px;
            right: -200px;
        }
        .a5{
            position: relative;
            top: -300px;
            right: -100px;
        }

    </style>
</head>
<body>
<div id="box">
    <a href="a1" class="a1">連結1</a>
    <a href="a2" class="a2">連結2</a>
    <a href="a3" class="a3">連結3</a>
    <a href="a4" class="a4">連結4</a>
    <a href="a5" class="a5">連結5</a>

</div>
</body>
</html>

6.2絕對定位

定位基于XXX定位上下左右

沒有父級元素定位的前提下相對于浏覽器定位
假設父級元素存在定位我們通常會相對于父級元素

在父級元素範圍内移動

總結 :相對于父級或浏覽器的位置進行制定的偏移絕對定位的話它仍然在标準文檔流中原來的位置會被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #de1717;
            position: relative;
        }
        .first{
            background-color: #3e6a55;
            border: 1px dashed #3e6a45;
        }
        .second{
            background-color: #548555;
            border: 1px dashed #5485e5;
            position: absolute;
            right: 20px;
            top: -1px;
        }
        .third{
            background-color: #d59255;
            border: 1px dashed #d59230;

        }
    </style>
</head>
<body>
<div id="father">
    <div class="first">第一個盒子</div>
    <div class="second">第二個盒子</div>
    <div class="third">第三個盒子</div>
</div>
</body>
</html>

6.3固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){
            /*絕對定位 相對于浏覽器*/
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

6.4z-index圖層

opacity: 0.5;透明度

html

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

    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="image/a.jpg" alt=""></li>
        <li class="tipText">學習Java&nbsp;沖沖沖</li>
        <li class="tipBg"></li>
        <li>時間 2020.1.1</li>
        <li>地點:月球一号基地</li>
    </ul>
</div>

</body>
</html>

css

#content{
    width: 380px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px black solid;

}
ul,li{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
/*父級元素相對定位*/
#content>ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 380px;
    height: 25px;
    top: 140px;
}
.tipBg{
    background: black;
}
.tipText{
    z-index: 999;
    color: white;
    /*rgba也可以設定透明度*/
    opacity: 0.5;

}

7.動畫

略過使用JS更加友善

8總結

2.CSS入門基礎1什麼是CSS2選擇器3美化網頁元素4.盒子模型5浮動6.定位7.動畫8總結

2.CSS入門基礎1什麼是CSS2選擇器3美化網頁元素4.盒子模型5浮動6.定位7.動畫8總結

1什麼是CSS

1.1什麼是CSS

1.2發展史

1.3快速入門

練習格式

基本入門

CSS的優勢

1.4CSS的三種導入方式

2選擇器

2.1基本選擇器

2.1.1标簽選擇權

2.1.2類選擇器

2.1.3ID選擇器

優先級

2.2層次選擇器

總體代碼

html結構

2.2.1後代選擇器

2.2.2子選擇器

2.2.3向下弟弟選擇器

2.2.4向下所有弟弟選擇器

2.3結構僞類選擇器

2.4屬性選擇器(常用)

3美化網頁元素

3.1為什麼要美化

3.2字型樣式

3.3文本樣式

3.4文本陰影和超僞連結

3.5清單

html代碼

css代碼

3.6背景

3.7漸變

4.盒子模型

4.1什麼是盒子模型

4.2邊框

4.3内外邊距

4.4圓角邊框

4.5盒子陰影

5浮動

5.1标準文檔流

5.2display

5.3float

5.4父級邊框塌陷的問題

1.增加父級元素的高度

2.在最後增加一個空的div 清除浮動

3.overflow 在父級元素中增加一個overflow hidden屬性 可以隐藏多出來的浮動元素

4.父類增加一個僞類 after(推薦)

5.5對比

6.定位

6.1相對定位

練習

6.2絕對定位

6.3固定定位

6.4z-index圖層

7.動畫

8總結

繼續閱讀

3.overflow 在父級元素中增加一個overflow hidden屬性可以隐藏多出來的浮動元素