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——新闻详情

完成样式。

对应代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新闻详情</title><style>css">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简介

完成样式

代码如下

<!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>css">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的方法实现。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>热词</title><style>css">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的方式实现，实现效果相同。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>热词</title><style>css">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效果

完成目标

对应代码

<!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>css">.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>