天天看點
傳回

2020-11-25CSS

CSS

優缺點：

  1. 内容和表現分離
  2. 網頁機構表現統一，可以複用。
  3. 樣式豐富
  4. 建議使用獨立的html的css檔案
  5. 利用SEO容易呗搜尋引擎收錄？

1.css簡單的使用

  • 文法示例 
<title>CSS學習_快速入門</title>
<!--    文法規範：styles标簽可以編寫CSS代碼，每一個聲明都需要“;”号結尾。
                選擇器{
                    聲明1;
                    聲明2;
                    聲明3;

                }
-->
    <style>
        h1{
            color: crimson;
        }
    </style>
</head>

<body>
<h1>一級标題</h1>
</body>

  • html與css分離

    • 文法示例 
<!--        href:css檔案位置-->
<link rel="stylesheet" href="../css/style.css">

1.1、CSS三種導入方式

  1. 行内注入 
<!--行内注入：在标簽元素中編寫一個style屬性，編寫樣式即可-->
<h1 style=" color:red">一級标題</h1>
  1. 内部注入 
<style>
        h1{
            color: crimson;
        }
    </style>
  1. 外部注入（連接配接式） 
外部注入： <link rel="stylesheet" href="../css/style.css">

  • 三種注入方式的優先級：遵循就近原則。

    擴充：css2.1版導入式【@import url(css路徑)】（将近淘汰）

<style>
        @import url(../css/style.css);
    </style>
<!--弊端先運作body中的标簽在運作style标簽-->

2.選擇器

2.1、基本選擇器

1. 标簽選擇器

  • 特性：隻能選擇一種标簽，不可以跨标簽。
  • 文法：标簽名{…}

2.類選擇器

  • 特性：可以選擇一類标簽，可以跨标簽。
  • 文法： .class名{…}

3.id選擇器

  • 特性：全局唯一
  • 文法： #id{…} 
<head>
    <meta charset="UTF-8">
    <title>三種選擇器示例</title>

    <style>
        /* 标簽選擇器：隻能選擇一種标簽，不跨标簽 */
        h1{
            color: red;
        }

        /*類選擇器：可以選擇一類标簽，可以跨标簽*/
        .lyx{
            color: blue;
        }
        /*id選擇器：id必須保證全局唯一，隻能有一個id使用這個選擇器中的樣式*/
        #ln{
            color: blueviolet;
        }
    /* 三種選擇器不遵循就近原則，id選擇器>class選擇器>标簽選擇器*/
    </style>
</head>
<body>
<h1>h1标簽選擇器測試</h1>
<h1>h1标簽選擇器測試</h1>
<h1>h1标簽選擇器測試</h1>

<p class="lyx">class選擇器</p>
<p class="lyx">class選擇器</p>
<p class="lyx">class選擇器</p>

<p id="ln">id選擇器</p>

注意：優先級不遵守就近原則，id選擇器>class選擇器>标簽選擇器

2.2、層次選擇器

1. 後代選擇器

  • 作用域：父标簽下的所有指定子标簽
  • 文法：父标簽 子标簽{樣式}
  • 示例： 
body p{
         background: aquamarine;
        }

2. 子選擇器

  • 作用域：第一層子代
  • 文法：父标簽>子标簽{樣式}
  • 示例： 
body>p{
         background: aquamarine;
        }

3. 兄弟選擇器:

  • 作用域：指定标簽，同級下方相近的一個同代标簽
  • 文法：标簽一 + 同級标簽二{樣式}
  • 示例： 
.p2+p{
         background: aquamarine;
        }

4. 兄弟通用選擇器

  • 作用域：目前選中的元素，向下指定類型（或相同）的所有元素
  • 文法：選中元素~指定元素{樣式}
  • 例： 
.p2~p{
    background: red;
}

2.3、結構僞劣選擇器

1. 首尾定位

  • 選中元素的指定子元素定位 
