CSS進階
阿新 • • 發佈：2022-03-28
十小結
一.css目標選擇器
（1）設定需要的div、p、ul、li
HTML：
<div> <p>Lorem ipsum dolor sit amet.</p> <ul> <li>item 1</li> <li> <p>Item 2</p> </li> <li>item 3</li> </ul> <p> Lorem ipsum dolor sit amet. </p> </div> <p>Lorem ipsum dolor sit amet.</p>
設定背景顏色：
div>p { background: #ddd; }
效果圖：
為什麼item 2 並沒有背景顏色？
原因：div>p
指的是所有父級元素為div的p標籤，包裹item的p標籤父級元素為li 所以它並沒有被選擇上 因此也就沒有背景顏色
（2）HTML不變
增加新的CSS
div+p { background: #333; color: #FFF; }
效果圖：
原因：div+p
指的是div和div後面緊跟著的p標籤 表示的是div標籤的下一個兄弟元素 並不是div和p標籤
直接元素的後一個兄弟元素 （3）選擇屬性 在HTML頁面增加三個a標籤 前兩個無需跳轉 最後一個跳轉百度<a href="#">第一頁</a> <a href="#">第二頁</a> <ahref="http://baidu.com" target="_blank">百度</a>
CSS：
/* 屬性選擇 */ a[target] { background: #ff0000; color: #FFF; }
效果圖：
原因：a[target] 是通過選擇a標籤的一個屬性來給設定樣式
那如果 有重複屬性的a標籤呢
<a href="#">第一頁</a> <a href="#" target="_self">第二頁</a> <a href="http://baidu.com" target="_blank">百度</a>
解決方法: 新增屬性值
CSS：
/* 屬性選擇 */ a[target="_blank"] { background: #ff0000; color: #FFF; }
效果圖：依舊只給第三個百度跳轉頁面添加了樣式
input標籤修改
HTML：
<form> <input type="text" placeholder="姓名"> <input type="email" placeholder="郵箱"> <input type="submit" placeholder="提交"> </form>
CSS：
input[type="text"], input[type="email"] { width: 100%; margin-bottom: 5px; }
效果圖：
二、nth.child偽類選擇器
基礎HTML：
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> <li>Item 10</li> <li>Item 11</li> <li>Item 12</li> <li>Item 13</li> <li>Item 14</li> <li>Item 15</li> <li>Item 16</li> <li>Item 17</li> <li>Item 18</li> <li>Item 19</li> <li>Item 20</li> </ul>
CSS：
li { padding: 0.25rem; margin: 0.25rem; list-style: none; }
效果圖：
first-child以及last-child的使用
1.first-child 只選擇父元素的第一個子元素 CSS;li:first-child { background: #ff0000; }
效果圖：
2.last-child 只選擇父元素的最後一個子元素
CSS：
li:last-child { background: #ff0000; }
效果圖：
3.如果要選擇第三個li標籤:
CSS:
/* 選擇第三個li */ li:nth-child(3) { background: #ff0000; }
需要用到：nth-child(需要設定樣式的序號)
指定序號進行樣式設定
如果：
4.nth-child（3n）的效果：
li:nth-child(3n) { background: orange; }
效果圖：
變色的行數都是3的倍數
5.:nth-child(3n+7)
從7開始 三行一變色 CSS：li:nth-child(3n+7) { background: yellow; }
效果圖：
6.奇數選擇
CSS：
li:nth-child(odd) { background: blue; }
效果圖：
7.偶數行變色
CSS
li:nth-child(even) { background: pink; }
效果圖：
三、偽元素：after&before
當我們新增偽元素後並不會文件中生成
基礎HTML：
<label for="name" class="is-required ">姓名</label> <input type="text">
css樣式：
.is-required:after { content: '*'; color: red; padding-left: 2px; }
用到的偽類 ：after （單冒號）
效果圖：
把：after改為：before
效果圖：
before應用場景：圖片覆蓋：
基礎HTML：
<header> <h1>歡迎來到秋褲線上</h1> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim, culpa?</p> </header> <section> <h3>Lorem, ipsum dolor.</h3> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus vel dignissimos sunt sapiente atque. Tempore quam harum sequi, nostrum maiores itaque quidem vero officiis ab, voluptates temporibus qui obcaecati. Atque. </p> </section>
基本CSS樣式：
body { font-family: Arial, Helvetica, sans-serif; background-color: #333; color: #fff; margin: 0; } header { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100vh; } header>h1 { font-size: 4rem; margin: 1rem; }
效果圖：
：before最主要的
content: ; CSS：header { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100vh; } header:before { content: ''; background: url('./img/111.jpg') no-repeat no-repeat center center/cover; opacity: 0.4; position: absolute; width: 100%; height: 100%; z-index: -1; }
效果圖：
四、盒子陰影
基本HTML：
<div class="container"> <div class="box"> <h3>Heading</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, harum.</p> </div> <div class="box"> <h3>Heading</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, harum.</p> </div> <div class="box"> <h3>Heading</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, harum.</p> </div> </div>
CSS：
外陰影：
水平方向 垂直方向 模糊半徑 擴散半徑 顏色 offset-x |offset-y | blur-radius spread-radius |color box-shadow: 3px 3px 10px 1px rgb(0, 0, 0, 0.6); 效果圖：
內陰影： 正負數值相反
水平方向 垂直方向 顏色 內陰影 offset-x/offset-y/ color/inset box-shadow: 10px 10px teal inset： 效果圖：
雙重陰影：
box-shadow: 3px 3px 10px blue, -3px -3px 10px greenyellow;
五、文字陰影：
基本HTML：
<h1 class="a">歡迎來到秋褲線上</h1> <h1 class="b">歡迎來到秋褲線上</h1> <h1 class="c">歡迎來到秋褲線上</h1> <h1 class="d">歡迎來到秋褲線上</h1>1.水平方向 垂直方向 顏色 h-shadow |v-shadow | color;
text-shadow: 0.2rem 0.2rem steelblue;
效果圖：
2.水平方向 垂直方向 模糊半徑 顏色 h-shadow|v-shadow | blur| color; text-shadow: 0.4rem 0.4rem 0.7rem olivedrab;
效果圖：
3.白色字型：
CSS：
h1.c { /* white text */ color: #fff; text-shadow: 0.2rem 0.2rem 1rem tomato; }
效果圖：
4.負值
text-shadow: -0.4rem -0.3rem 0.7rem olivedrab;
效果圖：
六、CSS變數自定義屬性
HTML:
<header> <h1>歡迎來到秋褲線上</h1> </header> <div class="container"> <div class="box box-1"> <h3>標題</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore nesciunt quo libero possimus aperiam repellat.</p> </div> <div class="box box-2"> <h3>標題</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore nesciunt quo libero possimus aperiam repellat.</p> </div> </div>
CSS:
:root { /* 定義方法例項 */ --primary-color: #333; --light-color: #ccc; --secondary-color: #f4f4f4; --max-width: 768px; --box-1-width: 3; --box-2-width: 2; } * { padding: 0; margin: 0; } header { background-color: var(--primary-color); color: #fff; border-bottom: 5px var(--secondary-color) solid; text-align: center; } body { font-family: Arial, Helvetica, sans-serif; line-height: 1.4; background: var(--light-color); } .container { display: flex; margin: 0 auto; width: var(--max-width); } .box { background-color: var(--primary-color); border-bottom: 5px var(--secondary-color) solid; color: #fff; padding: 1rem; margin: 1rem; } .box-1 { flex: var(--box-1-width); } .box-2 { flex: var(--box-2-width); }
效果圖：
最重要的是： ：root
七：css動畫01
HTML：
<div class="box"></div>
CSS：
body { background: #333; } .box { background: white; height: 200px; width: 200px; position: relative; /* animation-name: animate1; */ /* 動畫時間 */ /* animation-duration: 2s; */ /* 動畫次數 */ /* 迴圈 */ /* animation-iteration-count: infinite; */ /* animation-iteration-count: 1; */ /* 在播放完或播放後的動畫效果是否可見 */ /* 在播放完停留 展示最終效果 */ /* animation-fill-mode: forwards; */ /* 動畫的延遲時間 */ /* animation-delay: 1s; */ /* 奇數次正向播放 偶數次反向播放 */ /* animation-direction: alternate; */ /* 動畫反向播放 */ /* animation-direction: reverse; */ /* 結合 */ /* 奇數次反向播放 偶數次正向播放 */ /* animation-direction: alternate-reverse; */ /* 速度曲線 */ /* 先慢後快 */ /* animation-timing-function: ease; */ /* 緩慢開始 */ /* animation-timing-function: ease-in; */ /* 緩慢結束 */ /* animation-timing-function: ease-out; */ /* 結合 緩慢開始緩慢結束 */ /* animation-timing-function: ease-in-out; */ animation: animate1 2s infinite forwards alternate-reverse ease-in-out; } @keyframes animate1 { form { width: 200px; top: 0; } to { width: 600px; background: red; top: 300px; } }
八:CSS動畫02
HTML：
<div class="box"></div>
CSS：
body { background: #333; } .box { background: #fff; width: 200px; height: 200px; position: relative; top: 0; left: 0; animation: animate1 5s forwards ease-in-out; } @keyframes animate1 { 25% { top: 0; left: 300px; background: red; border-radius: 50% 0 0 0; } 50% { top: 300px; left: 300px; background: blue; border-radius: 50% 50% 0 0; } 75% { top: 300px; left: 0; background: green; border-radius: 50% 50% 50% 0; } 100% { top: 0; left: 0; background: white; border-radius: 50%; } }
九：過渡
HTML：
<div class="box"></div>
CSS：
body { background: #333; display: flex; justify-content: center; align-items: center; height: 100vh; } .box { background: white; width: 100px; height: 100px; /* transition-property: background; */ /* 過渡週期 */ /* transition-duration: 1.5s; */ /* 過渡延遲 */ /* transition-delay: 1s; */ /* 時間曲線 */ /* transition-timing-function: ease-in-out; */ /* all代替所有屬性 */ transition: all 2s ease-in-out; } .box:hover { background: red; border-radius: 50%; height: 300px; width: 300px; }
十：旋轉平移
HTML：
<div class="box"></div>
body { background: #333; display: flex; justify-content: center; align-items: center; height: 100vh; } .box { background: white; width: 300px; height: 300px; /* 旋轉 25° */ /* transform: rotate(25deg); */ /* 扭曲 */ /* transform: skew(25deg); */ /* 放大兩倍 */ /* transform: scale(2); */ transition: all 1s ease-in-out; } .box:hover { transform: rotate(25deg); transform: skew(25deg); transform: scale(2); /* 平移 */ /* 正數向下 負數向上 */ transform: translateY(100px); /* 正數向右 負數向左 */ transform: translateX(100px); /* 斜著平移 */ /* 正數右下 負數左上 */ transform: translate(100px, 100px); /* 3D */ transform: translate3d(100px, 100px, 100px) }