03css3第一天-课件css3基础一

新·模式l

同时采用最合理的TS教学模式和最合理教学时间安排.l

全程手把学、边学边练，

7*12小时答疑指导，保证学员即学即会。薪·未来l

无限互联学生毕业平均薪资12755元，比 业机构平均高出12%。l

98%的无限互联学生在毕业4周内成功就业！信·机构l

慧科教育 旗下泛IT职业教育培训机构。l

与找座儿形成国内第一家O2O混合式教学

。l

良心教学，

赖大机构！心·服务l

多年教学经验资深讲师倾心教学l

配备专门的生活导师，提供入学接送、精选宿舍、生活指导、学习督促等一条龙服务。l

提供专业就业指导服务，简历指导+模拟面试，保证快速就业。走进无限互联本章知识点CSS3介绍及新特性预览CSS3新增选择器CSS3新增文本属性、颜色表示法CSS3新增边框属性CSS3新增背景属性、颜色渐变CSS3新增盒子属性、用户界面属性一、CSS3介绍CSS的概念CSS引入CSS3的概念CSS3的新特性预览CSS的概念CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading

Stylesheet）可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式CSS的引入的三种方式外部引入：style

：内联：CSS的引入CSS3的概念CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前

较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的前缀浏览器-webkitChrome

和Safari-mozFirefox-msIE-oOperaCSS3新特性预览CSS3新特性预览强大的CSS选择器新的颜色制式和透明设定多栏布局的实现多背景图效果文字阴影效果开放的网络字体类型圆角边框背景盒子阴影二、CSS3新增选择器关系选择器属性选择器结构性伪类选择器UI元素状态伪类选择器伪对象选择器关系选择器兄弟选择符E~F：选择E元素所有兄弟元素F属性选择器

在CSS2中引入了一些属性选择器，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了通配符的概念属性选择器功能描述E[att^="val"]选择匹配元素E，且E元素定义了属性att，其属性值以val开头的任何字符串E[att$="val"]选择匹配元素E，且E元素定义了属性att，其属性值以val结尾的任何字符串E[att*="val"]选择匹配元素E，且E元素定义了属性att，其属性任意位置包含了val，换句话说，字符串与属性值中的任意位置相匹配结构性伪类选择器选择符功能描述E:not(s)匹配除某个元

外的所有元素E:root匹配E元素在文档的根元素。E:last-child匹配父元素的最后一个子元素E。E:only-child匹配父元素仅有的一个子元素E。E:nth-child(n)匹配父元素的第n个子元素E。E:nth-last-child(n)匹配父元素的倒数第n个子元素E。E:

-of-type匹配同类型中的第一个同级兄弟元素E。E:last-of-type匹配同类型中的最后一个同级兄弟元素E。E:only-of-type匹配同类型中的唯一的一个同级兄弟元素E。E:nth-of-type(n)匹配同类型中的第n个同级兄弟元素E。E:nth-last-of-type(n)匹配同类型中的倒数第n个同级兄弟元素E。E:empty匹配没有任何子元素（包括text节点）的元素E。UI元素状态伪类选择器UI元素状态伪类选择器选择符功能描述E:checked匹配用户界面上处于选中状态的元素E。(用于inputtype为radio与checkbox时)E:enabled匹配用户界面上处于可用状态的元素E。E:disabled匹配用户界面上处于禁用状态的元素E。伪对象选择器伪对象选择器选择符功能描述E:-letter/E::-letter设置对象内的第一个字符的样式。E:-line/E::-line设置对象内的第一行的样式。E:before/E::before设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用E:after/E::after设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用E::selection设置对象被选择时的颜色。练1、将CSS3所有新增的选择器在不同的浏览器全部验证一遍三、CSS3新增属性CSS3新增文本属性CSS3新增颜色表示法CSS3新增文本属性属性描述hanging-punctuation规定标点字符是否位于线框之外punctuation-trim规定是否对标点字符进行修剪text-align-last设置如何对齐最后一行或紧挨着强制换行符之前的行text-emphasis向元素的文本应用重点标记以及重点标记的前景色text-justify规定当text-align设置为"justify"时所使用的对齐方法text-outline规定文本的轮廓text-overflow规定当文本溢出包含元素时发生的事情text-shadow向文本添加阴影text-wrap规定文本的换行规则word-break规定非 韩文本的换行规则word-wrap允许对长的不可分割的单词进行分割并换行到下一行注：黑色字体属性，目前主流浏览器都不支持CSS3新增文本属性属性描述text-decoration-line检索或设置对象中的文本装饰线条的位置text-decoration-color检索或设置对象中的文本装饰线条的颜色。text-decoration-style检索或设置对象中的文本装饰线条的形状。text-fill-color设置或检索对象中的文字填充颜色text-stroke复合属性。设置或检索对象中的文字的描边text-stroke-width设置或检索对象中的文字的描边厚度text-stroke-color设置或检索对象中的文字的描边颜色注：黑色字体属性，目前主流浏览器都不支持橙色字体属性，需要使用浏览器私有前缀作用：规定当