<style>
    /*首元素定位*/
        ul li:first-child{
            background: red;
        }
    /*尾元素元素定位*/
        ul li:last-child{
            background: blueviolet;
        }
 </style>

2. 、根據選中子元素的父元素中子元素的順序定位（兩種方式）

  • 第一種：p:nth-child()

    • 根據父類定位元素：

      選中p的父級元素中第一個元素(如果不是相同類型則不會顯示樣式)

p:nth-child(2){
            background: #ffc800;
        }
  • 第二種：p:nth-of-type()

    • 2.根據父類定位：

      選中p的父級元素中第指定順修的元素(隻累積所有p元素)

p:nth-of-type(1){
            background: #00ff3c;
        }

兩者差別： p:nth-of-type() 和p:nth-child()的差別在于，累計順序不同，p:nth-child(),時全局無差別累計，而 p:nth-of-type()是針對某種指定某種元素累計。

3. hover選擇器

  • 作用：選擇滑鼠指針浮動在其上的元素，并設定其樣式
  • 注意：在 CSS 定義中，:hover 必須位于 :link 和 :visited 之後（如果存在的話），這樣樣式才能生效。
  • 文法 
/* a：指定标簽 */
 a:hover{
            background: blue;
        }

4、屬性選擇器

  • 作用：把id與class選擇器結合，選擇擁有某些屬性的元素，還可以進一步縮小選擇範圍，隻選擇有特定屬性值的元素。
  • 文法示例： 
/*所有含有id屬性的a标簽*/
        a[id]{
            background: blueviolet;
        }
  • 屬性名=屬性值（屬性值可以為正規表達式） 
常用的zhegn'ze
=絕對等于
*=包含這個元素
^=以這個開頭
$=以這個結尾
  • 示例： 
<head>
    <meta charset="UTF-8">
    <title>屬性選擇器學習</title>
    <style>
    
        .dome a {
           float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 20px;
            background: red;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font:bold 20px/50px Arial;
        }

       /*所有含有id屬性的a标簽*/
        a[id]{
            background: blueviolet;
        }

    </style>
</head>
<!--
屬性名=屬性值（屬性值可以為正規表達式）
常用的zhegn'ze
=絕對等于
*=包含這個元素
^=以這個開頭
$=以這個結尾

-->
<body>

    <span class="dome">
        <a href="http://www.baidu.com" id="1">1</a>
        <a href="http://www.baidu.com" class="1 2 3">2</a>
        <a href="http://www.baidu.com">3</a>
        <a href="http:009" id="2">4</a>
        <a href="123123" class="1,2,3">5</a>
        <a href="123123">6</a>
        <a href="" class="3" id="3">7</a>
        <a href="" class="1">8</a>
        <a href="" class="2">9</a>
    </span>

</body>
  • 結果圖：
    2020-11-25CSS

3、美化網頁元素

  • 作用：
  1. 有效的傳遞頁面資訊
  2. 美化網頁，吸引客戶
  3. 凸顯主題，讓人更容易記住
  4. 提高使用者體驗
  • span标簽：重點要突出的字，使用sapn套起來。 
<title>學習美化網頁</title>

    <style>
        #sp01{
            font-size: 100px;
        }
    </style>
</head>
<!--span标簽：自定義标簽-->
<body>

<sqan id="sp01">span</sqan>标簽學習

</body>
  • 運作結果
    2020-11-25CSS

3.1、字型樣式

  • 文法說明：
    • 字型樣式：font-family(可以聲明兩個，中英各一個中間逗号分離)
    • 大小：font-size
    • 顔色：color
    • 粗細：font-weight
    • font: 粗細 大小 / 行高 字型樣式; 
<head>
    <meta charset="UTF-8">
    <title>字型樣式學習</title>
    <style>
        body{
            font-family:"Script MT Bold",宋體;
            color: #ffc800;
            font-size: 30px;
            font-weight: normal;
        }
        body h1{
            font: bold 20px/30px "宋體";
        }
        .p{
       /*字型樣式：斜體*/
            font:  30px/12px "宋體";
            color: red;
        }
