?CSS知識3

?

框模型：

一，外邊距（上文）

二， 內邊距

　?? 1，什么是內邊距？

　　內邊距就是內容與元素邊緣之間的距離；

　　注： 內邊距會擴大元素邊框內所占的區域的

　　語法： padding: 四個方向的內邊距

　　padding-top / right / bottom / left? : 值 ;

　　取值：（1）以px為單位的數值； （2）以% 為單位的數值；

　　padding 的簡潔寫法：

　　padding:value? 四個方向內邊框；

　　padding：v1? v2? ; 上下， 左右；

　　padding: v1? v2?? v3 ; 上?? 左右?? 下；

　　padding:v1? v2?? v3?? v4? ; 上 ，右 ， ? 下 ，? 左；

頁面中具備默認內邊距的元素：（1） ol? 、 ul? , 左內邊距為40px

　　（2）文本框，密碼框， 按鈕，上下內邊距；

三，box-sizeing? 屬性；

　　作用： 重新指定框模型的計算方式；

　　屬性：box-sizing

　　取值：（1） content-box ?

　　　　　元素的width屬性只表示內容區域的寬度;
?? ??? ??? ??? ?　元素的height屬性只表示內容區域的高度;

　　　　（2） border-box

??? 　　　　元素的width屬性包含內容區域寬度，左右內邊距和左右邊框的值
?? ??? ??? ??? ?元素的height屬性包含內容區域高度，上下內邊距和上下邊框的值

?

背景屬性：

　　一，背景顏色　　　　　　

　　　　屬性： background-color

　　　　取值：合法的顏色值；

　　　　注： 背景顏色是從border位置處就開始繪制的；

　　二， 背景圖像：

　　　　屬性：background-image

　　　　取值：url：(圖片路徑) 可以不加引號；

　　三， 背景圖片平鋪：

　　　　屬性： background-repeat

　　　　取值： （1）repeat? ，默認值，橫向縱向都平鋪；

　　　　（2）no-repeat ? 不平鋪

　　　　（3）repeat-x? ,? 只橫向平鋪

　　　　（4）repeat-y ,? 只縱向平鋪；

　　四，背景圖片尺寸：

　　　　屬性：background-size

　　　　取值：width? ， height? ，（1）以px位單位，（2）以%為單位；

　　五，背景圖片位置：

　　　　作用：“改變背景圖片在元素中 的位置；”

　　　　屬性： background-position

　　　　取值：? （1）、x y
?? ??? ??? ??? ??? ?以px為單位的數值，用空格隔開
?? ??? ??? ??? ??? ?x：背景圖像的水平偏移位置
?? ??? ??? ??? ??? ??? ?取值為正，圖片右偏移
?? ??? ??? ??? ??? ??? ?取值為負，圖片左偏移
?? ??? ??? ??? ??? ?y：背景圖像的垂直偏移位置
?? ??? ??? ??? ??? ??? ?取值為正，圖片下偏移
?? ??? ??? ??? ??? ??? ?取值為負，圖片上偏移
?? ??? ??? ???? （2）、x% y%
?? ??? ??? ??? ??? ?0% 0% : 在左上角
?? ??? ??? ??? ??? ?100% 100% : 在右下角
?? ??? ??? ??? ??? ?50% 50% : 正中間
?? ??? ??? ???? （3）、關鍵字
?? ??? ??? ??? ??? ?x : left 上午 11:47:31/ center / right
?? ??? ??? ??? ??? ?y : top / center / bottom

　??? 六，背景屬性：

　　　　屬性：background

　　　　取值： color? url()? repeat? position　

　　　　eg:? background:red;

　　　　background:url(a.jpg) no-repeat? -35px? center

?

文本格式屬性

