來自拉鉤教育-JAVA就業(yè)集訓(xùn)營

CSS 詳解

課程目標
1荠呐、CSS介紹
2、CSS與HTML結(jié)合方式
3泥张、CSS的使用
4呵恢、CSS3新特性

1.css介紹

1.1 什么是CSS？

image-20210307132920344.png

CSS是指層疊樣式表 cascading style sheets
通過CSS可以讓我們定義HTML元素如何顯示媚创。
CSS可以讓我們原本HTML不能描述的效果渗钉，通過CSS描述出來。
通過CSS描述我們的html頁面钞钙，可以讓我們的頁面更加漂亮鳄橘，可以提高工作效率。

2.CSS與HTML結(jié)合方式

2.1 第一種方式內(nèi)聯(lián)/行內(nèi)樣式

就是在我們的HTML標簽上通過style屬性來引用CSS代碼芒炼。
優(yōu)點:簡單方便瘫怜；
缺點:只能對一個標簽進行修飾。

image-20210307133006210.png

2.2 第二種方式內(nèi)部樣式表

我們通過<style>標簽來聲明我們的CSS. 通常<style>標簽我們推薦寫在head和body之間本刽，也就是“脖子”的位置
優(yōu)點:可以通過多個標簽進行統(tǒng)一的樣式設(shè)置
缺點: 它只能在本頁面上進行修飾
語法：選擇器 {屬性:值;屬性:值}

image-20210307133037797.png

2.3 第三種方式外部樣式表

我們需要單獨定義一個CSS文件,注意CSS文件的后綴名就是.css
在項目根目錄下鲸湃，創(chuàng)建css目錄赠涮，在css目錄中創(chuàng)建css文件 css01.css
在<head>中使用<link>標簽引用外部的css文件

image-20210307133103602.png

還可以使用另一種引入css文件的方式：

<style>
@import 'css/css01.css'
</style>

關(guān)于外部導(dǎo)入css使用<link>與@import的區(qū)別?

加載順序不同
- @import方式導(dǎo)入會先加載html，然后才導(dǎo)入css樣式唤锉，那么如果網(wǎng)絡(luò)條件不好世囊，就會先看到?jīng)]有修飾的頁面，然后才看到修飾后的頁面窿祥。
- 如果使用link方式株憾，它會先加載樣式表，也就是說晒衩，我們看到的直接就是修飾的頁面嗤瞎；
@import方式導(dǎo)入css樣式听系，它是不支持javascript的動態(tài)修改的。而link支持掉瞳。

三種樣式表的優(yōu)先級：滿足就近原則
- 內(nèi)聯(lián) > 內(nèi)部 > 外部

3.CSS的使用

3.1 css中選擇器

3.1.1 元素(標簽)選擇器

它可以對頁面上相同的標簽進行統(tǒng)一的設(shè)置陕习，它描述的就是標簽的名稱.

image-20210307133156584.png

3.1.2 類選擇器

類選擇器在使用時使用"."來描述该镣，它描述的是元素上的class屬性值

image-20210307133215238.png

3.1.3 id選擇器

它只能選擇一個元素损合，使用 "#" 引入嫁审，引用的是元素的id屬性值律适。
id選擇器嬉探，比類選擇器更具有唯一性

image-20210307133235475.png

3.1.4 選擇器組

逗號表示涩堤，誰和誰胎围。
例如白魂，我有手機，你有手機蕴坪，他也有手機背传，一條一條寫太麻煩径玖，就可以合并編寫

我,你,他{
    手機
}

image-20210307133313774.png

3.1.5 派生選擇器

子代：父子關(guān)系（隔代不管）
后代：父子孫梳星，曾孫冤灾，從孫...

image-20210307133333838.png

3.1.6 CSS偽類

CSS偽類可對css的選擇器添加一些特殊效果
偽類屬性列表：
- :active 向被激活的元素添加樣式瞳购。
- :hover 當(dāng)鼠標懸浮在元素上方時亏推，向元素添加樣式吞杭。
- :link 向未被訪問的鏈接添加樣式芽狗。
- :visited 向已被訪問的鏈接添加樣式。
- :first-child 向元素的第一個子元素添加樣式滴劲。
超鏈接的偽類：要遵守使用順序班挖，愛恨原則 LoVeHAte萧芙，lvha

a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */

image-20210307133421603.png

3.2 CSS基本屬性

3.2.1 文本屬性

指定字體：font-family : value;
字體大小：font-size : value;
- px：像素
- em：倍數(shù)
字體加粗：font-weight : normal/bold;
文本顏色：color : value;
文本排列：text-align : left/right/center;
文字修飾：text-decoration : none/underline;
行高：line-height : value;
首行文本縮進：text-indent : value （2em）;

image-20210307133447983.png

3.2.2 背景屬性

