.文本類屬性

① 字體類型

語法：font-family:字體1,字體2,字體3...;

body{font-family: "宋體,楷書"; }

設(shè)置多個(gè)字體時(shí)，瀏覽器會(huì)優(yōu)先識(shí)別字體1，找不到則識(shí)別字體2，都無法識(shí)別時(shí)，顯示瀏覽器默認(rèn)字體。

② 字體大小

語法：font-size:數(shù)值+單位;

p{font-size: 12px}

字體大小單位有px、em、rem、pt；瀏覽器默認(rèn)大小為16px；字體大小一般設(shè)置為偶數(shù)值；谷歌瀏覽器識(shí)別最小字體為12px。

③ 字體加粗

p{font-weight: normal}

屬性值：normal常規(guī)、bold加粗、bolder更粗、100-900數(shù)值

數(shù)值100-900字體加粗程度不同，其中100-500為常規(guī)字體，600-900為加粗字體。

④字體顏色

p{color:  顏色值;}

顏色值寫法有三種：直接寫顏色單詞，如red；十六進(jìn)制寫法，如color:#000；rgb寫法 ，color:rgb(0,0,0);

⑤字體傾斜

font-style: normal;
font-style: italic;   傾斜

⑥復(fù)合寫法

font:字體大小/行高 字體類型;

font: 12px/24px "宋體"

⑦行高

語法: line-height:數(shù)值+單位;

數(shù)值不能為負(fù)值

⑧水平對(duì)齊方式

語法：text-align:left; 左對(duì)齊

text-align:center 居中

text-align:right 右對(duì)齊

text-align:justify 兩端對(duì)齊，只對(duì)英文起作用

⑨文本修飾

text-decoration:none; 去掉文本修飾，可去掉超鏈接(對(duì)a標(biāo)簽使用)的下劃線

text-decoration:underline; 下劃線

text-decoration:overline; 上劃線

text-decoration:line-through; 刪除線

文本縮進(jìn)

text-indent:數(shù)值+單位;

數(shù)值為正向后縮進(jìn)，負(fù)值向前縮進(jìn)

強(qiáng)制在一行顯示

white-space:nowrap;

長單詞換行

word-warp:break-word;

2.背景類屬性

• 背景顏色

語法：background-color:顏色值;

屬性值同字體顏色屬性值相同用法

• 背景圖片

語法：background-image:url(圖片路徑);

• 背景圖位置

語法：background-position:left；

水平方向：left、center、right

垂直方向：top、center、bottom

屬性值為數(shù)值時(shí)，水平方向向右為正，向左為負(fù)，垂直方向向下為正，向上為負(fù)。水平和垂直方向都居中時(shí)可寫background-position:center;

• 背景圖固定

background-attachment:scroll;

屬性值：scroll 默認(rèn)值；fixed 固定

當(dāng)容器出現(xiàn)滾動(dòng)條時(shí)，背景圖固定不滾動(dòng)，可設(shè)置為fixed。

• 背景平鋪

語法：background-repeat:repeat;

屬性值：repeat平鋪；no-repeat；repeat-x橫向平鋪；repeat-y縱向平鋪。

• 背景綜合寫法

background:背景圖 背景平鋪 背景位置

background:url(13211.jpg) no-repeat right bottom;

3.列表屬性

語法：list-style-type:disc;

屬性值：disc實(shí)心圓；circle空心圓；square實(shí)心方塊；decimal數(shù)字；none去除列表符號(hào)。

4.偽類選擇器

語法： 選擇符:hover{屬性:屬性值;}

 p:hover{color:red;}

超鏈接a標(biāo)簽的四個(gè)狀態(tài)：

a) a:link 超鏈接的初始狀態(tài)，鏈接沒有被訪問過時(shí)的狀態(tài)

b) a:visited 鏈接訪問過后的狀態(tài)

c) a:hover 鼠標(biāo)懸停在超鏈接上的狀態(tài)（鼠標(biāo)滑過）

d) a:active 超鏈接被激活時(shí)的狀態(tài)（鼠標(biāo)按下）

素的顯示與隱藏

display -- block;(轉(zhuǎn)換為塊元素&& 顯示) none(隱藏 && 不保留原來的位置) -- 重要！

visibility -- visible(顯示) hidden (隱藏 && 保留原來的位置 )

復(fù)習(xí)：
overflow:hidden; 1.之前解決父子關(guān)系垂直嵌套的合并塌陷問題。2.清除浮動(dòng)

overflow -- hidden 內(nèi)容超出的部分隱藏(重點(diǎn)的) scroll(強(qiáng)制出現(xiàn)滾動(dòng)條樣式) auto(根據(jù)內(nèi)容多少來判斷是否出現(xiàn)滾動(dòng)條 )

精靈技術(shù)

目的：為了有效地減少服務(wù)器接受和發(fā)送請(qǐng)求的次數(shù)，提高頁面的加載速度

實(shí)現(xiàn)原理： 只請(qǐng)求一張圖 --只是展示不同位置的小圖。

案例使用：

background-image 背景圖片

