碼上快樂

相關內容    簡體    繁體

css學習筆記（狂神說）

本文轉載自   查看原文   2021-07-06 10:53   296    前端

CSS3學習

##學習自狂神##

1.css是什么
2.CSS怎么用（快速入門）
3.CSS選擇器（重點 + 難點）
4.美化頁面（文字、陰影、超鏈接、列表、漸變…）
5.盒子模型
6.浮動
7.定位
8.網頁動畫（特效）

1.什么是CSS

1、什么是CSS

Cascading Style Sheet 層疊樣式表 CSS：表現（美化網頁） 字體，顏色，邊距，高度，寬度，背景圖片，網頁定位，網頁浮動
1.2、發展史
CSS1.0 CSS2.0：DIV（塊）+CSS，HTML與CSS結構分離的思想，網頁變得簡單，SEO CSS2.1：浮動，定位 CSS3.0：圓角、陰影、動畫…瀏覽器兼容性~

2、快速入門 

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--規范，<style>可以編寫CSS的代碼，每一個聲明最好以“;”結尾
        語法：
            選擇器{
                    聲明1;
                    聲明2;
                    聲明3;
                } -->
    <style>
        h1{
            color: crimson;
        }
    </style>
 </head>
 <body>
    <h1>CSS測試</h1>
 </body>
 </html>
 ​
 ​

RheXd0.png

3、CSS的優勢：

 

1、內容和表現分離；
2、網頁結構表現統一，可以實現復用
3、樣式十分的豐富
4、建議使用獨立於html的css文件
5、利用SEO，容易被搜索引擎收錄！

 

4、CSS的3種常用導入方式

​
 
​ 
 <style><!--內部樣式-->
    h1{
        color: green;
    }
 </style>
 ​
 <!--外部樣式-->
 <link rel="stylesheet" href="css/style.css" />

</head>
<body>

<!--優先級：就近原則 行內樣式 > 內部樣式 > 外部樣式-->
<!--行內樣式：在標簽元素中，編寫一個style屬性，編寫樣式即可-->

​

這是標簽

​

</body>
</html>

拓展：外部樣式兩種方法

鏈接式 html

<!--外部樣式-->
<link rel="stylesheet" href="css/style.css" />
12

導入式 @import

是CSS2.1特有的！

<!--導入式-->

<style>
    @import url("css/style.css");
</style>

4

2選擇器

作用：選擇頁面上的某一個后者某一類元素

2.1、基本選擇器

1、標簽選擇器

選擇一類標簽
格式： 標簽 { } 

 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: orange;
            background: blue;
            border-radius: 10px;
        }
        h3{
            color: orange;
            background: blue;
            border-radius: 10px;
        }
        p{
            font-size: 80px;
        }
    </style>
 </head>
 <body>
 <h1>標簽選擇器</h1>
 <p>我愛學習</p>
 <h3>學習JAVA</h3>
 </body>
 ​

 

2、類選擇器class

選擇所有class一致的標簽，跨標簽
格式： .類名{}

 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*類選擇器的格式 .class的名稱{}
            好處：可以多個標簽歸類，是同一個class，可以復用*/
        .demo1{
            color: blue;
        }
        .demo2{
            color: red;
        }
        .demo3{
            color: aqua;
        }
    </style>
 </head>
 <body>
 <h1 class = "demo1">類選擇器：demo1</h1>
 <h1 class="demo2">類選擇器：demo2</h1>
 <h1 class="demo3">類選擇器：demo3</h1>
 <p class="demo3">p標簽</p>
 </body>
 ​

 

3、id 選擇器

全局唯一

格式： #id名{}

 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id選擇器：id必須保證全局唯一
            #id名稱{}
            不遵循就近原則，優先級是固定的
            id選擇器 > class類選擇器 > 標簽選擇器
        */
        #demo1{
            color: red;
        }
        .demo2{
            color: green;
        }
        #demo2{
            color: orange;
        }
        h1{
            color: blue;
        }
    </style>
 </head>
 <body>
    <h1 id="demo1" class="demo2">id選擇器：demo1</h1>
    <h1 class="demo2" id = "demo2">id選擇器：demo2</h1>
    <h1 class="demo2">id選擇器：demo3</h1>
    <h1 >id選擇器：demo4</h1>
    <h1>id選擇器：demo5</h1>
 </body>
 ​