CSS 允許應(yīng)用純色作為背景动羽，也允許使用背景圖像創(chuàng)建相當(dāng)復(fù)雜的效果运吓。
- background-color 設(shè)置元素的背景顏色羽德。
- background-image 把圖像設(shè)置為背景宅静。

background-image: url('img/1.jpg');

background-repeat 設(shè)置背景圖像的墻紙效果姨夹，是否及如何重復(fù)
- repeat：在垂直方向和水平方向重復(fù)磷账，為重復(fù)值
- repeat-x：僅在水平方向重復(fù)
- repeat-y：僅在垂直方向重復(fù)
- no-repeat：僅顯示一次
background-position 設(shè)置背景圖像的起始位置
1：控制水平方向 x軸：正值贾虽，向右移動雁仲；負值诬垂，向左移動
2：控制垂直方向 y軸：正值壮吩，向下移動蟆技；負值质礼，向上移動

/* 圖片向左移動50px，向下移動100px （可以為負值） */
background-position:50px 100px

background-attachment 背景圖像是否固定或者隨著頁面的其余部分滾動
- 默認值是 scroll：默認情況下砰粹，背景會隨文檔滾動
- 可取值為 fixed：背景圖像固定伸眶，并不會隨著頁面的其余部分滾動厘贼，常用于實現(xiàn)稱為水印的圖像

background-attachment: fixed;

3.2.3 列表屬性

CSS列表屬性作用如下：
- 設(shè)置不同的列表項標記為有序列表
- 設(shè)置不同的列表項標記為無序列表
- 設(shè)置列表項標記為圖像
有兩種類型的列表：
- 無序列表 - 列表項標記用特殊圖形（如小黑點嘴秸、小方框等）
- 有序列表 - 列表項的標記有數(shù)字或字母
使用CSS庇谆，可以列出進一步的樣式饭耳，并可用圖像作列表項標記。
- none：無標記纲酗。（去除標記）
- disc：默認觅赊。標記是實心圓琼稻。
- circle：標記是空心圓帕翻。
- square：標記是實心方塊。
- decimal：標記是數(shù)字莫鸭。
- decimal-leading-zero：0開頭的數(shù)字標記被因。(01, 02, 03, 等衫仑。)
- lower-roman：小寫羅馬數(shù)字(i, ii, iii, iv, v, 等。)
- upper-roman：大寫羅馬數(shù)字(I, II, III, IV, V, 等粥鞋。)
- lower-alpha：小寫英文字母The marker is lower-alpha (a, b, c, d, e,等瞄崇。)
- upper-alpha：大寫英文字母The marker is upper-alpha (A, B, C, D, E,等。)

image-20210307133749624.png

image-20210307133757352.png

3.2.4 邊框?qū)傩?/h3>

CSS邊框?qū)傩栽试S你指定一個元素邊框的樣式和顏色腮郊。

image-20210307133822359.png

)

<style>
    div{
        border-width: 20px;
        border-color: green;
        border-style: outset;
    }
</style>
<body>
<div>hello</div>
</body>

border-style取值：

image-20210307133851404.png

3.2.5 輪廓屬性

輪廓（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍轧飞，可起到突出元素的作用过咬。
輪廓和邊框的區(qū)別：
- 邊框 (border) 可以是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線制妄；
- 輪廓（outline）是繪制于元素周圍的一條線耕捞，位于邊框邊緣的外圍砸脊，可起到突出元素的作用。
CSS outline 屬性規(guī)定元素輪廓的樣式驱显、顏色和寬度埃疫。

image-20210307133920859.png

3.2.6 盒子模型

所有HTML元素可以看作盒子栓霜，在CSS中胳蛮，"box model"這一術(shù)語是用來設(shè)計和布局時使用仅炊。
CSS盒子模型本質(zhì)上是一個盒子抚垄，封裝周圍的HTML元素呆馁，它包括：邊距，邊框次询，填充，和實際內(nèi)容摹菠。
盒子模型允許我們在其它元素和周圍元素邊框之間的空間放置元素次氨。
下面的圖片說明了盒子模型(Box Model)：

image-20210307133956930.png

margin(外邊距) - 盒子與盒子之間的距離
border(邊框) - 盒子的保護殼
padding(內(nèi)邊距/填充) - 內(nèi)填充煮寡，盒子邊與內(nèi)容之間的距離
content(內(nèi)容) - 盒子的內(nèi)容犀呼，顯示的文本或圖像

image-20210307134014720.png

3.3 CSS定位

3.3.1 默認定位

塊級元素：h1~h6坐儿，p, div 等貌矿，自上而下罪佳，垂直排列（自動換行）赘艳；可以改變寬高

image-20210307134050570.png

行內(nèi)元素：a,b,span,等蕾管，從左向右娇掏，水平排列（不會換行）；不能改變寬高

image-20210307134118166.png

