CSS（Cascading Style Sheets）称为层叠样式表，用于对页面进行美化。
一、应用方式
css的样式有很多种，当如果想要把css样式应用到特定标签上有三种方式：
1.1 标签中填写
适用范围：指定一个标签。【不推荐，多标签无法复用样式】
<div style="color:green;">KOBEdiv>
1.2 head标签中定义
适用范围：当前页面的所有标签。【推荐，多个标签可复用样式】
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS学习title>
<style>
/*给所有的div设置样式*/
div {
color: green;
}
style>
head>
<body>
<div>Alexdiv>
<div>mjjdiv>
body>
html>
1.3 在css文件中定义，适用范围：所有引入css文件的页面。
适用范围：所有引入css文件的页面。【推荐，多页面、多个标签均可复用样式】
- 创建css文件，如：common.css
div {
color: green;
}
- 创建html文件，如：index.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS学习title>
<link rel="stylesheet" href="common.css">
head>
<body>
<div>Alexdiv>
<div>老男孩div>
body>
html>
以后在企业中写应用css样式时，写单页面时会把样式写在head头部；写多页面时，会把样式写入css文件，然后再在要应用的html页面引入css即可。
二、选择器
学习选择器的目的就是选中html页面中指定标签，便于以后给他应用样式。
2.1 标签选择器
在body中找到所有指定标签，例如：找到所有a标签，让他们颜色变绿。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS学习title>
<style>
a {
color: green;
}
style>
head>
<body>
<div>周杰伦div>
<a href="https://www.oldboyedu.com">Alexa>
<p>Alexp>
<ul>
<li>
<a href="#">朗朗a>
li>
ul>
body>
html>
2.2 id选择器
在body中找一个id匹配的标签。（HTML中ID属性应唯一，相当于人的身份证号码），例如：找到id等于i1的标签，让他颜色变绿。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS学习title>
<style>
/*找到所有a标签，并应用内部数据*/
#i1 {
color: green;
}
style>
head>
<body>
<div>老男孩div>
<div>
<span id="i1">师范span>
div>
<p>南京p>
body>
html>
2.3 class选择器
在body中找到所有class属性值匹配的标签。例如：找到所有class等于head的标签，让他绿了。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS学习title>
<style>
.head {
color: green;
}
style>
head>
<body>
<div class="head">老男孩div>
<div>
<a href="http://www.sb.com">李杰a>
div>
<p class="head">武沛齐p>
body>
html>
2.4 属性选择器
在body中找到所以class属性值匹配的标签。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS学习title>
<style>
/* 找到class=head并且name=boy的标签 */
.head[name="boy"] {
color: green;
}
style>
head>
<body>
<div class="head" name="boy" >老男孩div>
<div>
<a href="http://www.sb.com">李杰a>
div>
<p class="head" name="hanshuo" >韩烁p>
body>
html>
2.5 后代选择器
在body标签中根据父子关系找到指定标签。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS学习title>
<style>
.head ul .hat {
color: green;
}
style>
head>
<body>
<a href="#">老男孩a>
<div class="head">
<a class="hat">北京a>
<ul>
<li>沙河li>
<li>
<a class="hat">沙河高晓松Alexa>
li>
<li>
<a>沙河大烧饼Alexa>
li>
ul>
div>
<div class="head">
<a href="#">武沛齐a>
div>
body>
html>
2.6 选择器分组
对选择器进行分组，无需重复编写。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS学习title>
<style>
/* 不推荐写法 */
/*
h1 {
color: green;
}
.head h2{
color: green;
}
h3{
color: green;
}
h4{
color: green;
}
*/
h1, .head h2, h3, h4 {
color: green;
}
style>
head>
<body>
<h1>kobeh1>
<div class="head">
<h2>lebronh2>
div>
<h3>curryh3>
<h4>jamesh4>
body>
html>