1、CSS基础知识及应用,,信永国际,,CSS基础知识及应用,CSS入门CSS基本语法 CSS高级语法CSS选择器如何创建CSSDIV+CSS页面布局（案例分析）,,CSS入门,CSS英语意思是：Cascading Style Sheets，即层叠样式表 样式定义如何显示HTML元素 样式通常存储在样式表中 把样式添加到HTML中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在CSS文件中 外部样式表可以层叠为一,,CSS基本语法,CSS 语法由三部分构成:选择器,属性和值selector property: value 例如：body color: blue
2、 值的不同写法和单位 p color: #ff0000; 也可简写：#f00p color: red; 记得写引号(如果值为若干单词，则要给值加引号)p font-family: “sans serif“; 多重声明： p text-align: center;color: black; font-family: arial; ,,CSS高级语法,选择器的分组h1,h2,h2,h3,h5,h6 color: green; 继承：通过 CSS 继承，子元素将继承最高级元素所拥有的属性 摆脱继承body font-family: Verdana, sans-serif; p font-family
3、: Times, “Times New Roman“, serif; ,,CSS选择器,派生选择器id选择器类选择器,,CSS派生选择器,通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。 li font-style: italic; li strong font-style: normal; 查看例子,,CSS派生选择器-示例,派生选择器简单示例strong color: red;h2 color: red;h2 strong color: blue;The strongly emphasized word in this paragraph is what color.Th
4、is subhead is what color.The strongly emphasized word in this subhead is what color.查看例子,,CSS id 选择器,id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以”#”定义。 #red color:red; #green color:green; 这个段落是红色。 这个段落是绿色。注：id 属性尽可能在每个 HTML 文档中只出现一次 查看例子,,id 选择器和派生选择器,在现代布局中，id 选择器常常用于建立派生选择器。 p text-align: left; #tabl
5、e p font-style: italic; text-align: right; margin-top: 5px; 查看例子,,CSS 类选择器,在 CSS 中，类选择器以一个点号显示：.center text-align: center 例如：This heading will be center-aligned This paragraph will also be center-aligned. 注：不要使用数字起始类名！它无法在 Mozilla 或 Firefox 中起作用。类选择器和id选择器一样被用做派生选择器,,如何创建 css,如何插入样式表当读到一个样式表时，浏览器会根据
6、它来格式化 HTML 文档。插入样式表的方法有三种： . 外部样式表 . 内部样式表 . 内联样式,,外部样式表,外部样式表引用格式：外部样式表可以在任何文本编辑器进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。hr color: #ff0000; p margin-left: 20px; body background-image:url(“imgs/40.gif“); 注：不要在属性值和单位值之间有空格；,,内部样式表,当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 标签在头部分定义内部样式表.hr color: #ff0000; p m
7、argin-left: 20px; body background-image: url(“imgs/40.gif“); ,,内联样式,由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。 要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。 例如：This is a paragraph 查看例子,,多重样式,如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。 外部样式表拥有针对 h3 选择器的三个属性：h3 color: red;
8、 text-align: left; font-size: 8pt; 内部样式表拥有针对 h3 选择器的两个属性： h3 text-align: right; font-size: 20pt; 假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：color: red; text-align: right; font-size: 20pt;,,层叠次序,当同一个HTML元素被不止一个样式定义时，会使用哪个样式呢？ 浏览器缺省设置 外部样式表 内部样式表(位于标签内部) 内联样式(在HTML元素内部)注：其中数字 4 拥有最高的优先权查看例子,,DIV+CSS页面布局（盒子
9、模型）,名词解释： Content:内容 Padding:内容与边框之间 的部份,Border:边框 Margin:每个盒子间的距离,,DIV+CSS页面布局（设计思路）,标准化页面设计思路： 1、理解实现结构与表现分离（关键点） 2、采用div标签定义页面结构 3、运用CSS排版、渲染色彩等 4、填充补全文字、图像等内容,,DIV+CSS页面布局（案例分析）,第一步：构思1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息,构思图,,DIV+CSS页面布局（案例分析）,第二步：布局分析DIV结构如下： bod
10、y #Container /*页面层容器*/ #Header /*页面头部*/ #PageBody /*页面主体*/ #Sidebar /*侧边栏*/ #MainBody /*主体内容*/ #Footer /*页面底部*/,布局分析图,,DIV+CSS页面布局（案例分析）,第三步：HTML基本结构DIV+CSS页面布局 color=#aaaaaa/color color=#aaaaaa/color color=#aaaaaa/color color=#aaaaaa/color color=#aaaaaa/color color=#aaaaaa/color ,,DIV+CSS页面布局（案例分析）
11、,第四步：CSS文件/*基本信息*/body font:12px Tahoma;margin:0px;text-align:center;background:#FFF;a:link,a:visited font-size:12px;text-decoration: none;a:hover/*页面层容器*/#container width:800px;height:600px;margin:10px auto/*页面头部*/#header background:url(/imgs/logo.gif) no-repeat#menu padding:20px 20px 0 0#menu ul f
12、loat:right;list-style:none;margin:0px;#menu ul li float:left;display:block;line-height:30px;margin:0 10px#menu ul li a:link,#menu ul li a:visited font-weight:bold;color:#666#menu ul li a:hover.menuDiv width:1px;height:28px;background:#999#banner background:url(/imgs/banner.jpg) 0 30px no-repeat;width:730px;margin:auto;height:240px;border-bottom:5px solid #EFEFEF;clear:both/*页面主体*/#pagebody width:800px;margin:0 auto;height:400px;background:#0033FF/*页面底部*/#footer width:800px;margin:0 auto;height:50px;background:#00FFFF,谢 谢,
