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;
}
相关推荐
im_AMBER3 小时前
学习日志19 python
python·学习
_Kayo_7 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
chenchihwen7 小时前
大模型应用班-第2课 DeepSeek使用与提示词工程课程重点 学习ollama 安装 用deepseek-r1:1.5b 分析PDF 内容
人工智能·学习
超浪的晨7 小时前
Java UDP 通信详解:从基础到实战,彻底掌握无连接网络编程
java·开发语言·后端·学习·个人开发
CodeCraft Studio9 小时前
借助Aspose.HTML控件,在 Python 中将 HTML 转换为 Markdown
开发语言·python·html·markdown·aspose·html转markdown·asposel.html
悠哉悠哉愿意9 小时前
【电赛学习笔记】MaxiCAM 项目实践——与单片机的串口通信
笔记·python·单片机·嵌入式硬件·学习·视觉检测
快乐肚皮9 小时前
ZooKeeper学习专栏(五):Java客户端开发(原生API)详解
学习·zookeeper·java-zookeeper
慕y2749 小时前
Java学习第七十二部分——Zookeeper
java·学习·java-zookeeper
涔溪10 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
★YUI★10 小时前
学习游戏制作记录(剑投掷技能)7.26
学习·游戏·unity·c#