1.代码示例 image.png 2.CSS语法 ```

Hello World!

These paragraphs are styled with CSS.

``` 3.CSS选择器元素选择器 ``` p{ color:red; text-align:center; } ``` id选择器 ``` #para1{ text-align:center; color:red; } ``` class类选择器所有带有 class="center"的HTML元素将为红色且居中对齐 ``` .center{ text-align:center; color:red; } ``` 只有具有class ="center"的元素将居中对齐 ``` p.center{ text-align:center; color:red; } ``` CSS通用选择器 ```

Hello World!

Every element on the page will be.....

Me too!

And me!

``` 分组选择器 ``` h1,p{ text-align:center; color:red; }``` image.png 4.CSS注释 CSS注释使用/开始，并用/结尾。 5.CSS盒子模型 ```

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.

``` 6.CSS链接 text-decoration属性经常用于去掉链接下划线使用background-color属性设置链接背景颜色 ```

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.

``` 链接按钮 ```

Link Button

A link styled as a button:

This is a link ``` 7.CSS表单 ```

Using CSS to style an HTML Form

``` 8.装饰input输入框 ```

A full-width input field:

``` 9.padding输入框 ```

Padded text fields:

``` 10.给输入框加边框 ```

Text fields with borders:

``` 如果只需要底部边框，可以使用border-bottom属性 input[type=text] { border:none; border-bottom:2px solid red; } 11.给输入框添加颜色 ``` Text fields with borders: First Name Last Name ``` 12.聚焦输入框 ``` Text fields with borders: First Name Last Name ``` 13.给输入框添加图标或图片 ``` Input with icon: Search.. ``` 14.给搜索输入框添加动画 ``` Animated search input: Search.. ``` 15.下拉列表菜单加样式 ```

A styled select menu.

``` 16.CSS布局 display: inline-block ```

The display Property

display:inline

Lorem ipsum dolor...Aliquamvenenatisgravida nisl sit amet facilists...

display:inline-block

Lorem ipsum dolor...Aliquamvenenatisgravida nisl sit amet facilists...

display:inline

Lorem ipsum dolor...Aliquamvenenatisgravida nisl sit amet facilists...

``` ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1421946-20200618-1592472876233) ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1421946-20200618-1592472894121)

“Web开发基础”实验报告