好程序员web前端分享css常用属性缩写

简介: 好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则如下:  颜色  16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:  #000000可以缩写为#000;#336699可以缩写为#369;  盒尺寸  通常有下面四种书写方...

好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则如下:
  颜色
  16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:
  #000000可以缩写为#000;#336699可以缩写为#369;
  盒尺寸
  通常有下面四种书写方法:
  property:value1; 表示所有边都是一个值value1;
  property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
  property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3
  property:value1 value2 value3 value4;
  四个值依次表示top,right,bottom,left
  方便的记忆方法是顺时针,上右下左。具体应用在margin和padding的例子如下:
  margin:1em 0 2em 0.5em;
 边框(border)
 边框的属性如下:
  border-width:1px;
1.

  border-style:solid;


2.

  border-color:#000;


  缩为一句:border:1px solid #000;
  语法是border:width style color;
  背景(Backgrounds)
  背景的属性如下:
  background-color:#f00;
1.

  background-image:url(background.gif);


2.

  background-repeat:no-repeat;


3.

  background-attachment:fixed;


4.

  background-position:0 0;


  缩为一句:background:#f00 url(background.gif) no-repeat fixed 0 0;
  语法是background:color image repeat attachment position;
  你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:
  color: transparent
1.

  image: none


2.

  repeat: repeat


3.

  attachment: scroll


4.

  position: 0% 0%


  字体(fonts)
  字体的属性如下:
  font-style:italic;
1.

  font-variant:small-caps;


2.

  font-weight:bold;


3.

  font-size:1em;


4.

  line-height:140%;


5.

  font-family:"Lucida Grande",sans-serif;


  可以缩写为一句:font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
  规则一:必须声明 font-size 和 font-family 的值。 规则二:所有值必须按如下顺序声明。
  1. font-weight、font-style、font-variant 不分先后;
  2. 然后是 font-size;
  3. 最后是 font-family。
  注意,如果你缩写字体定义,至少要定义font-size和font-family两个值。
  列表(lists)
  取消默认的圆点和序号可以这样写list-style:none;
  list的属性如下:
  list-style-type:square;
1.

  list-style-position:inside;


2.

  list-style-image:url(image.gif);


  可以缩写为一句:list-style:square inside url(image.gif);
相关文章
|
6月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
transition过渡属性 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。 但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化, 让效果显得更加细腻。简单点说,就是通过鼠标经过、获得焦点,被点击或对元素任何改变中触发, 并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 在默认样式中声明元素的初始状态样式; 声明过渡元素最终状态样式,比如悬浮状态; 在默认样式中通过添加
329 1
|
6月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形 css3在原来的基础上新增了变形和动画相关属性,通过这些属性可以实现以前需要大段JavaScript才能实现的 功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换,这样的变换可以控制HTML组件 呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换,CSS3提供了transition动画。 transition动画比较简单,只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化,并指定动画时间,就可保证动画播放。 比transitio
299 1
|
6月前
|
前端开发 算法 Java
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
203 1
|
6月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
position定位(核心) 我们讲盒模型的时候,提到了3个属性可以用来控制页面排版。 三大属性:position属性,display属性,float属性。 position 属性控制页面上元素间的位置关系。 display 属性控制页面元素是否显示或者是堆叠还是并排显示。 float 属性提供控制方法。 通过float这种控制方法,可以实现多栏布局,导航菜单等等。 position属性是干嘛用的?怎么用?有哪些属性值? position属性控制页面上元素间的位置关系,也就是排版。 怎么用?要知道怎么用
608 0
|
6月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
继承 我们的CSS中很多的属性也是可以继承的,其中相当一部分是跟文字的相关的,比如说颜色、字体、字号。 当然还有一部分是不能继承的。 例如边框、内外边距。 层叠 层叠是CSS的核心机制。 层叠的工作机制: 当元素的同一个样式属性有多种样式值的时候,CSS就是靠层叠机制来决定最终应用哪种样式。 层叠规则: 层叠规则一:找到应用给每个元素和属性的声明。 说明:浏览器在加载每个页面时,都会据此查找到每条CSS规则, 并标识出所有受到影响的HTML元素。
212 0
|
人工智能 前端开发 JavaScript
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
AI程序员:通义灵码 2.0应用VScode前端开发深度体验,在软件开发领域,人工智能技术的融入正深刻改变着程序员的工作方式。通义灵码 2.0 作为一款先进的 AI 编程助手,与广受欢迎的代码编辑器 Visual Studio Code(VScode)相结合,为前端开发带来了全新的可能性。本文将详细分享通义灵码 2.0 在 VScode 前端开发环境中的深度使用体验。
2176 2
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
525 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
232 5
|
前端开发
CSS 浮动属性讲解和使用
本文介绍了CSS中的浮动(float)属性,包括其基本功能、属性选项及其在网页布局中的应用。浮动使元素脱离文档流,向左或右排列,周围元素随之调整。文章还详细讲解了清除浮动的方法,如使用clear属性、设置父元素高度、利用overflow属性、伪元素等,以解决因浮动导致的布局问题。最后,强调了浮动在创建复杂布局时的作用,并预告后续内容。
457 2
|
前端开发
CSS transition过渡属性详解
本文介绍了CSS中`transition`属性的作用、用法及实例。`transition`用于在元素属性变化时添加平滑过渡动画,通过设置`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`等属性值,可以精细控制过渡效果。文末提供了HTML示例代码,展示了如何使用`transition`实现鼠标悬停时背景颜色的平滑变化。
707 1