前端-CSS-9-文本和字體-背景顏色

字體屬性

div{ width: 300px; height: 100px; /*background-color: red;*/ border: 1px solid red; /*設置字體大小  px：像素  rem  em %*/ font-size: 20px; font-weight: 700; font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif; text-align: center; text-decoration: none; color: blue; cursor: pointer; /*line-height: 100px;*/
             /*1em = 20px*/
             /*設置首字縮進 單位：em為准*/ text-indent: 2em; }

font-family

<!-- 使用font-family注意幾點： 1.網頁中不是所有字體都能用哦，因為這個字體要看用戶的電腦里面裝沒裝， 比如你設置： font-family: "華文彩雲"; 如果用戶電腦里面沒有這個字體， 那么就會變成宋體 頁面中，中文我們只使用： 微軟雅黑、宋體、黑體。 如果頁面中，需要其他的字體，那么需要切圖。 英語：Arial 、 Times New Roman 2.為了防止用戶電腦里面，沒有微軟雅黑這個字體。 就要用英語的逗號，隔開備選字體，就是說如果用戶電腦里面， 沒有安裝微軟雅黑字體，那么就是宋體： font-family: "微軟雅黑","宋體"; 備選字體可以有無數個，用逗號隔開。 3.我們要將英語字體，放在最前面，這樣所有的中文，就不能匹配英語字體， 就自動的變為后面的中文字體： font-family: "Times New Roman","微軟雅黑","宋體"; 4.所有的中文字體，都有英語別名， 我們也要知道： 微軟雅黑的英語別名： font-family: "Microsoft YaHei"; 宋體的英語別名： font-family: "SimSun"; font屬性能夠將font-size、line-height、font-family合三為一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun"; 5.行高可以用百分比，表示字號的百分之多少。 一般來說，都是大於100%的，因為行高一定要大於字號。 font:12px/200% “宋體” 等價於 font:12px/24px “宋體”; 反過來，比如： font:16px/48px “宋體”; 等價於 font:16px/300% “宋體”

 

---------------------------------------------------------------------

字體系列。

font-family可以把多個字體名稱作為一個“回退”系統來保存。如果瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。

簡單實例：

body {
  font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
}
如果設置成inherit，則表示繼承父元素的字體。

font-weight

字重（字體粗細）。

取值范圍：

font-size

字體大小。

p {
  font-size: 14px;
}
如果設置成inherit表示繼承父元素的字體大小值。

color

設置內容的字體顏色。

支持三種顏色值：

十六進制值 如: ＃FF0000
一個RGB值 如: RGB(255,0,0)
顏色的名稱 如: red
p {
  color: red;
}

文字屬性

text-align 文本對齊

text-align 屬性規定元素中的文本的水平對齊方式。

line-height 行高

/*行高的意思: 公式 :行高=盒子的高度，讓文本垂直居中 但是只適應與單行文本*/

text-decoration文字裝飾。

單行文本垂直居中

 

多行文本垂直居中 

    div{
            width: 300px;    
            height: 175px;
            border:  1px solid red;
            padding-top: 25px;
            /*行高的意思: 公式 :行高=盒子的高度，讓文本垂直居中 但是只適應與單行文本*/
            line-height: 30px;
            /* line-height 要比 font-size */
            font-size: 17px;

        }

 

border:5px(粗細)  solid(線性樣式) red(顏色)

邊框有三個要素： 粗細 線性樣式 顏色

 超鏈接美化導航案例

