CSS简介 CSS引入方式-CSDN博客

本文链接：https://blog.csdn.net/qq_43494013/article/details/141844223

一、CSS简介

CSS 层叠样式表(英文全称：(Cascading Style Sheets) 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力 ,简单来说,美化页面

二、 CSS引入方式

2.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.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 red;
font-size: 22px;
font-family: '隶书';
line-height: 30px;
border-radius: 5px;
}
</style>
</head>
<body>
<input type="button" value="按钮1"/>
</body>

在这里插入图片描述

2.3 连接式/外部样式表

CSS样式代码从html文件中剥离,利于代码的维护
CSS样式文件可以被多个不同的html引入,利于网站风格统一

可以在项目单独创建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>