行內(nèi)塊元素：input,img等客蹋，從左向右讶坯，水平排列（自動換行）辆琅；可以改變寬高

image-20210307134136114.png

3.3.2 浮動定位

讓元素“飛”起來婉烟。不僅可以靠著左邊或右邊似袁。還可以消除“塊級”的霸道特性（獨自占一行）昙衅。
float取值：
- none ：不浮動
- left：貼著左邊浮動
- right：貼著右邊浮動

image-20210307134206440.png

3.3.3 相對定位

和原來的位置進行比較而涉，進行移動定位（偏移）

image-20210307134239605.png

3.3.4 絕對定位

本元素與已定位的祖先元素的距離
- 如果父級元素定位了婴谱，就以父級為參照物谭羔；
- 如果父級沒定位瘟裸，找爺爺級话告，爺爺定位了沙郭，以爺爺為參照物病线。
- 如果爺爺沒定位送挑，繼續(xù)向上找，都沒定位的話纺裁，body是最終選擇欺缘。

<div class="yeye">
    <div class="father">
        <div class="a">1</div>
        <div class="b">2</div>
        <div class="c">3</div>
    </div>
</div>

以父節(jié)點作為參照物

image-20210307134324380.png

以爺爺節(jié)點作為參照物

image-20210307134347829.png

3.3.5 固定定位

將元素的內(nèi)容固定在頁面的某個位置谚殊，當(dāng)用戶向下滾動頁面時元素框并不隨著移動

image-20210307134415090.png

3.3.6 z-index

如果有重疊元素，使用z軸屬性昂羡，定義上下層次虐先。

image-20210307134432094.png

**注意： **

z軸屬性蛹批，要配合相對或絕對定位來使用篮愉。
z值沒有額定數(shù)值（整型就可以试躏，具體用數(shù)字幾，悉聽尊便）

4. CSS3

4.1 圓角

border-radius：左上右上右下左下;
border-radius：四個角;
border-radius：50%; 圓形

image-20210307134509539.png

4.2 盒子陰影

box-shadow：1 2 3 4 5;
1：水平偏移
2：垂直偏移
3：模糊半徑
4：擴張半徑
5：顏色

image-20210307134528488.png

4.3 漸變

4.3.1 線性漸變

background:linear-gradient([方向/角度]，顏色列表)椅您；

<style>
    div {
        width: 200px;
        height: 60px;
        margin: 10px;
    }
    .a1 {
        background: linear-gradient(red,black);
    }
    .a2 {
        background: linear-gradient(red,black,pink, green);
    }
    .a3 {
        background: linear-gradient(to left,red,black);
    }
    .a4 {
        background: linear-gradient(to top left,red,black);
    }
    .a5 {
        background: linear-gradient(30deg,red,black);
    }
</style>

<body>
    <div class="a1"></div>
    <div class="a2"></div>
    <div class="a3"></div>
    <div class="a4"></div>
    <div class="a5"></div>
</body>

4.3.2 徑向漸變

以圓心向外發(fā)散

background: radial-gradient(顏色列表);

<style>
    div {
        width: 200px;
        height: 200px;
        margin: 10px;
    }
    .a1 {
        background: radial-gradient(red, black);
    }
    .a2 {
        background: radial-gradient(red, black, pink, green);
    }
    .a3 {
        border-radius: 50%;
        background: radial-gradient(red, black);
    }
</style>
<body>
      <div class="a1"></div>
      <div class="a2"></div>
      <div class="a3"></div>
</body>

4.4 背景

4.4.1 背景位置

background-origin：指定了背景圖像的位置區(qū)域
border-box : 背景貼邊框的邊
padding-box : 背景貼內(nèi)邊框的邊
content-box : 背景貼內(nèi)容的邊

<style>
    div {
        background: url("img/1.jpg") no-repeat;
        width: 200px;
        height: 80px;
        margin: 20px;
        border: 10px dashed black;
        padding: 20px;
    }
    .a {
        background-origin: border-box;
    }
    .b {
        background-origin: padding-box;
    }
    .c {
        background-origin: content-box;
    }
</style>
<body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</body>

4.4.2 背景裁切

background-clip:
border-box 邊框開切
padding-box 內(nèi)邊距開切
content-box 內(nèi)容開切

<style>
    div {
        width: 200px;
        height: 80px;
        border: 10px dashed red;
        background-color: darkcyan;
        margin: 20px;
        padding: 20px;
    }
    .a {
        background-clip: border-box;
    }
    .b {
        background-clip: padding-box;
    }
    .c {
        background-clip: content-box;
    }
</style>
<body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</body>

4.4.3 背景大小

background-size:
cover 縮放成完全覆蓋背景區(qū)域最小大小
contain 縮放成完全適應(yīng)背景區(qū)域最大大小