4.優先級：id > class > 標簽

2.2、高級選擇器

1.層次選擇器

后代選擇器：在某個元素的后面

后代選擇器
 /*后代選擇器*/
 <style>
 body p{
  background:red;
 }
 </style>
 ​

 

子選擇器，一代

/子選擇器/

 /*子選擇器*/
 <style>
 body>p{
  background:orange;
 }
 </style>
 ​

 

相鄰的兄弟選擇器 同輩

/相鄰兄弟選擇器：只選擇一個，相鄰（向下）/

 /*相鄰兄弟選擇器：只選擇一個，相鄰（向下）*/
 <style>
 .active+p{
 background: red
 }
 </style>
 <body>
  <p class="active">p1<p>
  <p>p2</p>
 </body>
 ​

 

通用選擇器 
 <style>
 /*通用兄弟選擇器，當前選中元素的向下的所有兄弟元素*/
  .active~p{
  background:red;
 }
 </style>
 <body>
  <p class="active">p1<p>
  <p>p2</p>
 </body>
 ​

2.3結構偽類選擇器

偽類

    <style>
        ul li:first-child{/*ul的第一個子元素*/
            background: aqua;
        }
        ul li:last-child{/*ul的最后一個子元素*/
            background: blue;
        }
        /*選中p1：定位到父元素，選擇當前的第一個元素
            選擇當前p元素 的父級元素，選中父級元素的第一個，並且是當前元素才生效！*/
        p:nth-child(1){
            background: orange;
        }
        p:nth-of-type(2){/*選中父元素下的，第2個p元素*/
            background: red;
        }
        a:hover{
            color: green;
        }
    </style>
</head>
<body>
    <a href="">123</a>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <h3>h3</h3>
    <ul>
        <li>1li1</li>
        <li>1li2</li>
        <li>1li3</li>
    </ul>
    <ul>
        <li>2li1</li>
        <li>2li2</li>
        <li>2li3</li>
    </ul>
    <a href="www.baidu.com">百度</a>
</body>

2.4屬性選擇器（常用）

id + class結合

 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: aquamarine;
            text-align: center;
            color: gray;
            text-decoration: none;
            margin-right: 5px;
            /*line-height:50px;*/
            font: bold 20px/50px Arial;
        }
        /*屬性名，屬性名=屬性值（正則）
          = 表示絕對等於
          *= 表示包含
          ^= 表示以...開頭
          $= 表示以...結尾
          存在id屬性的元素
            a[]{}
          */
        a[id]{
            background: yellow;
        }
        a[id=first]{/*id=first的元素*/
            background: green;
        }
         
        a[class*="links"]{/*class 中有links的元素*/
            background: bisque;
        }
 ​
        a[href^=http]{/*選中href中以http開頭的元素*/
            background: aquamarine;
        }
        a[href$=pdf]{/*選中href中以http開頭的元素*/
            background: aquamarine;
        }
    </style>
 </head>
 <body>
    <p class="demo">
        <a href="http: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">3</a>
        <a href="images/1.png" class="links item">4</a>
        <a href="images/1.jpg" class="links item">5</a>
        <a href="abc" class="links item">6</a>
        <a href="/a.pdf" class="links item">7</a>
        <a href="/abc.pdf" class="links item">8</a>
        <a href="abc.doc" class="links item">9</a>
        <a href="abcd.doc" class="links item last">10</a>
    </p>
 </body>
 ​

3、美化網頁元素

3.1、為什么要美化網頁

  1. 有效的傳遞頁面信息

  2. 美化網頁，頁面漂亮才能吸引客戶

  3. 凸顯頁面的主題

  4. 提高用戶的體驗

