CSS學習筆記
阿新 • • 發佈：2020-11-13
CSS層疊樣式表
美化頁面。css2.0=div+css ---> css2.1=浮動 + 定位 --->css3.0=圓角、陰影、動畫.....
css樣式：
-
內聯
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> h1{ color:burlywood; } </style> </head> -
外聯
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/c1.css"> </head>
css優先順序：就近原則
css優點：
- 內容和表現分離
- 可以實現複用
css選擇器
1.基本選擇器： 優先順序：id > 類 > 標籤
-
標籤選擇器
h1{ color:red; background: rgb(235, 162, 162); border-radius: 60px; } -
類選擇器，class名字可以重複，可以實現css程式碼的複用
.kk{ color:red; background: rgb(235, 162, 162); border-radius: 60px; } -
id選擇器，id名必須唯一
#kk{ color:red; background: rgb(235, 162, 162); border-radius: 60px; }
2.層次選擇器
-
後代選擇器（選擇所有後代），用空格連線
body p{ color:red; background: rgb(235, 162, 162); border-radius: 100px; } -
子代選擇器（選擇所有子代），用符號
>連線body>p{ color:red; background: rgb(235, 162, 162); border-radius: 100px; } -
相鄰弟弟選擇器（選擇相鄰的一個弟弟），用符號
+連線.mm + p{ color:red; background: rgb(235, 162, 162); border-radius: 100px; } -
弟弟選擇器（選擇當前元素的所有弟弟），用符號
~連線.mm ~ p{ color:red; background: rgb(235, 162, 162); border-radius: 100px; }
3.結構偽類選擇器
/* 選中ul的第一個子元素 */
ul li:first-child{
color:red;
background: rgb(235, 162, 162);
border-radius: 100px;
}
/* 選中ul的最後一個子元素 */
ul li:last-child{
color:rgb(117, 39, 39);
background: rgb(235, 162, 162);
border-radius: 100px;
}
/* p:nth=>定位到p元素的父級， chlild（1）=>選中子級的第1個，若第一個孩子是p元素=>選中，如果不是，不選中不進行渲染 */
p:nth-child(2){
color:rgb(117, 39, 39);
background: rgb(235, 162, 162);
border-radius: 100px;
}
/* p:nth=>定位到p元素的父級， chlild（1）=>選中子級的第1個p元素 */
p:nth-of-type(1){
color:rgb(117, 39, 39);
background: rgb(235, 162, 162);
border-radius: 100px;
}
4.屬性選擇器（常用）
/* = 精確選中 */
a[id=a]{
background-color: rgb(238, 215, 220);
}
/* *= "" 模糊選中 */
a[id*="a"]{
background-color: rgb(238, 215, 220);
}
/* ^ 選中以 http 開頭的所有的a元素 */
a[herf^="http"]{
background-color: rgb(238, 215, 220);
}
/* $ 選中以 http 結尾的所有a元素 */
a[herf$="http"]{
background-color: rgb(238, 215, 220);
}
字型樣式
span標籤：重點要突出的字，使用span標籤套起來
字型 font
p {
/* 字型 */
font-family: 楷體;
/* 字型粗細 */
font-weight: bold;
}
h2 {
/* 字型大小 */
font-size: 50px;
/* 斜體 更細 大小 字型 */
font: oblique lighter 80px "楷體";
}
文字樣式
/* 文字居中 */
text-align: center;
/* 首行縮排 */
text-indent: 2em;
/* 超連結去下劃線 */
text-decoration: none;
文字陰影和超連結偽類
超連結偽類
/* 滑鼠懸停顏色 */
a:hover{
background: rgb(235, 61, 61);
}
/* 滑鼠點選顏色 */
a:active{
color: lawngreen;
}
/* 滑鼠點選後顏色 */
a:visited{
color: gray;
}
陰影
#yy{
/* 陰影顏色 水平偏移 垂直偏移 陰影半徑 */
text-shadow: rgb(26, 4, 4) 10px 10px 5px;
}
列表樣式
ul{
width: 500px;
/* none=>去掉原點 square=>正方形 circle=>空心原點*/
list-style-type: square;
background-color: rosybrown;
}
背景漸變
漸變網站：https://uigradients.com/#MoonlitAsteroid
body {
text-align: center;
background: #232526;
background: -webkit-linear-gradient(to right, #414345, #232526);
background: linear-gradient(to right, #414345, #232526);
}
盒子模型和邊框陰影
- padding：內邊距
- margin：外邊距
- border：邊框
#app {
width: 400px;
/* 粗細程度 虛線 紫色 */
border: 5px dashed rebeccapurple;
/* 外邊距的妙用 ==> 實現盒子居中 */
margin: 0 auto;
/* 文字居中 */
text-align: center;
}
圓角邊框
#app {
width: 400px;
height: 400px;
/* 取正方形邊長的一半 */
border-radius: 200px;
}
盒子陰影
/* 陰影顏色 x偏移量 y偏移量 陰影大小 */
box-shadow:yellow 10px 10px 1000px ;
實現行內元素的排列方式——>display和浮動
/* inline-block 既是行內元素--也是塊元素 */
display: inline;
display: block;
display: inline-block;
/* 左右浮動 */
float: right;
float: left;
/* 右側不允許有浮動的元素，如果有就另起一行 */
clear:right;
/* 左側不允許有浮動的元素，如果有就另起一行 */
clear:left;
/* 兩側不允許有浮動的元素，如果有就另起一行 */
clear:both;
overflow，父類邊框塌陷問題
-
增加父級元素的高度
height -
增加一個新的
div -
overflow
/* 超過了父類邊框的部分 --> 隱藏 */ overflow: hidden; /* 超過了父類邊框 --> 會出現一個滾動條 */ overflow: scroll;
定位
相對定位和絕對定位
相對定位：相對於原來的位置進行偏移，原來的位置會被保留
/* 相對定位 */
position: relative;
top: 10px;
絕對定位：相對於父類或者瀏覽器進行偏移，原來的位置不會被保留--->原位置沒有了
/* 父相子絕 */
position: absolute;
固定定位：隨滾動條的滑動而滑動，對於螢幕來說位置不變
position: fixed;
z-index和透明度
z-index：預設是0，最高~999。從下層往上，顯示最大的z-index元素。
ul {
position: relative;
list-style: none;
}
#xx {
width: 500px;
position: absolute;
bottom: 50px;
background-color: black;
z-index: 99;
color: blanchedalmond;
}
#ks {
width: 520px;
position: absolute;
background-color: red;
bottom: 50px;
/* 優先順序最高 */
z-index: 999;
}
透明度：
/* 透明度：0 ~ 1。 0-->全透明 1-->不透明 */
opacity: 0.2;
動畫（一般都有JS實現）
css可以實現一些簡單的動畫（css實現動畫比較繁瑣）。
2D轉換：平移，旋轉