1.什么是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/uid1370511-20200514-1589465732664) 2.CSS规则集由一个选择器和一个声明块组成： CSS语法选择器指向您要设置样式的HTML元素。声明块包含一个或多个用分号分隔的声明。每个声明都包含一个CSS属性名称和一个值，以冒号(:)分隔。多个CSS声明用分号(;)分隔，声明块用花括号({})括起来。 ```

Hello World!

These paragraphs are styled with CSS.

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370511-20200514-1589465803942) 3.元素选择器基于元素名字选择HTML元素。 ```

I like you

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370511-20200514-1589466552993) 4.id选择器；class选择器 ``` I like you

Wow Wow!

Amazing!Unbelieve!

This paragraph refers to two classes.

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370511-20200514-1589467104083) 5.CSS通用选择器 ```

Hello world!

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

Me too!

And me!

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370511-20200514-1589467198811) 6.分组选择器 ``` h1, h2, p { text-align: center; color: red; } ``` 7.CSS/* */注释 ``` /* This is a single-line comment */ p { color: red; } p { color: red; /* Set text color to red */ } /* This is a multi-line comment */ p { color: red; } ``` 8.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.

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370511-20200514-1589468515769) 元素的宽度和高度 ``` div { width: 320px; padding: 10px; border: 5px solid gray; margin: 0; } ``` 计算过程如下： ``` 320px (width) + 20px (left + right padding) + 10px (left + right border) + 0px (left + right margin) = 350px Total element width = width + left padding + right padding + left border + right border + left margin + right margin Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin ``` 9.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.

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370511-20200515-1589535791656) text-decoration属性经常用于去掉链接下划线 ``` a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: underline; } ``` 可以使用background-color属性设置链接背景颜色 ``` a:link { background-color: yellow; } a:visited { background-color: cyan; } a:hover { background-color: lightgreen; } a:active { background-color: hotpink; } ``` 链接按钮 ```

Link Button

A link styled as a button:

This is a link ``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370511-20200515-1589535926334) 10.HTML表单的外观可以通过CSS样式改善 ```

Using CSS to style an HTML Form

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370511-20200515-1589535980721) 11.装饰 input 输入框使用width属性确定输入字段的宽度： ```

A full-width input field:

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370511-20200515-1589536039236) 使用padding属性添加输入框内的空间: ```

Padded text fields:

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370511-20200515-1589536106275) 使用border属性更改边框的大小和颜色，并使用border-radius属性添加圆角： ```

Text fields with borders:

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370511-20200515-1589536154213) 如果只需要底部边框，可以使用border-bottom属性： ``` input[type=text] { border: none; border-bottom: 2px solid red; } ``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370511-20200515-1589536209119) 使用background-color属性为输入添加背景色，并使用color属性更改文本颜色： ``` input[type=text] { background-color: #3CBC8D; color: white; } ``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370511-20200515-1589536261399) 默认情况下，某些浏览器在获得焦点（单击）时会在输入周围添加蓝色轮廓。可以通过添加outline: none;来消除此行为。使用：:focus选择器可以在输入字段获得焦点时对其进行操作： ``` input[type=text]:focus { background-color: lightblue; } input[type=text]:focus { border: 3px solid #555; } ``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370511-20200515-1589536415286) 12.如果要在输入中包含图标，请使用background-image属性，并将其与background-position属性一起放置。还要注意，我们添加了一个较大的左填充来保留图标的空间： ```

Input with icon:

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370511-20200515-1589536478223) 13.在此示例中，我们使用CSStransition属性为搜索输入获得焦点时的宽度设置动画 ```

Animated search input:

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370511-20200515-1589536530562) 14.下拉列表菜单加样式 ```

A styled select menu.

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370511-20200515-1589536635384) 15.以下示例显示display的不同行为display:inline，display:inline-block和display:block： ```

The display Property

display: inline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. Aliquam venenatis gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.

``` ![图片.png](https://dn-simplecloud.shiyanlou.com/courses/uid1370511-20200515-1589537315652)

“Web开发基础”实验报告