HTML/CSS3

1.CSS

CSS的作用在于在HTML的基础上(决定网页的内容和结构)对网页进行排版布局对网页中的元素提供样式使得网页显得更加精美
CSS全称是cascading style sheets 即层叠样式表
CSS样式的书写格式：样式名: 样式值
- 例如：color: red
- 建议:之后进行空格
CSS样式应用到html元素的三种方法
- 内联样式(inline style)
  - 所谓内联其实就是将样式内置到标签中的意思
- 文档样式表(document style sheet)
  - 所谓文档其实就是将样式内置到文档中的意思
- 外部样式表(external style sheet)
  - 所谓外部其实就是将样式内置到外部的一个单独的css文件中

2.内联样式

实现：将CSS样式作为元素的style属性值
- 例如：<div style="color: blue; background-color: red;">文字内容</div>
- 多个CSS样式在属性值中以;进行隔开而且建议每个CSS样式之后都加上;

3.文档样式表

实现：将CSS样式内置head元素的style元素中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">div {color: blue;background-color: yellow;}</style>
</head>
<body>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
</body>
</html>

style元素中type属性的默认值为text/css 可省略
利用文档样式表可以统一设置、修改多个元素的相同样式

4.外部样式表

实现：将样式单独写在css文件中然后在当前网页的head元素中用link元素对css文件进行引用
利用外部样式表可以解决同时设置多个网页中公共部分样式时频繁使用文档样式表的弊端
rel属性不可或缺他表示链接者和被链接者之间的关系
而且一般rel一旦确定的话那么相应的type属性也会随之确定两者是一一对应的关系所以可以省略type
注意：css文件中的属性值可能出现中文为了避免中文乱码所以我们需要在css文件中设置一下编码方式和浏览器的一致设置的格式为：@charset “xxx”;

style.css

@charset "UTF-8";
div {color: red;background-color: blue;
}

page_01.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
</body>
</html>

page_02.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
</body>
</html>

5.三个样式的应用场景

内联样式：CSS样式作用于单个元素上
文档样式表：CSS样式作用于同一个文档中的若干个元素上(解决频繁使用内联样式表的弊端)
外部样式表：CSS样式作用于多个文档中的公共部分(解决频繁使用文档样式表的弊端)

6.@import指令

利用该指令我们可以实现link元素导入外部样式表一样的功能
该指令属于CSS语法所以需要内置到三种样式之中

以下演示了导入多张外部样式表的不同方式

我们可以通过多个link元素来导入多张外部样式表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="css/style2.css">
</head>
<body>
<!-- div为红体蓝底的样式 -->
<div>我是div</div>
<!--p为紫体橙底的样式-->
<p>我是p</p>
</body>
</html>

我们可以通过多个@import来导入多张外部样式表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>@import "css/style.css";@import "css/style2.css";</style>
</head>
<body>
<!-- div为红体蓝底的样式 -->
<div>我是div</div>
<!--p为紫体橙底的样式-->
<p>我是p</p>
</body>
</html>

我们可以通过将多张样式表的内容集成到一张样式表中然后通过link/@import的方式导入一张样式表即可

	<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>@import "css/style3.css";</style>
</head>
<body>
<!-- div为红体蓝底的样式 -->
<div>我是div</div>
<!--p为紫体橙底的样式-->
<p>我是p</p>
</body>
</html>

	<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/style3.css">
</head>
<body>
<!-- div为红体蓝底的样式 -->
<div>我是div</div>
<!--p为紫体橙底的样式-->
<p>我是p</p>
</body>
</html>

一般在开发过程当中 @import不使用大部分情况都是用的是link元素来导入外部样式表

7.细节

外部样式表、文档样式表比内联样式多了一个’表’字？原因在于内联样式只作用于一个元素而外部样式表/文档样式表可以作用于多个元素上
如下图所示为多个元素设置多个样式这就形成了一张样式表

8.CSS的注释

CSS的注释方式和HTML不一样其格式为：/* 注释内容 */

示例

	<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>strong {/* 这是一个注释 */color: green;background: pink;}</style>
</head>
<body>
<strong>我是strong</strong>
</body>
</html>

注意：不要在CSS环境中使用其他的注释比如：HTML注释() 这样会导致CSS的作用效果失效

示例

	<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style><!-- 这是一个注释 -->strong {/* 这是一个注释 */color: green;background: pink;}</style>
</head>
<body>
<strong>我是strong</strong>
</body>
</html>

9.HTML和CSS的编写建议

建议内容/结构和样式分离

不要通过html标签的属性去设置样式
不推荐以下写法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title></head>
<body bgcolor="orange"></body>
</html>

推荐以下写法

	<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {background-color: orange;}</style>
</head>
<body></body>
</html>

在没有CSS的年代都是利用font标签为html元素设置样式的而CSS的出现就是为了解放html设置元素所以更加不建议通过html去设置样式
你可以发现在h5标准下 font标签是不建议使用的(deprecated 即废弃)

10.设置网页图标

我们可以通过link元素设置网页图标并且网页图标仅支持.ico、.png格式的图片 rel也要设置正确(rel一旦设置 type也就随之确定所以可省略)
- 示例(自定义网页图标为京东图标)
```
	<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="icon" href="https://www.jd.com/favicon.ico">
</head>
<body></body>
</html>
```