Please enable JavaScript.

Coggle requires JavaScript to display documents.

css, 输入完成后按tab键 - Coggle Diagram

- - - - 语法
        
        background：rgba（0，0,0,0.3）
      - 最后一个参数是透明度，在0~1之间；可以把0省略
      - 注：背景半透明是指盒子背景半透明，内容不受影响
  - - - background-position ： x（x坐标） y（y坐标）；
      - length：百分数、浮点数和单位标志符组成的长度值
      - position(没有顺序，省略其一，默认另一个值为center)：水平：center/left/right; 垂直：center/top/bottom
- - - - 语法
        
        transform : rotate ( 度数 )
        
        特性
        
        度数以deg为单位
        
        角度为正时顺时针，角度为负时逆时针
        
        默认旋转的中心点是元素的中心点
    - - 语法
        
        transform : scale ( x , y ) ;
      - 特性
        
        transform : scale ( 1 , 1 ) ;宽和高都放大一倍相对于没有放大
        
        transform : scale ( 2 , 2 ) ;等价于transform : scale ( 2 ) ;宽和高都放大两倍
        
        transform : scale ( 0.5 , 0.5 ) ;缩小
        
        不会影响其他盒子并且可以设置缩放的中心点，以中心点向四周缩放
    - - 语法
        
        transform: translate ( x, y) ;
        
        也可以吧x轴或y轴分开写：transform: translateY ( 属性值) ;
      - 特性
        
        不会影响其他元素的位置
        
        百分比单位是相对自身元素的
        
        对行内标签没有效果
        
        transform: translate ( -50%, -50%) ; 让盒子往上走自己高度的一半，宽度的一半，实现水平和垂直居中效果（配合定位）
