【重磅推荐】CSS3常见的样式属性和值总结分类大全

ゞ浴缸里的玫瑰 2021-09-18 14:38 195阅读 0赞

### **CSS样式分类参考(分类最全面)：**[https://www.w3cschool.cn/cssref/3ps212do.html][https_www.w3cschool.cn_cssref_3ps212do.html] ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70][]

### **特别声明：CSS3样式也存在继承，但是只有和文字有关的样式才会继承【如：字体的大小、颜色、样式......】 ** ###

## ##

### **1、字体常见样式总结：** ###

*{
      // 字体类型
      font-family: Arial;
      // 字体大小
      font-size: 20px;
      // 字体样式：normal | italic | oblique
      font-style: oblique;
      // 字体粗细：normal | bold | <number>
      font-weight: bold;
      // 字体颜色
      color: red;
    
     // 自定义字体(允许网页开发者为其网页指定在线字体,不受服务器和客户端是否支持影响)
      @font-face {
        font-family: "my-font";
        src: url("my.ttf");
      }
    
    }

## ##

### **2、背景常见样式总结：** ###

*{
      // 同时定义多个属性,一种简写方式
      background: no-repeat fixed red;
      // 背景颜色
      background-color: red;
      // 背景图片
      background-image: url("tu.jpg");
      // 背景位置
      background-position: 20px 30px;
      // 背景是否去重复
      background-repeat: no-repeat;
      // (仅body属性有效)背景附加属性：scroll | fixed | local
      background-attachment: fixed;
    
    
      // 背景图片尺寸
      background-size: 100px;
      /**
        背景图片参考边框属性：
        border-box
        背景图片的摆放以border区域为参考
        padding-box
        背景图片的摆放以padding区域为参考
        content-box
        背景图片的摆放以content区域为参考
       */
      background-origin: padding-box;
    
    }

### **3、文本常见样式总结：** ###

* {
      // 字间距
      letter-spacing: 5px;
      // 词间距
      word-spacing: 2px;
      // 上中下划线：<'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>
      // text-decoration-line属性：none | [ underline || overline || line-through || blink ]
      text-decoration: underline;
      // 对齐属性：start | end | left | right | center | justify | match-parent
      text-align: center;
      // 首行缩进
      text-indent: 5px;
      // 行高(两行字体之间的高度)
      line-height: 50px;
    
    
      // 折行(字体超出div宽度之后，自动换行),
      //旧用法word-break:折行会切断单词,常用属性：normal | break-all | keep-all | break-word
      word-break: break-all;
      // 新用法(主流用法)：折行不会切断单词，整个单词折行！
      overflow-wrap:break-word;
      // word-wrap是overflow-wrap的别名!
      word-wrap:break-word;
      // 文本溢出后折行并显示滚动条(如果设置word-break或overflow-wrap属性就必须添加overflow属性)
      overflow: auto;
    
      //APP中滚动条常见用法【两个都必须加上,只能竖着滚，不能横着滚】：
       overflow: auto;
       overflow-wrap: break-word;
    }

### **4.边框样式： ** ###

* {
        // 语法：<line-width> || <line-style> || <color>
        // <line-style>语法 = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
        border: 2px solid red;
    }
    
    
    CSS3新增border特效
    
    * {
      // border标签之圆角特效(参数查看手册)
      border-radius: 50px 50px 50px 50px;
     
      // border标签之阴影特效(参数查看手册)
      box-shadow: 1px 2px 3px 4px red;
     
      // border标签之图片(务必保证border有足够的尺寸)特效(参数查看手册)
      border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30 30 round;
     
    }

### ** 5、鼠标样式** ###

* {
      // 语法：auto | default | none | help | pointer | progress | wait....更多看文档！
      cursor:pointer;
    }

### ** 6、列表样式(list标签签名的圆符号的样式)** ###

* {
      // 常用语法；none | disc | square | decimal ...更多看文档！
      list-style-type:disc;
    }

