55 lines
1.1 KiB
Markdown
55 lines
1.1 KiB
Markdown
|
---
|
|||
|
|
title: Introduction to CSS
|
|||
|
|
localeTitle: CSS简介
|
|||
|
|
---
|
|||
|
|
## CSS简介
|
|||
|
|
|
|||
|
|
### 什么是CSS？
|
|||
|
|
|
|||
|
|
层叠样式表（CSS）描述了页面上的html应该如何显示。
|
|||
|
|
|
|||
|
|
在CSS开发人员在页面的每个节点上使用属性或特殊标记应用样式之前。这使得标记重复并且容易出错。
|
|||
|
|
|
|||
|
|
CSS允许选择器描述每个匹配内容的外观。
|
|||
|
|
|
|||
|
|
```CSS
|
|||
|
|
body {
|
|||
|
|
font-size: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
a {
|
|||
|
|
color: rebeccapurple;
|
|||
|
|
text-decoration: underline;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 使用CSS
|
|||
|
|
|
|||
|
|
**外部样式表**允许许多页面共享相同的样式。
|
|||
|
|
|
|||
|
|
```HTML
|
|||
|
|
<link href="styles.css" rel="stylesheet" type="text/css">
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**内部样式表**将CSS应用于页面上的所有匹配标记。
|
|||
|
|
|
|||
|
|
```HTML
|
|||
|
|
<style>
|
|||
|
|
h1 {
|
|||
|
|
font-family: sans-serif;
|
|||
|
|
margin-bottom: 1.5em;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**内联CSS**将样式应用于单个标记。
|
|||
|
|
|
|||
|
|
```HTML
|
|||
|
|
<img src="..." style="border: 1px solid red;" />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 更多信息：
|
|||
|
|
|
|||
|
|
* [W3Schools的](https://www.w3schools.com/css/css_intro.asp)
|
|||
|
|
* [CSS-Tricks Almanac](https://css-tricks.com/almanac/)
|
|||
|
|
* [Sitepoint](https://www.sitepoint.com/html-css/?ref_source=github)
|