</head>
<body>

<h1>世與溫柔</h1>

<p>
    1.心懷浪漫宇宙，也珍惜人間日常。
</p>

<p class="p2">
    2.保持期待，奔赴山海。
</p>

<p>
    3.我希望如約而至的不止冬天還有你。
</p>

<p>
    4.人間一趟，積極向上，不畏将來，不念過往
</p>

<p id="pp">
    5.安靜努力，不必聲張，前方有好人，有驚喜，有久違的感動。
</p>

<p class="p">
    三思而dao後行。
</p>
<p class="p">
    It is never too late to mend.
</p>
<p class="p">
    亡羊補牢，猶為未晚。
</p>
<p class="p">
    Light come, light go.
</p>

3.2、超連結僞類 

a:link {color: #FF0000}		/* 未通路的連結 */
a:visited {color: #00FF00}	/* 已通路的連結 */
a:hover {color: #FF00FF}	/* 滑鼠移動到連結上 */
a:active {color: #0000FF}	/* 標明的連結 */

3.3、陰影 

div
{
box-shadow: 10px 10px 5px #888888;
}
  • h-shadow 必需。水準陰影的位置。允許負值。
  • v-shadow 必需。垂直陰影的位置。允許負值。
  • blur 可選。模糊距離。
  • spread 可選。陰影的尺寸。
  • color 可選。陰影的顔色。請參閱 CSS 顔色值。
  • inset 可選。将外部陰影 (outset) 改為内部陰影。

3.4、清單樣式 

div{
    width: 220px;
    background: aquamarine;

}

ul{
    /* list-style:
                none:清空清單樣式
                circle：空心圓
                decimal：數字
                square：正方形
                

    	disc outside none*/
    list-style:none;
}

a{
    /* text-decoration:
        none	預設。定義标準的文本。
        underline	定義文本下的一條線。
        overline	定義文本上的一條線。
        line-through	定義穿過文本下的一條線。
        blink	定義閃爍的文本。
        inherit	規定應該從父元素繼承 text-decoration 屬性的值。
    */
    text-decoration: none;
    color: #000000;

}
a:hover{
    color: #ffffff;

3.5、背景圖像 

div{
            width: 100px;
            height: 100px;
                    /*   顔色   圖檔    圖檔填充    圖檔定位       */
            background: gainsboro url("000.bmp") no-repeat 50px 50px ;
        }

3.6、漸變色

漸變色網址：https://www.grabient.com/

4、盒子模型與邊框

2020-11-25CSS
  • margin：外邊距
  • border：邊框
  • padding：内邊距
  • 盒子的總寬度=margin+borcer+padding+内容大小。

4.1、邊框 

樣式  粗細  顔色 	
 border: 0.5px solid red;

4.2、内、外邊距

  • maring（padding）： 一個參數時：上下左右外邊距，兩個參數時：上下 左右邊距，四個參數時：上 下 左 右邊距。 
<style>
        #da{
            border: 2px solid #000000;
            width: 500px;
            height: 500px;
        }
        #dd{
            border: 3px solid red;
            width: 50px;
            height: 50px;
            margin: 0;
        }
    </style>
</head>
<body>
    <div id="da">
        <div id="dd"></div>
    </div>
</body>

5、浮動

5.1、文檔流

  1. 塊狀元素：獨占一行 
    例如：h1~h6、p、div、清單  ...
  2. 行内元素：沒有寬高屬性，不獨占一行 
    例如：span、a、img、strong  ...

行内元素可以放入塊狀元素。

5.2、塊狀元素與行内元素的轉換

  • display:
    • none 此元素不會被顯示。
    • block 此元素将顯示為塊級元素，此元素前後會帶有換行符。
    • inline 預設。此元素會被顯示為内聯元素，元素前後沒有換行符。
    • inline-bolck 行内塊元素；（css2.1新增的值） 
<head>
    <meta charset="UTF-8">
    <title>display的學習</title>
    <style>

            div{
                border: 5px solid red;
                width: 100px;
                height: 100px;
                display: inline-block;
            }
            span{
                width: 100px;
                height: 100px;
                border: 5px solid #000000;
                display: inline-block;
            }
    </style>
</head>
<body>
    <div>div塊狀元素</div>
    <span>span行内元素</span>
</body>
</html>
  • 運作結果圖
    2020-11-25CSS

5.3、float(浮動)

可選值：

  • left 元素向左浮動。
  • right 元素向右浮動。
  • none 預設值。元素不浮動，并會顯示在其在文本中出現的位置。
  • inherit 規定應該從父元素繼承 float 屬性的值。 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float學習</title>

    <style>
            div{

            }
        #Ba{
            border: 1px solid red;
            height: 100px;
        }
       .ia{
            float: left;
        }
        .ib{
            float: right;
        }
        .ic{
            float: contour;
        }
    </style>

</head>
<body>

	<div  id="Ba">
	    <div>
	        <img class="ia" src="../../img/dome_1.png" alt="">
	    </div>
	    <div >
	        <img  class="ib" src="../../img/dome_2.png" alt="">
	    </div>
	    <div >
	        <img  class="ic" src="../../img/dome_3.png" alt="">
	    </div>
	</div>

</body>
</html>
清浮動屬性：
  • clear
    • 屬性值：
      • left 在左側不允許浮動元素。
      • right 在右側不允許浮動元素。
      • both 在左右兩側均不允許浮動元素。
      • none 預設值。允許浮動元素出現在兩側。
      • inherit 規定應該從父元素繼承 clear 屬性的值。 
#Bb{
    clear:both ;
    margin: 0;
    padding: 0;
}

5.4、解決浮動父元素塌陷問題的幾種方法

  1. 增加父級元素的高度
  2. 在最後，增加一個空div屬性，清除浮動。 
#Bb{
       clear:both ;
       margin: 0;
       padding: 0;
   }
  1. overflow(溢出)
  • 在父标簽元素中使用overflow屬性（必有height屬性，後果自樂！） 