text-align被设置为text-align时的齐行方法文本属性-text-justify值描述auto浏览器决定齐行算法。none禁用齐行inter-word增加/减少单词间的间隔inter-ideograph用表意文本来排齐内容inter-cluster只对不包含 单词间隔的内容（比如亚洲语系）进行排齐distribute类似报纸版面，除了在东亚语系中最后一行是不齐行的kashida通过拉伸字符来排齐内容文本属性-text-overflow作用：规定当文本溢出包含元素时发生的事情使用：值描述clip修剪文本ellipsis显示省略符号来表示被修剪的文本string使用给定的字符串来代表被修剪的文本文本属性-text-shadow作用：设置文本的阴影效果默认为none使用：值描述h-shadow必需，水平阴影的位置。允许负值。v-shadow必需，垂直阴影的位置。允许负值blur可选，模糊的距离color可选，阴影的颜文本属性-word-break作用：规定自动换行的处理方法使用：值描述normal使用浏览器默认的换行规则break-all允许在单词内换行keep-all只能在半角空格或连字符处换行文本属性-word-wrap作用：规定自动换行的处理方法使用：值描述normal只在允许的断字点换行（浏览器保持默认处理)break-word在长单词或

URL

地址

进行换行文本属性-加私有前缀Text-fill-color：作用：指定文本填充颜色取值：颜色Text-stroke:作用：设置文本边框颜色取值：text-stroke-widthtext-stroke-color设置或检索对象中的文字的描边厚度设置或检索对象中的文字的描边颜色Color

Name:

red优点:

方便

,使用方便简单缺点:

数量少,不支持设置HEX方式:#FFFFFF优点:

颜色种类多缺点:

换算复杂,需要借助工具测量RGB方式:rgb（255，0，0）优点:

支持的颜色种类多,使用方便缺点:

换算复杂,需要借助工具测量CSS颜色表示法复习CSS3颜色表示法CSS1

&&

CSS2Color

name颜色名称方式HEX方式

十六进制RGB方式

三原色配色方式CSS3RGBA模式HSL模式HSLA模式的使用,A是Alpha透RGBA方式:这种方式与RGB方式相同,只是在基础上新增了明度语

则:

rgba(R,G,B,A);取值规范:R:0~255整数或百分数G:0~255整数或百分数B:0~255整数或百分数A:0~1小数举例:rgba(255,255,0,0.5);CSS3新增颜色表示法HSL方式(色轮记法):语

则:

HSL(H,S,L);取值规范:H(色调):

取值范围0~360

0或360表示红色蓝色S(饱和度):

取值为：0.0%

-100.0%

所谓的饱和度，指的其实是色彩的纯度，纯度越高，表现越鲜明，纯度较低，表现则较黯L(亮度):

取值为0.0%~100.0%举例:HSL(120,100%,100%);120表示绿色

240表示CSS3新增颜色表示法HSLA方式(色轮记法):与HSL方式是相同的只是多了语

则:

HSL(H,S,L,A);取值规范:H(色调):

取值范围0~360

0或360表示红色蓝色120表示绿色

240表示S(饱和度):

取值为：0.0%

-100.0%L(亮度):

取值为0.0%~100.0%A(

):

小数举例:HSL(120,100%,100%,0.5);CSS3新增颜色表示法CSS3颜色表示法transparent：特殊颜色值，表示透明色，可以直接当做颜色使用使用：color：transparent（设置字体颜色为透明）opacity：设置元素的使用：

opacity：0.1（取值0~1）filter：alpha（opacity=50）

取值0-100（IE）四、CSS3新增属性CSS3

新增边框属性-

边框CSS3新增边框属性-圆角边框CSS3新增边框属性-边框阴影CSS3新增边框属性属性功能描述border-image设置或检索对象的边框使用图像来填充border-image-source设置或检索对象的边框是否用图像定义样式或图像来源路径border-image-slice设置或检索对象的边框背景图的分割方式border-image-width设置或检索对象的边框厚度border-image-outset设置或检索对象的边框背景图的扩展border-image-repeat设置或检索对象的边框图像的平铺方式border-radius设置或检索对象使用圆角边框border-top-left-radius设置或检索对象左上角圆角边框border-top-right-radius设置或检索对象右上角圆角边框border-bottom-right-radius设置或检索对象右下角圆角边框border-bottom-left-radius设置或检索对象左下角圆角边框box-shadow设置或检索对象阴影box-reflect设置或检索对象的倒影CSS3

