css汇总知识要点

css简介

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称

CSS 是也是一种标记语言

所有的样式，都包含在 标签内，表示是样式表。一般写到 上方,或者引入

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AcnbhzYX-1589618299699)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1589616145767.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a0WIyOVB-1589618299717)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1589616112710.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U8CbJZCb-1589618299722)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1589616132534.png)]

css选择器的作用：选择标签用的。

基础选择器包括：标签选择器、类选择器、id 选择器和通配符选择器

标签选择器

指用 HTML 标签名称作为选择器，按标签名称分类

例如：
a{

}
  标签选择器{
​        属性：属性值
​        ...
​    }

类选择器

  .类名 {
​        属性1: 属性值1;  
​        ...
​    } 

 <div class="类名"> 变红色 </div>
 
 
 可以给一个标签指定多个类名，从而达到更多的选择目的

id选择器

   #id名 {
​            属性1: 属性值1;  
​            ...
​        } 
​        注意：id 属性只能在每个 HTML 文档中出现一次
 <div id="类名"> 变红色 </div>

通配符选择器

   * {
        属性1: 属性值1;  
        ...
            }

常用的属性

字体大小：font-size: 20px; 
字体样式：font-style：normal           
                      值	     描述
                    normal	默认值。浏览器显示一个标准的字体样式。
                    italic	浏览器会显示一个斜体的字体样式。
                    oblique	浏览器会显示一个倾斜的字体样式。
                    inherit	规定应该从父元素继承字体样式
字体粗细：font-weight: bold; 
                     normal	默认值。定义标准的字符。 ===  设置文字变细 font-weight: 400; 变细
                     bold	定义粗体字符。         ==== 设置文字粗细 font-weight: 700; 加粗
                     bolder	定义更粗的字符。        
                     lighter	定义更细的字符。
设置宽度 width: 100px;
设置高度 height: 100px;
设置外边距（盒子与盒子之间的距离）margin: 100px;
设置上外边距 margin-top: 100px;
设置下外边距 margin-bottom: 100px;
设置左外边距 margin-left: 100px;
设置右外边距 margin-right: 100px;
有宽度的块级元素(占一整行的元素)水平 横向 居中
    margin: 0 auto;
    margin: auto;
    如果只写两个值
    margin: 上下外边距 左右外边距
    <label ></label >   标签     当点击 label 的时候，触发 id 值为 aa 的表单元素。(相当于点击了表单元素)
设置内边距（盒子边框与内容之间的距离）padding: 100px;
设置上内边距 padding-top: 100px;                             
设置下内边距 padding-bottom: 100px;
设置左内边距 padding-left: 100px;
设置右内边距 padding-right: 100px;
    padding: 上下内边距 左右内边距
取消ul li 列表的小圆点     list-style: none;
取消a标签下划线 text-decoration: none;
                                   line-through;   /* 取消删除线  */
                                   <strike></strike>   <del></del> 删除线标签
                                   text-decoration:line-through;//删除线  小程序中
                                   text-decoration:underline; //下划线    小程序中
搜索文档中的内容 ctrl+f
设置背景颜色 background-color: #000;
           background-color: rgb(0,0,0);
设置背景颜色透明：background-color: rgba(0,0,0,.3);
元素向左浮动 float: left
元素向右浮动 float: right
设置层叠权重 ，，谁在上面显示             z-index：1
设置边框
    border: 边框的粗细 线形状   颜色
    border: 1px       solid    #000    
                    - none：   没有边框即忽略所有边框的宽度（默认值）
                    - dashed：边框为虚线  
                    - dotted：边框为点线
    border: none;             清输入框默认的外边框 
    设置上边框 border-top: 1px solid #000
    设置下边框 border-bottom: 1px solid #000
    设置左边框 border-left: 1px solid #000
    设置右边框 border-right: 1px solid #000
单行文字垂直居中： line-height: 高度值
    去掉边框 border: 0;
    去掉外轮廓线 outline: 0;
设置文字颜色 color: #000;
文字水平居中 text-align: center;
设置css3的盒子模型： box-sizing: border-box;                  
        可以写这两个参数：   content-box、border-box      /*让每个盒子模型变成一个内减模式*/  
        如果盒子模型我们改为了box-sizing: border-box  ， 那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）
设置版心 .w{width: 1200px; margin: 0 auto;}

 
设置字体 font-family: '微软雅黑';
设置斜体文字正常显示 font-style: italic;
设置相对定位 position: relative;
设置绝对定位 position: absolute;
设置固定定位 position: fixed;
设置定位的方位值：   top:    1px 远离上面1px
	                    bottom: 1px 远离下面1px
	                    left:   1px 远离左面1px
	                    right:  1px 远离右面1px

     /* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */
            white-space: nowrap;
溢出隐藏： overflow: hidden;  要有宽高的情况下
     /* 3. 文字溢出的时候用省略号来显示 */
                         text-overflow: ellipsis;
标签/元素隐藏不占位置                 display: none;         隐藏         display: none;
让标签/元素隐藏的元素显示/出来         display: block;        显示
                                          display: inline;      显示
                           
标签/元素隐藏占位置                   visibility: hidden;
标签/元素隐藏占位置                   visibility: visible;
文本首行缩进                         text-indent: 2em;    
              em表示当前根据父级元素的字体大小设置的字体大小      
              rem 表示当前根据网页的HTML的字体大小设置的字体大小  
