web前端HTML5文本、颜色、边框 -.pptx

web前端开发-H5文本、颜色、边框01

本节课内容01HTML5+CSS3CSS文本属性复习CSS3新增文本属性CSS颜色属性复习CSS3新增颜色属性CSS边框属性复习CSS3新增边框属性

CSS文本属性复习01HTML5+CSS3white-space：对象内空格的处理方式direction：文本流的方向unicode-bidi：用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用

CSS文本属性复习01HTML5+CSS3white-space：对象内空格的处理方式 nowrap控制文本不换行 pre空白会被浏览器保留 pre-line合并空白保留换行符 pre-wrap保留空白正常换行

CSS文本属性复习01HTML5+CSS3direction：文本流的方向 ltr文本从左向右 rtl文本从右往左unicode-bidi：用于同一个页面里存在从不同方向读进的文本显示。 与direction属性一起使用 bidi-override

CSS3新增文本属性01HTML5+CSS3color:rgba();text-overflow:是否使用一个省略标记（...）标示对象内文本的溢出text-align:文本的对齐方式text-transform:文字的大小写text-decoration:文本的装饰线，复合属性text-shadow:文本阴影text-fill-color:文字填充颜色text-stroke:复合属性。设置文字的描边word-wrap:当前行超过指定容器的边界时是否断开转行word-break:规定自动换行的处理方法

CSS3新增文本属性01HTML5+CSS3rgba() rred 红色0-255 ggreen绿色0-255 bblue蓝色0-255 aalpha透明0-1

CSS3新增文本属性01HTML5+CSS3text-overflow:是否使用一个省略标记（...）标示对象内文本的溢出 clip：默认值无省略号 ellipsis：当对象内文本溢出时显示省略标记（...）。 注意：该属性需配合over-flow:hidden属性(超出处理)还有 white-space:nowrap(禁止换行)配合使用，否则无法看到效果

CSS3新增文本属性01HTML5+CSS3text-align:文本的对齐方式css1 left:默认值左对齐 right:右对齐 center:居中 justify：内容两端对齐。css3 start:开始边界对齐 end:结束边界对齐

CSS3新增文本属性01HTML5+CSS3text-transform:文字的大小写css1 none： 默认值无转换 capitalize： 将每个单词的第一个字母转换成大写 uppercase： 转换成大写 lowercase： 转换成小写

CSS3新增文本属性01HTML5+CSS3text-decoration:文本的装饰线，复合属性(只火狐支持) text-decoration-line： 指定文本装饰的种类。相当于CSS1时的text-decoration属性 text-decoration-style： 指定文本装饰的样式。 text-decoration-color： 指定文本装饰的颜色。 text-decoration:#F00doubleoverlineCSS3实例

CSS3新增文本属性01HTML5+CSS3text-shadow:文本阴影取值：xyblurcolor,...... x 横向偏移 y 纵向偏移 blur模糊距离(灰度) color阴影颜色案例:立体文字

CSS3新增文本属性01HTML5+CSS3text-fill-color:文字填充颜色text-stroke:复合属性。设置文字的描边 text-stroke-width:文字的描边厚度 text-stroke-color:文字的描边颜色

pre标签之内才会有显示word-wrap:当前行超过指定容器的边界时是否断开转行 normal：默认值 允许内容顶开或溢出指定的容器边界。brea