7.css常用属性
1、文本屬性
文本對齊
text-align 屬性規定元素中的文本的水平對齊方式。
屬性值：none | center | left | right | justify
文本顏色
color屬性
文本首行縮進
text-indent 屬性規定元素首行縮進的距離，單位建議使用em
文本修飾
text-decoration屬性規定文本修飾的樣式
屬性值：none(默認) | underline(下劃線) | overline(定義文本上的一條線)? | line-through (定義穿過文本下的一條線) |?inherit(繼承父元素的text-decoration屬性的值。)
行高
line-height就是行高的意思，指的就是一行的高度。
陰影
text-shadow：水平方向偏移量 垂直方向偏移量 模糊度 陰影顏色；
文字溢出
text-overflow:clip | ellipsis
案例：文字超出部分顯示...
css部分 div{width: 200px;height: 200px;border: 1px solid red;} div p{overflow: hidden;white-space: nowrap;text-overflow: ellipsis; } html部分 <div><p>變有錢 我變有錢多少人沒日沒夜地浪費時間</p><p>變有錢 我變有錢多少人沒日沒夜地浪費時間</p><p>變有錢 我變有錢多少人沒日沒夜地浪費時間</p> </div>
2、字體屬性
字體大小
font-size表示設置字體大小，如果設置成inherit表示繼承父元素的字體大小值。
字體粗細
font-weight表示設置字體的粗細
屬性值：none(默認值，標準粗細) | bold(粗體) | border(更粗）|?lighter(更細) |?100~900（設置具體粗細，400等同于normal，而700等同于bold）|?inherit（繼承父元素字體的粗細值）
字體系列
font-family
font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif如果瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。如果都不支持則顯示宋體。
使用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% “宋體”
?行高 line-height
針對單行文本垂直居中
公式：行高的高度等于盒子的高度，可以使當行文本垂直居中，注意只適用單行文本。
針對多行文本垂直居中
行高的高度不能小于字體的大小，不然上下字之間會緊挨一起。
第一步，一個寬度300*300的盒子，看盒子中一共顯示了幾行文字，假如是5行，再看一下行高，如果行高是line-height:30px; 那么就知道行高*5=150px
第二步，讓(盒子的高度-150px)/2=75;那么設置盒子的padding-top:75px;同時保證盒子的高度為300px,那么高度改為225px;
vertical-align
定義：vertical-align 屬性設置元素的垂直對齊方式。
該屬性定義行內元素的基線相對于該元素所在行的基線的垂直對齊
常用屬性值：
- baseline 默認值
- top
- bottom
- middle
它的作用：
- 內聯元素之間的對齊
- 文字與圖片垂直方向的對齊
- 圖片與托片垂直方向的對齊
- 行內塊元素垂直方向的對齊
- 單元格td的內容垂直方向的對齊
3、background
顏色表示法
一共有三種：單詞、rgb表示法、十六進制表示法
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進制的。
#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)
等價于：
所以，任何一種十六進制表示法，都能夠換算成為rgb表示法。也就是說，兩個表示法的顏色數量，一樣。
十六進制可以簡化為3位，所有#aabbcc的形式，能夠簡化為#abc;
比如：
等價于
比如：
等價于
只能上面的方法簡化，比如
無法簡化！
再比如
無法簡化！
要記住：
#000 黑
#fff 白
#f00 紅
#333 灰
#222 深灰
#ccc 淺灰
background-color屬性表示背景顏色
background-img:表示設置該元素的背景圖片
默認的背景圖片，水平方向和垂直方向都平鋪
background-repeat:表示設置該元素平鋪的方式
屬性值：
| repeat | 默認。背景圖像將在垂直方向和水平方向重復。 |
| repeat-x | 背景圖像將在水平方向重復。 |
| repeat-y | 背景圖像將在垂直方向重復。 |
| no-repeat | 背景圖像將僅顯示一次。 |
| inherit | 規定應該從父元素繼承 background-repeat 屬性的設置。 |
?
?給元素設置padding之后，發現padding的區域也會平鋪背景圖片。
repeat應用案例
還是上面那個超鏈接導航欄的案例，我們給body設置平鋪的圖片，注意：一定找左右對稱的平鋪圖片，才能實現我們要的效果
?
background-position:?屬性設置背景圖像的起始位置。這個屬性設置背景原圖像（由?background-image?定義）的位置
屬性值：
| 如果您僅規定了一個關鍵詞，那么第二個值將是"center"。 默認值：0 0； 這兩個值必須挨在一起。 |
雪碧圖技術（精靈圖技術）
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之后，該屬性固定背景圖片不隨瀏覽器的滾動而滾動
?
轉載于:https://www.cnblogs.com/ys-python/p/11153071.html
總結
- 上一篇： P2756 魔术球问题 (网络流)
- 下一篇： 最简单易懂的对拍讲解