背景屬性

    div{
            width: 200px;
            height: 200px;
            /*background-color: rgb(0,0,0);*/
            background-color: rgb(0,0,0);
            

            /* 顏色表示方法有哪些？
            一共有三種：單詞、rgb表示法、十六進制表示法

            rgb:紅色 綠色 藍色 三原色
            光學顯示器，每個像素都是由三原色的發光原件組成的，靠明亮度不同調成不同的顏色的。
            用逗號隔開，r、g、b的值，每個值的取值范圍0~255，一共256個值。
            如果此項的值，是255，那么就說明是純色：
            
            黑色：
            background-color: rgb(0,0,0);
            光學顯示器，每個元件都不發光，黑色的。

            白色：
            background-color: rgb(255,255,255);

            顏色可以疊加，比如黃色就是紅色和綠色的疊加：
            background-color: rgb(255,255,0);

            再比如：
            background-color: rgb(111,222,123);
            就是紅、綠、藍三種顏色的不同比例疊加。


            
            16進制表示法
            紅色：
                background-color: #ff0000;
                所有用#開頭的值，都是16進制的。
                #ff0000：紅色
                16進制表示法，也是兩位兩位看，看r、g、b，但是沒有逗號隔開。
                ff就是10進制的255 ，00 就是10進制的0，00就是10進制的0。所以等價於rgb(255,0,0);
                怎么換算的？我們介紹一下
                我們現在看一下10進制中的基本數字（一共10個）:
                0、1、2、3、4、5、6、7、8、9

                16進制中的基本數字（一共16個）:
                0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f

                16進制對應表：
                十進制數    十六進制數
                0                0
                1                1
                2                2
                3                3
                ……
                10                a
                11                b
                12                c
                13                d
                14                e
                15                f

                16                10
                17                11
                18                12
                19                13
                ……
                43                2b
                ……
                255                ff

                十六進制中，13 這個數字表示什么？
                表示1個16和3個1。 那就是19。 這就是位權的概念，開頭這位表示多少個16，末尾這位表示多少個1。
                小練習：
                16進制中28等於10進制多少？
                答：2*16+8 = 40。

                16進制中的2b等於10進制多少？
                答：2*16+11 = 43。

                16進制中的af等於10進制多少？
                答：10 * 16 + 15 = 175

                16進制中的ff等於10進制多少？
                答：15*16 + 15 = 255

                所以，#ff0000就等於rgb(255,0,0)

                background-color: #123456;
                等價於：
                background-color: rgb(18,52,86);

                所以，任何一種十六進制表示法，都能夠換算成為rgb表示法。也就是說，兩個表示法的顏色數量，一樣。

                十六進制可以簡化為3位，所有#aabbcc的形式，能夠簡化為#abc;
                比如：
                background-color:#ff0000;
                等價於
                background-color:#f00;

                比如：
                background-color:#112233;
                等價於
                background-color:#123;

                只能上面的方法簡化，比如
                background-color:#222333;
                無法簡化！
                再比如
                background-color:#123123;
                無法簡化！

                要記住：
                #000   黑
                #fff    白
                #f00   紅
                #333   灰
                #222   深灰
                #ccc   淺灰

                



             */

        }

 

常用背景相關屬性

-----------------------------------------

backgroud-repeat

 

 

---------------------------------------

-------------------------------------------

background-position

/*正值 第一個值表示往右偏移 第二個值表示往下 負值則相反*/ background-position: -100px -100px;

 

background-position:center center;

-----------------------------------------------------------

 css雪碧技術

CSS雪碧 即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合並技術，該方法是將小圖標和背景圖像合並到一張圖片上，然后利用css的背景定位來顯示需要顯示的圖片部分
CSS 雪碧圖應用原理：
只有一張大的合並圖， 每個小圖標節點如何顯示單獨的小圖標呢？

其實就是 截取 大圖一部分顯示，而這部分就是一個小圖標。

使用雪碧圖的好處：

1、利用CSS Sprites能很好地減少網頁的http請求，從而大大的提高頁面的性能，這也是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；
2、CSS Sprites能減少圖片的字節，曾經比較過多次3張圖片合並成1張圖片的字節總是小於這3張圖片的字節總和。
3、解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的制作效率。
4、更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便

不足：

1）CSS雪碧的最大問題是內存使用
2）拼圖維護比較麻煩
3）使CSS的編寫變得困難
4）CSS 雪碧調用的圖片不能被打印

我們可以使用background綜合屬性制·作通天banner，什么是通天banner呢，就是一般我們電腦的屏幕都是1439.但是設計師給我們的banner圖都會比這個大，

那么我們可以此屬性來制作通天banner。 background: red url('./images/banner.jpg')  no-repeat center top;


background-attach 設置fixed之后，該屬性固定背景圖片不隨瀏覽器的滾動而滾動

 

 

從一張圖片里面截取不同的部分

------------------------------------------------------------------

    .box1{
            width: 48px;  在（0，-528）坐標處截取長寬為48px的圖片
            height: 48px;
            background-image: url(./images/1.png);
            background-repeat: no-repeat;
            background-position: 0 -528px;
        }
        .box2{
            width: 48px;
            height: 48px;
            background-image: url(./images/1.png);
            background-repeat: no-repeat;
            background-position: 0 -440px;

        }

運行效果圖

-----------------------------------------------------------------------------------------------------

通天banner