web基础教程之CSS篇.pptVIP

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 内联样式style=color:sienna; margin-left:20pxThis is a paragraph/p p 三种方式的比较 内联样式（在 HTML 元素内部）：拥有最高的优先权却将表现和内容混杂在一起。 内部样式表（位于 head 标签内部） 外部样式表：拥有的优先权最低但是却做到了表现和内容的分离。 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＝ID名。 CSS 类选择器 类选择器：以点号开始，为标有class的HTML元素指定特定的样式。 直接定义class .类名{ 标志属性：属性值； 标志属性：属性值；…… 标志属性：属性值} 引用的方法： HTML标志 CLASS=类名 CSS 伪类 CSS伪类：用于向某些选择器添加特殊的效果。 伪类的语法： selector:pseudo-class{property:value;} 链接伪类： a:link 设置链接本来的颜色 a:visited 设置链接访问过后的颜色 a:hover 设置链接在鼠标悬停时的颜色 a:active 设置链接被激活的颜色 注意：设置连接的顺序一定要是：l v h a 伪类和CSS类 :first-child伪伪类可以与 CSS 类配合使用： CSS文件中： a.red:visited {color: #FF0000} HTML页面中： a class=red href=“dss.htmldss/a 假如上面的例子中的链接被访问过，那么它将显示为红色。 类对另一个元素的第一个子元素进行匹配。Firstchild1.html、firstchild2.html CSS伪元素 CSS伪元素：用于将特殊的效果添加到某些选择器 伪元素的语法： 选择器:伪元素{属性:值;} 伪元素属性： :first-letter 向文本的第一个字母添加特殊样式。 :first-line 向文本的首行添加特殊样式。 :before 在元素内容之前插入内容。 :after 在元素内容之后插入内容。 CSS改变鼠标形状 cursor 属性规定当指向某元素之上时显示