新增边框属性-

边框CSS3中新增的边框属性，使border具备宽度、颜色和风格属性外，还具备背景

属性语法格式border-image-source

：none/url(border-image-slice：分割方法border-image-width：边框宽度border-image-outset：扩展方式border-image-repeat：重复方式地址);CSS3

新增边框属性-

边框border-image-source作用：设置或检索对象的边框样式使用图像路径对应

特性：borderImageSource取值：none：无背景

，显示border-style所定义的边框样式效果url：使用绝对或相对地址指定图像CSS3

新增边框属性-

边框border-image-slice：该属性规定图像的上、右、下、左侧边缘的向内偏移，图像被分割为九个区域：四个角、四条边以及一个中间区域。除非使用了

fill，否则中间的图像部分会被丢弃。如果省略第四个数值/百分比，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同取值：number：数字值，代表图像中像素（如果是光栅图像）或矢量坐标（如果是矢量图像）%：

相对于图像尺寸的百分比值：图像的宽度影响水平偏移，高度影响垂直偏移fill：

保留边框图像的中间部分CSS3

新增边框属性-

边框border-image-width作用：用于指定使用多厚的边框来承载被裁剪后的图像对应

特性：borderImageWidth取值：%/浮点数/长度值

不允许有负值auto：如果auto值被设置，则border-image-width采用与border-image-slice相同的值CSS3

新增边框属性-

边框border-image-outset作用：用于指定边框图像向外扩展所定义的数值，即如果值为10px，则图像在原本的基础上往外延展10px再显示对应

特性：borderImageOutset取值：长度值/浮点数

不能为负数border-image-outset：10px；CSS3

新增边框属性-

边框border-image-repeat作用：用于指定边框背景图的填充方式。可定义0-2个参数值，即水平和垂直方向。如果2个值相同，可合并成1个，表示水平和垂直方向都用相同的方式填充边框背景图；如果2个值都为stretch，则可省略不写对应

特性：borderImageRepeat取值：stretch：拉伸方式填充边框背景图repeat：中心为原点以平铺方式填充，超出部分截断round：平铺方式填充，为了不出现截断的

，会适当调整

的大少，保证

完整显示space：平铺方式填充，为了不出现截断的

，会适当调整

间的间隔，保证

完整显示CSS3新增边框属性-圆角边框border-radius：设置或检索对象使用圆角边框取值：border-radius：参数1/参数2（提供两个参数，以‘/’分隔），参数1设置水平半径，参数2设置垂直半径，设置一个则两个默认相同参数1和参数2也可设置1~4个参数：垂直半径下右10px水平半径下右10pxCSS3新增边框属性-圆角边框border-radius四个角分开设置CSS3新增边框属性-边框阴影box-shadow：设置或检索对象阴影可以设定多组效果，每组参数值以逗号分隔CSS3新增边框属性-边框阴影box-reflect：可以对盒子模型进行倒影设置练习二1、div元素创建一个100px

*100px的盒子，使用新增的边框属性，完成下图操作五、CSS3新增属性CSS3新增背景属性CSS3新增渐变属性CSS3新增背景属性CSS3新增的背景属性属性功能描述background-origin设置或检索对象的背景图像显示的原点background-clip设置或检索对象的背景向外裁剪的区域background-size设置或检索对象的背景图像的尺寸大小CSS3新增背景属性background-origin背景

可以放置于

content-box、padding-box

或border-box

区域值描述padding-box背景图像相对于内边距框来定位border-box背景图像相对于边框盒来定位content-box背景图像相对于内容框来定位CSS3新增背景属性background-clip可以设置多背景值描述padding-box背景被裁剪到内边距框border-box背景被裁剪到边框盒content-box背景被裁剪到内容框CSS3新增背景属性background-size值描述length设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为"auto"percentage以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为“auto”cover把背景图像扩展至足够大，以使背景图像完

背景区域。背景图像的某些部分也许无法显示在背景定位区域中。contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域CSS3新增渐变属性的颜色之间进行平滑的CSS3提供了创建颜色渐变的方式，在两个或过渡浏览器支持的两种颜色渐变线性渐变

linear-gradient（to渐变方向或角度,第一种颜色,第二种颜色,…）径向渐变