#Ba{
/*
overflow:
        visible	預設值。内容不會被修剪，會呈現在元素框之外。
        hidden	内容會被修剪，并且其餘内容是不可見的。
        scroll	内容會被修剪，但是浏覽器會顯示滾動條以便檢視其餘的内容。
        auto	如果内容被修剪，則浏覽器會顯示滾動條以便檢視其餘的内容。
        inherit	規定應該從父元素繼承 overflow 屬性的值。
        */
    border: 3px solid red;
    height: 100px;
    clear: right;
	/*   */
    overflow: hidden;
}
  1. 父類添加一個僞列：after(對以上三種，相對麻煩，但是推薦使用！！！) 
#p:after{
    content : '  ';
    display: block;
    clear: both;
}
display與float的對比：
  • display不可以左右浮動，float有父框塌陷的隐患。

6、定位

  • position屬性值： 
absolute	生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
fixed	    生成絕對定位的元素，相對于浏覽器視窗進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
relative	生成相對定位的元素，相對于其正常位置進行定位。是以，"left:20" 會向元素的 LEFT 位置添加 20 像素。
static	    預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
inherit	    規定應該從父元素繼承 position 屬性的值。

6.1、相對定位 

<meta charset="UTF-8">
    <title>相對定位作業</title>

    <style>
        body{
            width:1900px;
        }
        div{
            border: 2px solid #000000;
            width: 600px;
            height: 600px;
            padding: 2px;
            float: contour;
            text-align: center;

        }
        div:after{
            content:'';
            clear: both;
        }
        a{
            border: 1px solid red;
            display: block;
            width: 200px;
            height: 200px;
            color: #ffffff;
        }
        a:hover{
            background-color: blue;
            color: black;
        }
       
        a:nth-of-type(2){
            position:relative;
            left: 201px;
            top: -1px;
        }
        a:nth-of-type(3){
            position: relative;
            left:402px;
            top: -403px;
        }
        a:nth-of-type(4){
            position: relative;
            top: -205px;
        }
        a:nth-of-type(5){
            position: relative;
            left: 402px;
            top: -408px;
        }

    </style>