- - - - width、height、margin、padding、border、background
    - - color、font、text-decoration、text-align、vertical-align、white-space、break-Word
    - - display、position、float、clear、visibility、overflow
    - - content、cursor、border-radius、box-shadow、text-shadow、background：linear-gradient
  - - - 子标签会继承父标签的某些样式，如文本颜色和字号
      - 实际应用
        
        简化代码，降低css样式的复杂性
        
        行高设置：可以不跟单位，如：1.5则是相对于文字大小的1.5倍
    - - 选择器相同，执行层叠性
      - 选择器不同，根据选择器权重执行
        
        元素选择器/伪元素选择器/标签选择器
        
        1
        
        类选择器/伪类选择器/属性选择器
        
        10
        
        ID选择器
        
        100
        
        行内样式 style=“”
        
        1000
        
        ！important
        
        无穷大
        
        继承/*
        
        0
        
        总结：当选择器叠加，权重也会叠加，越精确，权重越大
    - - 实际应用
        
        当给一个元素添加不同的样式，就会产生样式冲突，层叠性主要解决这个问题
      - 原则
        
        样式冲突，通常采用就近原则，离哪个样式近就执行哪个
- - - - 根据需求选择标签
    - - 标签选择器
        
        为页面中某一类标签指定统一的样式
        
        缺点：不能设置差异化样式，只能选择全部的当前标签
        
        语法：类名{}
      - 类选择器
        
        差异化选择不同的标签，单独选择一个或某几个标签(开发中最常用)
        
        语法：
        
        css部分：.类名{}
        
        body部分：<div class=”red“></div>
        
        注意事项
        
        ①命名不能为纯数字和中文，尽量为英文
        
        ②命名要有意义
        
        ③可以使用多类名
        
        语法：<div class=“red font20”><div>
        
        多个类名中间必须用空格分开
      - ID选择器
        
        为标有特定ID的元素指定特定的样式
        
        语法
        
        css部分：#ID名称{}
        
        body部分：<div id="id名称"></div>
        
        缺点：只能调用一次，设置差异化样式太过麻烦
      - 通配符选择器
        
        选取页面中的所有元素（标签）
        
        语法：css部分：*{}
    - - 定义
        
        建立在基础选择器之上的，对基本选择器进行组合形成的选择器
      - 子选择器（最近一级的子元素，只能是儿子）
        
        父元素>子元素
      - 后代选择器（后代可是是孙子、儿子）
        
        父元素（空格）子元素
      - 并集选择器（同时选择多个标签）习惯竖着写
        
        元素1，元素2
      - 伪类选择器
        
        ：hover 悬停时的样式(最常用)
        
        ：active 鼠标按下之后的样式
        
        ：link 链接被访问时的样式
        
        ：visited 链接被访问后的样式
        
        顺序 hate love 或love hate*
        
        ：focus获取焦点，应用于表单元素
    - - ：：before
        
        在元素内部content的前面插入内容
      - ：：after
        
        在元素内部的content后面插入内容
      - 语法
        
        选择器：：after{ content：“内容”；}
      - 注意事项
        
        ①必须有content属性
        
        ②创建的伪元素在文档树找不到并且是行内元素
    - - E[att^="val"]：具有att属性且值以val开头的E元素
      - E[att$="val"]：具有att属性且值以val结尾的E元素
      - E[att=“val”]：具有att属性且属性值为val的E元素
      - E[att="val"]：具有att属性且值中*含有val的E元素
      - E[att]具有att属性的E元素
    - - 元素
        
        last-child：父元素中的最后一个子元素
        
        nth-child(n)：父元素中的第n个子元素
        
        n=数字：选择第n个元素
        
        n=关键字，如：even偶数，odd奇数
        
        n=公式
        
        从0开始
        
        n+5：从第五个开始（包含第五个）到结束
        
        -n+3:前三个标签
        
        2n：偶数
        
        2n+1：奇数
        
        会把所有子盒子排列序号
        
        first-child：父元素中的第一个子元素
      - 类型
        
        last-of-type：指定类型的最后一个
        
        nth-of-type（n）：指定类型的第n个
        
        n取值与nth-child（n）相同
        
        会把指定子盒子排列序号（一视同仁）
        
        first-of-type：指定类型的第一个
  - - - 设置选择器选择的标签的样式
    - - font-family字体系列
        
        各字体之间用英文逗号隔开
        
        英文字体通常写在最前面
      - font-size字体大小
        
        谷歌浏览器默认字体大小为16px
        
        px（像素）大小时网页设计中最常用的单位
        
        注意：标题标签比较特殊，需要单独设置文字大小
      - font-weight字体粗细
        
        normal：默认值（不加粗）
        
        bold：定义粗体（加粗）
        
        100-900:400=normal，700=bold。注：这个数字后面不加单位
      - font-style文字样式
        
        normal：默认值
        
        italic：斜体==em、i标签
      - 复合属性
        
        语法
        
        font ： font-style font-weight font-size/line-height font-family ;
        
        注意事项
        
        ①有顺序，各个属性之间用空格分开
        
        ②不需要的属性可以简写，但必须保留font-size 和 font-family
    - - line-height行间距
        
        组成：
        
        常用单位为px
        
        实际应用
        
        在设置的行高中包含文本高度和上间距及下间距，除去文本高度后会将数值平均分给两个间距
        
        可以利用这个特性来调整段落间距，文字垂直对齐
        
        文字垂直居中方案：让文字的行高等于盒子的高度
      - 定义
        
        定义文本的外观，如：文本颜色、对齐文本、文字下划线删除线、缩进、行间距
      - color文字颜色
      - text-align水平对齐文本
        
        left：左对齐（默认）
        
        right：右对齐
        
        center：水平居中
      - text-decoration装饰文本
        
        none：默认，没有装饰线，通常用于为超链接取消下划线
        
        underline：下划线
        
        overline：上划线
        
        line-through：删除线
      - text-indent文本缩进（主要应用于段落的首行缩进）
        
        常用单位为em
        
        相对于父元素文字大小，如：父元素为16px，那么2em就是32px
  - - - 适合修改简单的样式
    - - 开发中最常用
      - ①新建一个后缀名为.css的样式文件，把所有的css代码放进去
      - ②在head标签中引入这个css文件，代码如下:<link rel="stylesheet" href="css文件路径">
    - - 练习时常用
- - - - 宽、高直接设置是无效的
      - 默认宽度就是它本身内容的宽度
      - 一行可以显示多个
      - 行内元素只能容纳文本和其他行内元素
      - 注：特殊的行内元素<a>之内可以放块级元素
    - - 特点
        
        高度、宽度、外边距和内边距都可以设置
        
        宽度默认是父元素的100%
        
        独占一行
        
        是一个容器盒子，里面可以放行内或块级元素
        
        注：文字类元素（如p）内不能使用块级元素
    - - 默认宽度就是它本身内容的宽度
      - 高度、宽度、外边距和内边距都可以设置
      - 一行可以显示多个
      - 注：行内块元素同时具有行内元素和块元素的特点
- - - - 用@keyframes定义动画
        
        0% { width ： 100px ; }
        
        100% { width:：200px ；}
        
        keyframe 动画名称 {
        
        }
      - 0%是动画的开始，100%是动画的完成，就是时间的划分，相当于from和to
      - 在@keyframes 中规定某种css样式，就能创建由当前样式变为新样式的动画效果，任意样式可设置多次
    - - 在要设置动画的盒子的css样式中添加以下样式（缺一不可）
        
        animation--duration：持续时间（s）
        
        animation--name：动画名称