初识cs.ppt

* * * * * * * * * * * * * * * * * * * * * * 初识CSS 使用CSS制作网页的优点是什么？ CSS的基本语法结构是什么？ HTML中引入CSS样式的几种方式是什么？ 提问 会使用CSS三种基本的选择器设置字体大小和颜色 会使用行内样式，内部样式表和外部样式表3种方式为HTML文档添加CSS样式 会使用复合选择器为特定的网页元素添加CSS样式 理解CSS继承特性，并掌握其在CSS样式中的应用 CSS：层叠样式表（Cascading Style Sheet） CSS在网页中的应用 内容与表现分离 网页的表现统一，容易修改 丰富的样式，使得页面布局更加灵活 减少网页的代码量，增加网页的浏览速度，节省网络带宽 运用独立于页面的CSS，有利于网页被搜索引擎收录 选择器 { 声明1; 声明2; …… } CSS基本语法结构 语法 h1 { font-size:12px; color:#F00; } 选择器 声明 属性 值 CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上 经验 style标签 style type=text/css h1 { font-size:12px; color:#F00; } /style 标签选择器 类选择器 ID选择器 HTML标签作为标签选择器的名称 h1…h6、p、img/ p { font-size:16px;} 标签选择器 声明 属性 值 语法 标签选择器 类选择器 ID选择器 .class { font-size:16px;} 类选择器 声明 属性 值 语法 类名称 标签名 class= 类名称标签内容/标签名 标签选择器 类选择器 ID选择器 #id { font-size:16px;} id选择器 声明 属性 值 语法 id名称 标签选择器直接应用于HTML标签 类选择器可在页面中多次使用 ID选择器在同一个页面中只能使用一次 常见问题及解决办法 代码规范问题 共性问题集中讲解 行内样式 内部样式表 外部样式表 行内样式 使用style属性引入CSS样式 h1 style=color:red;style属性的应用/h1 p style=font-size:14px; color:green;直接在HTML标签中设置的样式/p 示例 内部样式表 CSS代码写在head的style标签中 优点 方便在同页面中修改样式 缺点 不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底 外部样式表 CSS代码保存在扩展名为.css的样式表中 HTML文件引用扩展名为.css的样式表，有两种方式 链接式 导入式 外部样式表 链接外部样式表 head …… link href=style.css rel=stylesheet type=text/css / …… /head 文件路径 使用外部样式表 文件类型 语法 外部样式表 导入外部样式表 head …… style type=text/css !-- @import url(style.css); -- /style /head 语法 链接式与导入式的区别 link/标签属于XHTML，@import是属于CSS2.1 使用link/链接的CSS文件先加载到网页当中，再进行编译显示 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中 @import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的。 行内样式内部样式表外部样式表 ID选择器类选择器标签选择器 CSS复合选择器 后代选择器 交集选择器 并集选择器 CSS继承特性 后代选择器 在CSS选择器中通过嵌套的方式，对特殊位置的HTML标签进行声明 外层的标签写在前面，内层的标签写在后面，之间用空格分隔 标签嵌套时，内层的标签成为外层标签的后代 h3 strong{color:blue; font-size:36px;} 交集选择器 由两个选择器直接连接构成，选中二者各自元素范围的交集 第一个必须是标签选择器，第二个必须是类选择器或者ID选择器 选择器之间不能有空格，必须连续书写 p.txt{color:blue; line-height:28px;} 并集选择器 多个选择器通过逗号连接而成 利用并集选择器同时声明风格相同样式 h3,.first,.second,#end{ font-size:16px; color:green; font-weight:normal; } 什么是继承 子标签可以继承父标