background-repeat 是否平鋪

background-position 背景定位

小小注意點(diǎn)：

1.精靈技術(shù)主要針對(duì)背景圖片，插入的img不需要這個(gè)技術(shù)

2.需要測(cè)量每個(gè)小背景圖片的大小和位置

3.給盒子指定小的背景圖片時(shí)，背景定位基本都是負(fù)值

##

字體圖標(biāo)

優(yōu)勢(shì)：瀏覽器支持性比較好，靈活性大；體積小，加載速度快，節(jié)省帶寬流量；減輕服務(wù)器壓力。

注意：字體圖標(biāo)是字體 不是圖片

使用字體圖標(biāo)

1.把包包里面的font文件夾復(fù)制出來一份，放在我們項(xiàng)目根目錄。

2.在html文件標(biāo)簽里面添加結(jié)構(gòu)

3.在html文件樣式style里面聲明字體：告訴代碼和別人使用我們自己自定義的字體（一定注意路徑問題）

4.給盒子設(shè)置字體即可

追加字體圖標(biāo)

原來的不能刪除，繼續(xù)使用，此時(shí)我們需要這樣做

把壓縮包里面的selection.json 從新上傳，然后，選中自己想要新的圖標(biāo)，從新下載壓縮包，替換原來文件夾即可。

重新導(dǎo)入selection.json 生成 新的字體包--》追加選擇字體 --》點(diǎn)擊下載 --》把之前項(xiàng)目中fonts刪除--》替換成新的字體包里面的fonts文件夾

css三角形

本質(zhì)：還是利用了盒子的邊框

做法：

1.寬高為 零

2.四個(gè)邊都要的，只保留我們需要的邊框顏色，其他的 顏色透明即可。

3.為了照顧兼容問題，設(shè)置：line-height:0; font-size:0;

三角形案例：
    .demo {
            position: relative;
            width: 200px;
            height: 100px;
            background-color: pink;
        }
        
        i {
            position: absolute;
            top: 35px;
            left: 200px;
            width: 0;
            height: 0;
            border: 15px solid transparent;
            border-left-color: hotpink;
        }

  <div class="demo">
        <i></i>
    </div>

用戶的界面樣式

 <ul>
        <li style="cursor:default;">我是默認(rèn)的小白鼠標(biāo)樣式</li>
        <li style="cursor:pointer;">我是鼠標(biāo)小手樣式</li>
        <li style="cursor:move;">我是鼠標(biāo)移動(dòng)樣式</li>
        <li style="cursor:text;">我是鼠標(biāo)文本樣式</li>
        <li style="cursor:not-allowed;">我是鼠標(biāo)禁止樣式</li>
    </ul>
?
cursor:pointer;  -- 記住！
cursor:move;  --記住！
cursor:not-allowed;  --記住！

輪廓線

outline: 0/ none; ----- 去掉輪廓線

防止文本域拖拽

resize:none;

vertical-align 垂直對(duì)齊方式

• 如果讓單行文本垂直居中 -- 使用line-height，如果處理圖片和文本的垂直對(duì)齊方式，line-height=高 不可以實(shí)現(xiàn)！
• 注意：只針對(duì)行內(nèi)元素和 行內(nèi)塊起作用。
• 通常用于 -- 圖片和文本對(duì)齊問題和去除圖片底部空白縫隙問題。
• 去除圖片底部空白讓圖片白不要和 基線對(duì)齊 --- vertical-align:top middle bottom轉(zhuǎn)換為塊元素 -- display:block;

    div {
            border: 2px solid red;
        }
        
        img {
            /* 這個(gè)屬性加給圖片本身，千萬不要加給圖片的父級(jí)盒子 */
            vertical-align: middle;
        }
?
  <div>
        <img src="images/ldh.jpg" alt="">
    </div>

單行文字溢出省略號(hào) 顯示 （背過!）

1.必須強(qiáng)制一行顯示 white-space:nowrap;

2.超出部分隱藏 overflow:hidden;

3.文字省略號(hào)代替超出的文本 text-overflow:ellipsis;

多行文本省略號(hào)顯示

    overflow: hidden;
            /*文字省略號(hào)代替*/
            text-overflow: ellipsis;
            /* 彈性伸縮盒子模型顯示 */
            display: -webkit-box;
            /* 限制在一個(gè)塊元素顯示的文本的行數(shù) */
            -webkit-line-clamp: 3;
            /* 設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式 */
            -webkit-box-orient: vertical;

margin負(fù)值運(yùn)用(練習(xí)！)

前置知識(shí)點(diǎn)：

relative -- 相對(duì)定位占位置

absolute --- 絕對(duì)定位不占位置

float ---- 浮動(dòng)不占位置

文字環(huán)繞效果

浮動(dòng) -- 壓不住下面標(biāo)流的圖片和文字。

行內(nèi)塊可以單獨(dú)設(shè)置寬高一排顯示

text-align:center --- 給父親元素添加，可以讓子盒子(行內(nèi)塊/行內(nèi)元素)水平居中。

京東三角形巧妙運(yùn)用