[前端学习]css部分学习笔记，第四天

CSS样式表

行内样式表

• 格式：<标签 style="属性1:属性值; 属性2:属性值" >
• 顾名思义，行内样式表就是写在标签内部的，如果只有一点点样式要修改可以使用它。

内部样式表

• 格式：
  
  
• 内部样式表一般写在head标签内。

外部样式表

• 外部样式表意思是：把html和css分离，HTML文件只写html代码，CSS文件只写css样式。
• 通过标签把css文件引入到html文件中。这个在实际工作中是最常用的。

三种样式表的区别:

• 行内样式表，默认权重最高，但是完全没有分离，且只能控制一个标签，用得最少；
• 内部样式表，默认权重次之，初步实现分离，可以控制一个页面，用得较少；
• 外部样式表，默认权重最低，完全实现分离，可以控制整个站点所有页面，用得最多。

拓展：

• 导入式样式表

  • 格式：(如果在css文件中引入，不用写style标签)
  • 它的作用与link链入式是一样的。区别在于，它既可以在html文件中导入css文件，还可以在css文件中导入css文件，而且@import是在html加载完之后才加载css，低版本浏览不支持，js也不能调用。

CSS三大特性

层叠性

• 在css书写时不可避免的会出现样式冲突，就是先后写了一样的属性，但是属性值不同。这个时候就会根据css的层叠性来执行，最终显示的结果是后写的。
• 所以css层叠性就是指，如果样式出现冲突，那么执行后写的样式。也可以理解为就近，谁离标签越近就执行谁。
• 小技巧：根据层叠性原理，css设置时，大的整体样式写前面，小的样式写后面。

继承性

• css中会出现子元素如果不单独写样式会继承部分父元素的样式。
• 一般与文字相关的属性会继承，例如:字体，颜色，字号，行高等属性。
• 而与盒模型相关的属性不会继承，例如：外边距，内边距，背景，定位，浮动，元素高度等。
• 所以在工作中继承性的应用多是把一些文字样式写在body内，子元素继承即可，可以起到节省代码量的效果。
• 注意：继承样式的权重为0最低！

权重性（重点）

• 首先要清楚一个问题，之前说的层叠性是没有涉及到css的权重性的，就是当所有样式的权重值都相同的，层叠性的就近原则才会其效果，就是离标签最近的优先执行。
  • 以下是各类型权重的排序：
    1. ！important 当在属性值后加上这个后，它的权重值永远是最高的，无限大。
    2. 行内标签样式（就是直接写在标签中的），权重值为1,0,0,0
    3. id选择器 权重值为0,1,0,0
    4. 类或者伪类选择器 权重值为0,0,1,0
    5. 标签选择器 权重值0,0,0,1
    6. *通配符选择器或者继承样式 权重值为0,0,0,0
  • 注意：权重值是可以累计但是不能进位的。例如，
    div ul li(0,0,0,3),a:hover(0,0,1,1)，.nav ul li(0,0,1,2)。
  • 通过以上例子就能知道，多个选择器组合，权重是可以累计的。但是永远不能进位，就是说哪怕你写十个标签选择器，它的权重也是0,0,0,10而不是0,0,1,0，另外要记住一点，不管父元素的权重多高，对子元素永远是继承过来0的权重。
  • 特殊标签a和h，你可能会发现如果给body设置一个通用样式后，对a和h标签不起作用。原因是浏览器渲染时默认就赋给了它们标签选择器的样式，就是说它们本身是有权重的，所以不会继承。所以想要a和h标签有样式，你必须要单独写。

CSS背景设置

背景颜色设置

• 使用background-color:颜色；可以设置页面的背景颜色，这个是可以和背景图像一起设置的，当背景图像没有填满页面，那么剩余的地方就会被背景颜色填充。
• 注意：不管是设置背景颜色还是背景图片，它都是应用到页面最底层。所以它与插入图片不同，是可以在背景上放置各种元素的。

背景图像设置

• 使用background-image:url()；来设置背景图像。
• 注意url()中的图片地址可以用""包裹，也可以不用，都能生效。但这里提倡直接写地址即可。

背景图像显示设置

• 使用background-repeat:repeat|no-repeat|repeat-x|repeat-y;来设置背景图像显示样式
• 设置背景图像的默认值是repeat（平铺），就是把整个页面都用背景图来铺满。no-repeat是不平铺，repeat-x是横向平铺，repeat-y是纵向平铺。

背景图片位置设置

• 使用background-position:X轴 Y轴;来设置背景图片位置
• 关于X轴和Y轴的值有几种设置方式：
  • 1.方位词。 left center right
  • 2.准确数值。 百分数 单位值（px等）
  • 方位词很好理解就是，左中右三个方位。准确数值是基于x轴和y轴来计算的，假如你设置background-position：30px center,那么背景图的位置在靠左的中间。所以说准确数值就是XY轴0刻度到图片边框的距离。
  • 通常来说只使用方位词的话，没有限制写得顺序。但是为了避免出现混淆，这里统一规定，必须按照X轴 Y轴这样的顺序来写。
  • 发现一个问题，如果给body设置背景图，不指定高度宽度的话，会出现找不到页面高度，这个时候Y轴只有设置px单位才能正常显示，方位词和百分比会出错。