CSS引入方式-编程知识

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>