网页基础——CSS.ppt

1 网页基础——CSS 平舆县中等职业学校 2 第一部分 CSS简介 1、CSS入门 2、CSS核心概念 3、CSS构造块 4、文本 5、颜色、背景与图像 6、链接 7、表格和定义列表 8、表单 3 第一部分 CSS简介 1、CSS入门 2、CSS核心概念 3、CSS构造块 4、文本 5、颜色、背景与图像 6、链接 7、表格和定义列表 8、表单 4 1、CSS入门 1-1、什么是CSS？ 1-2、如何将CSS应用到HTML？ 1-3、高效的CSS语法 5 1-1 CSS的概念 CSS：Cascading Style Sheets 层叠式样式表 HTML语言并不是真正的编程语言，它只是标记语言，意图把文档的不同部分通过它们的功能作用进行分类，但并不指出这些元素如何在计算机屏幕上显示。 CSS则提供对文档外观的更好更全面的控制，而且不干扰文档的内容。 CSS基本语句的结构： HTML选择器{属性1：值1；属性2：值2；属性n：值n；} 选择器是要对它应用说明的HTML元素名称；属性就是能够被CSS影响的浏览器行为，如字体、背景、边界等；值就是可以为属性设置的任何选项，如“楷体”，“red”等。 如：p {font-size:12px；color:blue;} 6 基本页面 示例页面：css_base.html 7 1-2 如何在网页中应用CSS 1.行内套用（两种） 1）内联样式 inline style 通过style属性应用于文档中的特定标记。实际样式值使用name:vlaue或property:value形式。应用方法：直接写在标签内 。 body p style=“color:#F00…/p /body 页面示例：css_inline.html 8 1-2 如何在网页中应用CSS 2）内嵌样式 embedded style 将所有的样式定义放在一起，作为元素的一部分，位于文档的头部。允许一次修改一个元素的所有实例而不需要重复使用内联样式。 head style type=text/cssp{color:#F00;}/style/head 9 1-2 如何在网页中应用CSS 2. 外部样式表（external style sheet） link rel=“stylesheet”type=“text/css”href=“css文件路径 10 3.导入import 通过主外部样式表导入一个或多个样式表。 使用@import导入 ，语法： head 　　 title文档标题/title 　　 style type=“text/css” @import url(external.css); 　　 @import url(external.css) ; //单引号也可以 　　 /style 　/head 页面示例：css_external.html 1-2 如何在网页中应用CSS 11 1-3 高效的CSS语法 1-3-1 定义一个样式 CSS语法由一个选择器（希望控制的标签）以及紧跟选择器的至少一个声明组成，一个声明实际上就是一个属性/值对。如下图： 注意：选择器后，属性和值是由一对大括号括起来的。在属性后面的冒号：和值后面的分号；不可少，否则将会带来不同程度的错误。 12 例：style type=text/css p{ font-size:16px color:#F00; } /style 试试看：如果有多个属性，忘记了每个值后面的分号，会有什么效果？ 13 1-3-2 注释 所有注释都以斜杠和星号（/*）开始，以星号加斜杠（*/）结束。 14 1-3-3 缩进 使用缩进，增加可读性（空格） 15 第一部分 CSS简介 1、CSS入门 2、CSS核心概念 3、CSS构造块 4、文本 5、颜色、背景与图像 6、链接 7、表格和定义列表 8、表单 16 2、核心概念 2-1、ID和类； 2-2、层叠与分组； 2-3、上下文选择器； 2-4、CSS度量 17 2-1 ID和类 定义自己的选择器，即ID选择器和类选择器。ID和类可以作为简单属性应用到HTML元素中。 1、ID是个标识码，具有唯一性，不能和任何人共享。每个ID在一个中只能使用一次，作为某个元素的唯一标识符。一般情况下，ID只用于页面的唯一元素。 2、类，唯一可以应用于网页文档中任何对象（主要是文本）的CSS样式类型，主要用于定义一些特殊样式。类可以在页面中无限次的使用。 18 2-1-1 ID 应用id 以id=”name”的形式直接引入HTML，紧跟在元素的起始标签之后。