今天开启CSS篇章！冲！！！、
属性手册：http://css.doyoe.com/
序言：CSS语法规范
选择器 {属性名: 属性值; 属性名: 属性值;}。
1.选择器后面带空格，属性名的冒号后面也带空格，这样比较舒服
2.每个属性和属性值最好独占一行，属性值结尾别忘了分号;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>体验CSS的语法规范</title>
<style>
/* 语法规范
选择器{属性名：属性值; 属性名：属性值;} */
p {
color: red;
font: size 20px; /*这里必须加px */
}
</style>
</head>
<body>
<p>有点意思</p>
</body>
</html>
一、选择器的类型
选择器一共有四种，分别是标签选择器，类选择器，id选择器，通配符选择器。
（1）标签选择器：用HTML标签名作为选择器，按照标签名分类，为页面中某一类标签设置统一的CSS样式。
有点：能为页面中同类型的标签设置样式。 缺点：不能设计差异化样式，只能选择全部的同类标签，太局限了。
（2）类选择器：为了解决上述问题，类选择器就可以差异化选择不同标签，单独选择一个或者某几个标签，还是非常不错的。它的语法如下：
/* 2.类选择器 */
/* 语法：
.类名{
属性1:属性名1;属性2:属性名2
} */
.red{
color: red; /*将所有拥有red类的HTML元素设置为红色 */
}
调用方式：在标签中输入class属性，如下图
<ul>
<li class="red">1</li>
<li>2</li>
<li class="red">3</li>
<li>4</li>
<li>5</li>
</ul>
案例：用类选择器画盒子。用到的标签是div（因为div本身就是盒子嘛），然后是css。代码实现如下（注意语法规范，别玩了大括号以及属性值前面的空格噢，另外div本身没有宽高属性）：
.red {
width: 100px; height: 100px;
background-color: red; /*将所有拥有red类的HTML元素设置为红色 */
}
.green {
width: 100px; height: 100px;
background-color: green;
}
<div class="red"></div>
<div class="green"></div>
<div class="red"></div>
实际上类选择器在应用时，一个标签中是可以有多类名的，这些类名之间要用空格隔开。比如上面的red和green类，它们其中都包含width和height属性，那么我们是不是可以把这两个属性单独拎出来，作为一个单独的属性呢？那必然可以，实际上就类似提取公因式，代码如下：
.box {
width: 100px; height: 100px;
}
.red {
background-color: red; /*将所有拥有red类的HTML元素设置为红色 */
}
.green {
background-color: green;
}
那么我们在调用多类名时，中间用空格隔开就ok了。
<div class="box red"></div>
<div class="box green"></div>
<div class="box red"></div>
（3）id选择器。#来定义，id来调用，使用方法和类选择器类似，但是区别就在于类选择器可以调用多次，id选择器只能调用一次，class相当于人名，可以重复，id相当于是身份证号，每个人只能由一个。比如说我在style中定义了
#font {
font-size: 35px;
}
那么你会发现调用两次也没什么问题，这是因为id主要是针对js使用的，js中有个getElementById，在css和html中调用相同的id并不会报错，这个我也不太好解释，后面学到js再说吧！
<div id="font">第一次调用</div>
<div id="font">第二次调用</div>
（4）通配符选择器。语法：* {属性名:属性值; ……}，作用就是把页面中包括html和body在内的所有标签都改为相同的样式，不需要调用，在style中写上就直接改了。我觉得可能margin或者padding这种用的比较多，就像我们写word的时候通过查找替换把空格全部删掉是一个道理。
总结：
二、css字体属性
（1）font-family：设置文字字体，写法如下。这个逗号的意思是优先选择第一个字体，如果检测到你的电脑里没有第一个字体，那么就显示第二个字体，以此类推。如果字体是由多个单词加空格组成，那么要加引号。
p {font-family: 'Microsoft Yahei','Times New Roman', Times, serif;}
（2）font-size：设置字体大小，记得加px，如果定义body，那么注意对标题标签是无效的噢。
body {
font-size: 35px;
}
（3）font-weight：调整字体粗细，在开发中用下面这种样式比较多，可以实现和bold一样的效果。
.bold {
/* font-weight: bold; */
/*下面这个和上面这句话是一样的效果，数字后面不用加px，
实际开发中更提倡用数字表示加粗或者变细，100~900 */
font-weight: 700;
}
（4）font-style等等等等，有需要可以查手册：http://css.doyoe.com/
（5）字体复合属性的写法：
.code {
font-weight: 700;
font-family: 'Mircosoft Yahei';
font-size: 16px;
font-style: italic;
/* 复合写法：font:font-style font-weight font-size/line-height font-family; */
font: italic 700 20px 'Mircosoft yahei';
}
注意：一定要按照font:font-style font-weight font-size/line-height font-family;这个顺序，而且font-size和font-family绝对不可以省略，其他的都可以省略，但是这两种绝对不可以省略。如果省略其他的，就是这样写：
.code {
/* 复合写法：font:font-style font-weight font-size/line-height font-family; */
font: 20px 'Mircosoft yahei';
}
字体总结：
三、CSS文本属性
（1）text-align：文本对齐
（2）color：文本颜色
（3）text-indent：文本缩进，通常用em作单位，em是相对单位，1个em表示相对于当前文字大小的一个文字长度，也可以用px做单位，但是一般来说是2em，首行缩进2个字符嘛，是不是。
（4）text-decoration：文本装饰，有none，underline，overline，line-through，其中前两个最为常用。
（5）line-height：行间距，行间距指的是这个距离：
比如说行间距为36px，字体是16px，那么上间距和下间距分别是10px，在模仿网页时可以去量它的行间距，有个好用的工具叫做：Faststone capture ，用它去量就ok了。
四、CSS引入方式
（1）内部样式表：写在head里的style标签，实际上style写在哪里都可以，通常写在head里。
（2）行内样式表：可以直接在标签的属性里写，style=“属性名：属性值；属性名：属性值……”，这个其实用的比较少，用来定义一些简单的样式是可以的，但是多了的话这样就很复杂。
（3）外部样式表，比较重要，是开发常用的方式。
引入的步骤：首先新建css文件，把所有的css代码放进去，在css文件中只有样式没有标签。
/* 在css文件中只有样式，没有标签 */
div{
color: aqua;
}
然后在html文件中使用link来引入：rel意思是引用的是什么玩应，stylesheet意思是引用的是一个表。
<link rel="stylesheet" href="./外部样式表.css">
五、新闻页面练习
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新闻页面</title>
<link rel="stylesheet" href="./111新闻页面demo.css">
</head>
<body>
<form action="">
<h1>31省区市新增确诊病例43例 其中本土病例26例</h1>
<div class='grey'>2021年10月24日09:14    来源:<a href='http://www.baidu.com' target='_blank'>国家卫健委网站</a>
   
