css快速入門（上）

阿新 • • 發佈：2022-02-17

css快速入門（上）

一、什麼是CSS

1、什麼是CSS

Cascading Style Sheet 層疊樣式表。
CSS：表現（美化網頁）。
- 字型，顏色，邊距，高度，寬度，背景圖片，網頁定位，網頁浮動。

2、CSS發展史

CSS 1.0：1994年 10月提出；
CSS 2.0：DIV（塊）+CSS，HTML與CSS結構分離的思想，網頁變得簡單，SEO；
CSS 2.1：浮動，定位；
CSS 3.0：圓角、陰影、動畫…瀏覽器相容性。

練習格式：

3、快速入門

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    規範，<sytle>可以編寫css的程式碼，每一個宣告最好以“;”結尾
    語法：
        選擇器{
                宣告1;
                宣告2;
                宣告3;
             }
    -->

    <style>
        h1{
            color: red;
        }
    </style>
    
</head>
<body>

<h1>CSS測試</h1>

</body>
</html>

建議使用這種規範（單獨寫一個css檔案，用link標籤引入css檔案效果）

4、CSS優勢

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

5、CSS的3種匯入方式

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

    <!--內部樣式-->
    <style>
        h1{
            color: green;
        }
    </style>

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

<!--優先順序：就近原則-->
<!--行內樣式：在標籤元素中，編寫一個style屬性，編寫樣式即可-->
<h1 style="color: red">這是標籤</h1>
</body>
</html>

拓展：外部樣式兩種方法

連結式 html

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

匯入式 @import是CSS2.1特有的！

<!--匯入式-->
    <style>
        @import url("css/style.css");
    </style>

二、基本選擇器

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

1、標籤選擇器

選擇一類標籤 標籤{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: orange;
            background: blue;
            border-radius: 10px;
        }
    </style>
</head>
<body>
<h1>標籤選擇器</h1>
</body>
</html>

2、類選擇器

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

<!DOCTYPE html>
<html lang="en">
<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>
</body>
</html>

3、id選擇器

全域性唯一，格式：#id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id選擇器：id必須保證全域性唯一
            #id名稱{}
            不遵循就近原則，優先順序是固定的
            id選擇器 > 類選擇器 > 標籤選擇器
        */
        #demo1{
            color: aqua;
        }
        .demo2{
            color: red;
        }
        #demo2{
            color: orange;
        }
        h1{
            color: blue;
        }
    </style>
</head>
<body>

<h1 id="demo1">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>
</html>

優先順序：id > class > 標籤

三、層次選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*後代選擇器*/
        body p{
            background: deeppink;
        }
        /*子選擇器*/
        body>p{
            background: olive;
        }
        /*相鄰兄弟選擇器:只選擇一個,相鄰向下*/
        .active+p{
            background: blueviolet;
        }
        /*通用兄弟選擇器，當前選中元素的向下的所有兄弟元素*/
        .active2~p{
            background: dodgerblue;
        }
    </style>
</head>
<body>

<p>後代選擇器p1</p>
<p class="active">子選擇器p2</p>
<p>相鄰兄弟選擇器p3</p>
<p class="active">通用兄弟選擇器p4</p>
<p>通用兄弟選擇器p5</p>

</body>
</html>

1、後代選擇器

在某個元素的後面

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

2、子選擇器

一代

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

3、相鄰的兄弟選擇器

同輩只選擇一個，相鄰向下

/*相鄰兄弟選擇器：只有一個，相鄰（向下）*/
<style>
.active+p{
background: red
}
</style>

<body>
	<p class="active">p1<p>
	<p>p2</p>
</body>

4、通用選擇器

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

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

四、結構偽類選擇器

偽類

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>偽類選擇器</title>
    <style>
        ul li:first-child{
            /*ul的第一個子元素*/
            background: mediumaquamarine;
        }
        ul li:last-child{
            /*ul的最後一個子元素*/
            background: lightpink;
        }
        /*
        選中p1:定位到父元素,選擇當前的第一個元素
        選擇當前P元素的父級元素，選中父級元素的第一個，並且是當前元素才生效！
         */
        p:nth-child(1){
            background: greenyellow;
        }
        p:nth-of-type(2){
            /*選中父元素下的第二個p元素*/
            background: lightseagreen;
        }
        a:hover{
            color: red;
        }
    </style>
</head>
<body>

<a href="">滑鼠移過來我變紅色</a>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li01</li>
    <li>li02</li>
    <li>li03</li>
</ul>

</body>
</html>

五、屬性選擇器

