css基本写法--详解大全

目录

1.行内样式

2.内嵌样式

3.外链样式

4.@import

5.注意

加载顺序

---

1.行内样式

我们要某个 HTML 标签中去书写样式，它需要使用 style 属性来指定。

    
    


这是第一个样式的使用，采用的是行内样式

 注意

这种写法有什么问题？

问题就是不利于我们的代码维护。

如何解决？

我们就可以使用内嵌样式来解决。

2.内嵌样式

        内嵌样式又叫页面样式，它的作用是对当前整个页面有效。使用它需要把样式写在一个叫 style 的标签，一般这个标签会放在 head 部分。

    
    
  


这是第一个样式的使用，采用的是行内样式

注意 

这种方式有问题吗？

有问题，如果很多文件中都需要这个样式，那么，我们仍然需要在各个文件中来编写一次。如何解决？

可以采用外链样式。

3.外链样式

        外链样式也叫外部样式，我们把需要的公共的样式编写在一个单独的文件，这个文件的后缀必须是 .css，然后在需要引入的文件中通过 link 标签来使用这个外部样式文件。

首先定义外部样式：通常我们需要把外部样式放到一个名为 css 的目录下。

/*
div的样式：颜色为蓝色，字体为微软雅黑，字体大小为 14 像素
span的样式：字体为斜体，绿色
 */
div {
    color: #0000ff;
    font-family: '微软雅黑';
    font-size: 14px;
}
span {
    font-style: italic;
    color: green;
}

然后编写页面，并使用外部样式：

    
    
    


这是第一个样式的使用，采用的是行内样式

        通过 link 标签来使用外部样式，在 link 标签中需要指定 rel 属性，它的值是 stylesheel，并通过 href 属性来引入外部的样式文件地址。

注意 

这种方式有问题吗？

有可能会浪费内存空间。

4.@import

还可以使用 @import 语句来引入外部的样式，它需要放到 style 标签中。

    
    
    
    


这是第一个样式的使用，采用的是行内样式

5.注意

加载顺序

假设我们的页面既用到外部样式，也用到内嵌样式，还用到行内样式，那么谁起作用？

1.外部样式编写

/*outer2.css*/
div {
    color: red;
    font-size: 16px;
}

2.编写页面

    
    
    
    


这是一个块元素

        通过上面的案例我们发现，当几个样式中有相同部分时，行内样式优先于页面样式，而页面样式优先于外部样式。简单来说：就近原则。