Web开发（二）CSS3基础与进阶
写在前面
参考黑马程序员前端Web教程做的笔记，主要是想后面自己搭建网页玩。
这部分是前端HTML5+CSS3+移动web视频教程的CSS3基础与进阶部分，包括CSS3的选择器、文字控制属性、背景属性、显示模式等CSS基础特性。
CSS基础
基础选择器
CSS是给浏览器看的，作用：美化内容。
示例如下。
CSS引入方式
stylesheet，即样式表
外部样式表示例：
对应的css写法同内部style相同
行内样式示例
选择器
标签选择器
类选择器
最常用的选择器之一
用多个类名例子：
id选择器
*通配符
通配符用于开发初期清楚标签默认样式使用
画盒子
文字控制属性
常见属性设定如下：
font相关
通过Google的检查，可以进入调试工具来检查是否。Google中，默认字体的像素大小为16px。
关于字体粗细，一般使用数字的写法，而比较少用关键字的写法。
字体倾斜
行高，由上间距、文本高度、下间距组成。通常上间距=下间距
使用行高可以实现文字垂直居中，通过设定和div相同的高度，即可完成垂直居中。（单行文字）
字体族font-family。实际使用直接从已有网页（如京东、淘宝等）复制即可。
font复合属性，实际使用中同样直接从已有网页（如京东、淘宝等）复制即可。
实际中，设定"是否倾斜"后，可以跳过"是否加粗"属性。
文本缩进、对齐与修饰线
文本缩进。
em：em space或者叫em width。表示字母 "M" 的宽度，用作计量单位时，可以理解为相对于当前字体大小的倍数。
文本对齐
文本居中里面，居中的是文字内容，而不是标签。如下所示，h1标签大小并未发生变化。
同样可以设置图片居中。
文本修饰线
文字颜色
RGB表示法，了解即可。十六进制中，两两一组，如果数字相同，可以化简为同一位。如#ffcc00->#fc0
调试工具
错误出现在20-调试工具.html的第九行。
通过勾选复选框可以调试代码属性。
综合案例1------新闻详情
完成样式。
对应代码如下
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新闻详情</title>
<style>
h1{
font-weight: 400;
font-size: 30px;
text-align: center;
color:#333;
}
div{
font-size: 14px;
color: #999;
}
p{
font-size: 18px;
text-indent: 2em;
color: #333;
}
.img{
text-align: center;
}
</style>
</head>
<body>
<h1>在希望的田野上 | 湖北秋收开镰 各地多举措保增产增收</h1>
<div>
来源：央视网 | 2222年12月12日 12:12:12
</div>
<p>
<strong>央视网消息</strong>：眼下，湖北省秋收开镰已有一周多的时间。水稻收割已经超过四成，玉米收割七成。湖北省通过大力推广新品种水稻，建设高标准农田等一系列措施，为秋粮稳产提供有力支撑。
</p>
<p>
中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市，370万亩中稻已经收割四成以上。
</p>
<div class="img">
<img src="./img/1.jpg" alt="CCTV1的拖拉机照片">
</div>
<p>
王化林说的新品种，是湖北省研发的杂交水稻"华夏香丝"，不仅产量高，还具有抗病、抗倒、抗高温的特性。在荆门漳河镇的一工程示范田内，像"华夏香丝"这样抗旱节水的品种还有20多个，这些水稻新品将在荆门全面推广，确保来年增产增收。
</p>
<p>
此外，湖北还大力推进高标准农田建设。截至今年6月，已建成3980万亩高标准农田。目前，湖北全省仍有1800多万亩中稻正在有序收割中，预计10月中旬收割完毕。
</p>
</body>
</html>综合案例2------CSS简介
完成样式
代码如下
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS简介</title>
<style>
h1{
color: #333;
}
p{
font-size:14px;
color:#444;
line-height: 30px;
text-indent: 2em;
}
.url{
color: #0069c2;
}
li{
font-size:14px;
color:#444;
line-height: 30px;
}
</style>
</head>
<body>
<h1>CSS(层叠样式表)</h1>
<p>
层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种<a href="#" class="url">样式表</a>语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
</p>
<p>
<strong>CSS 是开放网络的核心语言之一，</strong>由 W3C 规范 实现跨浏览器的标准化。CSS 节省了大量的工作。 样式可以通过定义保存在外部.css 文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准， CSS3 分成多个小模块且正在标准化中。
</p>
<ul>
<li>CSS 介绍 如果你是Web开发的新手，请务必阅读我们的CSS基础 文章以学习CSS的含义和用法。</li>
<li>CSS 教程 我们的CSS学习区包含了丰富的教程，它们覆盖了全部基础知识，能使你在CSS之路上从初出茅庐到游刃有余。</li>
<li>CSS 参考 针对资深Web开发者的<a href="#" class="url">详细参考手册</a>，描述了CSS的各个属性与概念。</li>
</ul>
</body>
</html>CSS进阶
复合选择器
后代选择器
注意，会选择父亲后代的所有选择器
子代选择器
可用子代选择器只选儿子span
并集选择器
交集选择器（了解）
比如必须选择p标签和class='box'标签，这儿的点是".box"中的点。
伪类选择器
基础
比如选择鼠标划过的状态，让它和其他的标签不一样（如图中的橙色）
任何标签都可以设置鼠标悬停hover状态
拓展（了解）
CSS三大特性
继承性
h1的默认font-size为2em，相当于父级font-size的两倍，所以body的font-size为30px，两倍是60px
层叠性
即div应该为绿色。
这里同一个选择器被定义了多次，后面的属性就会覆盖前面的属性。
优先级
基础
叠加计算规则
方法
- 首先判断是否为important或者为继承。
- 再比较上述规则中的第一条。
PS：继承就是父级标签的样式，而没有特定到当前的子标签中。
例子1
这些选择器都直接控制文本，而不是间接控制的，故没有继承，也明显没有important。
所以直接比较优先度，最后为橙色
例子2
.father为父类，所以为继承。因此最后为红色。
例子3
其中，#father虽然为important，但是它是父类的important，即继承情况，因此优先度低。
Emmet写法（简写方法）
其中div.类名还可以直接简化为".类名"
背景属性
背景图image
在浏览器中，背景图默认效果为平铺，即复制。
如下示例，原本图片是一只猫，结果被平铺（复制）为了四只猫。
平铺方式repeat
可以通过repeat控制背景图的平铺方式。
no-repeat示例，图片默认显示在左上角，剩余默认为背景色。
背景图位置position
三种方法（包括关键字和坐标混用）都可。
如果坐标取负数，图片取负值的位置会被砍掉（因为该部分图片不包括在盒子中）
背景图缩放size
百分比缩放也是等比例缩放的，而且百分比针对的是宽度。
背景图固定attachment
背景复合属性background
显示模式
基础
转换显示模式
inline在工作中不常用。图片默认其底部与文字基线对齐，所以向上撑开。
综合案例1------热词
任务目标：
题目示例中文字为超链接，采用了将"a"修改为block的方法实现。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>热词</title>
<style>
a{
display: block;
width: 200px;
height: 80px;
background-color:#3064bb;
color: #fff;
text-decoration: none;
font-size: 18px;
line-height: 80px;
text-align: center;
}
a:hover{
background-color: #608dd9;
}
</style>
</head>
<body>
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
<a href="#">Vue</a>
<a href="#">React</a>
</body>
</html>实际上笔者写的时候选择了div块包裹a的方式实现，实现效果相同。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>热词</title>
<style>
div{
display: block;
width: 200px;
height: 80px;
background-color:#3064bb;
text-align: center;
}
div a{
text-decoration: none;
color: #fff;
font-size: 18px;
line-height: 80px;
}
div:hover{
background-color: #608dd9;
}
</style>
</head>
<body>
<div><a href="#">HTML</a></div>
<div><a href="#">CSS</a></div>
<div><a href="#">JavaScript</a></div>
<div><a href="#">Vue</a></div>
<div><a href="#">React</a></div>
</body>
</html>综合案例2------banner效果
完成目标
对应代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>banner效果</title>
<style>
.banner{
height: 500px;
background-color: #f3f3f4;
background-image: url(./img/bk.png);
background-repeat: no-repeat;
background-position: left bottom;
/* 继承给子类 */
text-align: right;
color: #333;
}
.banner h2{
font-size: 36px;
font-weight: 400;
line-height: 100px;
}
.banner p{
font-size: 20px;
font-weight: 400;
}
.banner a{
/* display: block; */
/* block元素会占一整行，所以不能向右对齐 */
display: inline-block;
background-color: #f06b1f;
width: 125px;
height: 40px;
background-position: right;
text-decoration: none;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div class="banner">
<h2>让创造产生价值</h2>
<p>
我们希望小游戏平台可以提供无限的可能性，让每一个创作者都可以将他们的才华和创意传递给用户。
</p>
<a href="#">我要报名</a>
</div>
</body>
</html>