Java WEB 五

CSS

三、CSS常用属性

16、列表(List) 属性

属性	说明	CSS
list-style	在一个声明中设置所有的列表属性	1
list-style-image	将图象设置为列表项标记	1
list-style-position	设置列表项标记的放置位置	1
list-style-type	设置列表项标记的类型	1

17、外边距(Margin) 属性

属性	说明	CSS
margin	在一个声明中设置所有外边距属性	1
margin-bottom	设置元素的下外边距	1
margin-left	设置元素的左外边距	1
margin-right	设置元素的右外边距	1
margin-top	设置元素的上外边距	1

18、字幕(Marquee) 属性

属性	说明	CSS
marquee-direction	设置内容移动的方向	3
marquee-play-count	设置内容移动多少次	3
marquee-speed	设置内容滚动的速度有多快	3
marquee-style	设置内容移动的样式	3

19、多列(Multi-column) 属性

属性	说明	CSS
column-count	指定元素应该分为的列数	3
column-fill	指定如何填充列	3
column-gap	指定列之间的差距	3
column-rule	对于设置所有column-rule-*属性的简写属性	3
column-rule-color	指定列之间的颜色规则	3
column-rule-style	指定列之间的样式规则	3
column-rule-width	指定列之间的宽度规则	3
column-span	指定元素应该跨越多少列	3
column-width	指定列的宽度	3
columns	缩写属性设置列宽和列数	3

20、页面媒体(Paged Media) 属性

属性	说明	CSS
fit	如果其宽度和高度属性都不是auto给出一个提示，如何大规模替换元素	3
fit-position	判定方框内对象的对齐方式	3
image-orientation	指定用户代理适用于图像中的向右或顺时针方向的旋转	3
page	指定一个元素应显示的页面的特定类型	3
size	指定含有BOX的页面内容的大小和方位	3

21、定位（Positioning） 属性

属性	说明	CSS
bottom	设置定位元素下外边距边界与其包含块下边界之间的偏移	2
clear	规定元素的哪一侧不允许其他浮动元素	1
clip	剪裁绝对定位元素	2
cursor	规定要显示的光标的类型（形状）	2
display	规定元素应该生成的框的类型	1
float	规定框是否应该浮动	1
left	设置定位元素左外边距边界与其包含块左边界之间的偏移	2
overflow	规定当内容溢出元素框时发生的事情	2
position	规定元素的定位类型	2
right	设置定位元素右外边距边界与其包含块右边界之间的偏移	2
top	设置定位元素的上外边距边界与其包含块上边界之间的偏移	2
visibility	规定元素是否可见	2
z-index	设置元素的堆叠顺序	2

22、分页（Print） 属性

属性	说明	CSS
orphans	设置当元素内部发生分页时必须在页面底部保留的最少行数	2
page-break-after	设置元素后的分页行为	2
page-break-before	设置元素前的分页行为	2
page-break-inside	设置元素内部的分页行为	2
widows	设置当元素内部发生分页时必须在页面顶部保留的最少行数	2

23、Ruby 属性

属性	说明	CSS
ruby-align	控制Ruby文本和Ruby基础内容相对彼此的文本对齐方式	3
ruby-overhang	当Ruby文本超过Ruby的基础宽，确定ruby文本是否允许局部悬置任意相邻的文本，除了自己的基础	3
ruby-position	它的base控制Ruby文本的位置	3
ruby-span	控制annotation 元素的跨越行为	3

24、语音（Speech） 属性

属性	说明	CSS
mark	缩写属性设置mark-before和mark-after属性	3
mark-after	允许命名的标记连接到音频流	3
mark-before	允许命名的标记连接到音频流	3
phonemes	指定包含文本的相应元素中的一个音标发音	3
rest	一个缩写属性设置rest-before和rest-after属性	3
rest-after	一个元素的内容讲完之后，指定要休息一下或遵守韵律边界	3
rest-before	一个元素的内容讲完之前，指定要休息一下或遵守韵律边界	3
voice-balance	指定了左，右声道之间的平衡	3
voice-duration	指定应采取呈现所选元素的内容的长度	3
voice-pitch	指定平均说话的声音的音调（频率）	3
voice-pitch-range	指定平均间距的变化	3
voice-rate	控制语速	3
voice-stress	指示着重力度	3
voice-volume	语音合成是指波形输出幅度	3

