这是我参与「第四届青训营」笔记创作活动的第1天

CSS简介

CSS全称英文全称是Cascading Style Sheets，表示层叠样式表，又称串样式列表、级联样式表、串接样式表、阶层式样式表，是一种用来为结构化文档添加样式的计算机语言。

HTML决定了网页的内容，而CSS则是决定了网页内容的样式，它就像网页的外衣一样。

使用方法

CSS有三种使用方式:

```
外部CSS
```
```
内部CSS
```
```
行内CSS
```

外部CSS

外部样式在 HTML 页面<head>部分内的 <link> 元素中进行定义：

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
	<h1>这是一个一级标题</h1>
	<p>这是一个段落</p>
</body>
</html>

得到这样一个结果：

然后我们引入外部的.css文件

外部的.css文件不应该包含任何的HTML标签

“Style.css”是这样的：

body {
  background-color: lightblue;
}
h1 {
  color: navy;
  margin-left: 20px;
}
p {
	color: brown;
	font-size: large;
	margin-left: 50px;
}

可以看到将``部分的背景设置成了“lightblue”；

将`h1`颜色设置成了“navy”，同时设置左外边距为20px；

将段落部分字体设置成“brown”，字体大小设置为“large”，左外边距设置为50px

添加了样式之后的效果：

内部CSS

如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。

内部样式是在 head 部分的 <style> 元素中进行定义。

<!DOCTYPE html>
<html>
<head>
	<style>
		body {
			background-color: linen;
		}
		h1 {
			color: maroon;
			margin-left: 40px;
		}
		p {
			color: brown;
			font-size: large;
			margin-left: 50px;
		}
	</style>
</head>

<body>
	<h1>This is a heading</h1>
	<p>This is a paragraph.</p>
</body>

</html>

这样也可以实现相同的效果。

行内CSS

行内样式（也称内联样式）可用于为单个元素应用唯一的样式。

如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

<!DOCTYPE html>
<html>

<body>

	<h1 style="color:blue;text-align:center;">This is a heading</h1>
	<p style="color:red;">This is a paragraph.</p>

</body>

</html>

这种行内CSS的样式失去了样式表的许多优点，所以使用的时候要谨慎考虑具体要求。

三种方式的优先级

由于CSS有三种使用方式，那么当一个HTML同时使用这三种方式来引用多个样式的时候会不会发生冲突呢？

这就涉及到层叠顺序的问题了：

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：
    1. 行内样式
    2. 外部和内部样式表
    3. 浏览器默认样式
因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。

CSS外边距

CSS的margin属性用于在任何定义的边框之外，为元素周围创建空间。

margin使用方法

1.margin - 单独的边

主要语法为：

margin-top
margin-right
margin-bottom
margin-left

2.margin - 简写属性

为了缩减代码，可以在一个属性中指定所有外边距属性。

margin: 25px 50px 75px 100px;（顺序是：上-右-下-左）

上外边距是 25px
右外边距是 50px
下外边距是 75px
左外边距是 100px

margin: 25px 50px 75px;

上外边距是 25px
右和左外边距是 50px
下外边距是 75px

margin: 25px 50px;

上和下边距是25px
右和左边距是50px

margin: 25px;

上下左右四个边距都是25px

当margin的属性为auto时，元素在盒子中水平居中。

外边距合并

外边距合并指的就是当两个互相垂直的外边距相遇时，它们将合并成一个外边距。

合并后的外边距的高度等于两个发生合并的外间距的高度中的最大者。

外边距合并01.gif

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上或下外边距也会发生合并。

外边距合并02.gif

边距合并的意义以一个例子来阐述：

有几个文本段落组成的页面，第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

外边距合并03.gif

如果不想让边距合并怎么弄？

CSS内边距

CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。

CSS的内边距和外边距使用方法上基本一致，就不再记了。

盒子的大小

盒子大小的计算：

盒子宽度：左边框+左padding+内容宽度+右padding+右边框

盒子高度：上边框+上padding+内容宽度+下padding+下边框

结语

这是我第一次用在掘金社区记笔记，可能有很多不足的地方，日后会多加改进！

CSS的一些要点｜青训营笔记