CSS基础知识点

CSS

CSS概念

层叠样式表(Cascading Style Sheets,缩写为CSS, 是一种样式表语言，用来描述HTML或XML (包括如SVG、MathML. XHTML之类的XML分支语言)文档的呈现。Css描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

CSS创建

• 文本类型的文档后缀名设置为.css就可以
• 通过文本编辑器之间创建

CSS打开

• css的运行是基于HTML的，所以一般只需要在HTML文件种引入或者嵌入css的代码，在浏览器中打开HTML，浏览器就会自动解析识别css代码。

CSS使用

• css引用方式

  • 外部引入的方式<link re1=“stylesheet” href=“1. css”>
  • 页面嵌入

CSS3

CSS3新增选择器

• 标签选择器 类名选择器 id选择器 群组选择器 交叉选择器 后代选择器
• 通用选择器 ***** 所有元素
• 属性选择器
  • [属性名] 拥有当前属性的所有元素
  • [属性名=属性值] 拥有当前属性并且值为特定值的所有元素
  • [属性名*****=属性值] 拥有当前属性 并且包含特性值的所有元素
  • [属性名**^**=属性值] 拥有当前属性 并且值以特定值开始的所有元素
  • [属性名**$**=属性值] 拥有当前属性 并且值以特定值结束的所有元素
• 子选择器 选择器1>选择器2 选择器1选中的所有的子元素中能够被选择器2选择的元素
• 相邻选择器
  • 选择器1+ 选择器2 紧邻在选择器1能够选中的元素后面被选择器2能选中的元素
  • 选择器1~ 选择器2 在选择器1能够选中的元素后面被选择器2能选中的元素
• 根据相对位置选择
  • 所有元素的相对位置
    • :first-child 当前所有兄弟元素中的第一个元素
    • :last-child 当前所有兄弟元素中的最后一个元素
    • :nth-child(2/2n/2n-1)当前所有兄弟元素中指定的位置
    • :nth-last-child(2/2n/2n-1)当前所有兄弟元素中指定的位置 倒数
    • only-child 没有任何兄弟元素就会被选中
  • 所有相同兄弟元素的相对位置
    • :first-of-type当前所有同类兄弟元素中的第一个元素
    • :last-of-type 当前所有同类兄弟元素中的最后一个元素
    • :nth-of-type(2/2n/2n-1)当前所有同类兄弟元素中指定的位置
    • :nth-last-of-type(2/2n/2n-1)当前所有同类兄弟元素中指定的位置 倒数
    • only-of-type 没有任何同类兄弟元素就会被选中
• 根据内容去选择
  • ：empty 选择没有任何子元素或者文本内容的元素
• 伪类选择器
  • ：link未被访问过的链接
  • :hover 鼠标经过链接时的效果
  • :active 鼠标按下链接时的效果
  • :visited 访问过的链接
• 选择文本内容
  • :first-line 选择第一行文本内容
  • :first-letter 选择第一个字母/文字
• 基于表单控件特性的伪类选择器
  • :focus 选择获得焦点的表单控件
  • :enabled 选择所有未被禁用的表单控件
  • :disabled 选择所有禁用的表单控件
• :not(选择器) 选择除了被当前选择器选中的元素
• ::selection 内容当中被选中的区域样式
• 伪元素选择器
  • ::before 在当前元素内容之前插入另一段内容
  • ::after 在当前元素内容之后插入另一段内容
  • content 属性 必选设置 表示当前伪元素的内容
  • 选择文本内容
    • :first-line 选择第一行文本内容
    • :first-letter 选择第一个字母/文字

CSS选择器优先级的计算规则

• 选择器优先级是靠A,B,C,D四个值进行计算的，比较优先级的时候依次比较ABCD四个值的大小
  • A如果有内联样式 则A的值为1 否则为0 也就是1，0，0，0
  • B根据当前id选择器出现的次数 出现几次 B就为几 0，1，0，0
  • C根据当前类选择器、伪类选择器、属性选择器出现的次数来计算0，0，1，0
  • D根据标签选择器和伪元素选择器出现的次数进行计算0，0，0，1
• *通用选择器是没有优先级权重
• 在某个属性后面设置!important 那么当前样式就具备最高的优先级 比行内样式还要高
  • 如果有选择器优先级更高的选择器内给同样设置!imporant 会比优先级更低的选择器内的!important;或者直接在当前样式后面覆盖。

CSS3新增属性

• 容器修饰

  • border-radius 圆角

    • 1个值 四个圆角相同的半径
    • 2个值 （左上右下）(右上左下)
    • 3个值 (左上) (右上左下) （右下)
    • 4个值 （左上）（ 右上） （左下） （ 右下）
    • 对于每个角落 我们可以设置1个半径 也可以设置2个半径
    • 可以用百分比来表示 宽度的百分比会做为横向的半径 高度的百分比会作为纵向的半径
    • 圆角会影响元素的边框显示 但是不会影响布局

  • box-shadow/text-shadow

    • 值的含义 横向偏移 纵向偏移 模糊程度 阴影大小 阴影颜色 内阴影/内发光
    • text-shadow 用法类似 但是不能设置内阴影
    • 可以同时设置多组值-可以设置多重边框
    • 不会对于布局产生任何影响

  • outline outline-offset 轮廓线

    • outline和border 类似 outline-style outline-width outline-color
    • outline-offset 轮廓线向外偏移的值
    • 不会对与布局产生任何影响
    • 轮廓线不会随着元素圆角的变化而变化

  • 背景属性的补充

    • background-clip 用来调整背景图片的显示区域
      • border-box 默认值
      • padding-box
      • content-box
    • background-origin 用来调整背景图片的定位原点
      • border-box
      • padding-box 默认值
      • content-box
    • background-size用来调整背景图片的大小
      • 数值
      • 百分比
      • cover 等比例缩放图片 直到能够把元素内部覆盖完位置
      • contain 等比例的缩放图片 直到能够把图片完整显示为止
    • 背景属性也可以设置多组值

  • 图片边框

    • border-image-source 图片地址
    • border-image-width 边框图片的宽度
    • border-image-slice 对图片截取的方式
    • border-image-outset 图片边框向外的偏移值
    • border-image-repeat 边框部分的图片的重复方式

  • 渐变图案

    • 在所有能够使用图的地方都可以用渐变图案来表示
    • linear-fradient 线性渐变
    • repeating-linear-gradient 重复线性渐变
    • radial-gradient 径向渐变
    • repeating-radial-gradient 重复径向渐变

