css day2

1、选择器


1、元素选择器 - div{}


2、类选择器 


1、.className{ ..}  <ANY class="className">


2、elem.className{...}


div.important{}


3、<ANY class="class1 class2">


3、id选择器


#ID{ ... }


#container{ ... }


4、分组选择器


div,p,#main,.important{}


6、后代选择器


selector1 selector2{ ... }


7、子代选择器


selector1>selector2{ ... }


8、伪类选择器


1、链接伪类


:link


:visited


2、动态伪类


:hover


:active


:focus


==================================================


1、背景属性


1、背景颜色


属性：background-color


取值：合法的颜色值


注意：背景颜色是从边框位置处开始绘制


2、背景图像


属性：background-image


取值：


1、默认值为 none


2、url(图片路径)


ex:


background-image:url(image/a.jpg);


3、背景平铺


属性：background-repeat


取值：


1、repeat


默认值，横向纵向都平铺


2、no-repeat


不平铺


3、repeat-x


只在横向平铺


4、repeat-y


只在纵向平铺


4、背景图片尺寸


属性：background-size


取值：


1、width height


以px为单位


2、width% height%


使用当前元素的尺寸占比作为尺寸


3、cover


覆盖，将背景图进行等比缩放，直到覆盖到元素的所有区域为止


4、contain


包含，将背景图进行等比缩放，直到碰到元素的一个边缘为止


5、背景图片固定


1、作用


将背景图固定在body的某个位置处，不会随着滚动条而发生位置的更改


2、属性


background-attachment


取值：


1、scroll ：默认值，背景图会滚动


2、fixed ：背景图固定


6、背景图片位置


1、作用


改变背景图像在网页中的默认位置


2、属性


background-position


取值：


1、x y


以px为单位的数值，用空格隔开


x ：背景图像的水平偏移位置


取值为正，元素向右偏移


取值为负，元素向左偏移


y ：背景图像的垂直偏移位置


取值为正，元素向下偏移


取值为负，元素向上偏移


2、x% y%


3、关键字


x ：left / center / right


y ：top / center /bottom






ex:


background-position:left bottom;


background-position:top center;


background-position:center;


7、背景属性


1、作用


在一个属性中，设置多个背景属性关联的值


2、语法


属性：background


取值：color url() repeat attachment position;






background:red;


background:url(a.png) 16px -35px;


2、文本格式化属性


1、字体属性


1、指定字体


属性：font-family


取值：使用 , 隔开的字体列表


ex:


font-family:"微软雅黑";


font-family:"microsoft yahei";


font-family:"微软雅黑",Arial,Helvetica;


font-family:"黑体";


font-family:simhei;


font-family:simsun; /*宋体*/


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


练习：


1、字体大小为 18pt


2、加粗显示所有文字


3、斜体显示所有文字


4、所有的小写字符都换成小型大写字符


6、字体属性


属性：font


取值：style varaint 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、行高


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


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


属性：line-height


取值：


1、以 px 为单位的数值


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


ex:


div{


font-size:16px;


/*line-height:30px;*/


line-height:1.5;


}


5、首行文本缩进


属性：text-indent


取值：以px为单位的数字


6、文本阴影


属性：text-shadow


取值：h-shadow v-shadow blur color


h-shadow:阴影的水平偏移距离


取值为正数，阴影向右偏移


取值为负数，阴影向左偏移


取值为0，则跟本体位置一致


v-shadow:阴影的垂直偏移距离


取值为正数，阴影向下偏移


取值为负数，阴影向上偏移


取值为0，则跟本体位置一致


blur:模糊距离


数值取值越大，模糊效果越强


取值以 px 为单位的数值


color:阴影的颜色


3、表格属性


1、表格常用属性


1、尺寸属性 - width，height


2、边框属性 - border


3、文本格式化


font-*


text-*


4、背景属性


5、框模型属性


margin 不能放在td


6、垂直方向对齐方式


属性：vertical-align


取值：top / middle / bottom


2、表格特有属性


1、边框合并


属性：border-collapse


取值：


1、separate


默认值，分离边框即双线边框


2、collapse


合并边框


2、边框边距


作用：设置单元格两边的距离


属性：border-spacing


取值：


1、指定一个值


水平和垂直间距是相等的


2、指定两个值


第一个值：表示水平间距


第二个值：表示垂直间距


中间用空格隔开


注意：该属性只能在分离边框的模式下使用


4、过渡效果


1、什么是过渡


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


2、过渡的语法


1、指定过渡属性(必须的)


属性：transition-property


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


取值：


1、属性名称


2、all


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


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


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


2、取值为数字的属性


2、指定过渡时长(必须的)


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


属性：transition-duration


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


1000ms = 1s


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


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






5、过渡属性


属性：transition


取值：property duration timing-function delay;






ex:


transition:background 5s linear 1s,width 2s linear 1s;


作业：


1、使用过渡效果完成下面操作


2、创建一个 div 200*200


3、鼠标悬停时


1、将背景颜色变为紫色


2、有正方形变为圆形


3、向右偏移500px