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