HTML学习之CSS三种引入方式

news2025/2/8 6:58:05

HTML学习之CSS三种引入方式

<!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>

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;
}