sqlyog報錯誤號碼2058 Plugin caching_sha2_password could not be loaded
阿新 • • 發佈：2021-02-01
Cascading Style Sheets層疊級聯樣式表
格式
選擇器{
宣告1;
宣告2;
宣告3;
}
外部引用
<head>
<link rel="stylesheet" href="../css/style.css">
</head>
選擇器
基本選擇器
標籤選擇器
<head>
<style>
h1{
color: blue;
}
</style> class選擇器
<head>
<style>
.a{
color: blue;
}
.b{
color: red;
}
</style>
</head>
<body>
<h1 class="a">類選擇器</h1>
<h1 class id選擇器
<head>
<style>
#a{
color: blue;
}
#b{
color: red;
}
</style>
</head>
<body>
<h1 id="a">類選擇器</h1>
<h1 id=" 標籤可以有相同的class，但id唯一，這是class選擇器與id選擇器的區別。
同一個標籤，id選擇器樣式>class選擇器>標籤選擇器。
層次選擇器
後代選擇器
在某個元素的後面的某元素
<head>
<style>
//ul標籤後面的所有p標籤樣式
ul p {
color: red;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<ul>
<li>
<p>p3</p>
</li>
<li>
<p>p4</p>
</li>
</ul>
</body>
子選擇器
某元素的後一代
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
//body標籤下一代中的p標籤
body>p {
color: red;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<ul>
<li>
<p>p3</p>
</li>
<li>
<p>p4</p>
</li>
</ul>
</body>
相鄰選擇器
同一層次的元素的下一個元素
<head>
<style>
//和p2同層次，且是p2下一個的p標籤
.active + p {
color: red;
}
</style>
</head>
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
</body>
通用選擇器
同一層次的元素後面的所有元素
<head>
<style>
//和p2同層次，且在p2後面所有的p標籤
.active ~ p {
color: red;
}
</style>
</head>
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
</ul>
<p>p6</p>
</body>
全部都在對應元素向下選擇，但不包括該元素
結構偽類選擇器
格式
標籤:具體位置{
宣告
}
第一個子類和最後一個子類
<head>
<style>
//ul標籤後代的第一個li標籤
ul li:first-child{
color: red;
}
//ul標籤後代的最後一個li標籤
ul li:last-child{
color: green;
}
<!--如果有多個ul,每個ul的第一個和最後一個元素都會被選中-->
</style>
</head>
<body>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
定位到父元素選擇第一個元素
<head>
<style>
//選中p元素的父親的第一個孩子，這個孩子元素必須是p元素
p:nth-child(1) {
color: red;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
</body>
定位到父元素選擇型別為該元素的第一個元素
<head>
<style>
//選擇p元素的父親元素後代中第一個型別為p的元素
p:nth-of-type(1) {
color: red;
}
</style>
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
</body>
p:nth-child(1)按順序選擇，如果p元素的父親元素後代第一個元素不是p元素，樣式將無效。
p:nth-of-type(1)按型別選擇，會定位到p元素的父親元素後代第一個型別為p的元素。
屬性選擇器
格式
標籤[標籤屬性(=值)]{
宣告
}
例1：選中a標籤中有id屬性的元素
<head>
<style>
a[id] {
color: red;
}
</style>
</head>
<body>
<a href="" id="">1</a>
<a href="">1</a>
</body>
例2：選中a標籤中id屬性為first的元素
<head>
<style>
a[id=first] {
color: red;
}
</style>
</head>
<body>
<a href="" id="first">1</a>
<a href="" id="last">1</a>
</body>
例3：選中a標籤中class屬性為links item的元素
<head>
<style>
a[class="links item"] {
color: red;
}
</style>
</head>
<body>
<a href="" class="links item">1</a>
<a href="" class="links" >1</a>
</body>
因為id是唯一的，所以id帶值可以沒有"",但class需要有引號，參考例2，例3。
例4：選中a標籤中class屬性含有links的元素
<head>
<style>
a[class*="links"] {
color: red;
}
</style>
</head>
<body>
<a href="" class="links item">1</a>
<a href="" class="item">1</a>
</body>
=表示屬性內的值絕對等於引號內的值，*=表示屬性內的值含有引號內的值，參考例3，例4
例5：選中a標籤中href屬性以http開頭的元素（利用正則表示式）
<head>
<style>
a[href^=http] {
color: red;
}
</style>
</head>
<body>
<a href="https:www.baidu.com">1</a>
<a href="../resource/image/1.jpg">1</a>
</body>
例6：選中a標籤中href屬性以com結尾的元素（利用正則表示式）
<head>
<style>
a[href$=com] {
color: red;
}
</style>
</head>
<body>
<a href="https:www.baidu.com">1</a>
<a href="../resource/image/1.jpg">1</a>
</body>
美化頁面元素
span
將字型重點突出（感覺和div差不多，但div包含內容更多）
<head>
<style>
#a{
font-size: 50px;
}
</style>
</head>
<body>
Hello <span id="a">World！</span>
</body>
字型樣式
font-style: oblique; //字型風格，斜體
font-weight: bold; //字型粗細（寬度），粗
line-height: 20px; //字型行高
font-size: 40px; //字型大小
font-family: Arial,宋體; //字型樣式，英文和中文
color: red; //字型顏色，紅
font: oblique bold 20px/50px 宋體; //字型風格 字型粗細 字型行高/字型大小 字型樣式
文字樣式
background: rgba(0,0,255,0.4); //背景顏色
text-align: center; //排版，居中
text-indent: 2em; //首行縮排
line-height: 50px; //行高，改變行高可以改變欄位間距
text-decoration: underline; //下劃線
text-decoration: line-through; //刪除線
text-decoration: overline; //上劃線
vertical-align: middle; //和參照物水平對齊
超連結偽類
/*滑鼠觸碰後效果：字型變黃,字型變大*/
a:hover{
color: yellow;
font-size: 50px;
}
/*滑鼠點選效果：背景變藍*/
a:active{
background: blue;
}
/*一般a標籤也會去除下劃線*/
text-decoration: none;
陰影效果
/*text-shadow: 陰影顏色 水平偏移，垂直偏移，陰影半徑*/
text-shadow: green 10px -10px 2px; //一個向右上角偏移10px，半徑為2px的綠色陰影
列表
list-style:
none 去除樣式
circle 空心圓
decimal 數字，有序列表
square 正方形
背景
<style>
div{
width: 720px;
height: 792px;
background-image: url("../resources/image/1.jpg");
background-position: 200px 10px; //圖片定位
background: linear-gradient(19deg,#21D4FD 0%,#B721FF 100%); //漸變
/*https://www.grabient.com/*/
}
</style>
/*必須要寫寬度和高度才能有背景圖，預設是圖片全部平鋪*/
background-repeat: repeat-x; //水平平鋪
background-repeat: repeat-y; //垂直平鋪
background-repeat: no-repeat; //不平鋪，也需要有寬度高度
/*background: 背景顏色 圖片路徑 圖片水平偏移 圖片垂直偏移 平鋪方式*/
background: red url("../resources/image/2.jpg") 200px 10px no-repeat;
盒子模型
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-L8Jlvk37-1612181307850)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210130152835607.png)]
- margin：外邊距
- border：邊框
- padding：內邊距
- 盒子大小：margin+border+padding+內容大小
邊框
/*border: 粗細 樣式 顏色*/
border: 1px solid red;
border-radius: 50px; //邊框圓角
/*box-shadow: 陰影顏色 水平偏移，垂直偏移，陰影半徑*/
box-shadow: green 10px -10px 2px; //盒子陰影
border-style:
solid //邊框實線
dashed //邊框虛線
border-radius: 50px; //四角同一弧度
border-radius: 50px 100px; //左上右下50，右上左下100
border-radius: 50px 100px 150px 200px; //左上50，右上100，右下150，左下200，順時針
width=heigth=2*border-radius == 圓形
width=2*heigth=border-radius: heigth heigth 0 0 == 向上半圓
width=heigth=border-radius: heigth 0 0 0 == 左上扇形
外內邊距
Html本身有的標籤會有個預設的外邊距，一般會手動寫為0
body{margin: 0px;}
margin: 0px; //無外邊距
margin: 0px auto; //上下外邊距為0，左右外邊距居中對齊
margin: 10px 20px 30px 40px; //上外邊距為10，右外邊為20，下外邊距為30，右外邊距40，順時針
外邊距與內邊距操作一樣
浮動
display
block //變為塊元素，獨佔一行
inline //行內元素
inline-block //保持塊元素但可以內聯保證下一個元素可以在同一行
float
left //向左浮動
right //向右浮動
clear
left //左側不允許有浮動元素
right //右側不允許有浮動元素
both //兩側不允許有浮動元素
none
overfloat
hidden //修剪內容溢位
scroll //滾動條
父級邊框塌陷
我的理解就是最外圍的邊框沒有把內容包括起來。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-bYznjWhX-1612181307855)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210131221130023.png)]
解決辦法
-
增加父級元素高度（外邊框高度直到包含所有內容）
#father{ border: 1px red solid; heigth: 1000px; } -
設定一個空的div標籤，清除浮動
<style> #clear{ clear: both; margin: 0; padding: 0; } </style> <div id="father"> <div id="clear"></div> </div> -
overfloat
#father{ border: 1px red solid; overflow: hidden; } -
父類新增偽類 :after
#father:after{ content: ''; display: block; clear: both; }
定位
相對定位
position: relative //相對原來的位置偏移，但原來的位置會被保留
/*下面要加上相對原來位置偏移多少
負數表示與相對方向相同，正數表示與相對方向相反*/
top: -20px; //向上偏移20
left: 10px; //向右偏移10
絕對定位
-
相對於父級元素定位
//父元素定位但不偏移辦法 #father{ position: relative; } -
沒有父級元素定位則相對於瀏覽器邊框定位
position: absolute; //原來位置不保留
/*下面要加上相對原來位置偏移多少
負數表示與相對方向相同，正數表示與相對方向相反*/
top: -20px; //向上偏移20
left: 10px; //向右偏移10
固定定位
position: fixed; //相對瀏覽器定位，跟隨滾動條移動
/*需要確定固定在哪裡，下面是固定在右下角*/
right: 0;
bottom:0;
opacity
opacity: 0.5; //背景透明度
Z-index
類似圖層：當兩個標籤疊加在同一位置時使用，確定其中一個標籤在另一個標籤之上。
<head>
<style>
#app{
padding: 0;
margin: 0;
width: 730px;
overflow: hidden;
font-size: 50px;
line-height: 100px;
border: 1px solid red;
position: relative;
}
.l,.b{
width: 730px;
height: 100px;
position: absolute;
top:700px;
}
.l{
color: white;
z-index: 1;
}
.b{
background: black;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li><img src="../resources/image/1.jpg" alt=""></li>
<li class="l">這是第一段文字</li>
<li class="b"></li>
</ul>
</div>
</body>
0px;
overflow: hidden;
font-size: 50px;
line-height: 100px;
border: 1px solid red;
position: relative;
}
.l,.b{
width: 730px;
height: 100px;
position: absolute;
top:700px;
}
.l{
color: white;
z-index: 1;
}
.b{
background: black;
opacity: 0.5;
}
- 這是第一段文字