js及jQuery總結（二）
阿新 • • 發佈：2018-12-12
03.01_css選擇器-屬性選擇器
選擇器[屬性名]{
屬性名稱1：值1；
屬性名稱2：值2；
....
}
選擇器[屬性名="屬性值"]{
屬性名稱1：值1；
屬性名稱2：值2；
....
}
03.02_css選擇器-包含選擇器：
父子標籤 先輩和後輩標籤
先輩選擇器 後輩選擇器{
屬性名稱1：值1；
屬性名稱2：值2；
....
}
查詢直接子標籤
父標籤選擇器>子標籤選擇器{
屬性名稱1：值1；
屬性名稱2：值2；
....
}
03.03_css選擇器-組合選擇器：
選擇器1，選擇器2，。。。。{ 屬性名稱1：值1； 屬性名稱2：值2； .... }
03.04_css選擇器-偽類選擇器
類選擇器：特定的設定{ 屬性名稱1：值1； 屬性名稱2：值2； .... } <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*全域性選擇器 *{ background-color: lightgray; } */ /*標籤名稱選擇器*/ /*所有的段落首行縮排*/ p{ text-indent: 2em; } /*id選擇器*/ #first{ background-color: yellow; text-indent: 2em; } /*類選擇器*/ .little{ font-weight: 900; } .pink{ color: pink; } /*屬性選擇器------瞭解*/ /*name是p標籤中的一個屬性*/ p[name]{ /*font-family可以書寫多種字型，適配到哪個就使用哪個，如果都沒有，則直接使用預設字型*/ /*font-family: "微軟雅黑" arial "arial black";*/ text-decoration: overline; } /*類似於類選擇器或者id選擇器*/ p[name="good"]{ text-decoration: underline; } /*包含選擇器 ------瞭解*/ /*父標籤的id值>子標籤的標籤名稱*/ #box>span{ border: dashed 5px blue; } </style> </head> <body> <p id="first">盼望著，盼望著，東風來了，春天的腳步近了。 </p> <p class="little pink">一切都像剛睡醒的樣子，欣欣然張開了眼。山朗潤起來了，水漲起來了，太陽的臉紅起來了。</p> <p class="little">小草偷偷地從土地裡鑽出來，嫩嫩的，綠綠的。園子裡，田野裡，瞧去，一大片一大片滿是的。</p> <p>桃樹，杏樹，梨樹，你不讓我，我不讓你，都開滿了花趕趟兒。</p> <p name="good">“吹面不寒楊柳風”，不錯的，像母親的手撫摸著你，風裡帶著些心翻的泥土的氣息，混著青草味兒，還有各種花的香，都在微微潤溼的空氣裡醞釀。</p> <p name="bbbb">雨是最尋常的，一下就是三兩天。可別惱。看，像牛犛，像花針，像細絲，密密的斜織著，人家屋頂上全籠著一層薄煙。。</p> <p name="aaa">天上的風箏漸漸多了，地上的孩子也多了。城裡鄉下，家家戶戶，老老小小，也趕趟似的，一個個都出來了。</p> <div id="box"> <span>春天像剛落地的娃娃，從頭到腳都是新的，它生長著。</span> <p>春天像小姑娘，花枝招展的笑著走著。</p> <p>春天像健壯的青年，有鐵一般的胳膊和腰腳，領著我們向前去。</p> </div> </body> </html> 說明：特定的設定： hover【滑鼠懸浮】 before after first-letter first-line
03.05_CSS和html的結合方式–行內樣式
- html標籤都有一個屬性style，可以直接對html進行設定，style的值其實就是css程式碼
行內樣式案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--行內樣式--> <p style="color:#800080;font-size: 20px; text-decoration: underline;">hello</p> <p style="font-style: italic;"></p> </body> </html>
03.06_CSS和html的結合方式–內嵌樣式
- 內嵌樣式就是在標籤中使用
程式碼演示：選擇器的使用全部使用的內嵌樣式
03.07_CSS和html的結合方式–連結樣式
<link href="外部css檔案的路徑" type="MIME型別" rel="文字型別">
href:css檔案的路徑，一般使用相對路徑
rel:stylesheet
MIME型別：就是標記文件的型別，格式：大型別/小型別
css:text/css
js:text/javascript
圖片：image/jpg
所有圖片：image/*
link案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--連結樣式引入css檔案-->
<link href="css/css1.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<h2>hello</h2>
<p>fhajhgkagjalkgjak</p>
</body>
</html>
03.08_CSS和html的結合方式–匯入樣式
- 匯入樣式和連結樣式基本相同
- 語法：
- 在
import案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--匯入樣式-->
<!--在同一個html檔案中可以同時匯入多個css檔案-->
<style>
@import url("css/css1.css");
@import url("css/blue.css");
</style>
</head>
<body>
<h2>hello</h2>
<p>fhajhgkagjalkgjak</p>
<h3>css檔案</h3>
</body>
</html>
03.09_CSS和html的結合方式–各種樣式的優先順序問題
- 總結：
- 作用範圍：
- 行內樣式：只作用於當前標籤【行內引用】
- 內嵌樣式：只作用於當前頁面【內部引用】
- 連結樣式和匯入樣式：可以同時作用與多個頁面【外部引用】
- 優先順序：
- 行內樣式的優先順序是最高的
- 內部引用和外部引用：誰後寫則採用誰的方式【以body為參照物，就近原則】
- 作用範圍：
- 注意：在同一個頁面中最多選用1-2種
優先順序案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--連結樣式
<link href="css/green.css" type="text/css" rel="stylesheet" />
-->
<style>
/*匯入樣式*/
@import url("css/red.css");
</style>
<!--內嵌樣式-->
<style>
p{
color: blue;
}
</style>
</head>
<body>
<!--行內樣式
<p style="color: purple;">hello</p>
-->
<p>hello</p>
</body>
</html>
03.10_css中的屬性–字型屬性
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
p{
/*字型*/
font-family:arial;
/*字型型別
* oblique:真正的傾斜
* italic：義大利體
* normal:
*/
font-style: italic;
/*字型加粗
* 取值範圍100~900之間，數值越大，字型越粗
* normal:正常
* bold：加粗
* bolder：比bold還加粗
* lighter:比normal更細
*/
font-weight:100 ;
/*字型大小*/
font-size: 25px;
}
</style>
</head>
<body>
<p>字型屬性</p>
<!--
補充：
1.px和em：文字大小單位
px：畫素,與解析度有關
em:自動使用尺寸，方便字型的放大和縮小
1em = 16px
2.oblique和italic
italic：只是一種字型風格，對每個字母進行一定的小的改動，達到傾斜的效果
oblique：則是將正常文字傾斜一定的角度
-->
</body>
</html>
03.11_css中的屬性–文字屬性
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
p{
/*文字裝飾
* none:正常
* underline:下劃線
* line-through:刪除線
* overline:頂線
* blink:文字閃爍【不是所有的瀏覽器都支援】
*/
text-decoration:underline;
/*段落縮排，中文常用2em*/
text-indent: 2em;
/*對齊方式
* left
* right
* center
* justify:兩端對齊
*/
text-align:left;
/*設定單詞之間的間距*/
word-spacing:50px;
/*設定字元之間的間距*/
letter-spacing: 30px;
/*字母大小寫轉換
* none；正常顯示
* uppercase:轉換成大寫
* lowercase；轉換為小寫
* capitalize:單詞首字母大寫
*/
text-transform: capitalize;
/*文字方向
* ltr:文字方向從左到右【預設】
* rtl:文字方向從右向左
*/
direction: rtl;
}
</style>
</head>
<body>
<p>today is a good day中文中文中文 </p>
</body>
</html>
03.12_css中的屬性–盒子屬性
- div img
- 邊框屬性
- boder：統一設定，引數：邊框寬度，邊框樣式，邊框顏色
- border-top:
- border-bottom:
- border-left:
- border-right:
- border-width:邊框的寬度
- border-style:邊框樣式，實線，虛線
- dotted：點畫線
- dashed:虛線
- solid:實線
- double：雙畫線
- border-color:邊框的顏色
- 內邊距
- padding:值為距離【類似於border】
- padding-left:
- padding-right:
- padding-top:
- padding-bottom:
- padding:值為距離【類似於border】
- boder：統一設定，引數：邊框寬度，邊框樣式，邊框顏色
padding案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*標籤名稱選擇器*/
div{
width: 200px;
height: 100px;
border: 2px dashed blue;
}
/*id選擇器*/
#div1{
/*統一設定：設定上下左右的內邊距*/
padding: 20px;
}
#div2{
/*單獨設定：設定左邊的內邊距*/
padding-left: 40px;
}
</style>
</head>
<body>
<div>AAAAAAAAAAAA</div>
<div id="div1">BBBBBBBBBBBB</div>
<div id="div2">CCCCCCCCCCCC</div>
</body>
</html>
- margin
- 外邊距
- margin:外邊距
- margin-left:
- margin-right:
- margin-top:
- margin-bottom:
- margin:外邊距
- 設定圖片邊框
- border-left-color:
- border-top-width:
- 外邊距
margin案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*標籤名稱選擇器*/
div{
width: 200px;
height: 100px;
border: 2px dashed blue;
}
/*id選擇器*/
#div1{
/*統一設定：設定上下左右的外邊距*/
margin: 20px;
}
#div2{
/*單獨設定：設定左邊的外邊距*/
margin-left: 40px;
}
</style>
</head>
<body>
<div>AAAAAAAAAAAA</div>
<div id="div1">BBBBBBBBBBBB</div>
<div id="div2">CCCCCCCCCCCC</div>
</body>
</html>
03.12_css中的屬性–尺寸屬性
- height:設定元素的高度
- width；設定 元素的寬度
- line-height:設定行高
size案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.middle{
/*
* 如果文字內容有多行的時候，如果height==line-height,則只顯示一行
* 如果文字內容只有一行的時候，如果height==line-height，則文字在垂直方向上居中顯示
*/
height: 100px;
line-height: 100px;
border: 1px dashed black;
}
</style>
</head>
<body>
<div class="middle">
尺寸屬性 this is a text
尺寸屬性 this is a text
尺寸屬性 this is a text
</div>
</body>
</html>
03.13_css中的屬性–背景屬性
- 常用背景屬性
- background:背景色/圖
- background-color；背景色
- background-image:背景圖
- background-repeat；背景樣式平鋪效果
- background: linear-gradient(to bottom right,red,blue)顏色漸變
- repeat:整體平鋪
- no-repeat：不平鋪
- reapeat-x:只沿著水平方向平鋪
- reapeat-y:只沿著垂直方向平鋪
- background-position：背景影象的位置
- left\right\top\bottom\center
- background-attachment:設定背景圖是否隨著網頁內容一起滾動
- srcoll:隨著滾動
- fixed:固定的，不隨著滾動
background案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
width: 100%;
height: 5000px;
/*背景顏色*/
/*background-color: cyan;*/
/*背景圖*/
/*格式：url(圖片的相對路徑)*/
/*預設情況整體平鋪*/
/*background-image: url(img/pic20.jpg);*/
/**/
/*background-repeat: no-repeat;*/
/*background-attachment: fixed;*/
/*背景產生一個顏色漸變的效果*/
/*background,預設在垂直方向上線性漸變*/
/*background: linear-gradient(red,blue);*/
/*從左到右的漸變*/
/*background: linear-gradient(to right,red,blue);*/
/*對角線的漸變*/
background: linear-gradient(to bottom right,red,blue);
}
</style>
</head>
<body>
</body>
</html>
03.14_css中的屬性–列表相關的屬性
- 列表相關的屬性
- backgroud-color:設定列表的背景顏色
- line-style-image；將專案符號設定為自定義的圖片
- line-style-position:設定專案符號的位置
- list-style:設定整個列表的樣式
- 引數1：設定的樣式
- 引數2：樣式設定的位置
list案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
li{
background-color: orange;
/*將專案符號設定為自定義的圖片,專案符號預設為一個小圓點*/
/*list-style-image:url(img/pic20.jpg);*/
/*設定專案符號的位置,預設值為outside*/
/*list-style-position: inside;*/
/*將上面的兩項合併，引數：圖片 位置*/
list-style: inside url(img/pic20.jpg);
}
</style>
</head>
<body>
<ul>
<li>蘋果</li>
<li>菠蘿</li>
<li>芒果</li>
<li>西瓜</li>
<li>櫻桃</li>
</ul>
</body>
</html>
03.15_css中的屬性–浮動屬性
- div是塊標籤，在頁面中獨佔一行，從上向下依次排列，這種排列方式稱為流
- 標籤浮動之前，稱為標準流，是豎向排列
- 將標籤浮動之後，可以達到橫向排列的效果
- float：浮動標籤【實現文字環繞】
- none:預設值，不浮動
- left:文字漂浮在右邊
- right:文字漂浮在左邊
float案例01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*標籤名稱選擇器*/
div{
width: 200px;
height: 100px;
border: 2px dashed blue;
}
/*id選擇器*/
#div1{
float:left;
}
#div2{
float: left;
}
</style>
</head>
<body>
<div id="div1">BBBBBBBBBBBB</div>
<div id="div2">CCCCCCCCCCCC</div>
</body>
</html>
float案例02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*背景色，取消預設的內邊距和外邊距*/
body{
background-color: lightgray;
margin: 0px;
padding: 0px;
}
/*圖片*/
img{
float: left;
width:150px;
height: 150px;
}
/*段落*/
p{
color: black;
margin: 0px;
padding-left: 5px;
padding-top: 10px;
padding-right: 5px;
text-indent: 2em;
}
/*設定第一個中文*/
span{
float: left;
font-size: 60px;
font-family: "黑體";
padding-right:5px;
}
</style>
</head>
<body>
<img src="img/zuchongzhi.png" />
<p>
<span>祖</span>衝之，429年（南朝宋元嘉六年）出生於建康（今南京），祖籍范陽郡遒縣（今河北淶水縣）。西晉末期，北方發生大規模戰亂，祖沖之的先輩從河北遷徙到江南，並在江南定居下來。祖沖之就出生在江南，其祖父祖昌任劉宋朝大匠卿，是朝廷管理土木工程的官吏，父親祖朔之做“奉朝請”，學識淵博，常被邀請參加皇室的典禮、宴會。
</p>
<p>
祖沖之從小就受到很好的家庭教育。爺爺給他講“斗轉星移”，父親領他讀經書典籍，家庭的薰陶，耳濡目染，加之自己的勤奮，使他對自然科學和文學、哲學，特別是天文學產生了濃厚的興趣，在青年時代就有了博學的名聲
</p>
<p>
由於祖沖之博學多才的名聲，被南朝宋孝武帝派至當時朝廷的學術研究機關華林學省做研究工作，後來又到總明觀任職。當時的總明觀是全國最高的科研學術機構，相當於現在的中國科學院。總明觀內分設文、史、儒、道、陰陽5門學科，實行分科教授制度，請來各地有名望的學者任教，祖沖之就是其一。在這裡，祖沖之接觸了大量國家藏書，包括天文、曆法、術算方面的書籍，具備了借鑑與拓展的先決條件。
</p>
</body>
</html>
03.16_css中的屬性–定位屬性
- absolute
- absolute:絕對定位，將物件從文件流中拖出，可以使用top，bottom等屬性設定定位【會脫離文件流，不會保留位置】
- 參照物：
- a.如果該標籤的父標籤設定有效的定位屬性，就以父標籤為參照物
- b.如果沒有設定，會查詢所有的先輩標籤，如果有先輩標籤設定了有效定位，則以先輩標籤為參照物
- c.如果先輩標籤有沒有設定有效定位，則以body為參照物
- absolute:絕對定位，將物件從文件流中拖出，可以使用top，bottom等屬性設定定位【會脫離文件流，不會保留位置】
absolute案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>絕對定位</title>
<style>
body{
height: 9999px;
}
.pos_abs{
position: absolute;
left:100px;
top: 150px;
}
</style>
</head>
<body>
<!--參照物：父標籤【先輩標籤】-->
<h2 class="pos_abs">這是一個帶有絕對定位的標題</h2>
</body>
</html>
-
relative
- relative:相對定位，不會將物件從文件流中拖出，可以使用top，bottom等屬性設定定位【不會脫離文件流，會保留原來的位置，達到了靈魂脫殼的效果】
- 參照物：該標籤自身原來的位置
- relative:相對定位，不會將物件從文件流中拖出，可以使用top，bottom等屬性設定定位【不會脫離文件流，會保留原來的位置，達到了靈魂脫殼的效果】
-
fixed
- fixed:固定定位，脫離文件流
- 一般應用在廣告中，參照物為窗體
- 有效的定位屬性；可以設定距離參照物的top,bottom,left,right,如果該標籤在參照物的內部，這些屬性值為正數，一旦出界則這些屬性值為負數
- fixed:固定定位，脫離文件流
fixed案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style>
body{
height: 9999px;
}
.one{
position: fixed;
left: 5px;
top: 5px;
}
.two{
position: fixed;
left: 30px;
top: 30px;
}
</style>
</head>
<body>
<!--參照物：當前顯示的窗體，一般應用在廣告-->
<p class="one">hello</p>
<p class="two">today</p>
</body>
</html>
- z-index
- z-index:用於在一個元素的上面放置另一個元素【疊加】
z-index案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h1{
color: red;
}
.x{
position: absolute;
left:0px;
top:0px;
/*
* 根據z-index的值來決定誰存在於最上層
* 此屬性的值越大，則被層疊在最上層
* 如果沒有設定z-index的值，預設為0
*/
z-index: -1;
}
</style>
</head>
<body>
<h1>標題</h1>
<img class="x" src="img/pic20.jpg" />
</body>
</html>
03.17_形變和過渡
- transfrom:旋轉，按比例放大或者縮小
transform案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#transform{
width: 200px;
height: 200px;
background-color: orange;
margin: 0px;
color: white;
/*設定旋轉點*/
transform-origin: center bottom;
/*
* 旋轉 立體旋轉x,y,z三個軸
* degree；度
* rotate(30deg)：預設沿著z軸旋轉
* rotateX(30deg):沿著X軸旋轉
* rotateY(30deg):沿著Y軸旋轉
* */
/*transform: rotate(-30deg);*/
/*放大*/
/*transform: scale(2);*/
/*注意：rotate和scale使用transform不能兩個同時設定*/
/*合併*/
transform: rotate(-30deg) scale(1.5);
}
</style>
</head>
<body>
<div id="transform">演示形變</div>
</body>
</html>
03.18_動畫animation
- animation
animation案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.transform{
position: absolute;
width: 150px;
height: 150px;
background: red;
margin: 50px;
transform-origin: center;
transform: rotate(30deg) scale(1.5);
animation: animation 5s linear;
}
@keyframes animation{
from{
margin-left: 100px;
transform: rotate(0deg) scale(1);
}
to{
margin-left: 500px;
transform: rotate(200deg) scale(1.5);
}
}
</style>
</head>
<body>
<div class="transform">旋轉動畫</div>
</body>
</html>