css样式表(五)课件

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2020/10/13,*,CSS样式表,2020/10/13,1,CSS样式表,CSS是Cascading Style Sheets的英文缩写，译成中文的意思是层叠样式表,作用：可以在同一网页中使用不同的网页样式，使网页的元素更丰富更多元化,2020/10/13,2,引用样式表的三种方式,直接插入式,内部文档头方式,外部文件方式,2020/10/13,3,直接插入式,作用范围：只作用于本标志,插入格式：,例：,2020/10/13,4,内部文档头插入方式,作用范围：定义的本网页文件内,插入格式：,pfont-family,:,宋体,;,color,:,red,;,prefont-family,:,黑体,;,color,:,yellow,2020/10/13,5,引用外部文件方式,作用范围：所有引用该外部文件的网页,插入方式：,2020/10/13,6,如何建立样式表,第一种方式：,HTML标志标示属性：属性值；标志属性：属性值；,第二种方式：,.,类名称标示属性：属性值；标志属性：属性值；,2020/10/13,7,如何建立样式表,第三种方式：,HTML标志1，HTML标志2，,标示属性：属性值；标志属性：属性值；,2020/10/13,8,用CSS样式表设定字体样式,设置字体的样式：,font-family:黑体/仿宋体/,设置字体的风格：,font-style:normal / itallic,设置字体的加粗：,font-weight:bold/bolder/lighter/100-900,设置字体的大小：,font-size:/,2020/10/13,9,用CSS样式表设置边框样式,设置边框颜色：,border-color：颜色值；,设置边框粗细：,border-width：数值,设置边框的样式：,border-style：solid/double/dotted/dashed,2020/10/13,10,如何设置边框不显示,border-top：none；,border-bottom ：none；,border-left ：none；,border-right ：none；,2020/10/13,11,用CSS样式表设置超链接的颜色,未链接前的颜色,a,:,linktext-decoration,:,none,;,color,:,blue,链接过后的颜色,a,:,visitedtext-decoration,:,none,;,color,:,red,链接活动时的颜色,a,:,activetext-decoration,:,none,;,color,:,green,链接盘旋时的颜色,a,:,hovertext-decoration,:,none,;,color,:,yellow,2020/10/13,12,设置边框颜色,分别设定边框颜色：,border-top-color ：颜色值；,border-bottom-color ：颜色值；,border-left-color ：颜色值；,border-right-color ：颜色值；,2020/10/13,13,设定文本样式,设定文本的样式：,text-decoration:underline/overline/line-throungh/none,设定文本的对齐：,text-align:left/right/center/justify,2020/10/13,14,用CSS样式表在HTML标签内，实现元素隐藏,第一种方式：,隐藏：style=,visibility,:,hidden,显示：style=,visibility,:,visible,第二种方式,隐藏：style=,display,:,none,显示：style=,display,:,2020/10/13,15,用CSS样式表在JavaScript内，实现元素隐藏,第一种方式,隐藏：,元素名称,.,style,.,visibility=hidden,显示：,元素名称.style.visibility=visible,第二种方式,隐藏：,元素名称,.,style,.,display=none,显示,元素名称.style.display=,2020/10/13,16,用CSS样式表实现定位,绝对定位,HTML标志position,:,absolute,;,left,:,像素值,;,top,:,像素值,;,z-index,:,数值,相对定位,HTML标志position:relative,;,left,:,像素值,;,top,:,像素值,;,z-index,:,数值,2020/10/13,17,用CSS样式表设置滚动条,body,scrollbar-face-color：颜色值；/滚动条页面颜色,scrollbar-track-color ：颜色值；,/滚动条底面颜色,scrollbar-arrow-color ：颜色值；,/滚动条两端箭头颜色,scrollbar-highlight-color ：颜色值；,/滚动条斜面和左面颜色,scrollbar-shadow-color ：颜色值；,/滚动条下斜面和右面颜色,2020/10/13,18,用CSS样式表设置背景图片,设置背景图片,background-image,:,url(绝对路径/相对路径)；,设置图片不平铺,background-repeat,:,no-repeat,;,设置图片的位置是固定的,background-attachment,:,fixed,;,设置图片的位置是居中的,background-position,:,center,;,2020/10/13,19,谢谢您的指导,THANK YOU FOR YOUR GUIDANCE.,感谢阅读！为了方便学习和使用，本文档的内容可以在下载后随意修改，调整和打印。欢迎下载！,汇报人：,XXXX,日期：,20XX,年,XX,月,XX,日,20,