WEB Basic基础-05

1、文本格式化属性


1、字体属性


1、指定字体


属性：font-family


取值：由 , 隔开的字体列表


注意：如果字体中包含中文或空格的话，要用引号引起来


ex:


font-family:"微软雅黑";


font-family:"Microsoft Yahei";


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 ：斜体显示


练习：


1、创建01-font.html


2、创建一个div，内容随意


3、设置div的字体为 "楷体",加粗，斜体，大小为18pt


5、字体属性(简写)


属性：font


取值：style weight size family;


注意：


使用简写方式时，必须要设置family的值，否则无效


font:12px;/*无效*/


font:12px "微软雅黑";


2、文本属性


1、文本颜色


属性：color


取值：合法的颜色值


2、文本的排列方式


作用：控制某元素内的文本，图片和行内块元素的排列方式


属性：text-align


取值：left / center / right / justify


justify ：两端对齐


3、文字修饰


作用：指定线条修饰效果


属性：text-decoration


取值：


1、none : 无任何线条显示


2、underline : 下划线


3、overline : 上划线


4、line-through : 删除线


4、行高


作用：指定一行文本数据的所占高度


特点：如果行高的高度高于文本的高度的话，那么文本将在行高的范围内垂直居中显示


使用场合：


1、文本垂直居中


2、行间距


属性：line-height


取值：


1、以 px 为单位的数字


2、无单位的数字，表示的是当前字体大小的倍数


ex:


#d1{


font-size:12px;


/*line-height:24px;*/


line-height:2;


}


练习：


1、创建一个网页 03-lineHeight.html


2、创建一个div，200*200，编写一行文本，通过css的方式，使得当前文本绝对居中(水平和垂直都居中)


3、创建一个div，多编写几行文本，模拟1.5倍行间距


2、表格属性


1、表格的常用属性


1、尺寸属性


2、边框属性


3、文本格式化


4、背景属性


5、框模型


margin不能用在td上的


2、表格的特有属性


1、边框合并


属性：border-collapse


取值：


1、separate


默认值，分离边框(双线边框)模式


2、collapse


边框合并


2、边框边距


作用：设置每两个单元格之间的距离


属性：border-spacing


取值：


1、指定一个数值


水平和垂直间距相等


2、给定两个数值


第一个值：表示水平间距


第二个值：表示垂直间距


两个数值之间使用空格隔开


注意：


必须要在分离边框模式下使用


即border-collapse的值为separate的时候有效


3、过渡效果 - transition


1、什么是过渡


使得CSS的属性值在一段时间内平缓变化的一个效果


2、语法


1、指定过渡属性


作用：指定哪个属性值在变化的时候使用过渡效果


属性：transition-property


取值：


1、属性名称


2、all


但凡能使用过渡效果的属性值在变化时一律都使用过渡来体现


允许使用过渡效果的属性：


1、所有与颜色相关的属性


2、所有取值为数字的属性


ex:


transition-property:background-color;


2、指定过渡时长


作用：指定在多长时间内完成过渡效果


属性：transition-duration


取值：以 s 或 ms 为单位的数字


1s = 1000ms


300ms = 0.3s = .3s


ex:


transition-duration:0.3s;


3、指定过渡的速度时间曲线函数


作用：指定过渡效果变化速率


属性：transition-timing-function


取值：


1、ease


默认值，慢速开始，快速变快，慢速结束


2、linear


匀速


3、ease-in


慢速开始，加速结束


4、ease-out


快速开始，减速结束


5、ease-in-out


慢速开始和结束，中间先加速后减速


4、指定过渡延迟


作用：当激发过渡效果后，等待多长时间再开始执行操作


属性：transition-delay


取值：以 s 或 ms 为单位的数字


练习：


创建200*200的元素，红色背景


鼠标悬停：


1、尺寸变为400*400


2、背景颜色变为黄色


3、变成圆形


以上三个效果使用过渡效果，在5s中之内完成变换,鼠标移出时，使用过渡效果恢复成原来的状态


5、过渡属性


属性：transition


取值：property duration timing-fun dalay






ex:


transition:color 5s linear,background 3s;






transition:all 5s linear;


4、定位(重难点)


1、什么是定位


表示的是元素在网页中的位置


2、定位的分类


在css中，定位主要分为以下几类：


1、普通流定位(默认定位方式)


2、浮动定位(重难点)


3、相对定位


4、绝对定位


5、固定定位


3、普通流定位


普通流定位，又称为"文档流定位"。是页面中默认的定位方式。典型的"流式布局"。


特点：


1、每个元素在页面中都有自己的位置，并占据一定的空间


2、每个元素都是从其父元素的左上角开始排列的


3、每个元素基本上都是按照从左到右，从上到下的方式排列的


块级元素：从上到下，每个独占一行


行内元素&行内块元素：从左到右，排列不下时换行


4、浮动定位


1、浮动元素的特点


将元素设置为浮动定位,元素将具备以下特点:


1、浮动元素会被排除在文档流之外 - 脱离文档流，那么元素将不在占据页面空间


2、剩余未浮动元素会上前占位


3、浮动定位的元素会停靠在父元素的左边或右边或其他已浮动元素的边缘上


4、浮动只能在当前行浮动


5、浮动解决的问题：让多个块级元素在一行内显示的问题


2、语法


属性：float


取值：


1、none


默认值，即无任何浮动效果


2、left


浮动到父元素的左边，或停靠在左边已有的浮动元素的边缘上


3、right


浮动到父元素的右边，或停靠在右边已有的浮动元素的边缘上


3、浮动引发的特殊效果


1、如果父元素显示不下所有已浮动子元素的话，那么最后一个将换行，但有可能被卡住


2、元素一旦浮动起来之后，就将变成块级元素


行内元素一旦浮动，就允许修改尺寸


3、元素一旦浮动起来之后，在未指定宽度的情况下，宽度将由内容来决定


主要针对块级元素


4、文字，图片，行内元素是采用环绕的方式来排列的，是不会被浮动元素压在底下的