Web前端入门级学习笔记
1.基本概念
css-cascading style sheet
2.网页设计中HTML,CSS,JavaScript地位
HTML：内容
CSS：呈现（样式）
JavaScript：交互（页面的动态效果）
实现：内容与样式与交互的分离
3.CSS的基本语法
选择器{
k:v;
k:v;
k:v;
}
学法：多观察、多做
必须记住这些样式表的属性和它对应的值
4.CSS代码能写在3个地方，或者说3种用法
（1）行内样式；坚决杜绝
（2）内连样式；学习阶段使用
（3）外链样式；把样式表代码移出到一个单独的.CSS文件中，内容与呈现的物理分离
5.样式表的基本语法—选择器
（1）标签名做选择器
只写标签名就行，不要加"< >"。
标签名做选择器会把当前页面上的所有这个类型的标签都选中
（2）id做选择器
每一个页面标签都可以添加id属性
标签的id值必须遵循以下的规范：
1、只能由字母、下划线、数字组成
2、必须是字母开头
3、不能与标签名同名
4、尽量使用有意义的单词缩写，比如：nav（导航栏）
注意：1.任何一个页面上不能出现重名的id
通过实验我们发现，如果出现同名的id,浏览器会把同名id的元素都使用相同的样式修饰，但是不代表你可以这么做。id是表示唯一性的：getElementById()
2.页面上的任意一个元素，都可以同时被多个选择器同时选中，并且这多个选择器能同时作用于这个标签，也就是多个选择器选中同一个标签，他们的样式能叠加下来，这就是CSS为啥叫：“层叠”的一个原因
3.如果多个选择器选中同一个元素后，他们之间的样式有冲突，那么这时候就存在一个选择器优先级问题
前台和后台分离，便于改版
（3）类名做选择器
1、用类名做选择器，必须在类名前打.
2、所有的标签都可以有class属性
3、class属性的名字与id命名规范一样
4、一个标签的id名和class名甚至可以相同，但是千万不要这么做
5、不同类型的标签可以从属于同一个class
6、一个标签可以从属于多个不同的class
(1)不同的类名之间必须用“空格”隔开
(2)不允许在标签里出现2个class属性，任何一个html标签内部都不能出现相同名字的属性
7、尽量使用原子化的类，少用大而全的类
8、样式表中，尽量使用class，尽量不用id做选择器：
class上样式,，id上行为。class是为样式表准备的，id是为你JS准备的
document.getElemetById()
document.getElemetByClass()
从语义上来讲，class是表示同一类元素，但是我们在样式表中即使这一类只有1个标签，我们也用class，不用id做选择器
（4）后代选择器
注意：后代选择器不是儿子选择器（直接的子元素）还有孙子，重孙子...
问题：用后代选择器还是用直接给元素上个类，使用类选择器？
后代选择器的意图是：
表达出：把在页面上的某一部分（区域）之内的所有什么什么元素，样式设置为、、、、
（5）交集选择器
语法：标记名，类名，类名...
后代选择器是打空格，交集选择器不要空格
（6）并集选择器（组选择器）
语法：多个选择器之间用逗号隔开，表示被选中的这些元素，采用相同的样式
（7）通配符*
*表示选中页面上的所有元素（一般用来做初始化）。这么做不好，效率太低。
6.CSS的继承性
（1）只能把自己的样式继承给后代节点，但是不能影响自己的父节点和兄弟节点
（2）什么属性能继承下来？修饰文本样式的属性能被继承下来。color、text-、font-、line-
不是修饰文本的属性不能被后代节点继承下来。比如：有关盒子模型的属性、定位的属性、背景属性
7.CSS的层叠性
-
层叠性指的是当CSS的样式产生冲突时的处理机制。
-
层叠性的优先级：算权重的算法，谁权重大，就听谁的，权重小的就会被覆盖掉。
-
计算权重的描述方式（id的个数，class的个数，标签名的个数）——比较时先比较id，然后数类、、
-
id 的优先级最高，class 的优先级次之，标签名的优先级最低。并且三者之间不存在进位。（实际上也是存在进位的，255个进一位，所以根本没有意义）
-
如果都选中了同一个元素，并且权重计算都一样，听谁的？ 谁写在最后就听谁的，后面的可以把前面的覆盖掉
-
如果是继承过来的样式，权重是0（如果没有直接选中这个标签，你给他写的属性的权重是0）
-
如果大家都没直接选中，权重是0，这个时候有一个“就近原则”
判断哪个样式起作用：
（1）先看有没有直接选中
（2）如果选中了，就计算权重
（3）如果权重都一样，谁写在最后谁起作用
（4）如果都没有选中，采用就近原则
注意：内连样式无论权重多大，都干不过行内样式。但是，如果使用行内样式，就违背了我们内容与呈现与交互的相分离的初衷。所以无论如何也不要使用行内样式
8.！important 属性
!important属性是修饰符，它的语法是 K:V !important;
错误写法：（1）K:V;!important;
（2）.box1 !important{;}
!important 属性，只能提升一条语句的优先级，不能提升一个选择器的优先级。
!important 把被修饰的语句优先级提升到无穷大。
如果被层叠的样式都使用!important 修饰，那么按照语句所在选择器的权重来起作用。
如果是继承过来的样式，它的权重是0，!important 属性无法提升权重为0的样式
如果样式都是继承过来的，!important 能否提升 （能打破就近原则么）？ 还是就近原则管用。