二、CSS3核心基础汇总.pptx

讲师： CSS 第一章、HTML文档及元素知识回顾 HTML元素 DOM文档 HTML + CSS + Javascript关系 一、HTML元素 描述一个元素， 一、回顾HTML元素 html head body div h1 p a img 二、DOM文档 meta title 属性：charset 文本：”选择器” 文本：... ... 第二章、CSS工作原理 样式表定义 规则声明（文本值、数字值、颜色值） 样式来源及层叠 选择器 元素选择器 ID和类选择符 属性选择器 上下文选择器及特殊上下文选择器 伪类 伪元素 样式继承 一、样式表定义 P { color: red} 选择符 左花括号 右花括号 属性 值 声明 第二章 CSS工作原理 第二章 CSS工作原理 一、样式表定义：引用样式 提示：让浏览器做的事情统统”描述“在head元素里 1、style元素告诉浏览器，样式表来源。 备注：我们先记住这一种方式。稍后我们会介绍更多引入样式方法 二、规则声明 CSS规则声明里，包含三种类型的值 1、文本值 2、数字值 3、颜色值 未来工作中，如果希望查阅相关属性及值，可参考 /css/index.asp /css3/index.asp 2.1、规则声明：文本值 div { visibility: hidden; } 这句声明里，hidden 就是文本值。 很多CSS属性都有其特定的文本值，稍后的课程都会提及。我们边用边学。 2.2、规则声明：数字值 数字值：描述元素的各种长度，这里的长度广义上讲包括高度、宽度、粗细等等。 常用绝对值 常用相对值 绝对值 单位缩写 示例 像素 px height:12px 厘米 cm height:12px 英寸 in height:12in 绝对值 单位缩写 示例 Em em 1.2em (备注：1em = 16px) 百分比 % height:100% div { width: 200px; } 2.3、规则声明：颜色值 1、颜色名。例如红色（red）、蓝色（blue）等。 参考：W3C颜色名定义，/TR/css3-color/#html5 2、十六进制颜色。红色（#ff0000） 说明：6位数字前两位代表红色，中间两位代表绿色，末两位代表蓝色。 猜猜这是什么颜色？color: #265a88; 3、RGB颜色值（Red, Green, Blue）。红色 rgb(250, 0, 0) 或者 rgb(100%, 0, 0) 5、HSL（色相，饱和度%，亮度%） 4、RGBA颜色值（Red, Green, Blue, Alpha）。红色50%的透明度 rgb(250, 0, 0, .5 ) 1、浏览器样式 5、作者行内样式 （行内样式）- 仅调使时使用 2、用户样式 3、作者链接样式 （外部样式表） 第二章 CSS工作原理 4、作者嵌入样式 （内部样式表） 三、样式来源及层叠 四、选择器 找到元素，呈现样式。 4.1、元素选择器 CSS HTML 页面效果 第二章 CSS工作原理 4.2.1、元素ID选择符 CSS HTML 页面效果 第二章 CSS工作原理 4.2.2、元素类选择符 CSS HTML 页面效果 第二章 CSS工作原理 ID属性选择符 : 在页面中唯一的标识一个元素。 类属性选择符：标识一组具有共同特征的元素。 ID属性选择器，类属性选择器使用场景 第二章 CSS工作原理 HTML 4.3、元素属性选择器 第二章 CSS工作原理 CSS HTML 页面效果 4.3、元素属性选择器 第二章 CSS工作原理 4.4 、上下文选择器 1、元素a,div都是body的后代。（body div 或者 body a） 2、元素a的父元素是div。（diva） 3、元素a和img是亲密无间。（紧邻同胞 + ） 4、元素a和h1的关系不那么亲密。（一般同胞 ~） 回顾下HTML文档的元素之间关系 以A元素为例，阐述下它们之间的关系。 第二章 CSS工作原理 4.4.1 上下文选择器 CSS HTML 页面效果 第二章 CSS工作原理 4.4.2、特殊上下文选择器： 子选择符 CSS HTML 第二章 CSS工作原理 4.4.3 特殊上下文选择器： 紧邻同胞元素 + CSS HTML 页面效果 第二章 CSS工作原理 4.4.4、 特殊上下文选择器： 一般同胞元素 ~ CSS HTML 页面效果 第二章 CSS工作原理 4.4.5、特殊上下文选择器： 通用选择符 * CSS HTML 页面效果 第二章 CSS工作原理 2.5 伪类 实际上并没有标