Web前端开发——CSS样式之CSS添加方法

最新推荐文章于 2024-09-15 07:15:00 发布

OSurer

最新推荐文章于 2024-09-15 07:15:00 发布

阅读量1.7k

点赞数 2

分类专栏： Web前端开发文章标签： web前端开发 css添加方法行内内嵌外部样式表

本文链接：https://blog.csdn.net/wq_ocean_/article/details/104144660

版权

Web前端开发专栏收录该内容

26 篇文章 5 订阅

订阅专栏

CSS添加方法可分为行内添加、内嵌样式添加、和单独文件添加，如若三种添加方法同时涉及，则会存在一个优先级

1. 行内

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <p >天使投资指早期投资，尤其指个人早期投资</p>
    <p style="color: red;">天使投资指早期投资，尤其指个人早期投资</p>
</body>
</html>

行内添加是直接利用标签的属性进行添加，并没有用到选择器

2.内嵌样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        p{
            color:red;
        }
    </style>
</head>
<body>
    <p >天使投资指早期投资，尤其指个人早期投资</p>
    <p >这是一个对照组</p>
</body>
</html>

内嵌样式是将样式用style标签表示出来放在head标签内，body标签只含文本内容，sytle标签设置的type属性表示以CSS文本来规定的，选择器放在在style标签内，表示作用于所有的p标签，因此可以看到两个p标签的内容都变成了红色；

内嵌样式只对当前页面的标签生效，所以多个页面如果共享某一个样式，那么每个页面都要重新定一下这个祥式，因此• 内嵌样式适合文件很少，CSS代码也不多的情况，如果一个网站有很多页面，每个文件都会变大，后期维护难度也大，于是就有了下面单独文件的方法。

3.单独文件

3.1 文件组织形式

css文件夹内含*.css的文件

3.2 网页文件1.htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <p >天使投资指早期投资，尤其指个人早期投资</p>
</body>
</html>

3.3 网页文件2.htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <p>VC，Venture Capital，所谓风险投资、创业投资，是相对靠前的非公开市场股权投资</p>
</body>
</html>

3.4 style.css文件

p{
    color:red;
}

3.5 效果图

可以看到，1和2文件引用了公共样式style.css，因此都是红色，表现出相同的样式。注意：

①单独文件样式的引用一般是将选项器写在*.css文件内，*.html文件通过放在head内的link标签来引用；

②link标签表示一个一个文件的链接，rel属性指示的要链接到什么类型的文件，stylesheet表示样式表文件，href属性跟超链接href属性是一样的，表示链接的文件的路径，这里使用的是相对路径。

③WebStom可通过link：css快速生成标签

单独文件的优点在于：页面结构HTML代码与样式CSS代码的完全分离，维护方便；如果需要改变网站风格，只需要修改公共CSS文件，可以在同一个 HTML 文档内部引用多个外部样式表