1.外部样式表
外部样式表是最理想的CSS引用方式，在实际开发当中，为了提升网站的性能和维护性，一般都是使用外部样式表。所谓的“外部样式表”，就是把CSS代码和HTML代码都单独放在不同文件中，然后在HTML文档中使用link标签来引用CSS样式表。 当样式需要被应用到多个页面时，外部样式表是最理想的选择。使用样式表，你就可以通过更改一个CSS文件来改变整个网站的外观。 外部样式表在单独文件中定义，并且在标签对中使用link标签来引用。
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
| 属性 | 值 | 描述 |
|---|---|---|
| rel | stylesheet 必需 | 定义当前文档与被链接文档之间的关系。 |
| type | MIME_type | 规定被链接文档的 MIME 类型。 |
| href | URL | 定义被链接文档的位置。 |
2、内部样式表
内部样式，指的就是把CSS代码和HTML代码放在同一个文件中，CSS样式在<style>标签内定义
<html lang="en">
<head>
<title></title>
<!--这是内部样式表，CSS样式在style标签中定义-->
<style type="text/css">
p{color:Red;}
</style>
</head>
<body>
<p>我引用了内部样式表</p>
</body>
3.内联样式表
跟内部样式表不同，CSS样式不是在<style></style>标签对中定义，而是在标签的style属性中定义。
<html lang="en">
<head>
<title></title>
</head>
<body>
<p style="color:Red; ">我引用了内联样式表/p>
</body>
</html>
1.元素的id属性
id属性被赋予了标识页面元素的唯一身份。如果一个页面出现了多个相同id属性取值，CSS选择器或者JavaScript就会因为无法分辨要控制的元素而最终报错。
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css1.css">
<style>
p{
color:red;
}
#p1{
color:blue;
}
#p2{
color:green;
}
</style>
</head>
<p>没有id的p</p>
<p id="p1">id=p1的p</p>
<p id="p2">id=p2的p</p>
同一个HTML页面中，不允许出现两个相同的id。不过要注意一下，在不同页面是可以出现相同id的元素。
2.元素的class属性
class，顾名思义，就是“类”。它采用的思想跟其他C、Java等编程语言的“类”相似。我们可以为同一个页面的相同元素或者不同元素设置相同的class，然后使得相同的class具有相同的CSS样式。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
color: red;
}
.p1 {
color: blue;
}
</style>
</head>
<body>
<p>没有class的p</p>
<p class="p1">1</p>
<p class="p1">2</p>
<p class="p1">3</p>
</body>
id和class就像你的身份证号和姓名，身份证号是全国唯一的，id号也就是唯一的，class（类名）就是姓名，两个人的姓名就有可能一样。
此外，需要注意一下：
（1）一个标签可以同时定义多个class；
（2）id也可以写成name，区别在于name是HTML中的标准，而id是XHTML中的标准，现在网页的标准都是使用id，所以大家尽量不要用name属性；
1.CSS文字属性
| 属性 | 说明 |
|---|---|
| font-family | 字体类型 |
| font-size | 字体大小 |
| font-weight | 字体粗细 |
| font-style | 字体斜体 |
| color | 颜色 |
<p style="font-family: 'Arial Black'; font-size: large; font-style: normal ">字体格式</p>
2.CSS段落属性
| 属性 | 说明 |
|---|---|
| text-decoration | 下划线、删除线、顶划线 |
| text-transform | 文本大小写 |
| font-varient | 将英文文本转换为“小型”大写字母 |
| text-indent | 段落首行缩进 |
| text-align | 文本水平对齐方式 |
| line-height | 行高 |
| letter-spacing | 字距 |
| word-spacing | 词距 |
1.边框属性
| 属性 | 说明 |
|---|---|
| border-width | 边框的宽度 |
| border-style | 边框的外观 |
| border-color | 边框的颜色 |
2.1.局部边框
| 属性 | 说明 |
|---|---|
| border-top | 上边框 |
| border-bottom | 下边框 |
| border-left | 左边框 |
| border-right | 右边框 |
1 .属性
| 属性 | 说明 |
|---|---|
| background-color | 背景颜色 |
| background-image | 定义背景图像的路径，这样图片才能显示嘛 |
| background-repeat | 定义背景图像显示方式，例如纵向平铺、横向平铺 |
| background-position | 定义背景图像在元素哪个位置 |
| background-attachment | 定义背景图像是否随内容而滚动 |
background-image: url("img/0301181430.jpg");
background-size: 100px;
background-position: 100px 200px;
background-repeat: no-repeat;
background-color: aqua;
1.图片对齐方式
| 属性 | 说明 |
|---|---|
| text-align | 图片水平对齐方式 |
| vertical-align | 图片垂直对齐 |
| float | 文字环绕效果 |
1.属性
| 属性 | 说明 |
|---|---|
| a:link | 定义a元素未访问时的样式 |
| a:visited | 定义a元素访问后的样式 |
| a:hover | 定义鼠标经过显示的样式 |
| a:active | 定义鼠标单击激活时的样式 |
定义这四个伪类，必须按照“link、visited、hover、active”的顺序进行，不然浏览器可能无法正常显示这4种样式。请记住，这4种样式定义顺序不能改变！“love hate”（“爱恨原则”）
a{text-decoration: none; font-size: 20px}
a:link{color: white}
a:visited{color: aqua}
a:hover{color: yellow}
a:active{color: red}
每个元素都看成一个盒子，盒子模型是由content（内容）、padding（内边距）、margin（外边距）和border（边框）这四个属性组成的。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。
记住，是所有的元素都可以看出一个盒子！
| 属性 | 说明 |
|---|---|
| border | （边框）元素边框 |
| margin | （外边距）用于定义页面中元素与元素之间的距离 |
| padding | （内边距）用于定义内容与边框之间的距离 |
| content | （内容）可以是文字或图片 |
注意：容器的height width设置50px 设置padding后 height width会加上padding的长度
定位的方法有很多种，它们分别是固定定位（fixed）、相对定位（relative）、绝对定位（absolute）和静态定位（static）。
1.固定定位fixed
当元素的position属性设置为fixed时，这个元素就被固定了，被固定的元素不会随着滚动条的拖动而改变位置。在视野中，固定定位的元素的位置是不会改变的。
2.相对定位简介relative
采用相对定位的元素，其位置是相对于它的原始位置计算而来的。相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。采用相对定位的元素会获得相应的空间。
3.绝对定位absolute
当元素的position属性值为absolute时，这个元素就变成了绝对定位元素。绝对定位在几种定位方法中使用最广泛，这种方法能够很精确地把元素移动到任意你想要的位置。
position:定位类型;
top:像素值;
bottom;像素值;
left:像素值;
right:像素值;
固定定位相当于定在屏幕上 不会随着滚动条而改变
相对定位是相对于原来的位置 不会因为位置改变原来的位置被挤占
绝对定位相当于层叠不管当前页面布局
1.display属性
| 属性 | 说明 |
|---|---|
| none | 隐藏 |
| block | 块级 |
| inline | 内联 |
| inline-block | 内联-块级 |
内联是不换行，但是不能指定大小
块级时能指定大小，但是会换行
————————————————
版权声明：本文为CSDN博主「wuyxinu」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/wuyxinu/article/details/103583618
