HTML标签构建网页框架，CSS使布局更加美观合理，本节课程是关于这两项内容的应用学习。 1.HTML 如上所述，HTML5的构建是由标签组成，而大部分标签都有两个属性：class(类名)和id(标识符)，而且通常一前一后形成起始-结束的容器（少数标签可以无需闭合标签，如），容器内的标签是容器标签的子元素，容器标签自然就是父元素了。以下是关于一个表单、导航条、权利声明的html页面示例的编译代码 ![实验楼](https://dn-simplecloud.shiyanlou.com/7892091541143296515-wm) ![实验楼](https://dn-simplecloud.shiyanlou.com/7892091541143303804-wm) 运行效果如下 ![实验楼](https://dn-simplecloud.shiyanlou.com/7892091541143314701-wm) 2.CSS CSS全名叫层叠样式表，用于控制网页标签的样式和布局的显示。一般有两种方案：通过容器，将CSS代码直接写在页面中，示例如下：另一种是单独写成一个style.css文件，再通过html的导入显示命令。 CSS的格式有两部分组成：选择器和声明（属性+值），如上示例，h1就是一个选择器，选定后以声明{color: blue;}（属性:值）控制显示方式。默认情况下子元素会继承父元素的属性设置，除非子元素自有个性化设置。另外，多个选择器可以被分到同组，共享某个声明。 ![实验楼](https://dn-simplecloud.shiyanlou.com/7892091541144361195-wm) ![实验楼](https://dn-simplecloud.shiyanlou.com/7892091541144326710-wm) 运行效果 ![实验楼](https://dn-simplecloud.shiyanlou.com/7892091541144340564-wm) 2.1派生选择器如果在代码复杂的情况下，想要根据上下文的关系，对某一选择器更改声明，可以使用 <上文标签><选择器> { 声明 } 来更改，例如： ![实验楼](https://dn-simplecloud.shiyanlou.com/7892091541144836902-wm) ![实验楼](https://dn-simplecloud.shiyanlou.com/7892091541144852839-wm) 运行效果 ![实验楼](https://dn-simplecloud.shiyanlou.com/7892091541144879843-wm) 2.2 ID 选择器相同ID值的HTML元素（容器），可以共享某一声明设置，ID选择器以 # 开头：#pid a{ color:#00755f; } 设置 id 为 pid 的元素字体颜色为 #00755f 对应的HTML网页代码新增 ![实验楼](https://dn-simplecloud.shiyanlou.com/7892091541145302509-wm) 运行效果 ![实验楼](https://dn-simplecloud.shiyanlou.com/7892091541145331519-wm) 2.3 类选择器上面说过，标签可以定义自身的类名(class)和标识符(id)，通过选择某一类名，CSS可以控制该类标签的显示效果，类选择器以 . 开头。代码编译 ![实验楼](https://dn-simplecloud.shiyanlou.com/7892091541145580932-wm) ![实验楼](https://dn-simplecloud.shiyanlou.com/7892091541145593334-wm) 运行效果 ![实验楼](https://dn-simplecloud.shiyanlou.com/7892091541145605607-wm) 2.4 属性及属性值选择器元素标签可以设置多个属性，通过索引这些属性，CSS能够快速设置标签的显示。 [title]/[title=foo] { color: black; } HTML网页代码编译 ![实验楼](https://dn-simplecloud.shiyanlou.com/7892091541145913369-wm) 运行效果 ![实验楼](https://dn-simplecloud.shiyanlou.com/7892091541145939222-wm) 2.5 常用属性 CSS中有多个常用属性，涉及背景、定位、文本、内外边距、尺寸、边框等显示控制。举个栗子 ![实验楼](https://dn-simplecloud.shiyanlou.com/7892091541146362234-wm) 运行效果 ![实验楼](https://dn-simplecloud.shiyanlou.com/7892091541146373515-wm) 2.6 框模型框模型是指用CSS设定了背景、定位、内外边距等环境的显示框架，顺序依次是外边距-边框-内边距-正文。再举个栗子 ![实验楼](https://dn-simplecloud.shiyanlou.com/7892091541147057472-wm) 首先设置所有元素的内外边距为0，再通过类选择器选定box，逐个设置外边距、边框（实线样式及粗细）和内边距。运行效果 ![实验楼](https://dn-simplecloud.shiyanlou.com/7892091541147156761-wm) 对比上下文的截图可知，更改后整体页面向左上角逼近，文字行距缩小。另外需要注意的是，外边距 margin 和内边距 padding 都可以通过对向获取，自动设置等额参数，例如 .box {padding:10px 20px} 等价于 .box {padding:10px 20px 10px 20px}。另外，当两个垂直外边距相遇时，它们会自动合并，合并后以外边距较高者的参数为定。

“楼+之Python实战第9期”实验报告