// 表格样式(配合table标签来使用)
    
    * {
      // 用于使用合并的边框来绘制表格。
      border-collapse:collapse;
      // 用于使用分隔的边框来绘制表格，是默认值
      border-collapse:separate;
      // 用于使用合并的边框来绘制表格。
      border-spacing: 2px;
    }
    
    
    table例子：
     
    // 用法一：完全用CSS样式控制table表格！
    // 用法二：table表格标签自带有border属性和cellspacing及其他属性,也可以控制表格！
     
     
    table {
      width: 300px;
      height: 300px;
     
      // 注：必须设置border,border-collapse和border-spacing才会生效！
      border: 1px solid #ff0000;
      // border是设置为整体(collapse)还是设置为单独的(separate)
      border-collapse: separate;
      // 当border-collapse设置属性为separate时,border-spacing才会生效！
      // 单独border之间的空隙距离！
      border-spacing: 5px;
    }
     
    td {
      text-align: center;
     
      // 注：必须设置border,border-collapse和border-spacing才会生效！
      border: 1px solid #ff0000;
      // border是设置为整体(collapse)还是设置为单独的(separate)
      border-collapse: separate;
      // 当border-collapse设置属性为separate时,border-spacing才会生效！
      // 单独border之间的空隙距离！
      border-spacing: 5px;
    }

### **7、定位样式** ###

* {
        // 默认值：无任何定位
        position: static;
        // 相对定位：相对于自己原来的位置！
        position: relative;
        // 绝对定位：相对于最近的非static定位(有定位的)祖先元素
        position: absolute;
        // 固定定位：相对于屏幕视口（viewport）的位置！
        position: fixed;
    }

### **8、内外边距样式** ###

*  {
      // 注：
      // 外边距【使用 margin: 0 auto 水平居中】
      margin: top-bottom left-right;
      margin: top right bottom left;
    
      // 内边距(注：padding不会压缩内部原有的尺寸,只会往外部增加撑大尺寸)
      padding: top-bottom left-right;
      padding: top right bottom left;
    
    }

### 9、浮动流样式  ###

* {
      // 左浮动
      float: left;
      // 右边浮动
      float: right;
    
      /**
        clear功能：可以有效防止弹性盒子回缩！
       */
      // 浮动之后(清除左边浮动),左边不能有人
      clear: left;
      // 浮动之后(清除右边浮动),右边不能有人
      clear: right;
      // 浮动之后(清除两边浮动),左右两边都不能有人
      clear: both;
    
    }

### **10、滚动条** ###

* {
    
      /* 默认值。内容不会被修剪，会呈现在元素框之外 */
      overflow: visible;
    
      /* 内容会被修剪，并且其余内容不可见 */
      overflow: hidden;
    
      /* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
      overflow: scroll;
    
      /* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */
      overflow: auto;
    
      /* 规定从父元素继承overflow属性的值 */
      overflow: inherit;
    
    }

### **11、显示与隐藏 ** ###

* {
      // 不占位消失或显示：语法：none | block | inline
      display: none;
    
      // (很少用)占位隐藏或显示：hidden | visible
      visibility: hidden;
    }

### **CSS3新增样式补充：** ###

// 轮廓样式
    * {
      /**
          允许你控制一个元素的可调整大小性
          属性：none | both | horizontal | vertical | block | inline
          常用于textarea标签去除右下角可调大小的三角形！
       */
      resize:none;
    
      // 轮廓边框(outline-offset必须结合outline才有效)
      outline: 2px solid red;
      outline-offset:10px;
    }
    
    
    //  2D 或 3D旋转样式(2D 和 3D 注意是函数名的区别,3D是X轴或Y轴旋转)
    
    * {
        // 角度旋转
        transform: rotate(30deg);
        // 相对移动坐标(2d和3d会改变坐标,以当前旋转目标为坐标---这是和相对定位最大的区别)
        transform: translate(100px,50px);
        // 以目标中心为中心放大倍数！
        transform: scale(2,4)
    }

[https_www.w3cschool.cn_cssref_3ps212do.html]: https://www.w3cschool.cn/cssref/3ps212do.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70]: /images/20210812/d90f26aa901d4c0f8297444e6d691544.png