??? 1、字體屬性
?? ??? ?1、指定字體
?? ??? ??? ?屬性：font-family
?? ??? ??? ?取值：使用 , 隔開的字體值的列表
?? ??? ??? ?ex:
?? ??? ??? ??? ?1、font-family:"微軟雅黑";
?? ??? ??? ??? ?2、font-family:"microsoft yahei";
?? ??? ??? ??? ?3、font-family:"黑體";
?? ??? ??? ??? ?4、font-family:"simhei";
?? ??? ??? ??? ?5、font-family:"宋體";
?? ??? ??? ??? ?6、font-family:"simsun";
?? ??? ??? ??? ?7、font-family:"微軟雅黑",Arial,Helvetica;
?? ??? ?2、指定字體大小
?? ??? ??? ?屬性：font-size
?? ??? ??? ?取值：
?? ??? ??? ??? ?以 px 或 pt 為單位的數值
?? ??? ?3、字體加粗
?? ??? ??? ?屬性：font-weight
?? ??? ??? ?取值：
?? ??? ??? ??? ?1、normal ：正常體，無加粗效果
?? ??? ??? ??? ?2、bold ：加粗
?? ??? ??? ??? ?3、value
?? ??? ??? ??? ??? ?取值為無單位的數字
?? ??? ??? ??? ??? ?400 - normal
?? ??? ??? ??? ??? ?900 - bold
?? ??? ?4、字體樣式 - 斜體
?? ??? ??? ?屬性：font-style
?? ??? ??? ?取值：
?? ??? ??? ??? ?1、normal ：正常，無斜體效果
?? ??? ??? ??? ?2、italic ：斜體
?? ??? ?5、小型大寫字母
?? ??? ??? ?作用：將文本中的所有小寫字母都變為大寫字母，但是大小跟小寫字母一樣
?? ??? ??? ?屬性：font-variant
?? ??? ??? ?取值：
?? ??? ??? ??? ?1、normal
?? ??? ??? ??? ?2、small-caps
?? ??? ?6、字體屬性
?? ??? ??? ?屬性：font
?? ??? ??? ?取值：style variant weight size family;
?? ??? ??? ?注意：
?? ??? ??? ??? ?使用簡寫屬性時，必須要設置 family 的值，否則無效
?? ??? ??? ?練習：
?? ??? ??? ??? ?創建任意文本
?? ??? ??? ??? ?1、字體大小更改為 18pt
?? ??? ??? ??? ?2、加粗所有文本
?? ??? ??? ??? ?3、斜體顯示所有文本
?? ??? ??? ??? ?4、所有小寫字符都變成小型大寫字符
?? ??? ??? ??? ?5、字體設置為 微軟雅黑

??? 2、文本屬性
?? ??? ?1、文本顏色
?? ??? ??? ?屬性：color
?? ??? ??? ?取值：合法顏色值
?? ??? ?2、文本的排列方式
?? ??? ??? ?控制內容的水平對齊方式
?? ??? ??? ?屬性：text-align
?? ??? ??? ?取值：left / center / right / justify
?? ??? ??? ??? ?justify:兩端對齊
?? ??? ?3、文字修飾
?? ??? ??? ?屬性：text-decoration
?? ??? ??? ?作用：指定某元素中文字的線條修飾效果
?? ??? ??? ?取值：
?? ??? ??? ??? ?1、none
?? ??? ??? ??? ??? ?無任何線條修飾
?? ??? ??? ??? ?2、underline
?? ??? ??? ??? ??? ?下劃線
?? ??? ??? ??? ?3、overline
?? ??? ??? ??? ??? ?上劃線
?? ??? ??? ??? ?4、line-through
?? ??? ??? ??? ??? ?刪除線

?? ???? 4、行高
?? ??? ??? ?作用：指定一行文本數據所占的高度是多少
?? ??? ??? ?特點：如果行高的高度高于文本的高度的話，那么文本將在行高范圍內垂直居中顯示
?? ??? ??? ?屬性：line-height
?? ??? ??? ?取值：
?? ??? ??? ??? ?1、以 px 為單位的數值
?? ??? ??? ??? ?2、無單位的數字，表示為當前字體大小的倍數
?? ??? ?5、首行文本縮進
?? ??? ??? ?屬性：text-indent
?? ??? ??? ?取值：以 px 為單位的數字，表示縮進距離
?? ??? ?6、文本陰影
?? ??? ??? ?屬性：text-shadow
?? ??? ??? ?取值：h-shadow v-shadow blur color

表格屬性
?一、表格常用屬性
?? ??? ?1、尺寸屬性 - width，height
?? ??? ?2、邊框屬性 - border
?? ??? ?3、文本格式化屬性
?? ??? ??? ?font-*
?? ??? ??? ?text-*
?? ??? ?4、背景屬性
?? ??? ?5、框模型屬性
?? ??? ??? ?margin 不能應用在td上
?? ??? ?6、vertical-align
?? ??? ??? ?取值：top / middle / bottom
??? 二、表格特有屬性
?? ??? ?1、邊框合并
?? ??? ??? ?屬性：border-collapse
?? ??? ??? ?取值：
?? ??? ??? ??? ?1、separate
?? ??? ??? ??? ??? ?默認值，分離邊框模式
?? ??? ??? ??? ?2、collapse
?? ??? ??? ??? ??? ?邊框合并模式
?? ??? ?2、邊框邊距
?? ??? ??? ?作用：設置單元格四周的距離
?? ??? ??? ?屬性：border-spacing
?? ??? ??? ?取值：
?? ??? ??? ??? ?1、指定一個值
?? ??? ??? ??? ??? ?水平和垂直的間距是相等的
?? ??? ??? ??? ?2、指定兩個值
?? ??? ??? ??? ??? ?第一個值：水平間距
?? ??? ??? ??? ??? ?第二個值：垂直間距
?? ??? ??? ??? ??? ?兩個值中間用空格隔開
?? ??? ??? ?注意：只有在分離邊框模式下才有效

