第6讲CSS基础.ppt

CSS中的单位 长度单位：长度单位在CSS 中极其重要，长度单位分为绝对单位和相对单位 绝对单位：绝对单位通常是在现实中量度长度的物理单位。绝对长度单位有英寸（in）、厘米（cm）、毫米（mm）和磅（pt）。 相对单位：为了兼容不同的浏览器和显示器分辨率，应使用相对单位。相对单位能适应 不同的浏览器和屏幕分辨率。常用的相对单位有像素（px）和em。 像素（px）：像素单位就是px。一个像素通常为构成图像的最小的点。在屏幕上的影像 是由一个个连续的像素点构成的。使用像素（px）设置网页元素的大小：p{font-size:100px;} /*设置文字大小为100 像素*/ em：以字母m的高度为参照。若在网页中设置一个文字的大小为12px，那么这个文字大小就是1em。使用em 设置网页元素的大小：p{font-size:1em;} /*设置文字大小为1em*/ CSS中的存放 Web标准网页基础 CSS中的存放 嵌入式 内联式 外联式 输入式 CSS案例 Web标准网页基础 本讲任务 网站色彩搭配 本讲任务 完成本讲中的案例。 第6讲 CSS基础 教学目标 CSS基础 教学目标 掌握CSS的基本书写格式 掌握CSS的选择符类型 掌握CSS应用到网页的方式 重难点 CSS基础 重难点 CSS的选择符类型\CSS应用到网页的方式为本讲的重难点 CSS的基本书写 CSS基础 CSS的基本书写 Selector（选择符名称）{property（属性名称）:value（属性值）;} CSS中的选择器 Web标准网页基础 CSS中的选择器 标记选择器 CSS中的选择器 类选择器 CSS中的选择器 ID选择器 CSS中的声明 Web标准网页基础 CSS中的声明 集体声明 CSS中的声明 选择器嵌套 CSS中的单位 Web标准网页基础 CSS中的单位 CSS 的单位：CSS 的单位是所有CSS 属性的基础。CSS 单位用于修饰属性值，CSS 常用的单位主要有颜色单位和长度单位。 CSS中的单位 颜色单位 black（黑） lime（浅绿） gray（灰） green（绿） white（白） aqua（水绿） silver（银） teal（深青） red（红） blue（蓝） maroon（褐） navy（深蓝） yellow（黄） fuchsia（紫红） olive（橄榄） purple（紫） 颜色名称：使用颜色的名称来表示颜色是最直接的命名方法。其中，有16 种颜色是规范的，主流的浏览器都能识别这16 种颜色。 百分比颜色：使用百分比颜色设置RGB 颜色，就是设置R、G、B 三个颜色的百分比。每个百分比的取值范围是从0%~100%。若设三个百分比都为0%，则得到的颜色是黑色。若设三个百分比都为100%，则得到的颜色是白色。若设三个百分比相同，则得到的颜色是灰色。如：rgb(100%,100%,100%); /*设置RGB 颜色为白色*/ CSS中的单位 颜色单位 数字颜色：使用数字颜色和百分比颜色设置的方法是类似的。不同之处是数字颜色的取值范围是从0~255。使用数字颜色设置RGB 颜色，就是设置R、G、B 三个颜色的值。若设三个值都为255，则得到的颜色是白色。若设三个值都为0，则得到的颜色是黑色。若设三个值相同，则得到的颜色是灰色。 如：rgb(255,255,255); /*设置RGB 颜色为白色*/ 十六进制颜色：以十六进制的数值来表示颜色的值。十六进制表示颜色时“#”号不能 省略。如：color:#ff0000; /*设置颜色为红色*/使用三个数字或者字母表示十六进制颜色称为短十六进制。例如，#ff0000 能用#f00 表示。其中，ff 能简写成一个f，00 能简写成一个0。只有当三对数字都能被简写时，十六进制颜色才能使用短十六进制来简写。