黑马程序员前端-CSS属性书写顺序(重点)

时间:2023-01-25 11:57:03


 前端学习笔记教程不定期更新中,传送门:

  • ​​前端HTML第一天:什么是网页?什么是HTML?网页怎么形成?​​
  • ​​黑马程序员前端-CSS入门总结​​
  • ​​黑马程序员前端-CSS之emmet语法​​
  • ​​黑马程序员前端-CSS的复合选择器​​
  • ​​黑马程序员前端-CSS的显示模式​​
  • ​​黑马程序员前端-CSS背景​​
  • ​​黑马程序员前端-CSS三大特性:叠层性、继承性、优先级​​
  • ​​黑马程序员前端–CSS盒子模型以及PS基础​​
  • ​​黑马程序员前端-CSS之圆角边框、盒子阴影、文字阴影​​
  • ​​黑马程序员前端-CSS之浮动知识点汇总​​
  • ​​黑马程序员前端-CSS前端基础了解PS切图​​

下面开始继续更新内容,前面链接大家用来查漏补缺哦。

一、本文重要性

从生活中看一个人是否有气质,要看他的穿着打扮。

在编程中看一个人是否有能力,要看他的:规范标准、优雅高质量等等

二、书写顺序

建议遵循以下顺序:

  1. 布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写,毕竟关系到模式)
  2. 自身属性:width / height / margin / padding / border / background
  3. 文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word
  4. 其他属性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

举例:

.jdc {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
background: rgba(0,0,0,.5);
border-radius: 10px;
}