CSS基础之渐变、文本格式化、表格

我会带着你远行 2022-07-13 11:56 170阅读 0赞

1、渐变：  
  1、什么是渐变  
    两种或多种颜色之间平滑过渡的效果  
  2、渐变分类  
    1、线性渐变  
      按照一条直线的方式填充渐变色  
    2、径向渐变  
      按照原型的方式向外放射性填充渐变颜色  
    3、重复渐变  
      将线性渐变和径向渐变重复实现多次  
  3、色标  
    每个渐变颜色 出现的“位置”及其“颜色值”  
  4、语法  
    1、属性 & 取值  
      属性：background-image：  
      取值：  
        1、线性渐变  
          linear-gradient()  
        2、径向渐变  
          radial-gradient  
        3、重复渐变  
          repeating-linear-gradient()  
          repeating-radial-gradient()  
    2、线性渐变  
      background-image:linear-gradient(angle,color-point,color-point,...)  
        1、angle：线性渐变的方向或角度  
          取值：  
            1、关键字  
              1、to top:从下向上填充  
              2、to right：从左向右填充  
              3、to bottom：从上向下填充  
              4、to left：从右向左填充  
            2、角度  
              可以取值为0deg~360deg  
              to top -> 0deg  
              to right-> 90deg  
              to bottom-> 180deg  
              to left-> 270deg  
        2、color-point:色标  
        由渐变的颜色 以及出现的位置 组成  
        ex：  
          1、red 0px  
            开始的位置是红色  
          2、green 50px  
            按照填充的方向，50px的位置处，变为绿色  
          3、blue 100%  
            按照填充的方向，结束的位置处，变为蓝色  
          注意：色标中，可以省略位置不写，如果省略位置的话，  
          css会按照元素的大小及填充方向平均分配渐变色  
    3、径向渐变  
      background-image:radial-gradient(\[size at position,\]color-point,color-point);  
      1、size at position  
        可以省略，如果省略的话，css会默认分配渐变色，圆心在元素的中间位置处  
        size：圆的半径，以px为单位  
        at：关键字，不能省略  
        position：圆心位置  
    4、浏览器的兼容性（重点）  
      主流版本浏览器支持性比较好  
      对于不支持的版本，通过增加浏览器前缀的方式实现兼容性（前提是内核支持）  
        Firefox：-moz-  
        Chrome & Safari:-webkit-  
        Opear:-o-  
      浏览器前缀加在什么位置？？？  
      1、如果浏览器不支持属性的话，则将前缀加到属性名称前  
        animation:...;  
        -moz-animation:...;  
        -webkit-animation:...;  
        -o-animation:...;  
      2、如果浏览器支持属性，但不支持属性值的话，  
        将前缀加到属性值的前面  
        background-image:linear-gradient();  
        background-image:-moz-linear-gradient();  
        background-image:-webkit-linear-gradient();  
        background-image:-o-linear-gradient();  
2、文本格式化  
  1、文本格式化  
    字体属性：大小，加粗，系统等  
    文本格式：文本颜色，线条样式，... ...  
  2、字体属性  
    1、指定字体系列  
      属性：font-family（字体系列）  
      取值：value1，value2，value3，...  
      注意：如果字体中包含中文以及特殊符号的话，要用""引起来，且一段文本只有一种字体。  
      ex：  
        font-family:"微软雅黑",Arail,Times;  
        font-family:"microsoft yahei";  
    2、指定字体大小  
      属性：font-size  
      取值：以px或pt或em 为单位的数值  
    3、指定字体加粗  
      属性：font-weight  
      取值：  
        1、normal  
          正常体  
        2、bold  
          加粗  
        3、value  
          400~900 之间的整百倍数  
          400：normal一样  
          900：bold一样  
    4、指定字体样式  
      属性：font-style  
      取值：  
        1、normal  
          正常体  
        2、italic  
          斜体  
    5、小型大写字母  
      作用：将元素中的所有小写英文字母转换为大写，  
      但大小与小写字符一样  
      属性：font-variant  
      取值：  
        1、normal  
          正常显示  
        2、small-caps  
          小型大写  
    6、字体属性  
 属性：font  
 取值：style variant weight size family  
 注意：使用简写属性时，必须要设置 family的值，否则无效;  
 ex:  
 font:12px; /\*无效\*/  
 font:12px "微软雅黑";/\*通过\*/  
 3、文本属性  
 1、文本颜色  
 属性：color  
 取值：任意合法颜色  
 2、文本排列方式  
 作用：指定当前元素中的文本，行内元素，行内块元素的 水平对齐方式  
 属性：text-align  
 取值：left / center / right  
 3、文字修饰  
 作用：指定文本的线条样式  
 属性：text-decoration  
 取值：  
 1、none  
 没有线条显示  
 2、underline  
 下划线 <u></u>  
 3、overline  
 上划线  
 4、line-through  
 删除线 <s></s>  
    4、行高  
    作用：一行数据的高度。如果行高的高度高于数据本身高度，那么该行数据将在指定的行高范围内垂直居中。  
    属性：line-height  
    取值：px为单位的数值  
    使用场合：  
      1、解决一行数据的垂直居中问题  
      2、拉长多行数据之间的间距-行间距  
    5、首行文本缩进  
      属性：text-indent  
      取值：px为单位的数值  
    6、文本阴影：  
      属性：text-shadow  
      取值：h-shadow v-shadow blur color;  
3、表格  
  1、表格常用样式  
    1、边距属性  
    padding(table,td);  
    margin(table),不适用于td  
   2、尺寸  
    width,height  
   3、文本格式化属性  
    font-\*  
    text-\*  
   4、背景属性(颜色，图片，渐变)  
   5、border  
   6、vertical-align  
    内容垂直对齐方式  
    属性：vertical-align  
    取值：top/middle/bottom  
  2、表格特有样式  
    1、边框合并  
      属性：border-collapse  
      取值：  
        1、separate  
          默认值，分离边框模式  
        2、collapse  
          合并边框模式,table和td将合并成一个边框  
    2、边框边距  
      作用：设置单元格与表格，单元格与单元格之间的距离(cellspacing)  
      属性：border-spacing  
      取值：  
        1个值：水平和垂直间距相同  
        2个值：第一个值 表示水平间距，第二个值 表示垂直间距。两个值之间用空格隔开  
      注意：border-collapse属性必须是 separate时，边框边距才有效，否则无效  
    3、标题位置  
      属性：caption-side  
      取值：  
        1、top  
          默认值，标题位于表格之上  
        2、bottom  
          标题位于表格之下  
    4、显示规则  
      作用：指定浏览器如何显示或布局一张表格，即设置单元格，行，表格的算法规则  
      属性：  
        table-layout  
      取值：  
        1、auto  
          自动表格布局，默认布局方式，单元格的尺寸实际上是由内容决定的。  
        2、fixed  
          固定表格布局，单元格的尺寸由设定的数据值来决定的，不由内容决定  
      自动表格布局 VS 固定表格布局  
 1、自动表格布局  
 1、单元格大小会适应内容大小  
 2、【缺点：】表格复杂时，加载速度慢  
 3、适用于不确定每列大小的情况下使用  
  
  
 4、虽然算法较慢，但是能体现传统表格特点，比较灵活  
 2、固定表格布局  
 1、单元格大小取决于td中设置的值，与内容无关  
 2、【优点：】加载速度较快，即加速显示表格，不需要每行数据都进行计算（特点）  
 3、适用于确定每列大小时，可以使用固定表格布局  
 4、算法较快，缺点是不够灵活