CSS笔记（CSS禅意花园+CSS揭秘）

关联css与html

1. 通过id在head标签中一一设置

<style type=”text/css”>
#id名字{
Color：red;
}
</style>

2. 新建css文件，在head标签中关联

 <link href="文件名.css" rel="stylesheet" type="text/css" />
   Css文件中：   #id名字{color:red;}

3. 在每个标签内直接加入style=“color：red；……”

书写规则
选择器
{
属性名1：属性值1;
属性名2：属性值2;
}

选择器:选择(查找) htm1标签的方法，
1.id选择器:ID
#自定义名称
2.类选择器:CLASS
.自定义名称
3.标签选择器
直接选择标签名称
4.相邻选择器
123选择器a+123选择器b 选中所有的a后面的b
5.多元素选择器/组合选择器
123选择器a，123选择器b 所有的a和b
6.后代选择器
123选择器 123选择器b 选中在a中的所有层的b
7.子元素选择器
123选择器 >123选择器b 选中在a中第一层的b
8.属性选择器
标签[name/id/……] 选中该标签且拥有该属性的
标签[name=……] 选中该标签且属性为……的
标签[name^=……] 选中该标签且属性以……开头的
标签[name$=……] 选中该标签且属性以……结尾的

在标签选择器后：
p ::after{content:"……";color: #3bb1ff;……} 在每个标签后加入content内容，content可修饰
p ::before{content:"……";color: #3bb1ff;……} 在每个标签前加入content内容，content可修饰
a：link 未被访问
a：visited 被访问后
a：hover 鼠标移入 其他标签适用
a：active 鼠标按下 其他标签适用

背景颜色：

1. Rgb 红绿蓝：background-color：rgb（a，b，c）
2. 名称：background-color：red
3. 十六进制：background-color：#9f0000
4. Rgba 红绿蓝透明度：background-color：rgb（a，b，c，0.5）

边框：
1． Border-width：100px
2． （1）Border-stytle：solid 全部设置实线
（2）Border-stytle：dotted solid double dashed 上边框是点状 右边框是实线 下边框是双线 左边框是虚线
（3）Border-stytle：dotted solid 上边框和下边框是点状 右边框和左边框是实线
（4）Border-stytle：dotted solid double 上边框是点状 右边框和左边框是实线 下边框是双线
3. border-color：red
4.可合并在一个下面border:rgba(50,50,50,0.5) 5px dotted （样式只能一样）
也可分开设置：border-bottom：5px，bule，dotted
Border-left：15px，red，solid
5.border-radius：20px 设置四个圆角
Border-radius：10px 50px 设置上左+下右和下左+上右
Border-radius：10px 50px 20px 设置上左和下左+上右和下右
Border-radius：10px 50px 20px 30px 设置上左和上右和下右和下左
border-radius：50% 设置为圆形

背景图片：
1.background-image：url（）
2.重复设置：Background-repeat：no-repeat/repeat-x/repeat-y/repeat
3.设置位置：background-position：10px 30px
4.也可以写在一个background：里
5.background-size：
length 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
6.background-clip 属性
border-box 默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box 背景绘制在衬距方框内（剪切成衬距方框）。
content-box 背景绘制在内容方框内（剪切成内容方框）
background-origin 属性 和clip可选值一样
clip是直接将背景裁剪到标准，而origin会移动图像。
7.使用box-sizing:borderbox使得div不随margin、padding变化大小
8.背景边框：

1. 用div+div实现
2. 在背景图片上叠加一层白色背景，让背景通过边框显示出来：

padding:1em;
border:1em solid transparent;
background: linear-gradient(white,white),
	url();
background-size:cover;
background-clip:padding-box, border-box;
background-origin:border-box;

3. border-image: https://www.runoob.com/cssref/css3-pr-border-image.html

字体：

1. 大小：Font-size：80px
2. 颜色：color：
3. 加成：font-weight：bold
4. 样式：font-family：微软雅黑

文本：

1. 水平位置：text-align：center
2. 垂直行高度：line-height：50px 等于div高度可设置为垂直居中 Margin：0 auto； 水平居中
3. 行缩进：text-indent：20px
4. 单词间隔：letter-spacing：10px

–abc ：–自定义变量 可通过var（–abc）在定义的类的子类中应用，：root{}为根类，可定义全局，

:root{
    --theme-color:#f45fef;
}
a{
    color: var(--theme-color);
}

Var可以在拥有备用的参数

a{
    color: var(--theme-color,#ff3355);
}

自定义属性可以是字符串、color、数字等&#x