您现在的位置:德学培训网 > 学习资讯 > 电脑和IT > 电脑设计 > 网页设计 > 很实用的CSS 语法的缩写规则

很实用的CSS 语法的缩写规则

新闻标签:网页设计培训      编辑:合肥荣博教育培训学校     发表于:10-20 07:28:08     
49人阅读     0人评论


今天小编主要给大家介绍css的主要缩写规则,内容就涉及到颜色、盒尺寸、边框、背景、字体以及列表等等方面。而缩写的目的是为了减少CSS文件的大小,让css文件更加易于阅读。

CSS缩写的主要规则如下:

(一)颜色

要是16进制的色彩值当中每两位的值一样,那就可以缩写一半,如下:

#000000能缩写为#000;

#336699能缩写为#369;

(二)盒尺寸

以下有四种书写方法:

(1)property:value1:指的是全部边都是一个值value1;

(2)property:value1value2:是指top以及bottom的值为value1,right以及left的值为value2;

(3)property:value1value2value3:指的是top的值是value1,right以及left的值为value2,然而bottom的值是value3;

(4)property:value1value2value3value4:这四个值分别表示top,right,bottom以及left。

记忆方法便利的是顺时针,上右下左。应用在margin以及padding的例子如下:

CSS语法的缩写规则_css教程_css基础_课课家

(三)边框(border)

边框属性如下图:

边框

能缩写为:border:1px,solid#000;

语法为:border:widthstylecolor;

(四)背景(Backgrounds)

背景属性如下图:

背景

能缩写为:background:#f00url(background.gif)no-repeatfixed00;

语法为:background:colorimagerepeatattachmentposition;

能省略其中的一个或者是多个属性值,要是省略的话,这个属性值就会用浏览器的默认值,它的默认值是:

背景

(五)字体(fonts)

字体属性如下图:

字体

能缩写为:font:italicsmall-capsbold1em/140%LucidaGrande,sans-serif;

注意:要是缩写字体定义,至少要定义font-size以及font-family这两个值。

(六)列表(lists)

取消默认的圆点以及序号如下:list-style:none;,

list属性如下图:

列表

能缩写为:list-style:squareinsideurl(image.gif);

总结:缩写的主要目的就是为了减少CSS文件的大小,让css文件更加易于阅读。我们网站将会给大家介绍更多关于Web开发的内容。

很实用的CSS 语法的缩写规则来源于合肥荣博教育培训学校编辑发布,请点击网页设计培训资讯查看更多相关新闻
相关网页设计培训课程
 换一换
相关网页设计培训新闻
上海网页设计培训,非凡网页设计大咖亲授,课上手把手教学,课后一对一指导,学不会可重修,网页设计培训就选非凡准没错,网页设计学习6个月,圆你一个设计梦!网页美工培训班1.预科:美术设计(素描、水粉、透是原理)构成设计、色彩配色、审美...
资讯分类:网页设计     来源: 上海室内设计培训学校     05-08 01:05:47     18人阅读
相信很多人去面试美工工作时都会遇到这个问题?什么问题呢?面试官除了看美工的设计作品还会要求美工当场做图。当然面试官也不是傻子肯定也会考虑到作品到底是不是你自己做的呢!于是就会提前出好题目,或者给他们店铺的产品图,要你按照他的要求去...
资讯分类:网页设计     来源: 东莞美迪淘宝电商培训学校     03-01 12:03:54     40人阅读
无线即系我们常说的O2O营销,对于现在来说已经不是蓝海市场了,在不久的日子将会有个热门行业。那么无线现在来说是一个趋势,我们该如何去把握?广州美迪淘宝美工培训告诉你,合理的装修能让流量暴增,究竟是什么情况?下面请看如何装修手机淘宝...
资讯分类:网页设计     来源: 广州美迪淘宝电商培训学院     03-01 12:03:05     88人阅读
很多同学看到别人店铺的海报图是全屏的看着很漂亮,都想在自己的店铺上也制作这样的效果,下面广州美迪淘宝培训来给各位同学详细的介绍操作步骤吧!首先同学们需要准备一张大海报,一般尺寸是1440像素的宽度就可以了,因为有些显示器比较大,所...
资讯分类:网页设计     来源: 佛山美迪电商培训学校     03-01 12:03:24     64人阅读
对于淘宝天猫又或者其他电商网店来说,一个理想、美观的详情页是至关重要的!你的店铺首页可以一般般,但是你的详情页却不能马虎,因为大部分买家通过搜索之后都是直接进入你的宝贝详情页的,如果你的宝贝详情图不能打动买家,那么就算有人进入到你...
资讯分类:网页设计     来源: 成都美迪电商培训学校     03-01 12:03:59     82人阅读
当我们要设置全屏轮播的时候,有些同学就会出现一个状况,那是什么?那就是可能模块不是950的,而是750的,所以只能右侧显示。但是我们要突破全屏的话,前提是需要专业版,然后就要去布局管理设置。 下面广州美迪淘宝美工培训介绍,淘宝...
资讯分类:网页设计     来源: 广州美迪淘宝电商培训学院     03-01 12:03:45     44人阅读
裁剪工具之基本操作(一)裁剪面板的初步认识,如图所示:图裁剪面板1:裁剪工具的位置,如果显示了切片工具或者其他工具时,右击选择裁剪工具即可。2:默认裁剪范围是整张图片,默认裁剪视图是九宫格,可以拖动边缘来确定裁剪范围。3:裁剪工具...
资讯分类:网页设计     来源: 成都美迪电商培训学校     03-01 12:03:36     119人阅读
淘宝店铺如何添加搜索框?可能有不少朋友会不小心删除了搜索的模块,那么我们要怎么去添加,其中方法会有两个,一个是用代码放进自定义内容里面去。而另外一个则是官方的方法,直接添加模块即可,但是怎么添加?让广州美迪淘宝美工培训告诉你。...
资讯分类:网页设计     来源: 东莞美迪淘宝电商培训学校     03-01 12:03:32     44人阅读
前端开发对图片的优化处理1、图片的存储格式我们改变了v3的做法,把icon类小图片或背景类图片,由以前的gif存储尽可能多的转为png8的存储,这是个减小图片体积的好办法。Png8有gif的所有特点,但是相比gif,png8的优势...
资讯分类:网页设计     来源: 杭州群英电脑培训学校     12-05 08:12:41     74人阅读
网友评论
5.0
课程质量评分:
老师教学评分:
机构服务评分:
我要评论
文明上网理性发言,请遵守新闻评论服务协议
最新评论
0 条评论
热门城市