透明颜色         transparent
设置背景 属性连写 background: 背景颜色 背景路径 是否平铺 水平偏移值 垂直偏移值；
        例如  引入背景图片
        background: pink url('../images/sprites.png') no-repeat -10px -20px;   repeat---平铺
        注意精灵图移动背景位置 都是负值或0 不可能为正值
        除此之外水平偏移值和垂直偏移值还可以用方位坐标值来显示
top 靠顶显示背景图片 bottom 靠底显示背景图片 left 靠左显示背景图片 right 靠右显示背景图片
**！！！一定注意给背景图片的盒子一定要有宽高值！！！没有宽高和内容的盒子是无法显示背景图片的！！！**
伪类选择器
    ul li:nth-child(1){}            选中ul下的第一个li
    ul li:first-child{}             选中ul下的第一个li
    ul li:last-child{}              选中ul下的最后一个li
    ul li:nth-child(2n){}           选中ul下偶数个li 比如第2个 第4个 第6个 li
    ul li:nth-child(even){}         选中ul下偶数个li 比如第2个 第4个 第6个 li
    ul li:nth-child(2n+1){}         选中ul下奇数个li 比如第1个 第3个 第5个 li
    ul li:nth-child(odd){}          选中ul下奇数个li 比如第1个 第3个 第5个 li
    ul li:nth-child(n+3){}          选中ul下从第3个开始到最后的li 包括第三个
    ul li:nth-child(-n+3){}         选中ul下从开始到第三个的li    包括第三个
   
行内块元素和行内元素的居中对齐     vertical-align: middle; 同时可以解决img底部3px的问题
设置边框圆角 border-radius: 10px;
创建一个圆形 border-radius: 50%; 

新css3

css3新的伪类选择器
    first-of-type                    指定第一个
    last-of-type                     指定最后一个
    nth-of-type（n）                  指定某一个
    标签:first-child                  匹配父元素的第一个子元素
        ：nth-child(n)                选择到了最后一个li标签
        ::before{content：“”}         在XX元素之前面创建元素
        ::after {content：“”}		 在XX元素之后面创建元素
  图标变模糊：
  filter:   函数(); -->  
          例如： filter: blur(5px);  -->  blur模糊处理  数值越大越模糊
  计算属性calc
               width: calc(100% - 80px);
  CSS3 过渡
      transition: 要过渡的属性  花费时间  运动曲线  何时开始;

模糊：
filter: 函数(); -->
例如： filter: blur(5px); --> blur模糊处理 数值越大越模糊
计算属性calc
width: calc(100% - 80px);
盒子阴影
box-shadow: 10px 10px 10px 10px rgba
h-shadow v-shadow blur spread color inset;
水平位置 垂直位置 模糊程度 阴影大小 阴影颜色 内外阴影
可以负数 可以负数
文字阴影
text-shadow:
h-shadow v-shadow blur color;
1px 1px 5px red;

 光标经过变小手状态     cursor: pointer; 
     鼠标隐藏              none
      默认的               default
 光标边移动的图标       cursor: move;
     透明度               opacity: 0.8;       
             !important   提升权重
        
                                      移动端
display: flex;       变成弹性盒子 
flex-direction       设置主轴的方向
                row              主轴被定义为与文本方向相同
                :row-reverse;   从右到左
                :column;        从上到下
                :column-reverse;从下到上
justify-content      设置主轴上的子元素排列方式
                ；flex-end;      从尾部开始排列
                ；center;        挤在一起居中
                ；space-around;  平分剩余空间
                ；space-between; 先两边再平分剩余空间
flex-wrap            设置子元素是否换行
                :no-wrap; 不换行
                :wrap     换行
align-content        设置侧轴上的子元素的排列方式（多行）
               ：flex-start;    在侧轴的头部开始排列
               ：flex-end;      在侧轴的尾部开始排列
               ：flex-center;   在侧轴中间显示
               : space-around;  子项在侧轴平分剩余空间
               ：space-between; 子项在侧轴 先分布在两头，再评分剩余空间
               ：stretch;       设置子项元素高度评分父元素高度（当子项设了高度的时候 无效）

align-items 设置侧轴上的子元素排列方式（单行）
stretch 元素被拉伸以适应容器。
center 元素位于容器的中心
flex-start 元素位于容器的开头。
flex-end 元素位于容器的结尾
baseline 元素位于容器的基线上。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。

flex-flow 复合属性 连写
align-self 控制子项自己在侧轴上的排列方式
order 设置子项之间的排列顺序
flex 设置子项宽度占父元素宽度的比例

@media screen 媒体查询 -----设置条件的时候让样式变成什么样
all 连接
not 取反
only 实现更好的兼容
or (,) 或者
CSS3 过渡
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
transition 过渡 all 代表全部
transition: 要过渡的属性 花费时间 运动曲线 何时开始; 参数
transform: translate 移动
rotate(**deg) 旋转
transform-origin 设置转换中心点
perspective 远大近小 效果
transform:translate3d 3D转换入口 transform-style: preserve-3d
animation 动画
animation-name 设置要使用的动画名
animation-duration 设置动画播放的持续时间
animation-timing-function 设置过渡的速度曲线
animation-delay 设置延迟时间
animation-iteration-count 设置循环次数 infinite 为无限循环
animation-play-state 控制 播放 还是 暂停
animation-direction 设置循环方向 normal 默认值
@keyframes + 自定义类名
先在样式中设置动画效果一个类，在把类名应用在需要的盒子上
68 background-image: linear-gradient(#feb47b, #ff7e5f); 渐变颜色
linear-gradient 线性渐变
to left right bottom top 设置渐变方向