HTML学习之CSS三种引入方式

HTML学习之CSS三种引入方式

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*元素选择器,通过标签名确定样式的作用元素*/
        input{
            background-color: rgb(27, 237, 174);
            color: white;
            width: 60;
            height: 40;
            font-size: 20;
            font-family: '隶书';
            border: 2px solid green;
            border-radius: 5px;
        }
    </style>
    <link rel="stylesheet" href="btn.css"><!--rel是引入类型,引入css时写死stylesheet-->
</head>
<body>
    <!--
    CSS层叠样式表(英文全称:(cascading Syle sheets) 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥
    有对网页对象和模型样式编辑的能力,简单来说,美化页面
    引入方式:
        1.行内式
            通过元素的style属性引入样式
            语法:<标签 style="属性名:属性值;属性名:属性值;..."></标签>
            缺点:1.代码复用度低,不利于维护
                 2.css样式代码和html结构代码交织在一块,影响阅读,影响文件大小,影响性能
        2.内嵌式
            通过在head标签中的style标签定义本页面的公共样式
            通过选择器确定样式的作用元素
            语法:<style>选择器{属性名:属性值;属性名:属性值;...}</style>
        3.外部样式表
            将CSS代码单独放入CSS文件中,在head中通过link标签引入,谁需要谁引入

-->
    <input type="button" value="按钮" 
    style="background-color: rgb(27, 237, 174);color: white;width: 60;height: 40;
    font-size: 20;font-family: '隶书';border: 2px solid green; border-radius: 5px;"/>

<input type="button" value="按钮1" />
</body>
</html>
css 复制代码
input{
    background-color: rgb(27, 237, 174);
    color: white;
    width: 60;
    height: 40;
    font-size: 20;
    font-family: '隶书';
    border: 2px solid green;
    border-radius: 5px;
}
相关推荐
weixin-a1530030831635 分钟前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
sealaugh321 小时前
aws(学习笔记第四十八课) appsync-graphql-dynamodb
笔记·学习·aws
水木兰亭1 小时前
数据结构之——树及树的存储
数据结构·c++·学习·算法
鱼摆摆拜拜2 小时前
第 3 章:神经网络如何学习
人工智能·神经网络·学习
aha-凯心2 小时前
vben 之 axios 封装
前端·javascript·学习
青皮桔4 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺4 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
孤水寒月5 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
ytttr8735 小时前
matlab通过Q学习算法解决房间路径规划问题
学习·算法·matlab
海的诗篇_6 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html