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

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

 

 

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

 

1、字体常见样式总结：

*{
  // 字体类型
  font-family: Arial;
  // 字体大小
  font-size: 20px;
  // 字体样式：normal | italic | oblique
  font-style: oblique;
  // 字体粗细：normal | bold | 
  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.边框样式： 

* {
    // 语法： ||  || 
    // 语法 = 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)
}