radial-gradient(形状(可选)大小(可选)at位置(可选)，颜色1，颜色2)CSS3新增渐变属性线性渐变的方向和角度表示0deg90deg180deg270degCSS3新增渐变属性径向渐变六、CSS3新增属性CSS3新增盒子属性CSS3新增可伸缩盒子属性CSS3新增用户界面属性CSS3新增盒子属性CSS3新增的盒子属性属性描述overflow-x如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪overflow-y如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪overflow-style规定溢出元素的首选滚动方法rotation围绕由rotation-point属性定义的点对元素进行旋转rotation-point定义距离上左边框边缘的偏移点CSS3新增盒子属性overflow-x、overflow-y值描述visible不裁剪内容，可能会显示在内容框之外hidden裁剪内容

-

不提供滚

制scroll裁剪内容

-

提供滚

制auto如果溢出框，则应该提供滚

制no-display如果内容不适合内容框，则删除整个框no-content如果内容不适合内容框，则隐藏整个内容CSS3新增盒子属性overflow-style值：autopannerscrollber

为溢出元素添加滚动条move

用户能够直接移动元素的内容，通常用户能够用鼠标拖动内容Marquee

内容自主移动，不需任何用户

对其控制rotation值：角度rotation-point值：rotation-point（方向/百分比，方向/百分比）注：目前没有浏览器支持overflow-style、rotation与rotation-pointCSS3新增可伸缩盒子属性属性描述box-align规定如何对齐框的子元素box-direction规定框的子元素的显示方向box-flex规定框的子元素是否可伸缩box-flex-group将可伸缩元素分配到柔性分组box-lines规定当超出父元素框的空间时，是否换行显示box-ordinal-group规定框的子元素的显示次序box-orient规定框的子元素是否应水平或垂直排列box-pack规定水平框中的水平位置或者垂直框中的垂直位置注：目前没有任何浏览器支持以上属性，红色字体的属性可加浏览器私有前缀CSS3新增可伸缩盒子属性box-align(规定如何对齐框的子元素)值：startend对于正常方向的框，每个子元素的上边缘沿着框的顶边放置对于反方向的框，每个子元素的下边缘沿着框的底边放置对于正常方向的框，每个子元素的下边缘沿着框的底边放置对于反方向的框，每个子元素的上边缘沿着框的顶边放置center

均等地分割多余的空间，一半位于子元

上，另一半位于子元

下baseline如果box-orient是inline-axis或horizontal，所有子元素均与其基线对齐。拉伸子元素以填充包含块stretchCSS3新增可伸缩盒子属性box-direction(规定框的子元素的显示方向)值：normalreverseinherit以默认方向显示子元素以反方向显示子元素应该从子元素继承

box-direction属性box-flex(规定框的子元素是否可伸缩)值：value

元素的可伸缩性，柔性是相对的，例如box-flex为2的子元素为

box-flex为1的子元素的两倍。box-ordinal-group(规定框的子元素的显示次序)值：integer

一个整数，指示子元素的显示次序CSS3新增可伸缩盒子属性box-orient(规定框的子元素是否应水平或垂直排列)值：horizontalverticalinline-axisblock-axisinherit在水平行中从左向右排列子元素从上向下垂直排列子元素沿着行内轴来排列子元素（沿着块轴来排列子元素（为horizontal）为vertical）应该从父元素继承

box-orient属性的值box-pack(在水平行中从左向右排列子元素)值：start对于正常方向的框，首个子元素的左边缘被放在左侧对于相反方向的框，最后子元素的右边缘被放在右侧对于正常方向的框，最后子元素的右边缘被放在右侧对于相反方向的框，首个子元素的左边缘被放在左侧endcenter

均等地分割多余空间，其中一半空间被置于首个子元素前，另一半被置于最后一个子元素后justify

在每个子元

间分割多余的空间（首个子元素前和最后一个子元素后没有多余的空间）。CSS3新增可伸缩盒子属性CSS3新增用户界面属性属性描述appearance允许您将元素设置为标准用户界面元素的外观box-sizing允许您以确切的方式定义适应某个区域的具体内容icon为创作者提供使用图标化等价物来设置元素样式的能力nav-down规定在使用arrow-down导航键时向何处导航nav-index设置元素的tab键控制次序nav-left规定在使用arrow-left导航键时向何处导航nav-right规定在使用arrow-right导航键时向何处导航nav-up规定在使用arrow-up导航键时向何处导航outline-offset对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓resize规定是否可由用户对元素的尺寸进行调整appearance

允许您使元素看上去像标准的用户界面元素浏览器支持：主流浏览器不支持，Firefox、Safari、chrome支持带浏览器私有前缀的appearance取值：normaliconwindowbutton•将元素呈现为常规元素将元素呈现为图标（小

）将元素呈现为视口将元素呈现为按钮将元素呈现为一套供用户选择的选项field将元素呈现为输入字段CSS3新增用户界面属性box-si