开始第。。六篇。
其实本来想以这篇内容作为CSS学习开个头的，仔细想想学CSS的重点是要在单独为网页的样式设计建立个样式表，而本篇笔记只讲述如何为网页的一段内容设计样式。因此还是归入第一部分的学习中。
第八个示例，就管它叫初见CSS。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
华为简介
</title>
</head>
<body>
<div style="color:gray; margin: auto; width: 500px;">
<p style="text-align: center;">
<span style="background-color: gray; color: white; font-size: 24px;">
华为技术有限公司
</span>
</p>
<p>
华为技术有限公司成立于1987年，总部位于中国广东省深圳市龙岗区。
华为是
<b>
全球领先的信息与通信技术（ICT）解决方案供应商，
</b>
专注于ICT领域，坚持稳健经营、持续创新、开放合作，
在电信运营商、企业、终端和云计算等领域构筑了端到端的解决方案优势，
为运营商客户、企业客户和消费者提供有竞争力的ICT解决方案、产品和服务，
并致力于实现未来信息社会、构建更美好的全联接世界。
<b>
2013年，华为首超全球第一大电信设备商爱立信，排名《财富》世界500强第315位。
</b>
截至2016年底，华为有17多万名员工，华为的产品和解决方案已经应用于全球170多个国家，
服务全球运营商50强中的45家及全球1/3的人口。
</p>
<p>
<span style="color: aqua;">
2016年8月，华为在"2016中国企业500强"中排名第27位。
</span>
<span style="color: aquamarine;">
2017年6月6日，《2017年BrandZ最具价值全球品牌100强》公布，华为名列第49位。
</span>
2019年7月22日美国《财富》杂志发布了最新一期的世界500强名单 ，华为排名第61位。
2018年《中国500最具价值品牌》华为居第六位。
<span style="color: orangered;">
12月18日，世界品牌实验室编制的《2018世界品牌500强》揭晓，华为排名第58位。
</span>
</p>
<p>
<span style="color: skyblue;">
2018年2月，沃达丰和华为完成首次5G通话测试 ；2019年8月9日，华为正式发布鸿蒙系统。
</span>
2019年8月22日，2019中国民营企业500强发布，华为投资控股有限公司以7212亿营收排名第一。
2019年12月15日，华为获得了首批”2019中国品牌强国盛典年度荣耀品牌的殊荣”。
</p>
</div>
</body>
</html>
运行结果如图：
就是一篇带有多种文字格式的文章。
插播一条关于区块元素的知识点：
HTML里大部分HTML元素都是块级元素或内联元素。这种元素在浏览器显示时，通常会以新行开始或结束。
例如前面提到过的p段落标签，类似的还有标题h标签，ul或ol列表标签和table表格标签等。
其余不会以新行开始结束的标签则称为内联标签，例例如b加粗标签，td列元素标签，img图片标签等。
开始讲解新的标签：
当需要为网页内的一段内容或该段内容里的部分内容设计样式的时候，一般会把这段内容插进</div>标签内，div标签又被成为容器标签。d’iv标签也是一种块级元素，其本身的内容跟没有特定的含义，用于组合其它HTML元素的容器。
看到参考网站上说文档布局相比较我之前在看的mooc视频中推荐使用的，并且已经在我之前的笔记中使用的table标签定义，更推荐用div标签或者专门的表单标签</form>，因为table的本职工作是作为表格。我目前觉得不必如此拘泥于形式。
块级元素的容器标签是div，相对应的，内联元素也有容器标签</span>。当只需要针对一段文本内容进行样式设计的时候，就可以把该段文本放入span标签的内容内；当需要对一整块内容的部分文本内容设计样式的时候，则需要在div块标签的内容里的文字段内嵌入span容器标签并把指定文本放入span标签的内容内。
另外，div和span标签都可以嵌套。
前面提了这么多遍的设计样式，具体到底要怎么设计呢。
利用style样式属性。
属性的内容为一个个以分号隔开的一条或多条声明组成，声明的格式为"属性:值"。
其实在之前的学习中就涉及过样式的设计了，比如说设计图片的宽度，只不过当时是直接以声明作为标签的属性来设计。在学习了样式属性之后就需要把这个属性塞进样式属性的属性值里面。
例如示例代码的这一行
<div style="color:gray; margin: auto; width: 500px;">
就设定了这篇文字在网页内占据的宽度为500像素。
至于利用样式属性能够怎样能够对网页内的文字，图片或者排版进行什么样的设计，即针对上述内容能够进行设定的属性有哪些，直接列个表格让你记住有点不现实，因为实在是太多了。只能够在学习的过程中遇到什么设计需求，就学习相对于的属性即属性值对应的内容。
针对本次笔记的示例中用到的属性有（建议结合示例学习）：
（1）针对div标签的内容进行样式设计：
| 属性 | 说明 | 值 |
|---|---|---|
| background-color | 该内容块的背景颜色 | 颜色名（如white, red等）或颜色的6位十六进制名（如#000000,#ffffff等） |
| margin | 设置容器本身在网页内的位置 | auto：网页顶端垂直居中，等 |
| width | 这一块内容所占据的宽度 | 以px或百分比为单位的任意正整数 |
（2）针对span标签的内容进行字体或背景设计
| 属性 | 说明 | 值 |
|---|---|---|
| background-color | 该文本段的背景颜色 | 颜色名（如white, red等）或颜色的6位十六进制名（如#000000,#ffffff等） |
| color | 该文本段的文字颜色 | 颜色名（如white, red等）或颜色的6位十六进制名（如#000000,#ffffff等 |
（3）针对p段落标签的样式设计：
| 属性 | 说明 | 值 |
|---|---|---|
| text-align | 设置容器的内部元素的对齐方式 | left（居左）；center（居中）；right（居右）等 |
其实就这几个表格里列举的这几个属性真的只是冰山一角，但是饭要一口一口吃，慢慢来。况且就算是这几个属性的内部都内含玄机。
就比如说align，很容易发现网页里的内容在大部分情况下的位置都不会是简单的垂直居中那么简单，但又不能指望一个属性的值里能够详细定义一块内容的位置。
会出现这种情况是因为margin属性其实是一种“缩写”属性，真正要详细定义一块内容的位置是由margin-top/ margin-bottom/ margin-left/ margin-right四个属性来定义的，分别定义了这一块内容与网页顶端/底部/左边框/右边框之间的距离（不过通常左右间距只用定义其中一个），以px或百分比为单位。
285
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