<input type="text" value="请输入查询条件" class="grey text">
<input type="submit" value="搜索" class="button">
</div>
<hr>
<p>
10月23日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例43例。
其中境外输入病例17例（浙江8例，上海4例，北京1例，黑龙江1例，广东1例，广西1例，云南1例），
含9例由无症状感染者转为确诊病例（浙江8例，广东1例）；本土病例26例（内蒙古7例，其中呼和浩特市3例、
锡林郭勒盟2例、阿拉善盟2例；甘肃6例，其中兰州市5例、张掖市1例；宁夏6例，其中银川市3例、吴忠市3例；
北京4例，均在昌平区；河北1例，在石家庄市；湖南1例，在株洲市；陕西1例，在西安市）。无新增死亡病例。
无新增疑似病例。
</p>
<h4>当日新增治愈出院病例28例，解除医学观察的密切接触者522人，重症病例较前一日增加6例。</h4>
<p>
境外输入现有确诊病例406例（其中重症病例1例），现有疑似病例1例。累计确诊病例9503例，
累计治愈出院病例9097例，无死亡病例。
</p>
<p class="center"><img src="./疫情地图.jpg" alt="显示错误" title="中国疫情情况"></p>
<p>
截至10月23日24时，据31个省（自治区、直辖市）和新疆生产建设兵团报告，现有确诊病例564例
（其中重症病例13例），累计治愈出院病例91558例，累计死亡病例4636例，累计报告确诊病例96758例，
现有疑似病例2例。
</p>
<h4>累计追踪到密切接触者1227655人，尚在医学观察的密切接触者28789人。</h4>
<p>31个省（自治区、直辖市）和新疆生产建设兵团报告新增无症状感染者19例，其中境外输入15例，
本土4例（湖南2例，均在长沙市；云南2例，均在德宏傣族景颇族自治州）；当日转为确诊病例9例
（均为境外输入）；当日解除医学观察15例（均为境外输入）；尚在医学观察的无症状感染者380例。
</p>
<p class='end'>本文来源：国家卫健委 责任编辑：刘鹏林NO1213</p>
</form>
</body>
</html>
CSS代码：
body {
font:16px/28px "Mircosoft yahei" /*字号/行间距 字体 */
}
p {
text-indent: 2em;
/* line-height: 26px; 设置行间距这样也可以*/
}
h1 {
text-align: center;
}
div {
text-align: center;
}
img {
width:650px; height:500px; border: 2px solid black;
}
.center {
text-align: center;
}
a {
text-decoration: none;
}
.end {
font-size: 12px;
text-indent: 0em;
color: rgb(54, 49, 49);
}
.grey {
color:#888888;
font-size: 12px;
}
.button {
font-weight: 700;
}
.text {
width:170px;
}
最终效果：
注意，谷歌浏览器提供了一种很好用的检测工具，F12就能出来，有错误的代码会自己标出来，很不错。
好了！第一部分结束，明天继续学后面的内容！
976
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