25、表格（Table） 属性

属性	说明	CSS
border-collapse	规定是否合并表格边框	2
border-spacing	规定相邻单元格边框之间的距离	2
caption-side	规定表格标题的位置	2
empty-cells	规定是否显示表格中的空单元格上的边框和背景	2
table-layout	设置用于表格的布局算法	2

26、文本（Text） 属性

属性	说明	CSS
color	设置文本的颜色	1
direction	规定文本的方向 / 书写方向	2
letter-spacing	设置字符间距	1
line-height	设置行高	1
text-align	规定文本的水平对齐方式	1
text-decoration	规定添加到文本的装饰效果	1
text-indent	规定文本块首行的缩进	1
text-transform	控制文本的大小写	1
unicode-bidi		2
vertical-align	设置元素的垂直对齐方式	1
white-space	设置怎样给一元素控件留白	1
word-spacing	设置单词间距	1
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色。	1
hanging-punctuation	指定一个标点符号是否可能超出行框	3
punctuation-trim	指定一个标点符号是否要去掉	3
text-align-last	当 text-align 设置为 justify 时，最后一行的对齐方式。	3
text-justify	当 text-align 设置为 justify 时指定分散对齐的方式。	3
text-outline	设置文字的轮廓。	3
text-overflow	指定当文本溢出包含的元素，应该发生什么	3
text-shadow	为文本添加阴影	3
text-wrap	指定文本换行规则	3
word-break	指定非CJK文字的断行规则	3
word-wrap	设置浏览器是否对过长的单词进行换行。	3

27、2D/3D 转换属性

属性	说明	CSS
transform	适用于2D或3D转换的元素	3
transform-origin	允许您更改转化元素位置	3
transform-style	3D空间中的指定如何嵌套元素	3
perspective	指定3D元素是如何查看透视图	3
perspective-origin	指定3D元素底部位置	3
backface-visibility	定义一个元素是否应该是可见的，不对着屏幕时	3

28、过渡（Transition） 属性

属性	说明	CSS
transition	此属性是 transition-property、transition-duration、transition-timing-function、transition-delay 的简写形式。	3
transition-property	设置用来进行过渡的 CSS 属性。	3
transition-duration	设置过渡进行的时间长度。	3
transition-timing-function	设置过渡进行的时序函数。	3
transition-delay	指定过渡开始的时间。	3

29、用户外观(User-interface) 属性

属性	说明	CSS
appearance	定义元素的外观样式	3
box-sizing	允许您为了适应区域以某种方式定义某些元素	3
icon	为元素指定图标	3
nav-down	指定用户按向下键时向下导航的位置	3
nav-index	指定导航（tab）顺序。	3
nav-left	指定用户按向左键时向左导航的位置	3
nav-right	指定用户按向右键时向右导航的位置	3
nav-up	指定用户按向上键时向上导航的位置a	3
outline-offset	设置轮廓框架在 border 边缘外的偏移	3
resize	定义元素是否可以改变大小	3

四、CSS 听觉属性

