CSS引入方式

最新推荐文章于 2024-09-18 09:47:26 发布

努力奔跑的鱼

最新推荐文章于 2024-09-18 09:47:26 发布

阅读量559

点赞数 16

分类专栏： JavaWeb学习路线文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_44201223/article/details/138891439

版权

JavaWeb学习路线专栏收录该内容

67 篇文章 0 订阅

订阅专栏

CSS引入方式

1 行内式
2 内嵌式
3 连接式/外部样式表

1 行内式

行内式,通过元素开始标签的style属性引入
样式语法为：样式名:样式值; 样式名:样式值;

代码

    <input 
        type="button" 
        value="按钮"
        style="
            display: block;
            width: 60px; 
            height: 40px; 
            background-color: rgb(140, 235, 100); 
            color: white;
            border: 3px solid green;
            font-size: 22px;
            font-family: '隶书';
            line-height: 30px;
            border-radius: 5px;
    "/>

效果

在这里插入图片描述

缺点
- html代码和css样式代码交织在一起,增加阅读难度和维护成本
- css样式代码仅对当前元素有效,代码重复量高,复用度低

2 内嵌式

说明
- 内嵌式样式需要在head标签中,通过一对style标签定义CSS样式
- CSS样式的作用范围控制要依赖选择器
- CSS的样式代码中注释的方式为 /* */
- 内嵌式虽然对样式代码做了抽取,但是CSS代码仍然在html文件中
- 内嵌样式仅仅能作用于当前文件,代码复用度还是不够,不利于网站风格统一
代码

<head>
    <meta charset="UTF-8">
    <style>
        /* 通过选择器确定样式的作用范围 */
        input {
            display: block;
            width: 80px; 
            height: 40px; 
            background-color: rgb(140, 235, 100); 
            color: white;
            border: 3px solid green;
            font-size: 22px;
            font-family: '隶书';
            line-height: 30px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <input type="button" value="按钮1"/> 
    <input type="button" value="按钮2"/> 
    <input type="button" value="按钮3"/> 
    <input type="button" value="按钮4"/> 
</body>

效果

3 连接式/外部样式表

可以在项目单独创建css样式文件,专门用于存放CSS样式代码

在head标签中,通过link标签引入外部CSS样式即可

<head>
    <meta charset="UTF-8">
    <link href="css/buttons.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <input type="button" value="按钮1"/> 
    <input type="button" value="按钮2"/> 
    <input type="button" value="按钮3"/> 
    <input type="button" value="按钮4"/> 
</body>