引言
CSS对于HTML来说就像是女生的化妆品，通过CSS的修饰后，网页元素会更加丰富美观，但是使用CSS之前的首要需求就是如何在HTML代码中加入CSS代码，这里就简单列举一下三种常用方法；
ps：由于作者规划以后往java后端发展，所以对于前端的知识只是了解了部分主要内容，以应用为主，所以如果有错误请各位及时指正！
内联定义方式
因为每个元素都有style属性，所以可以直接在某个元素中加入css代码，仅作用于该元素，这样就可以精确控制一个HTML元素的表现，这样每份css样式只控制单个HTML元素；
格式为：style="property1:value1;property2:value2;property3:value3;"
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css内联定义方式</title>
</head>
<body>
<!--直接在元素中加入css代码，每个元素都有style属性-->
<div style="width: 400px; height: 400px; background-color: cornflowerblue;
border-width: 10px;
border-style: groove;
border-color: coral;">
</div>
<br>
<!--上面的border写法可以简化-->
<div style="width: 300px; height: 300px; background-color: aquamarine; border: 1px crimson solid;">
</div>
</body>
</html>
样式块
这种方法通过选择器来决定某样式对那些元素起作用，分为很多种选择器，这里就只针对三种常见的介绍了，分别是：
- id选择器
- 标签选择器
- 类选择器
下面就分别介绍：
id选择器
通过对id属性来对不同的元素进行区分，具有针对性，只针对某一个id；
格式为：#idValue{........}
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css之id选择器</title>
<!--这里同样需要style，type后面是固定格式，记住即可-->
<style type="text/css">
/*id选择器*/
#llll {
color: cadetblue;
font-size: large;
}
</style>
</head>
<body>
<!--这里id设置为llll-->
<span id="llll">啦啦啦啦啦啦</span>
</body>
</html>
标签选择器
css样式对某个元素进行作用，是所有的该元素；
格式为：E{......}
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css之标签选择器</title>
<style type="text/css">
/*标签选择器*/
div {
background-color: cornflowerblue;
border: brown 10px groove;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<!--css作用于这些div标签-->
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</body>
</html>
类选择器
类选择器是指定css样式对具有指定class属性的元素起到作用
格式为：[E].classValue{......}
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css样式块</title>
<style type="text/css">
/*类选择器，这里对所有'lei'类起作用*/
.lei {
border: darkorchid 5px ridge;
}
</style>
</head>
<body>
<!--这里的input元素和select元素都属于'lei'这个类-->
<input type="text" class="lei" />
<br>
<select class="lei">
<option value="ps">小学</option>
<option value="ms">初中</option>
<option value="hs">高中</option>
</select>
</body>
</html>
引入外部独立的css文件
这种方法相对前两种就更加灵活，通过一个.css文件来对某元素进行的操作；
注意：这里介绍的方法是推荐使用的，还有一种方法通过@import导入外部样式文件，不推荐这种方法，因为很多浏览器并不支持这种导入方式；且这两种方法的效果是一样的；
在HTML文件中通过link元素引入外部文件，
格式为：<link type="text/css" rel="stylesheet" href="css样式文件的URL(统一资源定位器)"
注：这里的type和rel是固定格式，记住；
示例代码：
css文件：
<!--对a标签进行的统一处理-->
a{
text-decoration: none;
}
<!--对baidu这个id对应元素进行的处理-->
#baidu{
color: mediumblue;
text-decoration: underline;
cursor: pointer;
}
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>引入外部独立css文件</title>
<!--通过link对css文件进行连接，rel和type是固定写法-->
<link rel="stylesheet" type="text/css" href="css03.css" />
</head>
<body>
<a href="http://www.baidu" target="_blank" style="color: #0000CD;" >百度</a>
<span id="baidu" >百度</span>
</body>
</html>
总结
这三种方法是主要的三种方法，也是常用的，
再提一种方法是：内部css样式，这种方法不建议使用，这里就了解一下，为了和后面的js进行比较；
格式为：
<style type="text/css">
样式单文件定义
</style>
其他方法就不介绍了（毕竟博主也不是专门发展前端的，对后端已经基本可以了）；
再总结一下三种方法：
- 内联定义方式
- 样式块
- 引入外部独立的css文件
欢迎大家的点评！
更多推荐
❗HTML引入CSS的三种常用方式汇总❗
发布评论