01引入方式 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     
 8     <!--
 9     <style>
10         /* 元素选择器，通过标签名确定样式的作用元素 */
11         input{
12             height: 60px ; 
13             width: 100px; 
14             background-color: rgb(227, 136, 140) ; 
15             color: azure ; 
16             font-size: 20px ; 
17             font-family: '隶书' ; 
18             border: 3px ; 
19             border-color: rgb(202, 189, 137) ; 
20             border-radius: 5px;
21         }
22     </style>
23     -->
24 
25     <link href="atCSS/01btn.css" rel="stylesheet">
26 
27 </head>
28 <body>
29     <!--
30         引入方式
31             1 行内式
32                 通过元素的style属性引入样式
33                 语法：style="样式名:样式值;样式名:样式值;... ...;"
34                 缺点：代码复用度低，不利于维护；css样式代码和html结构代码在一起，影响文件大小和性能
35             2 内嵌式
36                 通过在head标签中的style标签定义本页面的公共样式
37                 需要通过选择器来确定样式作用元素
38             3 外部样式表
39                 将CSS代码单独放入一个.css文件中，哪个html需要这些代码，就在head中通过link标签引入
40     -->
41     <input type="button" value="按钮">
42     <input type="button" value="提交">
43     <!--
44         <input type="button" value="按钮" 
45             style="
46             height: 60px ; 
47             width: 100px; 
48             background-color: hotpink ; 
49             color: azure ; 
50             font-size: 20px ; 
51             font-family: '隶书' ; 
52             border: 3px ; 
53             border-color: chocolate ; 
54             border-radius: 5px;">
55     -->
56 </body>
57 </html>

对应CSS文件

 1 input{
 2     height: 60px ; 
 3     width: 100px; 
 4     background-color: rgb(227, 136, 140) ; 
 5     color: azure ; 
 6     font-size: 20px ; 
 7     font-family: '隶书' ; 
 8     border: 3px ; 
 9     border-color: rgb(202, 189, 137) ; 
10     border-radius: 5px;
11 }

 

posted @ 2024-03-08 15:50  白茶花约  阅读(11)  评论(0)    收藏  举报