三种CSS样式实现（内联样式、内联样式表、外联样式表）

一、内联样式

1、基本语法规则

（1）随便写一个标签，比如p或者div等等

（2）在标签开头属性中添加样式

（3）样式的规则为“键值对”格式，冒号前为基本键，冒号后跟值，不同键值对用分号间隔

（在下面的例子中，对颜色和大小进行了设置，还有其它键值对可供设置，暂不列出）

这是一个测试

2、例子

    
        
        
    
    
        
这是一个测试
    

二、内联样式表（举例常用，简便）

1、基本语法规则

（1）在head标签中加入style标签，统一设置

（2）基本格式为“标签+大括号”，可在其中对多个标签设置

（在下例中，仅仅给出部分截图，style在head标签中，这里仅仅对p标签进行设置）

2、例子

    
        
        
        
    
    
        
这是一个测试
        
这是第二个测试
        
这是第三个测试
    

（注意，在style标签中，对所有p标签进行了统一设置，但仍可以使用内联样式进行单个设置，这里涉及到选择器优先级，在后面进行介绍）

三、外联样式表（最规范用法，适合做项目）

1、格式规范

（1）新建“文件名.css”文件

（2）基本格式为“标签名+大括号”，和内联样式表格式相同，不过是单独在新建css文件中

（3）在html中与该css文件建立连接，使用link标签，注明css文件链接位置，该link标签在head标签中

（第三条尤其容易被忽略，在下例中，使用的是相对地址链接）

p{
    color: red;
    font-size: 60px;
}

2、例子

    
        
        
        
    
    
        
这是一个测试
        
这是第二个测试
        
这是第三个测试
    

（在外联样式表的规范之下，仍可以使用内联样式对单个进行约束，这里涉及到选择器优先级，在后面进行介绍）