forked from IT-xzy/WEB-NEW
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path1051-css-05.html
149 lines (142 loc) · 7.22 KB
/
1051-css-05.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>葡萄藤PPT</title>
<link rel="stylesheet" href="./css/reveal/reveal.css">
<!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
<link rel="stylesheet" href="./css/reveal/theme/ptt.css">
<!-- syntax highlighting 代码高亮主题 -->
<link rel="stylesheet" href="./lib/reveal/css/zenburn.css">
<!-- 打印和PDF输出样式 -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? './css/reveal/print/pdf.css' : './css/reveal/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<img src="./img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
<area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
<div class="slides">
<section>
<h4>小课堂【萌新】</h4>
<h4>【CSS】ID和CLASS有什么区别？</h4>
<h4>分享人：计翔于</h4>
</section>
<section>
<p>1.背景介绍</p>
<p>2.知识剖析</p>
<p>3.常见问题</p>
<p>4.解决方案</p>
<p>5.编码实战</p>
<p>6.扩展思考</p>
<p>7.参考文献</p>
<p>8.更多讨论</p>
</section>
<section>
<h3>1.背景介绍</h3>
</section>
<section>
<p>HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。 HTML页面中的元素就是通过CSS选择器进行控制的。本次讲的id和Class就是id选 择器和类选择器。</p>
</section>
<section>
<h3>2.知识剖析</h3>
</section>
<section>
<p>id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
id 选择器和派生选择器 在现代布局中，id 选择器常常用于建立派生选择器。
一个选择器，多种用法 即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次
单独的选择器 id 选择器即使不被用来创建派生选择器，它也可以独立发挥作用
ID是一个标签，用于区分不同结构和内容，就好像两个同样名字的人在无屋子里面，就会发生混淆，从概念上面来说ID是先找到结构/内容，再给它定义样式的。</p>
</section>
<section>
class 属性大多数时候用于指向样式表中的类（class）。不过，也可以利用它通过 JavaScript 来改变带有指定 class 的 HTML 元素。 class 属性不能在以下 HTML 元素中使用：base, head, html, meta, param, script, style 以及 title。 class前面前缀“.”，class可以多次使用 通过document.getElementsByClassName('ClassName')获取; class 不兼容IE6,7,8 class,是一个样式，可以套用在任何结构和内容上面。就像一件衣服，class是先定义好一种样式，在套多个结构/内容 id是一对一的，class是一对多的，id只能调用一次，class可以重复调用。id的权值也要大于class， 类的灵活性是非常强大的，但是有些新手会过度使用或滥用。css新手几乎在所有的东西上面都加上类，从而师徒更加精确地控制 他们的样式。
</section>
<section>
<h3>3、常见问题</h3>
</section>
<section>
<b>ID和CLASS的优先级</b>
</section>
<section>
<h3>4、解决方案</h3>
</section>
<section>
<p>通过继承来的属性 id 的优先级高于 class CSS的优先级顺序: tag中的style > id > class > 继承的属性 一个元素同时应用多个class，后定义的优先（即近者优先），加上!important者最优先！</p>
</section>
<section>
<h3>总结</h3>
<p>在一般情况下： 我们利用class来为元素添加样式----css 我们利用id来为元素添加行为----js/jQuery</p>
</section>
<section>
<h3>5、编码实战</h3>
</section>
<section>
<h3>6.扩展思考</h3>
</section>
<section>
<p>同一页面使用相同的ID会怎样?</p>
</section>
<section>
<h3>7.参考文献</h3>
</section>
<section>
<p>参考一：<a href="https://www.w3cplus.com/">w3c</a></p>
<p>参考二：<a href="https://www.zhihu.com/question/19550864?answer_deleted_redirect=true">知乎</a></p>
</section>
<section>
<h3>8、更多讨论</h3>
</section>
<section>
<p>如何正确使用ID和CLASS？</p>
</section>
<section>
<h4>鸣谢</h4>
<p>感谢大家观看</p>
<p>
<small>BY : 计翔于</small>
</p>
</section>
</div>
</div>
<script src="./lib/reveal/js/head.min.js"></script>
<script src="./lib/reveal/reveal.js"></script>
<script>
// 以下为常见配置属性的默认值
// {
// controls: true, // 是否在右下角展示控制条
// progress: true, // 是否显示演示的进度条
// slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
// history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
// keyboard: true, // 是否启用键盘快捷键来导航
// overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
// center: true, // 是否将幻灯片垂直居中
// touch: true, // 是否在触屏设备上启用触摸滑动切换
// loop: false, // 是否循环演示
// rtl: false, // 是否将演示的方向变成RTL，即从右往左
// fragments: true, // 全局开启和关闭碎片。
// autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
// transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
// transitionSpeed: 'default', // 过渡速度，default/fast/slow
// mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
// }
// 初始化幻灯片
Reveal.initialize({
history: true,
dependencies: [
{ src: './plugin/markdown/marked.js' },
{ src: './plugin/markdown/markdown.js' },
{ src: './plugin/notes/notes.js', async: true },
{ src: './plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
]
});
</script>
</body>
</html>