</head>
<body>
    <div>
        <a href=""><p></p></a>
        <a href=""><p></p></a>
        <a href=""><p></p></a>
        <a href=""><p></p></a>
        <a href=""><p></p></a>
    </div>
</body>
  • 相對定位：position:relative;(方向相反) 
left:402px;
        top: 10px;
        right:100px ;
        bottom:100px;
  • 相對定位對于原來的位置，進行指定偏移，相對定位的話，它仍然在标準文檔流中，原來的位置會被保留。

6.2、絕對定位

定位：基于xxx定位，上下左右~

  1. 沒有父級元素定位的前提下，相對于浏覽器定位。
  2. 假設父級元素存在定位，我們通常會對相對于父級元素進行便宜~
  3. 在父級元素内範圍内活動。
  4. 相對于父級或浏覽器的位置，進行指定的偏移，絕對定位的話，他不在标準文檔流中。原來的位置不會被儲存。 
<title>絕對定位作業</title>

    <style>
        div{
            border: 1px solid #000000;
        }
        .da{
            border: 3px solid #0800ff;
            background-color: chartreuse;
        }
        .db{
            height: 30px;
            background-color: #5f83ff;
        }
        .dc{
            height: 30px;
            background-color: #ffab7a;
            position: absolute;
            top: -10px;
            left: 200px;
        }
        .dd{
            height: 30px;
            background-color: #f34fff;
        }

    </style>

</head>
<body>

<div class="da">
    <div class="db">第一個</div>
    <div class="dc">第二個</div>
    <div class="dd">第三個</div>
</div>

</body>

6.3、固定定位

  • 相對于網頁或者父标簽固定到指定位置
  • 相對定位對于原來的位置，進行指定偏移，相對定位的話，它仍然在标準文檔流中，原來的位置會
  • 被保留。 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index</title>
    <style>
        #d{
            height: 300px;
            border: 1px solid #000000;
        }
        .da{
            height: 100px;
            background-color: #00ff0c;
        }
        .db{
            height: 100px;
            background-color: #ff2d00;
        }
        .dc{
            height: 100px;
            background-color: #0008ff;
            position: fixed;
            left: 50px;
            top: 5px;
        }

    </style>
</head>
<body>
<div id="d">
    <div class="da">div1</div>
    <div class="db">div2</div>
    <div class="dc">div3</div>
</div>
</body>
</html>

6.4、z-index及透明度（opacity） 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index</title>
    <style>
    	body{
    margin: 0;
    padding: 0;
}
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
#d{
    border: 1px solid #000000;
    width: 333px;
    height: 408px;
}
ul{
    position: relative;
}
  

li:nth-of-type(2),li:nth-of-type(3){
    height: 30px;
    width: 333px;
        /*color: #ffffff;*/
        font-size: 20px;
        position: absolute;
        top: 284px;
    }
li:nth-of-type(2){
    background-color: #f34fff;

    /*層次*/
    z-index: 50;
    /*透明度*/
    opacity: 60%;

}
    li:nth-of-type(4){
        color: #ffffff;
        background-color: #000000;
        font-size: 25px;

    }
	</style>
</head>
<body>
<div id="d">
   <ul>
       <li>
           <img src="../../img/dome_2.png" alt="你懂個der兒啊！">
       </li>
       <li></li>
       <li>My</li>
       <li>girl</li>
   </ul>
</div>
</body>
</html>
知識點記錄 css
上一篇: html/css/js-layer彈出層的初次使用
下一篇: html/css/js-如何利用jq來更改屬性的值和擷取屬性的值

繼續閱讀