TP02[CSS样式].pptVIP

网站建设及其优化 本章内容 CSS样式表 CSS样式表 什么是CSS CSS有什么用 CSS与HTML的关系 CSS怎么用 CSS样式表 CSS样式表 CSS样式表 CSS样式表 CSS样式表 CSS样式表 CSS样式表 CSS样式表 CSS样式表 CSS样式表 CSS样式表 CSS样式表 随堂测试 随堂测试 随堂测试 随堂测试 随堂测试 随堂测试 本章回顾 什么是CSS Cascading Style Sheets， 层叠样式表 CSS有什么用 能够控制、改变和美化页面效果 CSS与HTML的关系 CSS可以控制HTML元素显示效果 CSS怎么用 用在哪？怎么用？ 课后练习 熟练掌握CSS相关语法 熟练掌握CSS的写法 了解相关CSS单位 （px、pt、em） CSS样式表 CSS基础 这些都是你需要掌握和熟练应用的 本章结束 Mail : zhangleicom * ——CSS样式表 CSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。 什么是CSS？ CSS有什么用？ CSS具有对网页的布局、颜色、背景、宽度、高度、字体进行控制，让网页按照美工设计布局的更加美观漂亮。 HTML通过自身语法结构（html标签结构），显示文字、图片、动画（flash）、视频或音频音乐。而CSS是控制HTML内这些具体内容的怎么显示、怎么排版、颜色、大小、宽度、高度、左右布局等显示样式。最终实现漂亮的各式各样的页面内容 CSS与HTML有什么关系呢？ 搞清楚HTML与CSS关系很重要，也认识了CSS。 首先CSS是由一定意义和作用的英文单词、数值组成， 而单词、数值分别又有规律有固定的属性和用法。 CSS长什么样呢？ CSS怎么用呢？ 用在哪？ 用在HTML文件中 用法是什么？ CSS用法 － （1） 外部样式 这种形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式 内部样式 内部样式表，它是以style和/style结尾，写在源代码的head标签 内。这样的样式表只能针对本页有效。不能作用于其它页面 CSS用法 － （2） CSS用法 － （3） 行内样式 行内样式只针对标签内的元素有效，因其没有和内容相分离，所以不建议使用。可用于本地测试或者实验性用途。 行内样式以style为标记，参数写在HTML标签开始位置。 CSS用法 － （4） 导入样式 导入样式是以@import url标记所链接的外部样式表，它一般常用在另一个样式表即CSS文件内部。 优点：可以使css文件的重用性加强。 CSS用法总结 外部样式 css是一个单独的文件，如reset.css 内部样式 css只作用于当前页面，其余页面无作用 行内样式 只针对该标签内元素有作用，调试中常用 导入样式 在单独的css中导入另外的单独css，代码重用 Class 在CSS中也书面语也叫“类”。在CSS样式中以小写的“点”及“.”来命名如： .css5{属性：属性值;} 命名好的CSS又叫css选择器。 ID ID只是页面元素的标识，ID在页面里也只能出现一次，并且是唯一性。 在css样式中以“#”来命名，如：#css5 { } 在CSS里的ID不一定为JS而设置的， 遵循ID在一个页面里唯一性。以免出现浏览器兼容问题。 CSS属性标签总结 class 类，css选择器，优点：可重复使用，css中以 . 开头 id 一个页面只能有一个，唯一性，css中以 # 开头 css属性标签ID和Class对大小写敏感，注意书写时候的规范。 严禁用中文命名css类名，避免以数字开头 推荐：英文开头，如：.head { } CSS样式表 CSS属性的优先问题 id优先级高于class 后面的样式覆盖前面的 指定的高于继承 行内样式高于内部或外部样式 style type=text/css #f14 {font-size:14px;color:red} .f18 {font-size:18px;color:blue} /style div id=“f14” class=“f18”id优先/div div class=“f18” id=“f14”id优先/div CSS样式表 id优先级高于class style