html 和css基础常用的标签和样式（2）-css
1.css三种引入方式：
1.第一种，内联，也就是也在标签里面。（一般不用）
2.第二种，内部，也就是写在style中。（一般不用）
3.第三种，外部，也就是单独创建一个css文件，把样式写里面。（常用）
2.css的引入具体实现：
1.内联样式：（写在style后面，单独写）
<p style="color: red; font-size: 14px">我是一个p标签</p>2.内部样式：写在head的中间
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
<style>/* 样式写在这里 */
</style>
</head>
<body></body>
</html>3.外部样式：单独写一个css文件，用link引入，在href中写css的文件名
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css.css">
</head><body></body>
</html>3.关于css中的常用属性：
px：长度，也就是1个像素。
em：比如上面有一个属性是2px，你1em也就是2px。
src：也就是文件的路径url。
color：颜色，可以reg 和16进制写法
font-size:字体大小
background-color：背景颜色
height：高度，一般用在块标签中
width：宽度，也一样
color - 文字颜色
font-family - 字体
font-size - 字体大小
font-weight - 字体粗细
font-style - 字体样式（斜体等）
line-height - 行高
text-align - 文本对齐
text-indent - 首行缩进
letter-spacing - 字母间距
word-spacing - 单词间距
text-transform - 文本转换（大小写）
列表相关
list-style-type - 列表标记类型
list-style-position - 列表标记位置
其他
visibility - 可见性
cursor - 鼠标光标
visibility - 可见性
cursor - 鼠标光标
不会继承的样式（常用）
盒模型相关
width / height - 宽高
margin - 外边距,外填充
padding - 内边距,内填充
border - 边框
background - 背景
display - 显示方式
定位相关
position - 定位方式 (float / absolute / relative / flex)
top / right / bottom / left - 定位位置
float - 浮动
clear - 清除浮动
其他
overflow - 溢出处理
z-index - 层级
opacity - 透明度
4.关于选择器：
- 基础选择器
- 关系选择器
- 属性选择器
- 伪类选择器
- 通配符选择器
基础选择器：
class=A id = B 元素 div
1.用点A，.A{} 就是类选择器，
2.用#B，则#B{}就是id选择器
3.直接用div，就是div{}选择器
关系选择器：
1.用div.A{} 就是交集
2.用逗号连接的 比如：A , div.A {} 并集选择器
3.后代选择器：如果A 中包含B ，用 .A B {}
4.亲子选择器：.A>B{}
5.关于块级元素
常见的块级元素有：body，div，p，h1~h6，ul，ol，li，pre等
就是块级元素，会独占一行，其他元素没办法加到他们后面，但是可以设置宽高等填充
常见的行内元素有：a，span 等，可以加在后面但是没办法变大，加宽
通过display:inline可以将元素显示设置为内联元素，如下的代码就是将块级元素div转成内联元素，从而使div元素具有内联元素的特点（这个是重点：）
6.关于css的布局（重点重点）
position：static 属于默认的位置
position：relative，是相对于自己，去改变位置，但实际的位置没有改变，只是视觉上改变了
position：absolute绝对定位，相对于最近的祖先元素定位，但祖先元素不能是static 没有祖先的话，就是视口，也就是窗口，随着窗口变化也会变化。
position：flexd相当于导航栏，固定不动的，就算滑动整个窗口也不会动。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="stylesheet" href="css.css" /><style>a {background-color: rgb(65, 65, 50);height: 500px;width: 500px;position: relative;}.a1 {background-color: aquamarine;width: 300px;height: 300px;position: absolute;top: 600px;left: 300px;}.a2 {background-color: rgb(41, 39, 36);height: 300px;width: 300px;position: fixed;top: 300px;}.a3 {background-color: blueviolet;width: 300px;height: 300px;}</style></head><body><div class="a"><div class="a1"></div><div class="a2"></div><div class="a3"></div><div class="a4"></div></div></body>
</html>
黑色是不动的，