Web 前端开发入门级学习笔记（一）

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的层叠性

1.   层叠性指的是当CSS的样式产生冲突时的处理机制。

2.   层叠性的优先级：算权重的算法，谁权重大，就听谁的，权重小的就会被覆盖掉。

3.   计算权重的描述方式（id的个数，class的个数，标签名的个数）——比较时先比较id，然后数类、、

4.   id 的优先级最高，class 的优先级次之，标签名的优先级最低。并且三者之间不存在进位。（实际上也是存在进位的，255个进一位，所以根本没有意义）

5. 如果都选中了同一个元素，并且权重计算都一样，听谁的？  谁写在最后就听谁的，后面的可以把前面的覆盖掉

6. 如果是继承过来的样式，权重是0（如果没有直接选中这个标签，你给他写的属性的权重是0）

7. 如果大家都没直接选中，权重是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 能否提升 （能打破就近原则么）？  还是就近原则管用。