CSS基础

一、css概念及特点

css—层叠样式表（Cascading Style Sheets）,规定HTML内容在浏览器内的显示样式，如字体大小，颜色等

特点：实现了结构与表现相分离

二、css语法

css由选择符和声明两大部分组成，声明又是由属性和属性值组成，即：

选择符{属性:属性值;}

eg:  h1{color:red;}

注： a） 声明要放在花括号里面，每条声明结束要加分号

       b） 属性和属性值用冒号连接，所有标点符号必须是英文状态下的

三、样式表的创建

1.内联样式（行间样式或行内样式）

语法：<标记  style="属性:属性值;"></标记>

eg:  <h1 style="color:red;font-size:60px;"></h1>

2.内部样式(嵌入式样式)

语法：<style type="text/css">
          选择符{
    属性:属性值;
          }
          </style>

eg:  <style type="text/css">
       h1{
             color:red;
       }  
       </style>

注：style标记一般放置在head部分

3.外部样式表

a) 使用link引入

首先创建一个后缀名为.css的外部文件，然后在html页面通过link引入，即

<link rel="stylesheet"  type="text/css" href="css文件路径"/>

注：rel表明引入文件与当前文件之间的关系

b) 使用@import引入

语法： @import  url(css文件路径);
           @import  "css文件路径";

★link和@import引入外部样式的区别：
1）link是html标签，除了可以引入css文件，还可以引入其他文件，@import属于css范畴，只能引入css文件（老祖宗区别）
2）link引入的css文件和页面同时加载，@import引入的css文件在页面加载完成后载入（加载顺序不同）
3）link是html标签，无兼容性问题，所有浏览器都支持，@import低版本浏览器不支持（浏览器支持不同）
4）link是html标签，支持js控制DOM改变样式，@import不支持(是否支持js)

四、样式表的优先级（三种样式表的不同之处）

样式表的优先级采取就近原则，即离被设置的元素越近，优先级越高。一般情况下：

内联>内部>外部

当css属性值上出现了!important关键词时，它的优先级最高，即

!important>内联>内部>外部

五、css注释

语法：/*注释内容*/