<style>
    div {
        background: url("img/1.jpg") no-repeat;
        width: 200px;
        height: 100px;
        border: 2px solid red;
        margin: 20px;
    }
    .a {
        background-size: cover; /* 完全覆蓋 */
    }
    .b {
        background-size: contain; /* 完全適應(yīng) */
    }
</style>
<body>
    <div class="a"></div>
    <div class="b"></div>
</body>

4.5 過渡動畫

4.5.1 過渡

從一個狀態(tài)到另一個狀態(tài)，中間的“緩慢”過程开伏；
缺點是固灵，控制不了中間某個時間點。
transition｛1 2 3 4｝
1：過渡或動畫模擬的css屬性
2：完成過渡所使用的時間（2s內(nèi)完成）
3：過渡函數(shù)丛忆。熄诡。诗力。

image-20210307135408063.png

4：過渡開始出現(xiàn)的延遲時間

transition: width 2s ease 1s;

目前苇本，css3只開發(fā)出部分的過渡屬性瓣窄，下圖所示：

image-20210307135441362.png

<style>
    div{
        width: 100px;
        height: 50px;
        border: 2px solid red;
    }
    .a{
     transition: width 2s linear 1s; /*1秒過后俺夕，div在2秒內(nèi)勻速緩慢的變寬*/
    }
    div:hover{ width: 300px;} /*觸發(fā)div變寬*/
</style>
<body>
    <div class="a">Hello,拉勾</div>
</body>

4.5.2 動畫

從一個狀態(tài)到另一個狀態(tài)劝贸，過程中每個時間點都可以控制。
- 關(guān)鍵幀：@keyframes 動畫幀 { from{} to{} } 或者{ 0%{} 20%{}... }
- 動畫屬性：animation{ 1 , 2 , 3 , 4 , 5 }
  1：動畫幀
  2：執(zhí)行時間
  3：過渡函數(shù)
  4：動畫執(zhí)行的延遲（可省略）
  5：動畫執(zhí)行的次數(shù)
需求1：一個元素從左向右移動菠秒，3秒內(nèi)執(zhí)行2次

<style>
    div{
        width: 700px;
        border: 1px solid red;
    }
    @keyframes x{
        from{ margin-left: 0px;}
        to{ margin-left: 550px;}
    }
    img{
        animation: x 3s linear 2;
    }
</style>
<body>
    <div>
        <img src="img/cat.gif">
    </div>
</body>

需求2：一個元素從左向右移動践叠，3秒內(nèi)執(zhí)行完成禁灼。無限次交替執(zhí)行
infinite：無限次
alternate：來回執(zhí)行（交替弄捕，一去一回）

<style>
    .wai{
        width: 600px;
        height: 100px;
        border: 2px solid red;
    }
    .nei{
        width: 40px;
        height: 80px;
        margin: 5px;
        background: red;
    }
    .nei{
        animation: x 3s linear infinite alternate;
    }
    @keyframes x{
        0%{ margin-left: 0px; }
        25%{ background: yellowgreen; }
        50%{ background: goldenrod; }
        75%{ background: palevioletred;}
        100%{
            background: coral;
            margin-left: 550px;
        }
    }
</style>
<body>
    <div class="wai">
     <div class="nei"></div>
    </div>
</body>

CSS

來自拉鉤教育-JAVA就業(yè)集訓(xùn)營

CSS 詳解

1.css介紹

1.1 什么是CSS？

2.CSS與HTML結(jié)合方式

2.1 第一種方式 內(nèi)聯(lián)/行內(nèi)樣式

2.2 第二種方式 內(nèi)部樣式表

2.3 第三種方式 外部樣式表

3.CSS的使用

3.1 css中選擇器

3.1.1 元素(標簽)選擇器

3.1.2 類選擇器

3.1.3 id選擇器

3.1.4 選擇器組

3.1.5 派生選擇器

3.1.6 CSS偽類

3.2 CSS基本屬性

3.2.1 文本屬性

3.2.2 背景屬性

3.2.3 列表屬性

3.2.5 輪廓屬性

3.2.6 盒子模型

3.3 CSS定位

3.3.1 默認定位

3.3.2 浮動定位

3.3.3 相對定位

3.3.4 絕對定位

3.3.5 固定定位

3.3.6 z-index

4. CSS3

4.1 圓角

4.2 盒子陰影

4.3 漸變

4.3.1 線性漸變

4.3.2 徑向漸變

4.4 背景

4.4.1 背景位置

4.4.2 背景裁切

4.4.3 背景大小

4.5 過渡動畫

4.5.1 過渡

4.5.2 動畫

來自拉鉤教育-JAVA就業(yè)集訓(xùn)營

2.1 第一種方式內(nèi)聯(lián)/行內(nèi)樣式

2.2 第二種方式內(nèi)部樣式表

2.3 第三種方式外部樣式表