web基础教程CSS篇v1.0.ppt

L o g o 课程名称 web 基础课程(css) 讲师：董爽爽 中软培训中心 邮件：dongshsh@ 层叠样式表(CSS) 第七章 HTML 样式单 CSS简介 什么是CSS： CSS层叠样式表(Cascading Style Sheets) CSS的作用： 定义如何显示 HTML 元素 能够解决内容与表现分离的问题div+css 外部样式表通常存储在CSS 文件中极大提高工作效率 多个样式定义可层叠为一 （层叠） CSS基本的语法 CSS的基本语法： HTML 标志 { 标志属性：属性值；标志属性：属性值；标志属性：属性值；…… } Selector{Property:value;} 例如： body{color:blue;} b{color:red;} i{color:yellow;} CSS创建 插入样式表的方法有三种： 外部样式表 head link rel=stylesheet type=text/css href=style.css / /head 内部样式表 style type=text/css hr{color:sienna;} p{margin-left:20px;} body{background-image:url(images/dss.gif);} /style 内联样式 p style=color:sienna; margin-left:20pxThis is a paragraph/p 三种方式的比较 内联样式（在 HTML 元素内部）：拥有最高的优先权却将表现和内容混杂在一起。 内部样式表（位于 head 标签内部） 外部样式表：拥有的优先权最低但是却做到了表现和内容的分离。 CSS选择器 Html selector Class selector Id selector 关联 selector 组合 selector 伪类 selector CSS选择器 Html selector CSS选择器 class selector 使用时要通过p class=“one”的属性设置关联到样式 CSS选择器 class selector 任何标签都可以通过class=“one”关联样式 CSS选择器 id selector Id selector 只能被页面的元素引用，不能被重复调用 关联 selector CSS选择器 组合 selector CSS选择器 伪类 selector a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF} CSS选择器 CSS分组使用样式表 当多个选择器拥有相同的属性和属性值时，我们可以分组来定义他们。 Example: h1,h2,h3,h4,h5,h6{ color:red; text-decoration:underline; font-family:”黑体”; } CSS派生选择器 派生选择器：根据文档的上下文关系来确定某个标签的样式。 派生选择器的作用：使 HTML 代码变得更加整洁 Example: li strong{ font-style: italic; font-weight: normal; } CSS ID选择器 ID选择器：可以为标有特定ID的 HTML 元素指定特定的样式。 设定在ID上的css格式为 #id名 { 标志属性：属性值； 标志属性：属性值；…… 标志属性：属性值} 引用的方法： 标志　ID＝ID名。 CSS 类选择器 类选择器：以点号开始，为标有class的HTML元素指定特定的样式。 直接定义class .类名{ 标志属性：属性值； 标志属性：属性值；…… 标志属性：属性值} 引用的方法： HTML标志 CLASS=类名 CSS 伪类 CSS伪类：用于向某些选择器添加特殊的效果。 伪类的语法： selector:pseudo-class{property:value;} 链接伪类： a:link 设置链接本来的颜色 a:visited 设置链接访问过后的颜色 a:hover 设置链接在鼠标悬停时的颜色 a:active 设置链接被激活的颜色