![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370597-20200505-1588638371371) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370597-20200505-1588638402481) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370597-20200505-1588638422854) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370597-20200505-1588638437346) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370597-20200505-1588638468679) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370597-20200505-1588638498697) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370597-20200505-1588638513490) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370597-20200505-1588638541572) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370597-20200505-1588638585236) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370597-20200505-1588638637074) **什么是`CSS`？** - `CSS`代表级联样式表 - `CSS`描述了如何在屏幕，纸张或其他媒体上显示HTML元素 - `CSS`节省了大量工作。它可以一次控制多个网页的布局 - 外部样式表存储在`CSS`文件中

Welcome to My Homepage

Use the menu to select different Stylesheets

Stylesheet 1
Stylesheet 2
Stylesheet 3
Stylesheet 4
No Stylesheet

Same Page Different Stylesheets

This is a demonstration of how different stylesheets can change the layout of your HTML page. You can change the layout of this page by selecting different stylesheets in the menu, or by selecting one of the following links:
Stylesheet1, Stylesheet2, Stylesheet3, Stylesheet4.

No Styles

This page uses DIV elements to group different sections of the HTML page. Click here to see how the page looks like with no stylesheet:
No Stylesheet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Hello World!

These paragraphs are styled with CSS.

CSS选择器用于“查找”（或选择）要设置样式的HTML元素。 CSS选择器可以分为五类： - 简单选择器（根据`name`，`id`，`class`选择元素） - 组合器选择器（根据它们之间的特定关系选择元素） - 伪类选择器（根据特定状态选择元素） - 伪元素选择器（选择元素的一部分并设置其样式） - 属性选择器（根据属性或属性值选择元素）在此示例中，只有具有`class ="center"`的``元素将居中对齐： p.center { text-align: center; color: red; } h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; } 也可以使用逗号进行分割 h1, h2, p { text-align: center; color: red; } CSS注释使用`/*`开始，并用`*/`结尾。一般有以下三种注译方法： ## CSS盒子模型所有HTML元素都可以视为盒子。在CSS中，谈论设计和布局时使用术语“盒子模型”。 CSS盒子模型本质上是一个包装每个HTML元素的框。它包括：页边距（margins），边框（borders），填充（padding）和实际内容（content）链接的四种状态： - a:link - 正常，未访问的链接 - a:visited - 已经访问过的链接 - a:hover - 鼠标悬停在链接上 - a:active - 链接被点击激活 `text-decoration`属性经常用于去掉链接下划线。 input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit] { width: 100%; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } div { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } 使用`width`属性确定输入字段的宽度：与`display:inline`相比，主要区别在于`display:inline-block`允许在元素上设置宽度和高度。另外，在`display:inline-block`中，将遵守顶部和底部边距/填充，但在`display:inline`中则不考虑。与`display:block`相比，主要区别在于`display:inline-block`在元素之后不添加换行符，因此该元素可以位于其他元素旁边。

Welcome to My Homepage

Same Page Different Stylesheets

No Styles

Side-Bar

“Web开发基础”实验报告