零起点HTML5+CSS3+JavaScript+jQuery前端开发案例式教程PPT课件（共14章）03 html+css创建图文并茂的名片.pptVIP

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 3.4 css选择器 3.4.1 简单选择器 !DOCTYPE html html head meta charset=utf-8 / title/title style type=text/css /*id选择器*/ #one { color: red; background: yellow; } /style /head body h1 id=one爽爽的贵阳,避暑的天堂！/h1 h1爽爽的贵阳,避暑的天堂!/h1 /body /html 格式 2.id 选择器：在id值前加上# ,id选择器只能选中一个元素， 同一个页面要保证id的唯一性。 运行效果 示例代码 #id名{ 样式属性名：属性值; } 3.4 css选择器 3.类选择器：在class名前加上.，class选择器可以被多个元素共同使用,不同元素可以有相同的class值。同一个元素可以有多个类名，要使用空格隔开。尽量使用类选择器，而不是id选择器。 !DOCTYPE html html head meta charset=utf-8 / title/title style type=text/css /*类选择器*/ .ys { background-color: red; font-size: 25pt; } .two { font-size: 20px; } /style /head body div class=ysh1文本/div p class=ys two段落文本/p /body /html 3.4.1 简单选择器 .类名 { 样式属性名：属性值; } 运行效果 示例代码 格式 3.4 css选择器 4. 通用选择器：通用选择器为一个星号（*），可以选中页面中的所有元素。常用于设置一些默认样式. * { font-size : 18pX; font-family : 宋体; } 5. 并集选择器：同时选中多个元素，选择时要用“,”隔开。标签选择器、ID选择器、class选择器都可以使用。 6. 交集选择器：选择的元素要同时满足多个条件,选择器之间没有空格。 3.4.1 简单选择器 格式：选择器1选择器2 ... 选择器n {样式属性名：属性值;} 例如： 设置整个文档的文本的默认字体和大小。 格式：选择器1，选择器2，...选择器n {样式属性名：属性值;} 3.4 css选择器 1.后代选择器：是一种祖先结构关系，并不一定是父子关系。 祖先和后代之间要有一个空格隔开。标签选择器，ID选择器，class选择器都可以使用。 !DOCTYPE html html head meta charset=utf-8 / title/title style type=text/css /*后代选择器*/ h1 span { color:red; } /style /head body h1一个 span美丽的/span 地方/h1 span美丽的/span /body /html 运行效果 示例代码 祖先 后代 { 样式属性名：属性值; } 3.4.2复杂选择器 格式 3.4 css选择器 2. 子代选择器：子代选择器要求选择器之间只能存在父子关系，使用大于号（）作为子结合符。 !DOCTYPE html html head meta charset=utf-8 / title/title style type=text/css