- [CSS基础](#css基础) - [CSS介绍](#css介绍) - [CSS语法](#css语法) - [CSS选择器](#css选择器) - [元素选择器](#元素选择器) - [id选择器](#id选择器) - [class选择器](#class选择器) - [CSS通用选择器](#css通用选择器) - [分组选择器](#分组选择器) - [CSS注释](#css注释) - [CSS 盒子模型（Box Model）](#css-盒子模型box-model) - [CSS 链接](#css-链接) - [CSS表单](#css表单) - [装饰input输入框](#装饰input输入框) - [padding输入框:添加输入框内的空间](#padding输入框添加输入框内的空间) - [给输入框加边框](#给输入框加边框) - [给输入框加颜色](#给输入框加颜色) - [聚焦输入框: focus选择器可以在输入字段获得焦点时对其进行操作：](#聚焦输入框-focus选择器可以在输入字段获得焦点时对其进行操作) - [给输入框添加图标和图片](#给输入框添加图标和图片) - [给搜索输入框加动画](#给搜索输入框加动画) - [下拉列表菜单加样式](#下拉列表菜单加样式) # CSS基础 ## CSS介绍截图： ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200509-1589002058108) ## CSS语法 ```html

Hello World!

These paragraphs are styled with CSS.

``` 截图： ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200509-1589002900790) ## CSS选择器 ### 元素选择器 ```html p { text-align: center; color: red; } ``` ### id选择器 ```html

Hello World!

These paragraphs are styled with CSS.

``` 截图： ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200509-1589003220792) ### class选择器 ```html

Hello World!

These paragraphs are styled with CSS.

``` 截图： ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200509-1589003601060) ### CSS通用选择器 ```html

Hello world!

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

Me too!

And me!

``` 截图： ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200509-1589003955305) ### 分组选择器 ```html h1, h2, p { text-align: center; color: red; } ``` 截图： ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200509-1589010078404) ## CSS注释 ```html /* This is a multi-line comment */ p { color: red; } ``` ## CSS 盒子模型（Box Model） ```html

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.

``` 截图： ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200509-1589010393033) ## CSS 链接 ```html

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.

``` 截图：未点击前： ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200509-1589011303669) 获取焦点后： ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200509-1589011324613) 访问过网站后： ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200509-1589011359207) ```html

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.

``` 截图： ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200509-1589011734608) ```html

Link Button

A link styled as a button:

This is a link ``` 截图: 开始的时候： ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200509-1589012375567) 获取焦点后： ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200509-1589012319052) ## CSS表单 ```html Document

First Name:
Last name:
Country:

``` 截图： ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200509-1589014399278) ### 装饰input输入框 ```html

A full-width input field:

``` ### padding输入框:添加输入框内的空间 ```html

Padded text fields:

``` ### 给输入框加边框 ```html input[type=text] { border: none; border-bottom: 2px solid red; } ``` ### 给输入框加颜色 ```html input[type=text] { background-color: #3CBC8D; color: white; } ``` ### 聚焦输入框: focus选择器可以在输入字段获得焦点时对其进行操作： ```html input[type=text]:focus { background-color: lightblue; border: 3px soid #555; } ``` ### 给输入框添加图标和图片 ```html

Input with icon:

``` 截图： ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200509-1589015512210) ### 给搜索输入框加动画 ```html

Animated search input:

``` 截图未点击前： ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200509-1589017606341) 点击以后： ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200509-1589017618687) ### 下拉列表菜单加样式 ```html

A styled select menu.

``` 截图： ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370525-20200509-1589017770070)

“Web开发基础”实验报告