CSS-----颜色值的缩写和字体的缩写方法

一、CSS颜色值的缩写:

当设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半
例如：
（1）p{color:#000000;}
可缩写为：p{color:#000;}
（2）p{color:#336699;}
可缩写为：p{color:#369;}

二、字体缩写

例如：
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体"，sans-serif;
}
可以缩写为：
body{font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}
注意：
1、在使用这一缩写方式时，你至少需要指定font-size和font-family属性，其
他的属性(如 font-weight、font-style、font-variant、line-height)如未
指定将自动使用默认值。2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：
body{font:12px/1.5em  "宋体",sans-serif;
}
只是有字号、行间距、中文字体、英文字体设置。

   font-style:italic;/*设置字体，italic为斜体，normal是显示标准字体*/font-variant:small-caps; /*把段落设置为小型大写字母字体，normal是默认值，显示标准字体*/font-weight:bold; /*定义粗体字符，normal为显示标准字符*/font-size:12px; /*设置字体的大小*/line-height:1.6em; /*设置行间距，行高是1.6倍的文字大小，文字大小是指父元素中设定的字体大小*/font-family:"宋体",sans-serif;/*为段落设置字体*/color:red;/*设置颜色*/(1)font-variant
此属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大
写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。(2)font-weight
该属性用于设置显示元素的文本中所用的字体加粗。数字值 400 相当于 关键
字normal，700 等价于 bold。每个数字值对应的字体加粗必须至少与下一个
最小数字一样细，而且至少与下一个最大数字一样粗。(3)font-style
该属性设置使用斜体、倾斜或正常字体。斜体字体通常定义为字体系列中的一个单
独的字体。理论上讲，用户代理可以根据正常字体计算一个斜体字体。(4)line-height
此属性设置行间的距离（行高）。
注释：不允许使用负值。(5)font-family 规定元素的字体系列。
font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持
第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素
的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。
有两种类型的字体系列名称：指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"
提示：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。注意：使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是
否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系
列名作为
后路。

三、颜色值

在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方式有多种


1.英文命令颜色
p{color:red;}2.RGB颜色
这个与photoshop中的RGB颜色是一致的，由R(red)、G(green)、B（blue）三种
颜色的比例来配色
p{color:rgb(133,45,200;}
ps:每一项的值可以是0~255之间的整数，也可以是0%~100%的百分数，
如：p{color:rgb(20%,33%,25%;}3.十六进制颜色
这种颜色设置方方法是现在普遍使用的方法，其原理其实也是RGB设置，但是
每一项的值由0~255变成了十六进制00-ff
p{color:#00ffff;}

CSS-----颜色值的缩写和字体的缩写方法相关推荐

css样式实现表格中字体垂直居中的方法
有一个自定义表格如下所示,当所返回数据改变时,文字都能自动居中 //html //用两个div做容器<el-col :span="3" class="col_row ...
CSS 文本字体颜色设置方法。
这篇文章主要介绍了CSS 文本字体颜色设置方法(CSS color),需要的朋友可以参考下一.认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常 ...
5.前端CSS之基本属性(长宽,字体,文体,背景图片,阴影,border画圆,display)
1.块儿标签长宽height,width块儿标签可以设置长宽,设置长宽后依然独占一行 h1-h6,p,div行内标签无法设置长宽写了也不会生效 i,u,s,b span2.字体样式:font-fa ...
【CSS基础】基础选择器+字体文本相关样式
目录 1.CSS基础选择器 1.1 标签选择器 1.2 类选择器 1.3 id选择器 1.4 通配符选择器 1.5 基础选择器总结 2.CSS字体样式 2.1 字体大小 2.2 字体粗细 2.3 字体 ...
jsp页面字体颜色白色_CSS 文本字体颜色设置方法(CSS color)
一.认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常用颜色地方包含:字体颜色.超链接颜色.网页背景颜色.边框颜色 2.颜色规范与颜色规定:网页使 ...
IEEE Transactions模板中参考文献作者缩写、期刊名缩写
IEEE Transactions模板中参考文献作者缩写.期刊名缩写本文章记录如何在IEEE Transactions的模板中,解决参考文献的作者缩写.期刊名字缩写的问题. 目录 IEEE ...
CSS 文本字体颜色设置方法(CSS color)
转自:微点阅读 https://www.weidianyuedu.com 这篇文章主要介绍了CSS 文本字体颜色设置方法(CSS color),需要的朋友可以参考下一.认识CSS 颜色(CSS c ...
【转帖】详解CSS网页布局中默认字体样式
转自:http://www.52css.com/article.asp?id=1174 浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如果直接利用默认样 ...
[css] 如何更改placeholder的字体颜色和大小？
[css] 如何更改placeholder的字体颜色和大小? <style>/* Chrome浏览器 */input::-webkit-input-placeholder {color: ...

CSS-----颜色值的缩写和字体的缩写方法

CSS-----颜色值的缩写和字体的缩写方法相关推荐

最新文章

热门文章