span標簽：重點要突出的字，使用span標簽套起來

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1{
            font-size: 50px;
        }
    </style>
</head>
<body>
學習語言<span id="title1">JAVA</span>
</body>

3.2、字體樣式

 

  • font-family：字體

  • font-size：字體大小

  • font-weight：字體粗細

  • color：字體顏色

  • <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                font-family:"Arial Black",楷體;
                color: red;
            }
            h1{
                font-size: 50px;
            }
            .p1{
                font-weight: 600;
                color: gray;
            }
        </style>
    </head>
    <body>
        <h1>標題</h1>
        <p>正文11111</p>
        <p class="p1">正文2222222</p>
        <p>i love study java</p>
    </body>

     

 

font-weight:bolder;/*也可以填px，但不能超過900,相當於bloder*/
/*常用寫法：*/
font:oblique bloder 12px "楷體"

3.3、文本樣式

  1. 顏色–>color   rgb   rgba

  2. 文本對齊方式–>text-align：center

  3. 首行縮進–>text-indent：2em

  4. 行高–>line-height：300px；

  5. 下划線–>text-decoration

 text-decoration:underline/*下划線*/
 text-decoration:line-through/*中划線*/
 text-decoration:overline/*上划線*/
 text-decoration:none/*超鏈接去下划線*/
 ​

  1. 圖片、文字水平對齊

 img,span{vetical-align:middle}

3.4、文本，陰影和超鏈接偽類

a:hover用的多
<style>
	a{/*超鏈接有默認的顏色*/
		text-decoration:none;
		color:#000000;
	}
	a:hover{/*鼠標懸浮的狀態*/
		color:orange;
	}
	a:active{/*鼠標按住未釋放的狀態*/
		color:green
	}
	a:visited{/*點擊之后的狀態*/
		color:red
	}
	a:link{
            background: bisque;
        }
</style>

陰影：

/* 第一個參數：表示水平偏移
第二個參數：表示垂直偏移
第三個參數：表示模糊半徑
第四個參數：表示顏色
*/
text-shadow:5px 5px 5px 顏色

3.5、列表ul li

主頁index.html代碼：

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
 </head>
 <body>
 <div id="nav">
    <h2 class="title">全部商品分類</h2>
    <ul>
        <li>
            <a href="#">圖書</a>
            <a href="#">音像</a>
            <a href="#">數字商品</a>
        </li>
        <li>
            <a href="#">家用電器</a>
            <a href="#">手機</a>
            <a href="#">數碼</a>
        </li>
        <li>
            <a href="#">電腦</a>
            <a href="#">辦公</a>
        </li>
        <li>
            <a href="#">家居</a>
            <a href="#">家裝</a>
            <a href="#">廚具</a>
        </li>
        <li>
            <a href="#">服飾鞋帽</a>
            <a href="#">個性化妝</a>
        </li>
        <li>
            <a href="#">禮品箱包</a>
            <a href="#">鍾表</a>
            <a href="#">珠寶</a>
        </li>
        <li>
            <a href="#">食品飲料</a>
            <a href="#">保健食品</a>
        </li>
        <li>
            <a href="#">彩票</a>
            <a href="#">旅行</a>
            <a href="#">充值</a>
            <a href="#">票務</a>
        </li>
    </ul>
 </div>
 </body>
 </html>
 ​

css代碼：

#nav{
    width: 300px;
    background: antiquewhite;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;/*縮進*/
    line-height: 35px;
    background: red;
}
/*ul li*/
/*
list-style:
    non 去掉實心圓
    circle 空心圓
    square 正方形
*/
/*ul{!*nav替換效果*!
    background: antiquewhite;
}*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: black;
 }
a:hover{
    color: burlywood;
    text-decoration: underline;
}

3.6、背景

  1. 背景顏色：background

  2. 背景圖片

    background-image:url("");/*默認是全部平鋪的*/
    background-repeat:repeat-x/*水平平鋪*/
    background-repeat:repeat-y/*垂直平鋪*/
    background-repeat:no-repeat/*不平鋪*/

     

