#例题 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200512-1589269197712) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200512-1589269205033) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200512-1589269213727) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200512-1589269222020) #CSS语法 >```p```是CSS中的选择器（它指向要设置样式的HTML元素：```

```） ```

Hello World

These paragraphs are styled with Css.

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200512-1589269506450) #id选择器 ```

Hello World

These paragraphs are styled with Css.

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200512-1589269737849) #class类选择器 ```

Hello World

These paragraphs are styled with Css.

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200512-1589269807602) #CSS通用选择器```*``` > 通用选择器（```*```）选择页面上的所有HTML元素 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200512-1589270076077) #分组选择器 ```

Hello World

Hello

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

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200512-1589270183889) #CSS盒子模型 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200512-1589270567836) #CSS链接 ```

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.

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200512-1589271070970) ```

Link Button

A link styled as a button:

This is a link ``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200512-1589271371735) #CSS表单 ```

Using CSS to style an HTML Form

First Name Last name country

``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200512-1589272066159) #装饰 input 输入框 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200512-1589272216934) #padding输入框 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200512-1589272429697) #给输入框加边框 ``` ``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200512-1589272522062) ``` border:none; border-bottom:2px solid red; ``` ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200512-1589272615215) #给输入框添加颜色 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200512-1589272693062) #聚焦输入框 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200512-1589272824844) #给输入框添加图标或图片 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200512-1589273491003) #给搜索输入框添加动画 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200512-1589273543880) ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200512-1589273552147) #下拉列表菜单加样式 ![image.png](https://dn-simplecloud.shiyanlou.com/courses/uid1356258-20200512-1589273723661)

“Web开发基础”实验报告