css的引入方式
分别是内联样式（行内样式）、内部样式表（内嵌样式）、外部样式表（连接外部样式）和导入外部样式。
1. 内联样式 ：
<标记名 style = "样式属性：样式属性值; 样式属性：样式属性值……"> </标记名>
2.内部样式表 ：
选择器{样式名1:样式值1;样式名2:样式值2;}
3.链接外部样式
<link rel="stylesheet" href="url地址">
4.导入外部链接
<style> @import url("url地址"); </style>
css的注释
CSS的注释：/* 代码 */
CSS选择器
1. 标记选择器：
css标签选择器就是用来声明标签的。如<h1>~ <h6> <p> < i>
/*写法：*/
<style>
h2{
color: red
}
</style>
2.通用选择器：
通用选择器是一种特殊的选择器，他用“*”表示，对所有的元素都生效。
/*写法：*/
<style>
*{
color: red;
}
</style>
3.ID选择器：
ID选择器为指定的id的元素设置样式，所有的主流浏览器都支持ID选择器。使用“#”前缀标识，后紧跟指定元素的的id名称。
语法格式： 标记名#id{属性1：值1；属性2：值2；...}
/*写法*/
<style>
#bf{
color: red;
}
</style>
4.类选择器
类选择器和id选择器使用类似，定义是不使用“#”，而是用“.”引用的不是id属性，而是class值。
语法格式：标记名#id{属性1：值1；属性2：值2；...}
/*写法*/
<style>
.bf{
color: red;
}
</style>
5.属性选择器
属性选择器，你可以指定某个元素，或者还可以同时指定某个属性值和其对应的属性值。
选择器[属性名 = 属性值]
- 选择器[属性名 = 属性值] 完全匹配
- 选择器[属性名 ^= 属性值] 开头匹配
- 选择器[属性名 $= 属性值] 结尾匹配
- 选择器[属性名 *= 属性值] 包含匹配
/* 写法：*/
<style>
li[abc=qw]{
font-size: 30px;
}
li[abc^=qw]{
background-color: rgb(178, 205, 207);
}
li[abc$=er]{
color: red;
}
li[abc*=w]{
text-align: center;
}
</style>
6.后代选择器
后代选择器又称为包含选择器。后代选择器可以选择作为某元素的后代。
写法:把外层的标记在前面，内层标记后面。
语法格式 ： E1 E2 {属性1: 属性值1 ; 属性2: 属性值2 ; ...}
/*写法：*/
<style>
div span{
font-size: 40px;
color: red;
}
</style>
7.子代选择器
子元素选择器只能选择作为某种元素的子元素，子元素选择器使用大括号。只找自己的子元素。
语法格式 ：E > F {属性1: 属性值1 ; 属性2: 属性值2 ; ...}
/*写法：*/
<style>
div>span{
background-color: yellowgreen;
}
</style>
8.相邻选择器
两个元素具同一个父元素，而且两个元素后面紧紧相连。
语法格式： E + F {属性1: 属性值1 ; 属性2: 属性值2 ; ...}
/*写法：*/
<style>
li+li{
color:springgreen;
}
</style>
关系：
父元素： 直接包含其他元素，这个元素就是包含元素的父元素
祖先元素：包含其他元素，这个元素就是包含元素的祖先元素
子元素： 直接被包含的元素，这个被包含的元素就是包含元素的子元素
后代元素： 被包含的元素，这个被包含的元素就是包含元素的后代元
9.伪类选择器
自动识别的特殊选择器，它最大的选择器可以对超链接不同的定义不同的样式效果。
常用的伪类选择器:
：hover 鼠标悬浮样式
：link 未访问过得样式
：visited 已经访问过
语法格式：选择符：伪类 {属性1: 属性值1 ; 属性2: 属性值2 ; ...}
/*写法*/
a:visited{
color: red;
}
a:link{
color: rosybrown;
}
a:hover{
font-size: 30px;
}
</style>
10.伪元素选择器
伪元素选择器
::first-line 向元素的第一行内容添加样式
::first-letter 向元素首字母添加样式
::before 向元素之前添加内容 与content结合使用
::after 向元素之后添加内容 与content结合使用
写法：
<style>
p::first-line{
color:darkblue;
}
p::first-letter{
font-size: 40px;
}
p::before{
/* content: "这是在最前面的内容"; */
content:"【";
}
p::after{
/* content: "这是在文本之后的内容"; */
content:"】";
}
</style>
11.选择器分组
希望h2个段落p元素都会灰色，就可以用选择器分类。
语法格式：h2 , p
/*写法：*/
h1,p{
color: red;
}
选择器的优先级
根据选择器的类型从低到高排列：
- 元素选择器（标签）和伪元素选择器
- 类选择器、属性选择器和伪类选择器
- ID选择器 根据引入方式从低到高排列：
- 外部样式
- 内部样式
- 内联样式
css单位
尺寸单位
- % ： 百分比。它描述是相对于父元素的百分比。如50%，则为父元素的一半。
- px：像素
- em：当前元素的尺寸。一般浏览器字体大小默认为16px，2em = px
背景
background-color设置元素的背景色, 属性的值为颜色值或关键字。
/*颜色值*/
background-color: red;
/* 特殊值*/
background-color: transparent; 透明的意思，默认值；
background-image属性用于为一个元素设置一个或者多个背景图像。
> 语法方式：background - image:url(图片路径)|none
> ../表示上一节目录 ./表示当前目录 none ：表示不显示背景图
background-repeat定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴。
`repeat`: 沿水平和垂直两个方向平铺。
`no-repeat`: 不平铺，背景图片只显示一次。
`repeat - x`: 只沿水平方向平铺
`repeat - y`:只沿垂直方向平铺
`round`: 自动缩放直到适应填充整个容器
`space`: 图像会尽可能得重复, 但是不会裁剪。
background-attachment定义背景图像的滚动。
/* 属性值*/
scroll（滚动） fixed（固定） inherit（继承）
scroll ： 随着页面的滚动轴背景图片将移动
fixed ： 随着页面的滚动轴背景图片不会移动
inherit： 它的父元素
background-position用来控制背景图片在元素中的位置。
/*水平关键字*/
left（居左） center（居中） right（居右）
/*垂直关键字*/
top（顶端） center（居中） bottom（低端）
字体文本样式
font-family字体类型。可以同时声明多种字体，用逗号分隔开。中文，楷体，需要双引号引起来。
基础语法：
font-family：字体1 ,字体2 , ...
h1{
`font-family` : '华文彩云'
}
p{
`font-family` ： 隶书 , 黑体 , 宋体;
}
<h1> 设置字体为华文彩云</h1>
<p>
字体按隶书、黑体、宋体、顺序设置
</p>
font-size指定字体的大小，常用的单位是px。
font-size: 12px;
font-weight指定了字体的粗细程度
font-weight: normal; /* 正常 */
font-weight: bold; /* 粗体 */
font-weight: bolder; /* 加粗体 */
font-weight: lighter; /* 细体 */
font-weight: 400; /* 数字100-900，数值越大越粗，400是正常 */
text-indent定义一个块元素首行文本内容之前的缩进量。
/*例如*/
text-indent: 40px;
line-height用于设置多行元素的空间量，如多行文本的间距。
normal ： 表示默认行高；
长度值：用长度表示行高， 如"line- height : 20px", 表示设置行高为20px；
百分比：用百分比来表示行高，"line- height : 150%"； 相当于1.5倍行距。
数值 ：用乘积因子表示行高，"line- height : 1.5"就表示1.5倍行距。
text-align可以控制文本的对齐方式。
/*属性值*/
left ： 把文本排列到左边,默认值，
right： 把文本排列在右边。
center ： 把文本排列在中间。
justify ： 实现双端对齐文本效果。
font-style字体的风格
font-style: normal; /* 常规体 */
font-style: italic; /* 斜体 一般是指书写体，相比无样式的字体，通常会占用较少的高度 */
font-style: oblique; /* 倾斜体 只是常规字形的倾斜版本 */
text-decoration-line文本修饰
text-decoration: none; /* 没有文本修饰效果 ， 默认值 */
text-decoration: underline; /* 在文本的下方有一条下划线 */
text-decoration: overline; /* 在文本的上方有一条上划线 */
text-decoration: line-through; /* 设置文本删除线 */
text-decoration: blink; /* 设置文本闪烁 */
盒子模型
盒子模型是由content（内容）、padding（内边距）、border（边框）和margin（外边距）组成的抽象模型。
padding内边距，padding区域指一个元素的内容和其边界之间的空间，该属性不能为负值。
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
/*简写：*/
padding: 20px; /* 上下左右都为20px */
padding: 20px 30px; /* 上下为20px，左右为30px */
padding: 20px 30px 40px; /* 上为20px 左右为30px 下为40px */
padding: 20px 30px 40px 50px; /* 依次为上右下左 */
border用于设置各种单独的边界属性的简写属性。border可以用于设置一个或多个以下属性的值：border-width,border-style,border-color。
border: none; /* 没有边框 */
border-width: 10px; /* 边框的宽度 */
border-color: red; /* 边框的颜色 */
border-style: solid; /* 边框的样式 （值：`solid`实心 ` node`无边框 `dashed`虚线 `double` 双实线 `dotted` 点线边框...） */
border: 10px solid red; /* 宽度 | 样式 | 颜色 */
border-right: 10px solid red; /* 单独对一个方向上的边框设置 */
margin给定元素设置所有四个（上下左右）方向的外边距属性。这是四个外边距属性设置的简写。四个外边距属性设置分别是：margin-top，margin-right，margin-bottom和margin-left。指定的外边距允许为负数。
margin: style /* 单值语法 所有边缘 */ 举例： margin: 1em;
margin: vertical horizontal /* 二值语法 纵向 横向 */ 举例： margin: 5% auto;
margin: top horizontal bottom /* 三值语法 上 横向 下 */ 举例：
margin: 1em auto 2em; margin: top right bottom left /* 四值语法 上 右 下 左 */ 举例： margin: 2px 1em 0 auto;
/*注意：*/
1. 左右横排的盒子之间的间距是 两者的外边距相加
2. 上下排列的盒子之间的间距是 以最大的为准（大的会把小的给覆盖掉）
3. 两个嵌套的盒子，他们都有`margin-top` 以最大的为准（大的会把小的给覆盖掉）
CSS内容太多了，就暂时先到这里，有错误之处欢迎指出，非常感谢！！
