WEBBASE篇： 第五篇， CSS知识3
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>
过渡效果：
一，什么是过渡效果；
使得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>
练习1：
创建一个 div 200*200
鼠标悬停时：
1、背景颜色变为紫色
2、由正方形变为长方形
3、向右偏移500px
鼠标移出时，使用过渡效果显示回来
