[前端学习]css部分学习笔记，第四天
2017-08-23 本文已影响0人
印象rcj
CSS样式表
行内样式表
- 格式：
<标签 style="属性1:属性值; 属性2:属性值" > - 顾名思义，行内样式表就是写在标签内部的，如果只有一点点样式要修改可以使用它。
内部样式表
- 格式：
<head>
<style type="text/csss">
选择器 {属性:属性值;}
</style>
</head> - 内部样式表一般写在head标签内。
外部样式表
- 外部样式表意思是：把html和css分离，HTML文件只写html代码，CSS文件只写css样式。
- 通过<link>标签把css文件引入到html文件中。这个在实际工作中是最常用的。
三种样式表的区别:
- 行内样式表，默认权重最高，但是完全没有分离，且只能控制一个标签，用得最少；
- 内部样式表，默认权重次之，初步实现分离，可以控制一个页面，用得较少；
- 外部样式表，默认权重最低，完全实现分离，可以控制整个站点所有页面，用得最多。
拓展：
-
导入式样式表
- 格式：
<style> @import url(xxx.css); </style>(如果在css文件中引入，不用写style标签) - 它的作用与link链入式是一样的。区别在于，它既可以在html文件中导入css文件，还可以在css文件中导入css文件，而且@import是在html加载完之后才加载css，低版本浏览不支持，js也不能调用。
- 格式：
CSS三大特性
层叠性
- 在css书写时不可避免的会出现样式冲突，就是先后写了一样的属性，但是属性值不同。这个时候就会根据css的层叠性来执行，最终显示的结果是后写的。
- 所以css层叠性就是指，如果样式出现冲突，那么执行后写的样式。也可以理解为就近，谁离标签越近就执行谁。
- 小技巧：根据层叠性原理，css设置时，大的整体样式写前面，小的样式写后面。
继承性
- css中会出现子元素如果不单独写样式会继承部分父元素的样式。
- 一般与文字相关的属性会继承，例如:字体，颜色，字号，行高等属性。
- 而与盒模型相关的属性不会继承，例如：外边距，内边距，背景，定位，浮动，元素高度等。
- 所以在工作中继承性的应用多是把一些文字样式写在body内，子元素继承即可，可以起到节省代码量的效果。
- 注意：继承样式的权重为0最低！
权重性（重点）
- 首先要清楚一个问题，之前说的层叠性是没有涉及到css的权重性的，就是当所有样式的权重值都相同的，层叠性的就近原则才会其效果，就是离标签最近的优先执行。
- 以下是各类型权重的排序：
-
！important当在属性值后加上这个后，它的权重值永远是最高的，无限大。 -
行内标签样式（就是直接写在标签中的），权重值为1,0,0,0 -
id选择器权重值为0,1,0,0 -
类或者伪类选择器权重值为0,0,1,0 -
标签选择器权重值0,0,0,1 -
*通配符选择器或者继承样式权重值为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:颜色；可以设置页面的背景颜色，这个是可以和背景图像一起设置的，当背景图像没有填满页面，那么剩余的地方就会被背景颜色填充。 - 注意：不管是设置背景颜色还是背景图片，它都是应用到页面最底层。所以它与
<img>插入图片不同，是可以在背景上放置各种元素的。
背景图像设置
- 使用
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单位才能正常显示，方位词和百分比会出错。
- 1.方位词。
