❗HTML引入CSS的三种常用方式汇总❗
引言
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>
<div style="width: 400px; height: 400px; background-color: cornflowerblue;
border-width: 10px;
border-style: groove;
border-color: coral;">
div>
<br>
<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="text/css">
/*id选择器*/
#llll {
color: cadetblue;
font-size: large;
}
style>
head>
<body>
<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>
<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 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元素引入外部文件，
格式为：
注：这里的type和rel是固定格式，记住；
示例代码：
css文件：
a{
text-decoration: none;
}
#baidu{
color: mediumblue;
text-decoration: underline;
cursor: pointer;
}
html代码：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>引入外部独立css文件title>
<link rel="stylesheet" type="text/css" href="css03.css" />
head>
<body>
<a href="http://www.baidu.com" target="_blank" style="color: #0000CD;" >百度a>
<span id="baidu" >百度span>
body>
html>
总结
这三种方法是主要的三种方法，也是常用的，
再提一种方法是：内部css样式，这种方法不建议使用，这里就了解一下，为了和后面的js进行比较；
格式为：
<style type="text/css">
样式单文件定义
style>
其他方法就不介绍了（毕竟博主也不是专门发展前端的，对后端已经基本可以了）；
再总结一下三种方法：
- 内联定义方式
- 样式块
- 引入外部独立的css文件
欢迎大家的点评！