CSS部分属性，样式表，优先级

一、在html中引入css的方式有三种

    1、行内样式 ：将css写在标签中

       语法：<标签 style="css属性名1:属性值;css属性名2:属性值;css属性名3:属性值;">
  
    2、内部样式表  ：将css写在html中
在html中加入
<style type="text/css">
选择器{声明1;声明2;}
</style>   
type="text/css"可以省略不写，不写时默认为text/css  建议写上
注意：最后一条声明的";"可以省略不写 ，建议不要省略

style标签可以写在页面的任何位置，但是为了让样式优先于结构加载，我们要求把style写head标签中

    3、外部样式表

        首先得有一个外部样式表文件，接下来将文件引入html中
有两种方法引入

          1、外链式

                <link rel="stylesheet" type="text/css" href="css的路径"/>  写在head里

          2、导入式
<style type="text/css">
@import url(css文件的路径);
</style>

link和import导入外部样式区别
（1）老祖宗的差别
link属于XHTML标签，而@import是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它事情，比如定义RSS、定义rel连接属性等，@import只能加载css。
        （2）加载顺序的差别
当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有                         时候浏览@import加载CSS的页面时开始会没有样式。
（3）兼容性的差别
 @import是CSS2.1提出的，所以老的浏览器不支持，@import只在IE5以上的才能识别，而link标签无此问题。
        （4）使用DOM控制样式差别
当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.

二、优先级问题

a、行内样式、内部样式表、外部样式表中行内样式的优先级最高

b、外部样式表和内部样式表

1、当设置元素的选择器使用相同的时候，那么后加载的样式覆盖先加载

2、当设置元素使用的选择器不相同时，覆盖元素不适用了，必须通过选择器的优先级决定样式的优先级

c、开发过程中我们应该优先使用外部样式表  原因：实现分离原则

d、css中的属性

1、color  设置文字颜色    例如color:red;

2、font-size 设置文字大小   例如font-size:50px;

3、将超链接的下划线去掉的样式   text-decoration:none;

4、background-color 设置元素的背景颜色   例如：background-color:red;

5、display:inline/block/inline-block

6、vertical-align:top/middle/bottom/baseline  这个属性只能设置给行内块级元素，他控制的是行内块级元素左右两边的元素与行内块元素的垂直对齐方式

7、text-align:left/center/right

8、设置单行文字在一个高度中垂直居中  就这是 (行高)line-height:高度;

e、css语法：

选择器{属性名:属性值;}      属性名:属性值; 这个结构叫做一条声明

f、选择器

1、标签选择器   以标签名称作为选择器的 表示选择所有的这个标签

2、id选择器     给标签加一个id属性   <标签 id="值">  在css中通过#值获取元素

g、标签分类

1、块级元素

   常见的有 h1~h6 p  ul li ol  hr  table tr td   dl dt  dd form  div

   特点

   1、独占一行

   2、可以设置width和height,宽度如果不设置，默认是和父级元素一样宽,如果设置了，那就显示设置的值，高度如果不设置，由内容决定

   3、块级元素通常作为容器，可以装载其他的行内元素、行内块级元素或块级元素，但是其中p元素很特殊，不能放任何类型的块级元素

   4、块级元素是完全支持盒子模型中的属性

2、行内元素  

常见的有  a  b  strong  em  i  span  br 

特点：

1、不独占一行  可以和其他的行内元素或行内块元素共享一行

2、不支持width和height的设置

3、对盒模型属性部分支持

3、行内块元素

常见的有：img input select  textarea  iframe

特点：

自身表现成块级，外部表现成行内

1、可以设置宽度高度

2、不独占一行  可以和其他的行内元素或行内块元素共享一行

3、对盒模型属性部分支持