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

CSS 詳解

課程目標(biāo)
1、CSS介紹
2、CSS與HTML結(jié)合方式
3、CSS的使用
4、CSS3新特性

1.css介紹

1.1 什么是CSS？

image-20210307132920344.png

CSS是指層疊樣式表 cascading style sheets
通過(guò)CSS可以讓我們定義HTML元素如何顯示。
CSS可以讓我們?cè)綡TML不能描述的效果，通過(guò)CSS描述出來(lái)。
通過(guò)CSS描述我們的html頁(yè)面，可以讓我們的頁(yè)面更加漂亮，可以提高工作效率。

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

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

就是在我們的HTML標(biāo)簽上通過(guò)style屬性來(lái)引用CSS代碼。
優(yōu)點(diǎn):簡(jiǎn)單方便；
缺點(diǎn):只能對(duì)一個(gè)標(biāo)簽進(jìn)行修飾。

image-20210307133006210.png

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

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

image-20210307133037797.png

2.3 第三種方式外部樣式表

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

image-20210307133103602.png

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

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

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

加載順序不同
- @import方式導(dǎo)入會(huì)先加載html，然后才導(dǎo)入css樣式，那么如果網(wǎng)絡(luò)條件不好，就會(huì)先看到?jīng)]有修飾的頁(yè)面，然后才看到修飾后的頁(yè)面。
- 如果使用link方式，它會(huì)先加載樣式表，也就是說(shuō)，我們看到的直接就是修飾的頁(yè)面；
@import方式導(dǎo)入css樣式，它是不支持javascript的動(dòng)態(tài)修改的。而link支持。

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

3.CSS的使用

3.1 css中選擇器

3.1.1 元素(標(biāo)簽)選擇器

它可以對(duì)頁(yè)面上相同的標(biāo)簽進(jìn)行統(tǒng)一的設(shè)置，它描述的就是標(biāo)簽的名稱.

image-20210307133156584.png

3.1.2 類選擇器

類選擇器在使用時(shí)使用"."來(lái)描述，它描述的是元素上的class屬性值

image-20210307133215238.png

3.1.3 id選擇器

它只能選擇一個(gè)元素，使用 "#" 引入，引用的是元素的id屬性值。
id選擇器，比類選擇器更具有唯一性

image-20210307133235475.png

3.1.4 選擇器組

逗號(hào)表示，誰(shuí)和誰(shuí)。
例如，我有手機(jī)，你有手機(jī)，他也有手機(jī)，一條一條寫(xiě)太麻煩，就可以合并編寫(xiě)

我,你,他{
    手機(jī)
}

image-20210307133313774.png

3.1.5 派生選擇器

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

image-20210307133333838.png

3.1.6 CSS偽類

CSS偽類可對(duì)css的選擇器添加一些特殊效果
偽類屬性列表：
- :active 向被激活的元素添加樣式。
- :hover 當(dāng)鼠標(biāo)懸浮在元素上方時(shí)，向元素添加樣式。
- :link 向未被訪問(wèn)的鏈接添加樣式。
- :visited 向已被訪問(wèn)的鏈接添加樣式。
- :first-child 向元素的第一個(gè)子元素添加樣式。
超鏈接的偽類：要遵守使用順序，愛(ài)恨原則 LoVeHAte，lvha

a:link {color: #FF0000} /* 未訪問(wèn)的鏈接 */
a:visited {color: #00FF00} /* 已訪問(wèn)的鏈接 */
a:hover {color: #FF00FF} /* 鼠標(biāo)移動(dòng)到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */

image-20210307133421603.png

3.2 CSS基本屬性

3.2.1 文本屬性

指定字體：font-family : value;
字體大?。篺ont-size : value;
- px：像素
- em：倍數(shù)
字體加粗：font-weight : normal/bold;
文本顏色：color : value;
文本排列：text-align : left/right/center;
文字修飾：text-decoration : none/underline;
行高：line-height : value;
首行文本縮進(jìn)：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軸：正值，向右移動(dòng)；負(fù)值，向左移動(dòng)
2：控制垂直方向 y軸：正值，向下移動(dòng)；負(fù)值，向上移動(dòng)

/* 圖片向左移動(dòng)50px，向下移動(dòng)100px （可以為負(fù)值） */
background-position:50px 100px

background-attachment 背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)
- 默認(rèn)值是 scroll：默認(rèn)情況下，背景會(huì)隨文檔滾動(dòng)
- 可取值為 fixed：背景圖像固定，并不會(huì)隨著頁(yè)面的其余部分滾動(dòng)，常用于實(shí)現(xiàn)稱為水印的圖像

background-attachment: fixed;

3.2.3 列表屬性

CSS列表屬性作用如下：
- 設(shè)置不同的列表項(xiàng)標(biāo)記為有序列表
- 設(shè)置不同的列表項(xiàng)標(biāo)記為無(wú)序列表
- 設(shè)置列表項(xiàng)標(biāo)記為圖像
有兩種類型的列表：
- 無(wú)序列表 - 列表項(xiàng)標(biāo)記用特殊圖形（如小黑點(diǎn)、小方框等）
- 有序列表 - 列表項(xiàng)的標(biāo)記有數(shù)字或字母
使用CSS，可以列出進(jìn)一步的樣式，并可用圖像作列表項(xiàng)標(biāo)記。
- none：無(wú)標(biāo)記。（去除標(biāo)記）
- disc：默認(rèn)。標(biāo)記是實(shí)心圓。
- circle：標(biāo)記是空心圓。
- square：標(biāo)記是實(shí)心方塊。
- decimal：標(biāo)記是數(shù)字。
- decimal-leading-zero：0開(kāi)頭的數(shù)字標(biāo)記。(01, 02, 03, 等。)
- lower-roman：小寫(xiě)羅馬數(shù)字(i, ii, iii, iv, v, 等。)
- upper-roman：大寫(xiě)羅馬數(shù)字(I, II, III, IV, V, 等。)
- lower-alpha：小寫(xiě)英文字母The marker is lower-alpha (a, b, c, d, e,等。)
- upper-alpha：大寫(xiě)英文字母The marker is upper-alpha (A, B, C, D, E,等。)

image-20210307133749624.png

image-20210307133757352.png

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

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

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ù)語(yǔ)是用來(lái)設(shè)計(jì)和布局時(shí)使用。
CSS盒子模型本質(zhì)上是一個(gè)盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實(shí)際內(nèi)容。
盒子模型允許我們?cè)谄渌睾椭車剡吙蛑g的空間放置元素。
下面的圖片說(shuō)明了盒子模型(Box Model)：