3.7、漸變

     漸變背景網址：https://www.grabient.com
​    徑向漸變、圓形漸變

body{
            background-color: #4158D0;
            background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
        }

4、盒子模型

4.1什么是盒子模型

R4lxZ4.png

margin：外邊距padding：內邊距border：邊框

4.2、邊框

border：粗細 樣式 顏色
1.邊框的粗細
2.邊框的樣式
3.邊框的顏色

代碼練習

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #nav{
            text-align: center;
            width: 300px;
            height: 200px;
            border:1px solid red;
        }
        #user input{
            border: 2px solid green;
        }
    </style>
 </head>
 <body>
 <div id="nav">
    <h1>會員登錄</h1>
    <form action="#">
        <div id="user">
            <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外邊距----妙用：居

 

4.3、外邊距----妙用：居中

margin-left/right/top/bottom–>表示四邊，可分別設置，也可以同時設置如下

margin:0 0 0 0/*分別表示上、右、下、左；從上開始順時針*/
/*例1：居中*/
margin:0 auto /*auto表示左右自動*/
/*例2：*/
margin:4px/*表示上、右、下、左都為4px*/
/*例3*/
margin:10px 20px 30px/*表示上為10px，左右為20px，下為30px*/

盒子的計算方式：
margin+border+padding+內容的大小

總結：
body總有一個默認的外邊距 margin:0
常見操作：初始化

margin:0;
padding:0;
text-decoration:none;

4.4、圓角邊框----border-radius

border-radius有四個參數（順時針），左上->右上->右下->左下
圓圈：圓角=半徑

<style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            /*一個border-radius只管一個圓的1/4*/
            border-radius: 50px 20px 20px 30px;/*左上 右上 右下 左下 ,順時針方向*/
        }
</style>
box-shadow: 10px 10px 1px black;

5、浮動

R4TPhD.png

塊級元素：獨占一行 h1~h6 、p、div、 列表…
行內元素：不獨占一行 span、a、img、strong

 

注： 行內元素可以包含在塊級元素中，反之則不可以。

5.1標准文檔流

5.2、display（重要）

 

  1. block：塊元素

  2. inline：行內元素

  3. inline-block：是塊元素，但是可以內聯，在一行

 

這也是一種實現行內元素排列的方式，但是我們很多情況用float
none：消失

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

5.3、float：left/right左右浮動

clear：both

5.4、overflow及父級邊框塌陷問題

clear：
right：右側不允許有浮動元素
left：左側不允許有浮動元素
both：兩側不允許有浮動元素
none：

解決塌陷問題方案：
方案一：增加父級元素的高度；
方案二：增加一個空的div標簽，清除浮動

 <div class = "clear"></div>
 <style>
  .clear{
   clear:both;
   margin:0;
   padding:0;
 }
 </style>
 ​

方案三：在父級元素中增加一個overflow屬性

overflow:hidden/*隱藏超出部分*/
overflow：scoll/*滾動*/

方案四：父類添加一個偽類:after

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

小結：

  1. 浮動元素增加空div----> 簡單、代碼盡量避免空div

  2. 設置父元素的高度-----> 簡單，但是元素假設有了固定的高度，可能就會超出范圍

  3. overflow----> 簡單，下拉的一些場景避免使用

  4. 父類添加一個偽類:after（推薦）----> 寫法稍微復雜，但是沒有副作用，推薦使用

5.5display與float對比

  1. display：方向不可以控制

  2. float：浮動起來的話會脫離標准文檔流，所以要解決父級邊框塌陷的問題。

6、定位

6.1、相對定位

相對定位：positon：relstive；
相對於原來的位置，進行指定的偏移，相對定位的話，它仍然在標准文檔流中！原來的位置會被保留

