[明日方舟][授權翻譯]instagram上的漫畫漢化整合 5
1,什麼是CSS
-
CSS選擇器（重點+難點）
-
美化網頁(文字，陰影，超連結)
-
盒子模型
-
浮動
-
-
網頁動畫（特效效果）
1.2,發展史
CSS1.0
CSS2.0 DIV（塊）+CSS，HTML與CSS結構分離的思想，網頁變得簡單
CSS2.1 浮動，定位
CSS3.0 圓角，陰影，動畫……瀏覽器相容
1.3快速入門
引用方式
1，內部樣式
<style>
h1{
color: red;
}
</style>
2,推薦這樣（外部樣式）
3，行內樣式
<h1 style="color: red">XXX</h1>
CSS的優勢：
-
內容和表現分離
-
網頁結構表現統一，可以實現複用
-
樣式十分豐富
-
建議使用獨立於html的css檔案
-
利於SEO，容易被搜尋引擎收錄！
2，選擇器
1，標籤選擇器
<style>
h1{color:red}
</style>
2，類選擇器，給標籤加class屬性 可複用
<style>
.qin{color:red}
</style>
<h1 class="qin">內容一</h1>
3，id選擇器(id必須全域性唯一)
<style>
#qin{color:red}
</style>
<h1 id="qin">內容一</h1>
優先順序：id選擇器>類選擇器>標籤選擇器
2.2、層次選擇器
1、後代選擇器：在某個元素的後面 祖爺爺 爺爺 ，爸爸 兒子 都選擇
/*後代選擇器，*/
body p{background: red;}
2、子選擇器，一代，兒子
/*子選擇器*/
body>p{background: yellow;}
3、相鄰兄弟選擇器 同輩的下一個
/*相鄰兄弟選擇器：只有一個，相鄰的下一個同級元素*/
.active + p{background: aqua;}
4、通用選擇器 下面的所有同級
/*通用選擇器*/
.active~p{background: antiquewhite;}
2.3、結構偽類選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*選擇li的第一個元素*/
li:first-child{
background: red;
}
/*選擇li的第一個元素*/
li:last-child{
background: yellow;
}
/*第一個p元素
只是第一個元素，不能保證是p元素 順序裡選擇
*/
p:nth-child(1){
background: bisque;
}
/*第二個p元素 ，能保證 型別裡選擇*/
p:nth-of-type(2){
background: green;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
2.4、屬性選擇器（常用）
id+class結合
3，美化網頁元素
1，字型樣式
2,文字樣式
-
顏色 color rgb rgba
-
文字對齊方式 tetx-align = center
-
首行縮排 tetx-indent:2em
-
行高 line-height:
-
裝飾 tetx-decoration:
-
文字與圖片水平對齊 vertical-align:middle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--顏色
單詞
RGB 0~F
rgba A:0~1 透明度
text-decoration: underline; 下劃線
text-decoration: line-through; 中劃線
text-decoration: overline; 上劃線
-->
<style>
h1{
color:rgba(0,255,255,0.9);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p2{
background: #45ab45;
height: 300px;
line-height: 300px;
}
img,p3{
vertical-align: middle;
}
</style>
</head>
<body>
<h1>故事介紹</h1>
<p class="p1">這個世界名為元泱境界，脈（本質為振動）是構成萬物的基礎。每隔333年，會有一個神祕而強大的異常生物重生，它就是魁拔！魁拔的每一次出現，都會給元泱境界帶來巨大的災難！即便是天界的神族，也在劫難逃。在天地兩界各種力量的全力打擊下，魁拔一次次被消滅，但又總是按333年的週期重新出現。魁拔紀元1664年，天神經過精確測算後，在魁拔甦醒前一刻對其進行毀滅性打擊。但誰都沒有想到，由於一個差錯導致新一代魁拔成功地逃脫了致命一擊。很快，天界魁拔司和地界神聖聯盟均探測到了魁拔依然生還的跡象。因此，找到魁拔，徹底消滅魁拔，再一次成了各地熱血勇士的終極目標。
</p>
<p class="p3">
<img src="../../resources/image/1.jpg" alt="照片" width="100px" height="100px">
<span>sfawgrehrthtrrstsr</span>
</p>
<p class="p2">
在偏遠的獸國窩窩鄉，蠻大人和蠻吉每天為取得象徵成功和光榮的妖俠紋耀而刻苦修煉，卻把他們生活的村莊攪得雞犬不寧。村民們絞盡腦汁把他們趕走。一天，消滅魁拔的徵兵令突然傳到窩窩鄉，村長趁機慫恿蠻大人和蠻吉從軍參戰。然而，在這個一切都憑紋耀說話的世界，僅憑蠻大人現有的一塊冒牌紋耀，不要說參軍，就連住店的資格都沒有。受盡歧視的蠻吉和蠻大人決定，混上那艘即將啟程去消滅魁拔的巨型戰艦，直接挑戰魁拔，用熱血換取至高的榮譽。
</p>
</body>
</html>
3.3,陰影與超連結偽類
/*tetx-shadow:陰影顏色 水平偏移 垂直偏移 陰影半徑*/
#price{
text-shadow: #45ab45 10px 10px 2px;
}
/*滑鼠懸浮的狀態*/
a:hover{
color: bisque;
}
/*滑鼠按住為釋放的狀態*/
a:active{
color: red;
}
3.4,列表樣式
*{
margin: 0px;
padding: 0px;
}
#nav{
width: 300px;
}
.title{
height: 100px;
font-size: 30px;
background: red;
text-indent: 1em;
line-height: 100px;
}
/*list-style
none去掉圓點
circle 空心園
decimal 數字
square 正方形
*/
ul li{
height: 30px;
text-indent: 2em;
list-style: none;
font-size: 20px;
background: grey;
}
a{
margin-right: 10px;
text-decoration: none;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
3.5，漸變
background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
4,盒子模型
4.1、什麼是盒子模型
margin:外邊距 順時針 （上右下左）
padding:內邊距 同margin
border:邊框 （粗細 樣式(s實線d虛線) 顏色 ）
4.2、圓角邊框
<style>
div{
width: 100px;
height: 50px;
background: red;
border-radius: 50px 50px 0px 0px;
}
</style>
4.3、盒子陰影
<style>
div{
width: 100px;
height: 100px;
background: red;
/*border-radius: 50px 50px 0px 0px;*/
box-shadow: yellow 10px 10px 100px;
}
5、浮動
5.1、標準文件流
塊級元素：獨佔一行
h1~h6 p div 列表……
行內元素：不獨佔一行
span a img strong……
行內元素可以被包含在塊級元素中，反之，不可以
但是可以使用display改變
5.2、display
塊元素：獨佔一行
行內元素：自己佔不了一行
<!--display
block 塊元素
inline行內元素
inline-block是塊元素，但是可以內聯，在一行！
none 消失
-->
<style>
div{
width: 100px;
height: 100px;
border: red solid 1px;
display: inline-block;
}
span{
width: 100px;
height: 100px;
border: red solid 1px;
display: inline-block;
}
這個也是一種實現行內元素排列的方式，但是我們很多情況都是用float
5.3、float
左右浮動
div{
margin: 10px;
padding: 5px;
}
.father{
border: 1px black solid ;
}
.layer01{
border:1px red dashed;
display: inline-block;
float: right;
}
.layer02{
border:1px green dashed;
display: inline-block;
float: right;
}
.layer03{
border:1px salmon dashed;
display: inline-block;
float: left;
}
.layer04{
border:1px saddlebrown dashed;
font-size: 13px;
line-height: 30px;
display: inline-block;
float: left;
}
5.4、父級塌陷問題
/*clear:
left 左側不允許有浮動元素
right 右側不允許有浮動元素
both 兩側都不允許有浮動元素
none
*/
1，設定父級高度
.father{
border: 1px black solid ;
height:800px;
}
2，新增一個空的div
<div class="father">
<div class="layer01"><img src="images/1.png" alt="照片"></div>
<div class="layer02"><img src="images/2.png" alt="照片"></div>
<div class="layer03"><img src="images/3.png" alt="照片"></div>
<div class="layer04">隨便輸入一句話：就這樣吧，黃河之水遞上來</div>
<div style="clear: both"></div>
</div>
3，父級設定overflow:hidden
.father{
border: 1px black solid ;
overflow: hidden;
}
4，給父級新增一個偽類
.father:after{
content: '';
display: block;
clear: both;
}
小結
1，設定父元素的高度
簡單，元素假設有了固定的高度，就會被限制
2，浮動元素後面增加空div
簡單， 程式碼中儘量避免空div
3，overflow
簡單，下來的一些場景避免使用
4， 父類新增一個偽類：after(推薦)
下發稍微複雜，但沒有副作用，推薦使用
5.5、對比
-
display
方向不可以控制
-
float
浮動起來的話就會脫離標準 文件流，所以要解決父級邊框塌陷問題。
6、定位
6.1、相對定位
相對定位：position:relative;
相對於原來的位置，進行指定的偏移，相對定位的話，它仍然在標準文件流中，原來的位置會被保留
6.2、絕對定位
絕對定位；position:absolute； 基於XXX定位，上下左右
1、沒有父級元素定位的前提下，相對於瀏覽器定位（隨著視窗變化而變化）
2，假設父級元素存在定位，通常相對於父級元素進行偏移~
3，在父級元素範圍內移動，不會超出
相對於父級或瀏覽器的位置，進行指定的偏移，絕對定位的話，它不在標準文件流中，原來的位置不會被保留
6.3、固定定位
position:fixed;
固定在螢幕的指定地方，即使改變瀏覽器的大小，仍然在那個方位
例如
position:fixed;
right:0px;
bottom:0px;
/*就會始終在視窗的右下角*/
6.4、Z-index定位
圖層的形式， 0~最高階（例如999），0在最下層
z-index: 0;