-
字号font-size
//相对单位
font-size:14px; //px与当前使用的显示屏的分辨率有关,14px,即占用14个像素点。
font-size:1.5em; //em相对于文本对象内原来的字体尺寸,1.5em,即是原来该字所处段落的字体尺寸的1.5倍。
font-size:200%; //与em解释相同,2倍。
font-size:1.5rem; //这是css3的新增单位,详情看本文最下面。
//绝对定位
//in、cm、pt(基本不用,无需了解) -
颜色color
color: #FF0000; //采用#+6位16进制表示
color: blue; //颜色名称
color: rgb(155,2,2);//r:红;g:绿;b:蓝; -
字体font-family
引自这里,作者写的很好,我复制了一下,方便自己看。
font-family: Georgia, "Times New Roman",
"Microsoft YaHei", "微软雅黑",
STXihei, "华文细黑",
serif;
—规则:每种字体以,
号分隔开;子体内有空格需加""
;
优先使用排在前面的字体进行渲染,如果前面的字体不包括该字的渲染效果,则使用下一个字体。例如:
中文字体里面包括英文的渲染效果,但是比较丑。如果将中文字体放在前面,则英文也被强迫渲染啦。建议:将英文字体放在中文字体前面,这样英文字体将引文渲染后,无法对中文进行渲染,将对中文渲染的工作交给下一个字体。
如果font-family
列举的字体,用户主机内都没有,则计算机采用默认字体进行设置。
—注意:将mac字体放在微软字体前(考虑mac用户);同时列出中文字体的英文名称(兼容性考虑)
—理解:衬线体与非衬线体
如图可以发现衬线体是比较具有装饰性的,比较好看,但是当字体小于14px时,字的可识别性降低。
—推荐:
font-family:Helvetica,Arial,//安全放心字体
"Microsoft Yahei","微软雅黑",//win7上才安装。
宋体, SimSun, //安全放心字体
STXihei, "华文细黑";//微软雅黑在Mac平台的对应字体是华文细黑(STXihei)
//另有一种安全放心的英文字体是手写类,在需要可爱的地方可以用一下
// font-family:'Comic Sans MS
-
样式font-style
font-style: normal;//常规
font-style: intalic;//斜体
font-style: oblique;//斜体 -
粗细font-weight
font-weight:bold;
font-weight:normal;
//虽然可以用数字,但是这样就可以满足一般的要求啦。 -
行高line-height
我对于网上有些人简单粗暴地理解她为行间距,感到很生气,误导了我好一阵,参照W3C手册,正解是这样的。
font-size:20px;
line-height:150%;//推荐。
//随着字体越大,行间距应该越小,所以行高也要越小。
—技巧:单行文本居中设置(参照上图不难理解)
p{
height:100px;//段落块的高度
line-height:100px;
}
段落修饰text-decoration
text-decoration:overline;//上划线
text-decoration:underline;//下划线
text-decoration:line-through;//删除线
text-decoration:blink;//闪烁
text-decoration:none;//无
注意:text-decoration:blink;
大部分浏览器都不支持这一属性值,说明存在兼容问题,所以我们在编写时,应尽量不使用存在兼容问题的css属性。可以采用其他效果代替。字符间距letter-spacing
设置字符(汉字或字母)间距。
letter-spacing:20px;单词间距word-spacing
注意:实际上是针对空格的处理,在汉语间插入空格(不论多少),也可以达到效果。
word-spacing: 8px;-
文本缩进 text-indent
text-indent: 2em;//该段落的首行缩进2个字符长度。
—首行悬浮怎么实现?
text-indent:-2em;
padding-left:3em;
—解释:
文本对其 text-aline
注意:指的是文本横向对齐
text-aline:center;
text-aline:left;
text-aline:right;文本中空白处理 white-space
white-space: normal;//默认,不考虑空格,换行。
white-space: pre;//保留原来文档内部的换行,空格
white-space: nowrap;//强制性的要求文档处于一行。文本大小写 text-transform
text-transform: capitalize;//首字母大写
text-transform: uppercase;//全部大写
text-transform: lowercase;//全部小写
text-transform: normal//默认**文本中元素垂直对齐 vertical-aline **
这个属性存在很大的兼容性,不建议使用。等学的多了,再写一篇关于这个的。
CSS3对于字体的新功能。
通过Css3,web设计师再也不必被迫使用web-safe字体。
-
使用方法
在新的@font-face规则中,您必须首先定义字体的名称,然后指向该字体文件。如需为 HTML 元素使用字体,请通过 font-family 属性来引用字体的名称。
<style>
@font-face
{
font-family: myFirstFont; //设置字体名称
src: url('Sansation_Light.ttf'), //设置字体文件来源
url('Sansation_Light.eot'); /* IE9+ /
}
@font-face
{
font-family: myFirstFont; //设置字体名称
src: url('Sansation_Bold.ttf'), //设置字体文件来源
url('Sansation_Bold.eot'); / IE9+ */
font-weight:bold;
//设置条件,当需要让字体加粗时,会自动调用这个加粗的字体样式
}
div
{
font-family:myFirstFont;
}
</style>
<body>
<div>这里面有一个<b>加粗</b>的字</div>
</body>
文件 "Sansation_Bold.ttf" 是另一个字体文件,它包含了 Sansation 字体的粗体字符。只要 font-family 为 "myFirstFont" 的文本需要显示为粗体时(<b>
),浏览器就会使用该字体。
兼容性:
CSS3对于字号的新增单位:rem
参考这里
-
解释
使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。 -
好处
这个的好处是相对于rm在使用时的不方便而来的。
如果在根元素或是content
中已经声明过字体大小。
html{font-size:1.2em;}
这时如果需要对P元素在进行设置字号大小,
p{font-size:1.2em;}
—问题:浏览器默认为16px,根元素进行设置后,字号大小为:16*1.2=19.2px; em是相对单位,相对该内容原来的字号而定,p的原来大小即刚刚根元素设置的19.2px,现在又进行设置后,大小应该为:19.2*1.2=23.04,但是设计本意也许只是想让p为19.2px
—解决方法1:在根元素中这样声明字体
html{font-size:62.5%}
默认尺寸时:1em=16px;则现在的字体大小为:0.625*16px=10px;
那么12px=1.2em;此时,在后续元素更改字号时,可以参照1em=10px来进行设置。
—解决方法2:css3新增单位
当我们在body{font-size:1.2rem;}
中进行设置后,再在body内子元素p{font-size:1.2rem;}
进行设置,效果是一样的,他们的参照大小均是浏览器的默认大小。所以字号大小均是:1.2*16px=19.2px;