CSS基础 CSS介绍 - CSS代表级联样式表 - CSS描述了如何在屏幕，纸张或其他媒体上显示HTML元素 - CSS节省了大量工作。它可以一次控制多个网页的布局 - 外部样式表存储在CSS文件中 ```

My First CSS Example

This is a paragraph.

``` ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1370466-20200515-1589540101461) CSS语法 ```

Hello World!

These paragraphs are styled with CSS.

``` CSS规则集由一个选择器和一个声明块组成。选择器指向您要设置样式的HTML元素。声明块包含一个或多个用分号分隔的声明。每个声明都包含一个CSS属性名称和一个值，以冒号(:)分隔。多个CSS声明用分号(;)分隔，声明块用花括号({})括起来。 ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1370466-20200515-1589540218204) 元素选择器 ``` 元素选择器 p { text-align: center; color: red; } ``` 元素选择器基于元素名字选择HTML元素。以上示例，页面中所有```

```元素都会居中并用红色显示。 id选择器 ``` #para1 { text-align: center; color: red; } ``` - id选择器使用HTML元素的id属性来选择特定元素。 - 元素的ID在页面中是唯一的，因此ID选择器用于选择一个唯一的元素！ - 要选择具有特定ID的元素，请写一个井号（＃），后跟该元素的ID。 ID名称不能以数字开头！ class类选择器 - 类选择器选择具有特定类属性的HTML元素。 - 要选择具有特定类的元素，请写一个句点（.）字符，后跟类名。 HTML元素也可以引用多个类。通用选择器 ```

Hello world!

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

Me too!

And me!

``` 通用选择器（*）选择页面上的所有HTML元素 ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1370466-20200515-1589540676491) 分组选择器 ``` h1, h2, p { text-align: center; color: red; } ``` 将每个选择器使用逗号分隔”,” 分组选择器选择所有具有相同样式定义的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.

``` 所有HTML元素都可以视为盒子。 CSS盒子模型本质上是一个包装每个HTML元素的框。它包括：页边距（margins），边框（borders），填充（padding）和实际内容（content）。 - Content-框的内容，其中显示文本和图像。 - Padding-清除内容周围的区域。填充是透明的。 - Border-围绕边框和内容的边框。 - Margin-清除边界外的区域。边距是透明的。盒子模型允许我们在元素周围添加边框，并定义元素之间的空间。使用CSS设置元素的width和height属性时，只需设置内容区域的宽度和高度。要计算元素的完整大小，还必须添加填充，边框和边距。 ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1370466-20200515-1589540993630) 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.

``` 链接可以使用CSS的任意属性。可以根据链接处于何种状态来设置其样式。链接的四种状态： - a:link - 正常，未访问的链接 - a:visited - 已经访问过的链接 - a:hover - 鼠标悬停在链接上 - a:active - 链接被点击激活 ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1370466-20200515-1589541140774) 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; } ``` ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1370466-20200515-1589541223130) 组合了多个CSS属性以将链接显示为框/按钮 ```

Link Button

A link styled as a button:

This is a link ``` ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1370466-20200515-1589541281278) CSS表单 ```

Using CSS to style an HTML Form

``` HTML表单的外观可以通过CSS样式改善。 ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1370466-20200515-1589541375021) 装饰 input 输入框 ```

A full-width input field:

``` 只想设置特定输入类型的样式，则可以使用属性选择器： - input[type=text] 只选择文本输入框 - input[type=password] 只选择密码输入框 - input[type=number] 只选择数值输入框 ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1370466-20200515-1589541534979) padding输入框 ```

Padded text fields:

``` 使用padding属性添加输入框内的空间 ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1370466-20200515-1589541587904) 给输入框加边框 ```

Text fields with borders:

``` 使用border属性更改边框的大小和颜色，并使用border-radius属性添加圆角 ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1370466-20200515-1589541639706) 给输入框添加颜色 ``` input[type=text] { background-color: #3CBC8D; color: white; } ``` ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1370466-20200515-1589541696067) 聚焦输入框默认情况下，某些浏览器在获得焦点（单击）时会在输入周围添加蓝色轮廓。可以通过添加outline: none;来消除此行为。使用：:focus选择器可以在输入字段获得焦点时对其进行操作： ``` input[type=text]:focus { background-color: lightblue; } input[type=text]:focus { border: 3px solid #555; } ``` 给输入框添加图标或图片 ```

Input with icon:

``` 如果要在输入中包含图标，请使用background-image属性，并将其与background-position属性一起放置。 ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1370466-20200515-1589541782333) 给搜索输入框添加动画 ```

Animated search input:

``` ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1370466-20200515-1589541842221) 下拉列表菜单加样式 ```

A styled select menu.

``` ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1370466-20200515-1589541886361) CSS布局 display: inline-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.

display: inline-block

display: block

``` 与display:inline相比，主要区别在于display:inline-block允许在元素上设置宽度和高度。在display:inline-block中，将遵守顶部和底部边距/填充。 display:inline-block在元素之后不添加换行符，因此该元素可以位于其他元素旁边。 ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid1370466-20200515-1589542013845)

“Web开发基础”实验报告