CSS

來自拉鉤教育-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ū)別?
  1. 加載順序不同
    • @import方式導(dǎo)入會先加載html,然后才導(dǎo)入css樣式唤锉,那么如果網(wǎng)絡(luò)條件不好世囊,就會先看到?jīng)]有修飾的頁面,然后才看到修飾后的頁面窿祥。
    • 如果使用link方式株憾,它會先加載樣式表,也就是說晒衩,我們看到的直接就是修飾的頁面嗤瞎;
  2. @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>

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市穿铆,隨后出現(xiàn)的幾起案子荞雏,更是在濱河造成了極大的恐慌平酿,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異幸逆,居然都是意外死亡还绘,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門哪替,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人晌块,你說我怎么就攤上這事『羯欤” “怎么了括享?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵铃辖,是天一觀的道長娇斩。 經(jīng)常有香客問我,道長锦积,這世上最難降的妖魔是什么丰介? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任基矮,我火速辦了婚禮家浇,結(jié)果婚禮上碴裙,老公的妹妹穿的比我還像新娘舔株。我一直安慰自己,他們只是感情好惭等,可當(dāng)我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布辞做。 她就那樣靜靜地躺著秤茅,像睡著了一般框喳。 火紅的嫁衣襯著肌膚如雪五垮。 梳的紋絲不亂的頭發(fā)上杜秸,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天亩歹,我揣著相機與錄音凡橱,去河邊找鬼稼钩。 笑死坝撑,一個胖子當(dāng)著我的面吹牛巡李,可吹牛的內(nèi)容都是我干的侨拦。 我是一名探鬼主播,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼辐宾,長吁一口氣:“原來是場噩夢啊……” “哼狱从!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起叠纹,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎誉察,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體持偏,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年款慨,在試婚紗的時候發(fā)現(xiàn)自己被綠了谬莹。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片附帽。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡喳钟,死狀恐怖蛮寂,靈堂內(nèi)的尸體忽然破棺而出酬蹋,到底是詐尸還是另有隱情,我是刑警寧澤匕垫,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布铃慷,位于F島的核電站洲鸠,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏瘾腰。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望析藕。 院中可真熱鬧竞慢,春花似錦梗顺、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至遮晚,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間萧求,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留朋譬,地道東北人徙赢。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓钦幔,卻偏偏與公主長得像,于是被迫代替她去往敵國和親卷玉。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,876評論 2 361