top:-20px;/*向上偏移20px*/
left:20px;/*向右偏移20px*/
bottom:10px;/*向上偏移10px*/
right:20px;/*向左偏移20px*/
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>相對定位</title>
    <!--相對定位
            相對於自己原來的位置進行偏移
    -->
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: #ffa538 1px solid;
            padding: 0;
        }
        #first{
            border: #b3ff38 1px solid;
            background-color: #ffa538;
            position: relative;/*相對定位：上下左右*/
            top: -20px;/*向上偏移20px*/
            left: 20px;/*向右偏移20px*/
        }
        #second{
            border: #427b11 1px solid;
            background-color: #66c77f;
        }
        #third{
            background-color: #b3ff38;
            border: #38d7ff 1px solid;
            position: relative;
            bottom: 10px;/*向上偏移10px*/
        }
    </style>
 </head>
 <body>
 <div id="father">
    <div id="first">第一個盒子</div>
    <div id="second">第二個盒子</div>
    <div id="third">第三個盒子</div>
 </div>
 </body>
 </html>
 ​

RI9VaD.png

 <style>
        #box{
            height: 300px;
            width: 300px;
            border: 2px red solid;
            padding: 10px;
        }
        a{
            height: 100px;
            width: 100px;
            background-color: #ee73b7;
            color: white;
            text-align: center;
            text-decoration: none;
            line-height: 100px;/*設置行距100px*/
            display: block;/*設置方塊*/
        }
        a:hover{
            background: #4158D0;
        }
        .a2{
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a4{
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a5{
            position: relative;
            left: 100px;
            top: -300px;
        }
    </style>
 </head>
 <body>
 <div id="box">
    <div class="a1"><a href="" >連接1</a></div>
    <div class="a2"><a href="" >連接2</a></div>
    <div class="a3"><a href="" >連接3</a></div>
    <div class="a4"><a href="" >連接4</a></div>
    <div class="a5"><a href="" >連接5</a></div>
 </div>
 </body>
 ​

6.2、絕對定位-absolute和固定定位-fixed

定位：基於xxx定位，上下左右~
1、沒有父級元素定位的前提下，相對於瀏覽器定位
2、假設父級元素存在定位，我們通常會相對於父級元素進行偏移
3、在父級元素范圍內移動 總結：相對一父級或瀏覽器的位置，進行指定的偏移，絕對定位的話，它不在標准文檔流中，原來的位置不會被保留

 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;/*absolute 絕對定位*/
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background-color: #b3ff38;
            position: fixed;/*fixed 固定定位*/
            right: 0;
            bottom: 0;
        }
    </style>
 </head>
 <body>
 <div>div1</div>
 <div>div2</div>
 </body>
 ​

6.3、z-index

RICSw8.png

圖層-z-index：默認是0，最高無限~999

index.html代碼：

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <style></style>
 </head>
 <body>
 <div id="content">
    <ul>
        <li><img src="images/2020.jpg" alt=""/></li>
        <li class="tipText">學習微服務，找狂神</li>
        <li class="tipBg"></li>
        <li>時間：2099-01-01</li>
        <li>地點：月球一號基地</li>
    </ul>
 </div>
 </body>
 </html>
 ​

css代碼：

 #content{
    width: 380px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid yellow;
 }
 ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
 }
 /*父級元素相對定位*/
 #content ul{
    position: relative;
 }
 .tipText,.tipBg{
    position: absolute;
    width: 380px;
    height: 25px;
    top:216px
 }
 .tipText{
    color: white;
    z-index: 999;
 }
 .tipBg{
    background: orange;
    opacity: 0.5;/*背景透明度*/
    filter: alpha(opacity=50);
 }
 ​

7、動畫及視野拓展

css做動畫過於繁瑣，已有很多工具間接性做出

百度搜索canvas動畫、卡巴斯基監控站（僅作了解）

8、總結

RIwYRO.png


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 MySQL學習筆記（狂神說） SpringCloud學習筆記（狂神說Java） SpringCloud學習筆記（狂神說） Ajax 學習筆記 by狂神說 狂神說 MyBatisPlus 學習筆記 springcloud狂神說學習筆記一 狂神說redis筆記（一） 狂神說spring筆記 JavaWeb筆記（狂神說） 狂神說 Redis筆記
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM