CSS视频教程,第2章CSS样式基本知识

课程目录
1 内联式CSS样式
2 嵌入式CSS样式
3 外部式CSS样式
4 三种方法的优先级

1 内联式CSS样式

css样式可以写在哪些地方了？从css样式代码插入的形式基本分为以下三种：内联式、嵌入式、外部式三种；
<p style="color: aqua;">大灰牛博客分享wordpress建站和dedecms等开源程序建站及web前端开发</p>

2 嵌入式CSS样式

可以把css样式代码写在html页面中的style标签之间，一般情况下嵌入式css样式写在标签head之间，这种写法针对单一页面方便，但是对于一个包含很多页面的网址，不推荐使用

<!DOCTYPE html>
<html>
    <heade>
        <title>嵌入式CSS样式</title>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" type="text/css" href="style.css"/>
        <style type="text/css">
        h1{font-size: 24px;color:#f90;font-weight: normal;}    
        </style>
    </heade>
    <body>
        <h1>dhnblog.com大灰牛博客</h1>
</html>

3 外部式CSS样式

外部式（外联式）外部样式就是把css代码写在一个以.css为拓展名的文件中，在标签head中不在style标签中，通过link标签链接到html页面中
<link rel="stylesheet" type="text/css" href="style.css"/>
e.g：
1.css文件名称以有意义的英文字母命名
2.其中rel=”stylesheet” type=”text/css”为固定写法，不可更改
3.link标签一般写在head内，不写在style标签中

4 三种方法的优先级

对于同一个元素，我们同时使用三种方法设置css样式，根据优先级：内联式>嵌入式>外部式，其中嵌入式css样式>外部式的前提：嵌入式css样式位置一定再外部式后面，注意根据就近原则（离被设置元素越近，优先级别越高）

相关文章