image-20210307133956930.png

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

image-20210307134014720.png

3.3 CSS定位

3.3.1 默認(rèn)定位

塊級(jí)元素：h1~h6，p, div 等，自上而下，垂直排列（自動(dòng)換行）；可以改變寬高

image-20210307134050570.png

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

image-20210307134118166.png

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

image-20210307134136114.png

3.3.2 浮動(dòng)定位

讓元素“飛”起來(lái)。不僅可以靠著左邊或右邊。還可以消除“塊級(jí)”的霸道特性（獨(dú)自占一行）。
float取值：
- none ：不浮動(dòng)
- left：貼著左邊浮動(dòng)
- right：貼著右邊浮動(dòng)

image-20210307134206440.png

3.3.3 相對(duì)定位

和原來(lái)的位置進(jìn)行比較，進(jìn)行移動(dòng)定位（偏移）

image-20210307134239605.png

3.3.4 絕對(duì)定位

本元素與已定位的祖先元素的距離
- 如果父級(jí)元素定位了，就以父級(jí)為參照物；
- 如果父級(jí)沒(méi)定位，找爺爺級(jí)，爺爺定位了，以爺爺為參照物。
- 如果爺爺沒(méi)定位，繼續(xù)向上找，都沒(méi)定位的話，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é)點(diǎn)作為參照物

image-20210307134324380.png

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

image-20210307134347829.png

3.3.5 固定定位

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

image-20210307134415090.png

3.3.6 z-index

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

image-20210307134432094.png

**注意： **

z軸屬性，要配合相對(duì)或絕對(duì)定位來(lái)使用。
z值沒(méi)有額定數(shù)值（整型就可以，具體用數(shù)字幾，悉聽(tīng)尊便）

4. CSS3

4.1 圓角

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

image-20210307134509539.png

4.2 盒子陰影

box-shadow：1 2 3 4 5;
1：水平偏移
2：垂直偏移
3：模糊半徑
4：擴(kuò)張半徑
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 邊框開(kāi)切
padding-box 內(nèi)邊距開(kāi)切
content-box 內(nèi)容開(kā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 過(guò)渡動(dòng)畫(huà)

4.5.1 過(guò)渡

從一個(gè)狀態(tài)到另一個(gè)狀態(tài)，中間的“緩慢”過(guò)程；
缺點(diǎn)是，控制不了中間某個(gè)時(shí)間點(diǎn)。
transition｛1 2 3 4｝
1：過(guò)渡或動(dòng)畫(huà)模擬的css屬性
2：完成過(guò)渡所使用的時(shí)間（2s內(nèi)完成）
3：過(guò)渡函數(shù)。。。

image-20210307135408063.png

4：過(guò)渡開(kāi)始出現(xiàn)的延遲時(shí)間

transition: width 2s ease 1s;

目前，css3只開(kāi)發(fā)出部分的過(guò)渡屬性，下圖所示：

image-20210307135441362.png

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

4.5.2 動(dòng)畫(huà)

從一個(gè)狀態(tài)到另一個(gè)狀態(tài)，過(guò)程中每個(gè)時(shí)間點(diǎn)都可以控制。
- 關(guān)鍵幀：@keyframes 動(dòng)畫(huà)幀 { from{} to{} } 或者{ 0%{} 20%{}... }
- 動(dòng)畫(huà)屬性：animation{ 1 , 2 , 3 , 4 , 5 }
  1：動(dòng)畫(huà)幀
  2：執(zhí)行時(shí)間
  3：過(guò)渡函數(shù)
  4：動(dòng)畫(huà)執(zhí)行的延遲（可省略）
  5：動(dòng)畫(huà)執(zhí)行的次數(shù)
需求1：一個(gè) 元素從左向右移動(dòng)，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：一個(gè) 元素從左向右移動(dòng)，3秒內(nèi)執(zhí)行完成。無(wú)限次交替執(zhí)行
infinite：無(wú)限次
alternate：來(lái)回執(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>

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

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

CSS

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

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 元素(標(biāo)簽)選擇器

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 默認(rèn)定位

3.3.2 浮動(dòng)定位

3.3.3 相對(duì)定位

3.3.4 絕對(duì)定位

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 過(guò)渡動(dòng)畫(huà)

4.5.1 過(guò)渡

4.5.2 動(dòng)畫(huà)

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

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

1.1 什么是CSS？

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

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

2.3 第三種方式外部樣式表