属性	设置	值	CSS
azimuth	设置声音应该来自哪里	angle、left-side、far-left、left、center-left、center、center-right、right、far-right、right-side、behind、leftwards、rightwards	2
cue	在一个声明中设置cue属性	cue-before、cue-after	2
cue-after	指定要播放的声音在一个元素的内容后面	none、url	2
cue-before	指定要播放的声音在一个元素的内容前面	none、url	2
elevation	设置声音应该来自哪里	angle、below、level、above、higher、lower	2
pause	在一个声明中设置pause属性	pause-before、pause-after	2
pause-after	在一个元素的内容之后，指定暂停	time、%	2
pause-before	在一个元素的内容之前，指定暂停	time、%	2
pitch	指定讲话声音	frequency、x-low、low、medium、high、x-high	2
pitch-range	指定讲话声音的变化。（单调的声音或动态的声音？）	number	2
play-during	指定在读一个元素的内容时要播放的声音	auto、none、url、mix、repeat	2
richness	指定丰富的讲话声音。（浑厚的声音或细的声音？）	number	2
speak	指定内容是否会提供听觉方式	normal、none、spell-out	2
speak-header	此属性设置或检索表格标题是在所有的单元格之前发声，还是到一个不与之关联的单元格就结束发声。	always、once	2
speak-numeral	设置或检索数字如何发音。	digits、continuous	2
speak-punctuation	设置或检索标点字符如何发音	none、code	2
speech-rate	指定发言速度	number、x-slow、slow、medium、fast、x-fast、faster、slower	2
stress	讲话声音在指定的地方"重音"	number	2
voice-family	设置或检索当前声音类型	specific-voice、generic-voice	2
volume	指定发言的音量	number、%、silent、x-soft、soft、medium、loud、x-loud	2

举例：
听觉呈现通常会把文档转化为纯文本，然后传给屏幕阅读器（可读出屏幕上所有字符的一种程序）。
听觉样式表的一个例子：

h1,h2,h3,h4{
	voice-family:male;
	richness:80;
	cue-before:url("beep.au")
}

上面的例子用语音合成器播放声音，开头有一个男性的声音说话。

总结：

      今天算是把CSS的基本属性更新完了！属性虽然有很多，但是经常用的属性其实并不是很多！有个大概的印象，知道某个属性有某些作用就足矣了！如果实在想不起来的话可以查一下使用手册和开发文档！这些都是开发中必不可少的利器。
      在CSS属性当中主要用的是视觉上的效果，听觉上的效果也会使用到！不过用的相对较少，但并不是说不会使用了就可以不去了解的，如果哪天用到了再去查手册岂不是大海捞针，白白浪费时间吗？还不如在刚开始的时候过一眼混个眼熟，等到真正用到的时候，就能够快速的定位到某个属性到底归类在某个模块下，查找起来也很方便。
      刚开始学习前端的时候我也很迷惑！也有很多的疑问？也不知道CSS属性当中还有听觉上的效果。直到后来学习到了这块才发现CSS真的是太贴心了！CSS的世界真的很精彩！它的精彩之处不仅仅在于视觉做的有多么好看！而且还在于它考虑到特殊人群对听觉的需求和使用！这是其他语言所很难做到的一点。
      其实在我们生活当中，并不是每个人都是幸运的！有些人可能在天生失明；或者是后天因素导致的失明；这些人应当得到我们的帮助和照顾！相信在生活当中有些细节就能体现出社会对失明人士的帮助和照顾，比如：交通灯的提醒功能、人行道和公共场合的盲道等等。深刻的记得曾在初三的时候阅读过名著海伦·凯勒所写的《假如给我三天光明》，看不见的痛苦真的是无法被人承受的！因此我们要珍惜我们生活中的每一天，相比不幸的人来说：我们已经很幸运了！我们又有什么理由不去珍惜呢？当然在CSS代码当中也有语音提示功能来帮助他们快速的操作某些功能！写代码并不是说写的完美就行的，还要体现其健壮性和普遍性，能够让更多的客户和使用者认可，这才是真正意味上的互联网行业成功！
      今天的博客先更新到这里咯！有什么不对的地方或者有什么建议！欢迎小伙伴们在评论区留言哦！
      如果本篇博客对大家有帮助，希望大家能够点赞、关注！在此先谢过各位小伙伴了！
      最后，愿我们都能在各行各业中能够取得不同的成就，不负亲人、朋友、老师、长辈和国家的期望！能够用自身的所学知识为国家贡献出自己的一份力量！一起加油！
                                                                                                                       2021年6月17日夜