• 过渡动画

  • transition-property 表示当前有哪些属性需要有过渡效果

    • all 全部属性都应用过渡效果

  • transition-duration 表示当前过渡动画的持续时间

  • transition-timing-function 表示过渡动画的速率函数

    • linera 匀速
    • ease-in 加速
    • ease-out 减速
    • ease-in-out 先加速再减速
    • cubic-bezoer（）通过贝塞尔曲线设置速度变化

  • transition-delay 表示过渡的延时时间

  • transition 对以上属性进行集合

• transform 转换\变形

  • 2D转换

    • 位移
      • translateX（）
      • translateY（）
      • translate（）
    • 旋转
      • 角度deg
      • 弧度1rad
    • 缩放
      • scaleX()
      • scaleY()
      • scale()
    • 斜切
      • skewX()
      • skewY()
      • skew()
    • 同时要设置多个转换效果用空格隔开每个转换函数即可
    • transform-origin 设置变形（位移）基准点 可以设置到图形的外面

  • 3D转换

    • 位移

      • translateZ()
      • translate3d()

    • 旋转

      • rotateX()
      • rotateY()
      • rotateZ()
      • rotate3d()

    • 缩放

      • scaleZ()
      • scale3d()

    • 单独设置景深

      • perspective()

    • 设置场景的景深 perspective

    • 设置容器和子元素之间的呈现方式

      • transform-style：preserve-d；

    • 设置观察者的观察位置

      • perspective-origin

    • 设置元素背面是否可见

      • backface-visibility:hidden;

    • 帧动画

      • 定义动画

        • @keyframes 动画名称{from{}to{}}
        • @keyframes动画名称{from{} to{}}
          @keyframes动画名称{0%{} 20%{…}

      • 调用动画

        • animation-name 动画名称

        • animation-duration 动画的持续时间

        • animation-timing-function 动画的速率变化趋势

        • animation-delay 首次动画的延时

        • animation-iteration-count 动画运行的次数

          • infinate 无限次

        • animation-fill-mode 动画完成时的状态

        • animation-direction 动画播放的方式

        • animation-play-state 动画的播放状态

        • animation: name duration timing-function delay iteration-count direction fill-mode;

      • 弹性布局

        • 容器

          • display:flex;对于当前容器应用弹性布局

          • justify-content 调整项目在主轴 方向上分布方式

            • flex-start对齐到主轴的起点
            • flex-end 对齐到主轴的终点
            • center 居中到主轴的中心
            • space-around 均匀分布株洲上的项目 项目和项目之间的间距是项目和容器之间间距的两倍
            • space-between 均匀的分布主轴上的项目 项目和容器之间没有间距 项目课项目之间的距离相等

          • align-items 调整一行内容在交叉轴方向上的对齐方式

            • flex-start对齐到交叉轴的起点
            • flex-end 对齐到交叉轴的终点
            • center 居中到交叉轴的中心
            • stretch 如果项目没有设置高度则在交叉轴方向拉伸直到占满交叉轴为止
            • baseline 项目当中文字和容器中的我呢及基线对齐

          • flex-wrap 调整项目的换行方式

            • no-wrap 不换行(会强制缩小)
            • wrap 普通换行
            • wrap-reverse 换行 第一行在最后

          • flex-dirention 调整主轴方向

            • 默认row 水平 从左到右
            • row-reverse 水平 从右向左
            • column 垂直 从上到下
            • column -reverse 垂直 从下到上

          • align-conent调整多行项目在交叉轴方向的分布方式

            • flex-start对齐到交叉轴的起点

              flex-end 对齐到交叉轴的终点

            • center 居中到交叉轴的中心

            • space-around 均匀分布交叉轴上的项目 项目和项目之间的间距是项目和容器之间间距的两倍

            • space-between 均匀的分布交叉轴上的项目 项目和容器之间没有间距 项目课项目之间的距离相等

            • stretch如果项目没有设置高度则在交叉轴方向拉伸各个项目直到占满交叉轴为止

          • flex-flow 对于 flex-wrap和flex -direction的简写

          • 项目

            • order 指定当前项目在所有项目中的排序 默认为0 排序方式 从小到大 相同大小 原始顺序
            • flex-grow 当前项目在主轴方向上的剩余空间分配中要占据几份 分配的空间会被当前项目占据
            • flex-shrink 当前项目在主轴方向上空间不足时缩小的比例 默认值1 每个项目默认都会缩小
            • flex-basis 在当前项目未设置宽高的情况下 在主轴方向上占据的大小
            • flex 是对于flex-grow 、flex-shrink 、flex-basis 的简写
            • align -self 单独设置当前项目在交叉轴方向的对齐方式

        • 多栏布局 文字显示效果

          • column-with 指定当前每一栏的宽度
          • column-count 指定当前要划分成几栏
          • column-gap 指定两栏之间的间距
          • column-rule 指定两栏之间分割线样式
          • column-fill 指定内容的对齐方式 默认均匀分布
            • auto自动将每一列的高度占满才换到下一列
            • balance 每一列的高度都是一致的
          • column-span 设置某个元素的内容跨越多列

        • box-sizing：boder-box；让当前width和height变成整个容器的宽高（内容、内边距、边框）

        • 字体引入和字体图标

          • 在css3当中允许直接引入一共指定的字体文件

          • ​ @font-face {

            ​ font-family: “name”;

            ​ src: url(cba.TTF);

            ​ }

          • 利用此特性 我们可以将项目需要的图标封装到字体文件中使用

            • 借助于AI软件 导出字体文件
            • 借助在线平台 生成自定义字体图标库 阿里巴巴 iconfont

          • 图片精灵

            • 把我们要在浏览器展示的多个小图标、小图片放置- -张大的图片当中。目的是为了提高网页加载速度
            • background-position

          • 响应式布局

            • 书写一套代码，让页面可以在不同的终端设不上有不同的显示效果，能够最合理的方式去适应当前的分辨率
            • 实现响应式布局的原理
              • 百分比实现流式布局
              • 媒体查询 media query 让部分css代码只在特定的设备和分辨率范围下起作用
              • media设备名 条件（查询范围）{CSS代码}
              • 设备名
                • screen 屏幕设备
                • print 打印设备
                • all全部
              • 条件
                • add 包括
                • or 或者
                • not 排除
              • 查询范围
                • min-width 最小宽度 也就是分辨率大于当前值的时候
                • max-width 最大宽度 也就是分辨率小于当前值的时候
            • 十二栅格化
              • 在网页响应式变化的过程中，对于一行浮动元素要显示进行方便的控制