?

<!doctype html> <html lang="en"><head><meta charset="UTF-8"><meta name="Description" content=""><title>Document</title><style>body{font-size:12px;} a{color:#005aa0;text-decoration:none;}a:hover{text-decoration:underline;}#tbl {width:990px;border-bottom:1px solid #ddd;}#tbl thead td{/*文本顏色，加粗，下邊框，文本水平居中對齊 內邊距*/color:#666;font-weight:bold;border-bottom:1px solid #ddd;text-align:center;padding:5px 0;}#tbl .cal1{width:610px;text-align:left;}#tb1 tbody td{/*文本水平居中對齊，下邊框，上下內邊距*/text-align:center;border-bottom:1px dotted #ddd;padding:5px 0;}</style></head><body><table id='tbl'><thead><tr><td class='cal1'>主題</td><td>回復/瀏覽</td><td>作者</td><td>時間</td></tr></thead><tbody><tr><td class='cal1'><a href="#">銀灰色的，很酷</a></td><td>0/0</td><td><a href="#">2001年冬天</a></td><td>2011-1-1 11:12:11</td></tr><tr><td class='cal1'><a href="#">銀灰色的，很酷</a></td><td>0/0</td><td><a href="#">2001年冬天</a></td><td>2011-1-1 11:12:11</td></tr><tr><td class='cal1'><a href="#">銀灰色的，很酷</a></td><td>0/0</td><td><a href="#">2001年冬天</a></td><td>2011-1-1 11:12:11</td></tr><tr><td class='cal1'><a href="#">銀灰色的，很酷</a></td><td>0/0</td><td><a href="#">2001年冬天</a></td><td>2011-1-1 11:12:11</td></tr></tbody> </table></body> </html> View Code

?

?

過渡效果：

一，什么是過渡效果；

　　使得css 屬性值在一段時間內變化成另外一個屬性值；

二， 過渡的語法：

1，指定過渡效果屬性：

　　作用：指定那個屬性值在變化的時候使用過渡的效果；

　　屬性：transition-property（必須的值）

　　取值：（1）屬性名稱 background-color

　　（2）all??? 但凡能使用過渡效果的屬性的值在變化時一律都使用過渡效果體現；

　　允許使用過渡效果的屬性：與顏色相關的屬性都可以使用過渡；取值為數字的屬性都可以使用過渡；

2，指定過渡時長（必須的值）　

　　屬性： transition-duration

　　取值： 以s或ms為單位的數字；

　　 1s =1000ms

　　300ms = 0.3s? =? .3s

3,指定過渡的速度升級曲線函數（指定變化速率）

屬性： transition-timing-function

取值： （1）ease??? , 默認值， 慢速開始， 快速變快，慢速結束；

（2）linear?? 勻速

（3）ease-in?? 慢速開始， 加速結束

（4）ease-out? 快速開始，減速結束

（5）ease-in-out?? 慢速開始和結束，中間先加速后減速

4，指定過渡延遲

屬性：transition-delay

取值： property duration? timing-function?? delay;

?

<!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>#d1{background-color:red;width:200px;height:200px;/*過渡編寫于此：即管去又管回*//*1、指定過渡屬性*/transition-property:all;/*2、指定過渡時長*/transition-duration:2s;/*3、指定過渡速率*/transition-timing-function:linear;/*4、指定過渡延遲*//* transition-delay:5s; */}#d1:hover{background-color:green;border-radius:50%;/*過渡編寫于此：只管去不管回*/}</style></head><body><div id="d1"></div></body> </html> View Code

?

??? 練習1：
?? ??? ??? ?創建一個 div 200*200
?? ??? ??? ?鼠標懸停時：
?? ??? ??? ??? ?1、背景顏色變為紫色
?? ??? ??? ??? ?2、由正方形變為長方形
?? ??? ??? ??? ?3、向右偏移500px
?? ??? ??? ?鼠標移出時，使用過渡效果顯示回來

?

轉載于:https://www.cnblogs.com/weizitianming/p/9537999.html

總結

以上是生活随笔為你收集整理的WEBBASE篇： 第五篇， CSS知识3的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。