理解CSS | 青训营笔记

用户3483966327937
76 阅读4分钟

理解CSS | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第1天

16pic_3869018_b.jpg

CSS（Cascading Style Sheet）——层叠样式表，用来渲染网页每一层中的HTML结构，生成render树，最终完成页面的渲染呈现给用户。所以，CSS就是用来完成页面结构中元素的渲染，定义其大小、位置、背景、颜色等样式。

1. 样式应用的方式

对于网页元素样式的设置，总共有三种方式：

  1. 内联样式：直接在元素内部设置style属性设置元素样式

    1. 缺点：若是对同一类元素设置样式，这种方式很麻烦，而且代码不方便维护
    <p style='width:100px;height:100px;background-color:red'>这是一个段落 </p>

  1. 内部样式表：在head标签内使用style标签来设置元素样式

    1. 优点：可以通过选择不同的选择器对一个或多个元素共同设置样式
    2. 缺点：只能在当前页面中生效。若要实现多个页面共同样式的样式设置，这种方式达不到要求
    <head>
        <style>
            p {
                width:100px;
                height:100px;
                background-color:red;
            }
        </style>
    </head>
  1. 外部样式表：即引入外部定义好的样式文件。在head标签内使用link标签来完成样式表的引入。
 <head>
     <link rel="stylesheet" href='文件路径'>
 </head>

2. CSS语法

  1. 对于内联样式，直接在标签内部使用style属性对元素样式设置即可（要注意标签身上的属性大部分是以键值对的形式表示的）；进行样式的设置时，每个样式属性都为一个键值对，不同样式之间使用“;”间隔即可。
  2. 对于内部样式表和外部样式表，CSS的语法规则为"CSS选择器+声明块"；CSS选择器可以帮助我们选择页面中的元素，而声明块用来对选择器选中的元素设置元素样式，且声明块中的样式属性也都是一个个的键值对（即key:value的形式）。

3. 选择器的种类

    <div id='div' class='div'> </div>
  1. id选择器 ---- #div，即选择id为div的元素，一般一个页面中元素的id是唯一的
  2. class类选择器 ---- .div 即选择类名为div的所有元素
  3. 元素选择器 ---- div 即选择所有的div元素
  4. 属性选择器 ---- div[class] 即选择含有class属性的所有div元素
  5. 交集选择器 ---- .div1.div2.div3 即选择同时有这三个类名的所有元素
  6. 并集选择器 ---- .div1,#div 即选择拥有id属性为div、拥有类名为div1的所有元素
  7. 后代选择器 ---- .div1 .div2 即选择拥有类名div1的元素中有用.div2的所有后代子元素
  8. 子选择器 ---- .div1 > div2 即选择拥有类名div1的元素中有用.div2的所有子元素
  9. 兄弟元素选择器
  10. 伪类选择器，如超链接的:link(链接未访问状态)、:hover(移入状态)、:active(鼠标点击状态)、:visited(链接访问过状态),元素的第一个子元素:first-child等等
  11. 伪元素选择器，如第一个字母::first-letter、第一行first-line等等
  12. 通配选择器 ---- 即选择所有元素

4. 选择器的权重

在CSS中，不同的选择器拥有不同的权重，当多个选择器同时选择同一个元素时，就需要根据选择器的权重来最终确定哪个选择器设置的样式生效。

  1. 内联样式：1 0 0 0
  2. id选择器：0 1 0 0
  3. 类选择器和伪类选择器： 0 0 1 0
  4. 元素选择器： 0 0 0 1
  5. 通配选择器： 0 0 0 0
  6. 继承属性：继承没有权重 可以看出，不同的选择器有着不同的权重。那么对于一个元素的选择其权重最终是怎么计算的呢？需要注意以下几点：
  7. 对于多个选择器共同选择同一个元素时，需要比较不同选择器的优先级，即需要将所有的选择器的优先级进行相加计算，最后优先级越高，则会优先显示（分组即并集选择器时单独计算的）
  8. 选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器，即选择器的累加时的数量级不会变
  9. 对于有多个类的元素，即优先级计算后相同，此时则优先使用靠下的样式
  10. 若在某个元素样式的后面加上“！important”，此时该元素的样式获得最高的优先级，但在开发中，这个功能需要慎用！

5. 元素的样式

在CSS中，针对不同类型的元素，都有着很多的样式属性，CSS将不同的属性划分了不同的组，如针对盒子模型的属性组，还有针对字体、文本、背景、动画、内边距、外边距、边框、transition（过度）、尺寸、定位（重点）等，每个部分都有着大量的CSS属性，这里不一一列举，因为这是一个积累的过程，死记硬背是不可取的，这里给出博主CSS学习常用网站链接，实战+查阅文档 == 最好的学习方式！！ 菜鸟教程 && MDN

avatar
文章
阅读
粉丝