好程序员web前端分享css常用属性缩写
好程序员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;
- <p><font size="3"> border-style:solid;</font></p>
- <p><font size="3"> border-color:#000;</font></p>
缩为一句:border:1px solid #000;
语法是border:width style color;
背景(Backgrounds)
背景的属性如下:
background-color:#f00;
- <p><font size="3"> background-image:url(background.gif);</font></p>
- <p><font size="3"> background-repeat:no-repeat;</font></p>
- <p><font size="3"> background-attachment:fixed;</font></p>
- <p><font size="3"> background-position:0 0;</font></p>
缩为一句:background:#f00 url(background.gif) no-repeat fixed 0 0;
语法是background:color image repeat attachment position;
你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:
color: transparent
- <p><font size="3"> image: none</font></p>
- <p><font size="3"> repeat: repeat</font></p>
- <p><font size="3"> attachment: scroll</font></p>
- <p><font size="3"> position: 0% 0%</font></p>
字体(fonts)
字体的属性如下:
font-style:italic;
- <p><font size="3"> font-variant:small-caps;</font></p>
- <p><font size="3"> font-weight:bold;</font></p>
- <p><font size="3"> font-size:1em;</font></p>
- <p><font size="3"> line-height:140%;</font></p>
- <p><font size="3"> font-family:"Lucida Grande",sans-serif;</font></p>
可以缩写为一句: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;
- <p><font size="3"> list-style-position:inside;</font></p>
- <p><font size="3"> list-style-image:url(image.gif);</font></p>
可以缩写为一句:list-style:square inside url(image.gif);
好程序员web前端分享css常用属性缩写的更多相关文章
- 好程序员web前端分享CSS元素类型
好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...
- 好程序员web前端分享CSS基础篇
学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML.CSS注释 ...
- 好程序员web前端分享12个CSS高级技巧汇总
好程序员web前端分享下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-chil ...
- 好程序员web前端分享18个用CSS制作出来的东西
好程序员web前端分享18个用CSS制作出来的东西,与流行的看法相反,CSS不仅仅是用来提供一个WEB页面的基本风格,以使它看起来更有吸引力.还有很多其他的事情,CSS也可以做的很好.由于它创建动画和 ...
- 好程序员web前端分享值得参考的css理论:OOCSS、SMACSS与BEM
好程序员web前端分享值得参考的css理论:OOCSS.SMACSS与BEM 最近在The Sass Way里看到了Modular CSS typography一文,发现文章在开头部分就提到了OOCS ...
- 好程序员web前端分享HTML基础篇
好程序员web前端分享HTML基础篇,最近遇到很多新手,都会问,如果要学web前端开发,需要学什么?难不难学啊?多久能入门之类的问题?那么今天好程序员就先来给大家分享一下web前端学习路线:HTML基 ...
- 好程序员web前端分享想要学习前端需要学那些课程
好程序员web前端分享想要学习前端需要学那些课程,仔细思考了一下如何回答好这个话题,其实前端是一个涵盖面非常之广泛的一个职位,所需知识体系非常庞杂,与传统语言“想要精一行,必先通一门” 有很大差别, ...
- 好程序员web前端分享如何理解JS的单线程
好程序员web前端分享如何理解JS单线程,JS本质是单线程的.也就是说,它并不能像JAVA语言那样,两个线程并发执行. 但我们平时看到的JS,分明是可以同时运作很多任务的,这又是怎么回事呢? 首先,J ...
- 好程序员web前端分享javascript关联数组用法总结
好程序员web前端分享javascript关联数组用法总结,有需要的朋友可以参考下. Hash关联数组定义 代码如下 // 定义空数组 myhash = { } // 直接定义数组 myhash = ...
随机推荐
- RabbitMQ消息队列(三)-Centos7下安装RabbitMQ3.6.1
如果你看过前两章对RabbitMQ已经有了一定了解,现在已经摩拳擦掌,来吧动手吧! 用什么系统 本文使用的是Centos7,为了保证对linux不太熟悉的伙伴也能轻松上手(避免折在安装的路上),下面是 ...
- 【Java基础】【09面向对象_多态&抽象类&接口】
09.01_面向对象(多态的概述及其代码体现) A:多态(polymorphic)概述 事物存在的多种形态 B:多态前提 a:要有继承关系. b:要有方法重写. c:要有父类引用指向子类对象. C:案 ...
- springboot情操陶冶-web配置(八)
本文关注应用的安全方面,涉及校验以及授权方面,以springboot自带的security板块作为讲解的内容 实例 建议用户可直接路由至博主的先前博客spring security整合cas方案.本文 ...
- 强大的jupyter,python开发者的福音
jupyter是一种交互式计算和开发环境的笔记,ipython命令行比原生的python命令行更加友好和高效,还可以运行web版的界面,支持多语言,输出图形.音频.视频等功能. 一.安装 pip3 i ...
- Powerdesigner逆向工程64位Oracle数据库
Powerdesigner老版本不支持64位Client,新版本弄不到破解码 解决方法,用Powerdesigner+32位Oracle Clent访问64位Oracle Server 遇到的坑分享下 ...
- 1.docker常用命令
1.启动交互式容器 $ docker run -i -t IMAGE /bin/bash -i --interactive=true|false 默认是false -t --tty=true|fals ...
- Eureka相关知识点
本文讲述的是 Eureka server, 服务提供者.消费者的一些概念和配置说明. Eureka Server 服务注册中心 Eureka的高可用设计 Eureka侧重点是AP,高可用;Eureka ...
- Python中文词频统计
以下是关于小说的中文词频统计 这里有三个文件,分别为novel.txt.punctuation.txt.meaningless.txt. 这三个是小说文本.特殊符号和无意义词 Python代码统计词频 ...
- WEB前端学习代码片段记录
1.JS设计模式片段 Function.prototype.addMethod = function (name,fn) { this.prototype[name] = fn; return thi ...
- Dynamics CRM项目实例之八:CRM 2015的产品系列,克隆,修订
关注本人微信和易信公众号: 微软动态CRM专家罗勇,回复139或者20150106可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! 今天的博客主要是关于D ...