id+class結合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>屬性選擇器</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: aquamarine;
            text-align: center;
            color: #ffffff;
            text-decoration: none;
            margin-right: 5px;
            line-height:50px;
            font: bold 20px/50px Arial;
        }
        /*
        屬性名,屬性名 = 屬性值（正則）
              = 表示絕對等於
             *= 表示包含
             ^= 表示以...開頭
             $= 表示以...結尾
             存在id屬性的元素
                a[]{}
         */
        a[id]{
            background: deeppink;
        }
        a[id=first]{
            /*id=first的元素*/
            background: greenyellow;
        }

        a[class*="links"]{
            /*class 中有links的元素*/
            background: #1643b1;
        }

        a[href^=http]{
            /*選中href中以http開頭的元素*/
            background: aquamarine;
        }
        a[href$=pdf]{
            /*選中href中以http開頭的元素*/
            background: aquamarine;
        }
    </style>
</head>
<body>

<p class="demo">
    <a href="https://www.baidu.com/" class="links item first" id="first">百度</a>
    <a href="" class="links item active" target="_blank " title="test">連結</a>
    <a href="img/hello.html" class="links item">網頁</a>
    <a href="img/str1.png" class="links item">png</a>
    <a href="img/str2.jpg" class="links item">jpg</a>
    <a href="abc" class="links item">鏈2</a>
    <a href="/fy.pdf" class="links item">pdf</a>
    <a href="/quit.pdf" class="links item">pdf2</a>
    <a href="dump.doc" class="links item">doc</a>
    <a href="kiko.doc" class="links item last">doc2</a>
</p>

</body>
</html>

六、美化網頁

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">CSS</span>
</body>
</html>

font-family：字型
font-size：字型大小
font-weight：字型粗細

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            font-family: 楷體;
            color: red;
        }
        h3{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }
    </style>
</head>
<body>

<h3>學習CSS</h3>
<p class="p1">P</p>

</body>
</html>

常用寫法

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

2、文字樣式

顏色–>color
文字對齊方式–>text-align：center
首行縮排–>text-indent：2em
行高–>line-height：300px；
下劃線–>text-decoration

text-decoration:underline/*下劃線*/
text-decoration:line-through/*中劃線*/
text-decoration:overline/*上劃線*/
text-decoration:none/*超連結去下劃線*/

圖片、文字水平對齊

img,span{vetical-align:middle}

3、超連結偽類

<style>
	a{/*超連結有預設的顏色*/
		text-decoration:none;
		color:#000000;
	}
	a:hover{/*滑鼠懸浮的狀態*/
		color:orange;
	}
	a:active{/*滑鼠按住未釋放的狀態*/
		color:green
	}
	a:visited{/*點選之後的狀態*/
		color:red
	}
</style>

4、陰影

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

5、列表ul li

/*list-style{
	none:去掉原點
	circle：空心圓
	decimal：數字
	square：正方形
}*/
ul li{
	height:30px;
	list-style:none;
	text-indent:1em;
}
a{
	text-decoration:none;
	font-size:14px;
	color:#000;
}
a:hover{
	color:orange;
	text-decoration:underline
}
/*放在div中，作為導航欄*/
<div id="nav"></div>
#nav{
	width:300px;
}

6、背景

背景顏色：background
背景圖片

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

綜合使用

background:red url("圖片相對路徑") 270px 10px no-repeat
background-position：/*定位：背景位置*/

7、漸變

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

body{
     background-color: #0cd7f3;
     background-image: linear-gradient(43deg, #0093E9 0%, #80D0C7 46%, #23F549 100%);
}

css快速入門（上）

css快速入門（上）一、什麼是CSS 1、什麼是CSS Cascading Style Sheet 層疊樣式表。 CSS：表現（美化網頁）。

Docker 快速入門（一）- 情況介紹和安裝

歡迎您! 很高興您想學習 Docker 。這個頁面包含了如何開始使用 Docker 的循序漸進的說明。

Vue.js——元件快速入門（下篇）

概述上一篇我們重點介紹了元件的建立、註冊和使用，熟練這幾個步驟將有助於深入元件的開發。

Core WebApi專案快速入門（一）：初入窺探

1.WebApi新建與部署 1.1 新建Core WebApi工程 1.2 部署 1.2.1 IIS部署首先以檔案方式釋出應用程式，然後下載依賴.net core執行時及host安裝包

Metasploit快速入門（二）

Metasploit快速入門（二）參考： https://mp.weixin.qq.com/s?__biz=MjM5MTYxNjQxOA==&mid=2652850556&idx=1&sn=bbfae36b3cbb012fc498ab3aa20501f3&chksm=bd5935b18a2ebca785209112971dcbde12a9718