首页 > 编程语言 >黑马程序员前端-CSS属性书写顺序(重点)

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

时间:2023-01-25 12:00:48浏览次数:41  
标签:text 前端 程序员 background 黑马 CSS


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

  • ​​前端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;
}

标签:text,前端,程序员,background,黑马,CSS
From: https://blog.51cto.com/u_8238263/6022480

相关文章

  • 不能直接在 CSS 变量中写计算,针对于 Scss 项目
    不论是在Scss还是在CSS中,给CSS变量(自定义变量)直接写计算,都不会生效。例如:*{--text-size:calc(100px*1);}打开浏览器查看计算的样式表中,并没有计算得到10......
  • CSS font-display 控制字体加载和替换
    在编写网站的时候,或多或少都会用到一些网络上的字体,CSS3中虽然加入了对WebFonts(网络字体)的支持,但是浏览器对它们的加载和默认处理方式会极大的影响网站的性能和用户体验......
  • 在React中,怎么用tailwind css(就叫顺丰吧 :D 。。。)封装Button组件
    我的目的想用tailwindcss来快速封装Button组件,而不是从更大型的UI库导入一个Button组件(那样就太大材小用)。几个工具从这抄的样式在学习怎么形成规范化的组件额,仅......
  • 程序员私单(转载)
    原文:https://www.bilibili.com/video/BV1Rs4y1t79b/关于接私单的深刻总结一需要掌握的能力根据自己能力和精力来选择。浅尝辄止:掌握开发即可。但是需要依赖渠道。......
  • css
    一.基础认知1.1.css介绍css:cascadingstylesheets:层叠样式表用于修饰HTML标签命令1.2css的引入方式内嵌式:css写在style标签中,style标签写在head标签中,写在title标签......
  • SVG Animation & CSS stroke-dasharray & stroke-dashoffset All In One
    SVGAnimation&CSSstroke-dasharray&stroke-dashoffsetAllInOnehttps://maxwellito.github.io/vivus/https://github.com/maxwellito/vivus#vivusjshttps://de......
  • 「HTML+CSS」--自定义加载动画【029】
    前言Hello!小伙伴!首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~哈哈自我介绍一下昵称:海轰标签:程序猿一只|C++选手|学生简介:因C语言结识编程,随后转入计算......
  • 「HTML+CSS」--自定义加载动画【031】
    前言Hello!小伙伴!首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~哈哈自我介绍一下昵称:海轰标签:程序猿一只|C++选手|学生简介:因C语言结识编程,随后转入计算......
  • 【动画消消乐】HTML+CSS 自定义加载动画:清新折叠方块效果 063(附源码及原理详解)
    前言Hello!小伙伴!非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~自我介绍ଘ(੭ˊᵕˋ)੭昵称:海轰标签:程序猿|C++选手|学生简介:因C语言结识编程,随后转入计算机专......
  • 【动画消消乐】HTML+CSS 自定义加载动画:怦然心跳 066
    前言Hello!小伙伴!非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~ 自我介绍ଘ(੭ˊᵕˋ)੭昵称:海轰标签:程序猿|C++选手|学生简介:因C语言结识编程,随后转入计算......