##实验8 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.

![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200512-1589253101093) ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200514-1589444334389) ####为什么使用CSS？ CSS用于定义网页的设计，针对不同的设备不同大小屏幕的显示设计、布局等

My First CSS Example

This is a paragraph.

![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200512-1589254086618) ###CSS语法 CSS规则集由一个选择器和一个声明块组成 ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200512-1589254729699) 在下列示例中，所有p元素都将居中对齐，并带有红色文本颜色

Hello World!

These paragraphs are styled with CSS.

![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200512-1589254890755) ####元素选择器元素选择器基于元素名字选择HTML元素。以下示例，页面中所有p元素都会居中并用红色显示 p { color: red; text-align: center; } ####id选择器 id选择器使用HTML元素的id属性来选择特定元素 #para1 { text-align: center; color: red; } ####class类选择器类选择器选择具有特定类属性的HTML元素在此示例中，所有带有 class="center"的HTML元素将为红色且居中对齐 .center { text-align: center; color: red; } 在此示例中，只有具有class ="center"的p元素将居中对齐 p.center { text-align: center; color: red; } ####CSS通用选择器通用选择器（*）选择页面上的所有HTML元素

Hello world!

Every element on the page will be affected by the style.

Me too!

And me!

![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200512-1589258358621) ####分组选择器分组选择器将具有相同样式定义的HTML元素用“，”隔开，一起定义。 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注释

Hello world!

Every element on the page will be affected by the style.

![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200512-1589259130048) 或 p { color: red; /* Set text color to red */ } 或 /* This is a multi-line comment */ p { color: red; } ###CSS盒子模型（Box Model）示例

Demonstrating the Box Model

The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.

This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200512-1589259726886) 盒子模型 ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200512-1589259895671) ###CSS链接链接的样式: ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200512-1589260127730) 链接的状态: a:link - 正常，未访问的链接 a:visited - 已经访问过的链接 a:hover - 鼠标悬停在链接上 a:active - 链接被点击激活示例:

This is a link

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.

Note: a:active MUST come after a:hover in the CSS definition in order to be effective.

![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200512-1589260714757) text-decoration属性: 去掉链接下划线 background-color属性: 设置链接背景颜色。链接按钮

Link Button

A link styled as a button:

This is a link ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200512-1589261087496) ###CSS表单示例

Using CSS to style an HTML Form

![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200512-1589261443004) ####装饰 input 输入框 width属性确定输入字段的宽度

A full-width input field:

![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200512-1589261625151) padding属性添加输入框内的空间

Padded text fields:

![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200512-1589261869746) border属性更改边框的大小和颜色，并使用border-radius属性添加圆角

Text fields with borders:

![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200512-1589262149746) border-bottom属性：底部边框 input[type=text] { border: none; border-bottom: 2px solid red; } ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200512-1589262262587) ####给输入框添加颜色 background-color属性为输入添加背景色 input[type=text] { background-color: #3CBC8D; color: white;} ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200512-1589262401606) ####聚焦输入框 input[type=text]:focus { background-color: lightblue;} ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200514-1589438659574) ####给输入框添加图标或图片 ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200514-1589442214506) ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200514-1589442804468) ####给搜索输入框添加动画 ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200514-1589442439582) ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200514-1589442855720) ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200514-1589442869090) ####下拉列表菜单加样式 ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200514-1589443329730) ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1356237-20200514-1589444289382)

Welcome to My Homepage

Same Page Different Stylesheets

No Styles

Side-Bar

My First CSS Example

Hello world!

Hello world!

Demonstrating the Box Model

Link Button

Using CSS to style an HTML Form

“Web开发基础”实验报告