一
1 - 1. css规则由两个主要的部分构成：选择器以及一条或多条声明，
选择器就是根据不同需求把不同的标签选出来这就是选择器的作用
1 - 2 . 选择器分为基础选择器和复合选择器
二
基础选择器分为四个，标签选择器，类选择器，idx选择器，通配符选择器。
2-1 标签选择器
<style>
/* 选择器选择的东西都会全选出来的 */
p {
color: green
}
div {
color: pink;
}
</style>
</head>
<body>
<P>男生</P>
<P>男生</P>
<P>男生</P>
<div>女生</div>
<div>女生</div>
<div>女生</div>
</body>
2-2 类选择器
<style>
/* 类选择器口诀： 样式点定义 结构累(class)调用 一个或多个 开发最常用 */
.red {
color: red;
}
.xue {
color: green;
}
.xi {
color: pink;
}
</style>
</head>
<body>
<Ul>
<li class="red">冰雨</li>
<li class="red">来生缘</li>
<li class="xi">李上</li>
<li class="xi">冯贺阳</li>
<li class="xue">吉吉国王</li>
</Ul>
</body>
2-3 id选择器
<style>
/* id选择器的口诀: 样式#定义， 结构id调用， 只能调用一次， 别人切勿使用 */
#pink {
color: pink;
}
</style>
</head>
<body>
<div id="pink">毛毛小帅哥</div>
<div id="pind">毛毛小哥帅</div>
</body>
2-4 通配符选择器
<style>
* {
color: red;
}
/* * 这里把 html body div span li 等等的标签都改为了红色 */
</style>
</head>
<body>
<div>我的</div>
<span>我的</span>
<ul>
<li>还是我的</li>
</ul>
</body>
三 css字体属性
主要关于四方面 ， 4-font-family：系列 ,3-font-size：大小 , 2-font-weight：字体粗细 ，1-font-style:字体样式。
3-1 字体系列
<style>
h2 {
font-family: "微软雅黑";
}
p {
font-family: " 微软雅黑";
}
</style>
</head>
<body>
<h2>myself的秘密</h2>
<p>我用双手成就你的梦想。</p>
<p>死亡如风，相伴永远。</p>
<p>胜利女神在微笑。</p>
<p>死亡亦如黎明中的花朵。</p>
<p>汉水有女神，可是追不上。</p>
<p>窈窕淑女，君子好逑。</p>
</body>
3-2 ，字体大小
<style>
body {
font-size: 16px;
}
/* 标题标签比较特殊，需要单独指定文字大小 */
h2 {
font-size: 16px;
}
</style>
</head>
<body>
<h2>myself的秘密</h2>
<p>我用双手成就你的梦想。</p>
<p>死亡如风，相伴永远。</p>
<p>胜利女神在微笑。</p>
<p>死亡亦如黎明中的花朵。</p>
<p>汉水有女神，可是追不上。</p>
<p>窈窕淑女，君子好逑。</p>
</body>
3-3 ，字体粗细
<style>
.bold {
/* font-weight: bold; */
/* 这个700 的后面不要跟单位 等价于 bold 都是加粗的效果 */
/* 实际开发中，我们跟提倡使用数字 表示加粗或者变细 */
font-weight: 700;
}
h2 {
/* font-weight: normal; */
font-weight: 400;
}
</style>
</head>
<body>
<h2>myself的秘密</h2>
<p>我用双手成就你的梦想。</p>
<p>死亡如风，相伴永远。</p>
<p>胜利女神在微笑。</p>
<p>死亡亦如黎明中的花朵。</p>
<p class="bold">汉水有女神，可是追不上。</p>
<p>窈窕淑女，君子好逑。</p>
</body>
3-4 ，字体样式
<style>
p {
font-style: italic;
}
em {
font-style: normal;
}
</style>
</head>
<body>
<p>同学，上课时候的你</p>
<em>下课时候的你</em>
</body>
3-5复合属性
加粗样式
<style>
/* 想要div 文字变倾斜 加粗 字号设置为16像素 并且 是微软雅黑 */
div {
/* font-style: italic;
font-weight: 700;
font-size: 16px;
font-family: 微软雅黑; */
/* 复合属性：简写的方式 */
/* font: font-style font-weight font-size/line-height font-family; */
/* font: italic 700 16px 微软雅黑； */
font: 20px "黑体"；
}
</style>
</head>
<body>
<div>三生三世十里桃花，一心一意百行代码。</div>
</body>
四css文本属性可定义的外观，比如颜色，对齐文本，装饰文本，文本缩进，行间距
4-1 颜色
<style>
div {
/* color: deeppink; */
/* color: #cc00ff; */
color: rgb(200, 0, 0);
}
</style>
</head>
<body>
<div>有故事的人一般都很有意思啊.小姐姐们。</div>
</body>
4-2 对齐文本
<style>
h1 {
/* 本质是让h1盒子里面的文字水平居中对齐 */
/* text-align: center; */
text-align: right;
}
</style>
</head>
<body>
<h1>居中对齐的标题</h1>
</body>
4-3装饰文本
<style>
div {
/* 下划线 */
/*text-decoration: underline; */
/* 删除线 */
text-decoration: line-through;
/* 上划线 */
/* text-decoration: overline; */
}
</style>
</head>
<body>
<div>青春的点点滴滴</div>
</body>
4-4文本缩进
<style>
p {
font-size: 24px;
/* 文本的第一行首行缩进 多少距离 */
/* text-indent: 20px; */
/* 如果此时写了2em 则是缩进当前元素2个文字大小的距离 */
text-indent: 2em;
}
</style>
</head>
<body>
<p>如果光已忘了将前方照亮，她会跟着我一起走吗，如果路会通往不知名的地方，一生好长，一瞬太短，夜里忽然醒来又选择遗忘，幸好啊，你的光又落在我身旁</p>
<p>茫然走在海边，看那潮来潮去，突然想把每朵浪花拍尽.如果大海能够带走曾经的爱，就让我用深情等待，如果深情往事你也不再留恋，就让她随风飘远。</p>
<p>十九岁的那一天，我来到黄淮的面前，</p>
</body>
4-5行间距
<style>
div {
line-height: 26px;
}
p {
line-height: 25px;
}
</style>
</head>
<body>
<div>中国人</div>
<p>如果光已忘了将前方照亮，她会跟着我一起走吗，如果路会通往不知名的地方，一生好长，一瞬太短，夜里忽然醒来又选择遗忘，幸好啊，你的光又落在我身旁</p>
<p>茫然走在海边，看那潮来潮去，突然想把每朵浪花拍尽.如果大海能够带走曾经的爱，就让我用深情等待，如果深情往事你也不再留恋，就让她随风飘远。</p>
<p>十九岁的那一天，我来到黄淮的面前，</p>
</body>
五
感想：css是一个美术师，她就像一个母亲一样呵护html这个小孩子。