第一章：css入门.ppt

* 一、Div+CSS标准的优点: 1. 大大缩减网页代码，提高了页面载入速度,缩减带宽成本; 2.结构清晰，使整个站点更容易被有哪些信誉好的足球投注网站引擎有哪些信誉好的足球投注网站到。 3.缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。 4.使站点对浏览者和浏览器更具亲和力。 5.CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。 6.在世界上越来越多人采用WEB 标准时，掌握CSS可以提高网页 设计师的职场竞争力。 对学者的要求： 1. 具有一定网页制作基础，希望学员对HTML基本元素有所了解。 2.具有钻研的精神和热情。 备注：上面两点第一点权重占10%，第二点占90%。 小小例子，CSS这么方便？ html head title传统页面/title /head body h2font color=#0000FF face=黑体CSS标记1/font/h2 h2font color=#0000FF face=黑体CSS标记2/font/h2 h2font color=#0000FF face=黑体CSS标记3/font/h2 h2font color=#0000FF face=黑体CSS标记4/font/h2 /body /html 1.html html head titleCSS小露头角页面/title style !-- h2{ font-family:幼圆; color:red; } -- /style /head body h2CSS标记1/h2 h2CSS标记2/h2 h2CSS标记3/h2 h2CSS标记4/h2 /body /html 2.html 二、CSS、HTML、DIV的定义 CSS：(Cascading Style Sheet) ,中文译为层叠样式表，用来设置网页 样式的规范，定义网页的形式。 HTML：用来定义网页的内容和结构。 DIV：是用来为HTML文档内大块（block-level）的内容提供结构和背景。 通常一个网页可以分为几个大的DIV块。 备注：一个网页的内容通常写在html里面，用div 来把整个页面划分为几大 部分，然后用css来设置各个部分内容的具体表现形式。 三、如何用CSS控制页面？ 1.内嵌式 在head中写入样式 head style type=text/css !-- .STYLE1 {color: #FFFFFF} -- /style /head 如前面的例子。 2.行内样式 html head title行内样式/title /head body p style=color:#FF0000; font-size:20px; text-decoration:underline;正文内容1/p p style=color:#000000; font-style:italic;正文内容2/p p style=color:#FF00FF; font-size:25px; font-weight:bold;正文内容3/p /body /html 3.html 3.链接式:使用频率最高,最实用的方法。它将html页面内容本身和css代码分离成两个或多个文件，使得前期制作和后期维护十分方便，使网站的后台技术人员和美工设计者很好的分工合作。同时同一个css文件可以链接到几个网页甚至整个网站的所有页面，使得整个网站整体风格统一协调。它也是本门课程讲解的重点。 head link rel=stylesheet rev=stylesheet href=style.css type=text/css/ /head 例：链接式网页： html head title使用了链接样式的网页！/title link href=1.css type=text/css rel=stylesheet /head body h2CSS标题1/h2 p紫色、粗体、下划线、25px的效果1/p h2CSS标题2/h2 p紫色、粗体、下划线、25px的效果2/p /body /html 4.html 1.css文件的内容： h2{ color:#0000FF; } p{ color:#FF00FF; text-decoration:underline; font-weight:bold; font-size:20px; } 4.导入式 head style type=text/css !-- @import url(1.css); -- /style /head 和链接式很相似，在一个网页中可以同时导入几个样式表