二 CSS样式——美化网页

一、简介

CSS-层叠样式表（Cascading Style Sheet）,是网页美化工具，可以让网页更加地图文并茂，更加吸引人。
CSS优势：

• 内容与表现分离
• 网页的变现统一，容易修改
• 丰富的样式，使页面布局更加灵活
• 减少网页的代码量，增加网页的浏览速度，节省网络带宽
• 运用独立于页面的CSS，有利于网页被搜索引擎收录

那问题来了：怎么写？怎么用?

二、CSS语法规则

2.1怎么写

示例

（1）标签选择器：选择器写法和标签是一致的，所有的这些标签会使用统一的样式。
问题如下：

• 如果有个别某些h1不想使用这个样式怎么办？
  ——>肯定不能使用h1这个标签选择器了
• 如果某些段落也想使用h1的那个样式怎么办？
  ——>
  （2）类选择器
  类选择器是我这里定义一个样式，谁想用谁就调用。
  以点开头，自己命名，但是要符合命名原则。如下：

.red{
    color:#131aff;
}

比如现在我有以下几个标题和段落：

现在我只想在第二个标题那里使用这个样式，代码如下：

注1：调用的时候不要加点，但是在声明的时候必须要加点。
注2：CSS注释和HTML注释不一样：CSS注释格式是：/...../，HTML注释是**
（3）ID选择器

#green{
  color:#131aff;
}

某个段落要使用这个样式的话，代码如下：

注：ID选择器和类选择器的区别：类选择器定义了之后，谁都可以调用；但是ID选择器在整个文档里面只能有一个地方调用，使用只能唯一。同时如果要在一个标签里面使用多个类选择器，只需要在名字后面加上空格就行：

adsfasdf

使用类选择器用class属性，使用id选择器用id属性。

2.2颜色

（1）可以使用英文单词：red，yellow，blue等等,比如：

#green{
            color: green;
            color:#131aff;
        }

这段代码定义的颜色也是绿色。

（2）使用十六进制数字表示
0-9 A B C D E F
RGB= Red + Green + Blue
用十六进制表示的颜色有六位，两两一组，表示三种颜色。
所有的颜色都是这三原色混合而来，所以调整三者的比例可以得到不同的颜色，如ff0000就是绿色。

2.3怎么用

（1）内部样式表

即写在style里面，作用范围是本页面的所有元素，即上面所用的。

（2）内联样式

内联样式

代码如下：

疑是地上霜。

其实就是给某个标签加上一个style属性，其作用范围是特定的某个标签。但是这个方式的弊端是将标签和样式混合到了一起，而CSS的优势就在于将标签和样式分离。

（3）外部样式表

• 链接式
  先创建一个外部的CSS文件：*.css，把样式写在这个文件中。
  谁想用这个样式，谁就引入这个css文件即可。
  引入方法：在head标签里面使用link标签：，这个标签就代表我引入了一个样式表。
• 导入式

• 链接式与导入式的区别
  1、标签属于HTML，@import是属于CSS2.1
  2、使用链接的CSS文件先加载到网页中，再进行编译显示
  3、使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页中
  4、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器涞说就是无效的
  推荐使用link标签，第二种了解即可。

（4）优先级

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
1、浏览器缺省设置
2、外部样式表
3、内部样式表（位于 标签内部）
4、内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

---

在三个基本选择器中也有优先级：id>类>标签，但没有就近原则。

（5）就近原则

注：这地方除了优先级之外还有一个就近原则；

示例代码：

    
    
    
    



    我是div标签

Style.css文件：

div{
    color:red;
}

显示结果如下：

image.png

分析：在这个地方虽然内部样式表比外部样式表具有更高的优先级，但是这里却是使用的外部样式表的样式。原因就是外部样式表更近一点。