`
webcode
  • 浏览: 5912004 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

CSS属性总结(二):text, font, margin, padding

 
阅读更多

文本

color

设置元素内文本的颜色。值可以取任意CSS支持的颜色值,包括颜色名称(如red, blue)、十六进制颜色值(如#ff0000)或者rgb颜色值(如rgb(255, 0, 0))。默认为#000000,黑色。

direction

设置元素内文本的书写方向。取值有ltr(从左至右)和rtl(从右至左)。默认为ltr。

letter-spacing

设置相较默认状态下增加或减少的字符间距。取值为正时字符间距加大,为负时字符间距减小;取值也可以是normal,相当于0。默认为normal。

line-height

设置字符串行间距。取值可以是normal,即浏览器默认合理的字符串行间距;也可以是数字,该数字会与当前的字体尺寸(font-size)相乘来设置行间距;也可以是带有尺寸单位(px, em等)的数值,行间距会被设置为该数值;还可以是百分数,效果与普通数字一样。注意,本属性不支持负值。默认为normal。

text-align

设置元素内文本的水平对齐方法。取值有left(左对齐)、center(居中)、right(右对齐)、justify(两端对齐)。若direction为ltr,则默认值为left;若direction为rtl。则默认值为right。

text-decoration

设置元素内文本的特殊装饰效果。取值有underline(下划线)、overline(上划线)、line-through(横穿文本的一条线)、blink(闪烁)、none(标准文本)。默认为none,无特殊效果。当期的Chrome不支持blink效果,但是Fire Fox支持。

text-indent

设置元素内文本的首行缩进。取值可以是带单位的数值,表示固定缩进;也可以是百分数,表示相当于元素宽度百分比的缩进。允许负值,表示向左的缩进。默认为0。

text-transform

设置元素内文本的大小写。取值有uppercase(文本全大写)、lowercase(文本全小写)、capitalize(文本单词首字母大写)、none(无改变)。默认为none,按照标准文本输出。当然,本属性只对非中文字符有效。

white-space

设置元素内空白区域的处理方式。取值有normal(忽略空白)、pre(保留空白)、nowrap(文本在同一行上继续直到遇到<br>标签后才换行)、pre-wrap(保留空白符序列,正常进行换行)、pre-line(合并空白符序列,保留换行符)。默认为normal。

word-spacing

设置元素内文本中单词的间距。取值可以是normal,表示间距为浏览器支持的标准单词间距;也可以是带单位的数值,表示固定间距。允许使用负值,表示间距更紧凑。默认为normal。注意,本属性只针对非中文字符有效。

text-shadow

设置元素内文本的阴影颜色。取值是任意CSS支持的颜色值,或者none(无阴影)。默认为none。不过,测试中Chrome、Fire Fox、IE均不支持本属性。

unicode-bidi

设置元素内文本的方向。本属性比较复杂,以目前笔者的水平情况应该还不会用得上。所以在以后具体使用到它的时候再详细描述。


字体

font

统一设置元素内字体的所有属性,包括font-style、font-variant、font-weight、font-size/line-height、font-family,可缺省,无固定顺序。

font-style

设置元素内字体的风格。取值有normal(浏览器支持的标准字体风格)、italic(斜体)、oblique(倾斜)。默认为normal。italic与oblique的区别在于:italic使用的是字体自带的斜体,如果该字体不带斜体,则按normal显示;oblique是浏览器直接使文字倾斜,与字体本身没有关系。

font-variant

设置是否使用小型大写字母样式来显示元素内的所有文字。小型大写字母样式是指比普通字符的大写形式稍小一些的大写字符,即异体字。它由浏览器计算得到。本属性的取值有normal(浏览器支持的正常样式)、small-caps(小型大写字母字体样式)。默认为normal。并只针对非中文字符有效。

font-weight

设置元素内字体的粗细程度。取值可以是数字(不带单位,取值范围在100到900,若超出范围则浏览器可能不支持。),也可以是normal(标准粗细,相当于400)、bold(粗体,相当于700)、bolder(更粗)、lighter(更细)。默认为normal。另外,在异体字(font-variant:small-caps)情况下,本属性会失效。

font-size

设置元素内字体的大小。实际设置的是字符框的高度,因而实际的字体可能会更高或更矮(通常是更矮)。取值如下表所示:


font-family

设置元素内的字体类型。其值可以是多个字体名称,若浏览器不支持前一个,则会自动尝试下一个;字体名称间用英文逗号(,)隔开,带空格的名称需要添加引号。默认值取决于浏览器,且如果设置的字体名称都不支持则自动选择浏览器默认字体。

font-size-adjust

为元素内的字体设置aspect值,浏览器将根据该aspect值计算字体的尺寸。字体的x-height与font-size的比值叫做该字体的aspect值。aspect值越大,该字体在被设置成很小的尺寸就越容易阅读。关于x-height,请参见维基百科:http://en.wikipedia.org/wiki/X-height。下图形象地表示了什么是x-height:


本属性可取的值有none(不设置,默认),或者aspect值比率。设置的aspect值将按照以下公式参与计算字体的尺寸:

首选字体的字体尺寸 * (font-size-adjust 值 / 可用字体的 aspect 值)=可应用到可用字体的字体尺寸。

经测试,目前Chrome和IE均不支持此属性,但是Fire Fox支持。下面是在Fire Fox下测试得到的效果:

代码:

效果截图:


font-stretch

设置对当前字体font-family的变形效果。因为当前浏览器均不支持本属性,故忽略。


外边距

margin

统一设置元素的所有外边距属性,包括margin-top、margin-right、margin-bottom、margin-left,赋值按照CSS顺序规则。取值可以是auto,表示浏览器自动计算;也可以是带单位的距离值;也可以是百分数,表示基于父元素宽度百分比的外边距。默认为auto。允许使用负值。(CSS顺序规则请参见《CSS属性总结(一)》。)

另外,块级元素的垂直相邻外边距会合并,同在一行的元素的左右外边距不会合并,浮动元素各个方向的外边距都不会合并。

margin-top、margin-right、margin-bottom、margin-left

设置元素的上/右/下/左外边距。取值可以是auto,表示浏览器自动计算;也可以是带单位的距离值;也可以是百分数,表示基于父元素宽度百分比的外边距。默认为auto。允许使用负值。


内边距

padding

统一设置元素的所有内边距属性,包括padding-top、padding-right、padding-bottom、padding-left,赋值按照CSS顺序规则。取值可以是auto,表示浏览器自动计算;也可以是带单位的距离值;也可以是百分数,表示基于父元素宽度百分比的内边距。默认为auto。不允许负值。

padding-top、padding-right、padding-bottom、padding-left

设置元素的上/右/下/左内边距。取值可以是auto,表示浏览器自动计算;也可以是带单位的距离值;也可以是百分数,表示基于父元素宽度百分比的内边距。默认为auto。允许使用负值。


外边距与内边距

下图表示了一个块级元素的内外边距:

所以元素的居中效果等能简单地用内外边距来实现。


参考资料:http://www.w3school.com.cn/css/css_reference.asp

分享到:
评论

相关推荐

    网页制作代码+课程总结

    padding: 0px; } #container{ text-align:left; padding:0px; width:1400px; position:relative; margin-top:0px; margin-right:auto; margin-bottom:0px; margin-left:auto; } #top{ padding-top:15px; ...

    初写静态网页

    padding: 0; float: left; } /*专家团队*/ .showtTitle { width: 455px; height: 70px; padding: 0; margin: 0 auto; } .tcontain { width: 120px; height: 3px; padding: 0; margin: 62px 0 5px 0 ; ...

    jsp页面美化经典-css翻页代码

    24款css翻页代码 BODY { FONT-SIZE: 12px;FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;WIDTH: 60%; PADDING-LEFT: 25px; } /*CSS Digg style pagination*/ DIV.digg { PADDING-RIGHT: 3px; PADDING-...

    期末作业网页制作

    padding: 0; line-height: 1.5em; font-family: Verdana, Arial, san-serif; font-size: 11px; color: #CCC; background: #000 url(images/main_bg.jpg) top repeat-x; } a:link, a:visited { color: #f5...

    给大家提供一个div+css的标准网页模板

    padding: 0px; background: #FFFFFF url(images/bg01.jpg) repeat left top; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 13px; color: #797979; } h1, h2, h3 { margin-top: 0px; text...

    div-css-漂亮的导航条

    &lt;style type="text/css"&gt; body { margin:0; padding:0; font: bold 11px/1.5em Verdana; } h2 { font: bold 14px Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 0px; padding: 0px 0px 0px...

    HTML 网页设计

    padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;} article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;} ol,ul{list-style:none;...

    CSS自适应宽度圆角按钮

    body{padding:10px; font-size:12px;} h1{margin:0; padding:10px 0; font-size:14px; font-weight:bold;} a{background:url(41205957519.gif) left 0; color:#fff; text-decoration:none; height:30px; float:left;...

    通用CSS样式,修改页面变的不再麻烦

    /******** 全局共用属性CSS ********/ *{margin:0;padding:0;} body{color: #353535;background:#fff;font:12px/22px Verdana,Arial,sans-serif,"Times New Roman",宋体;text-align:center;} body,ul,ol,li,p,h1,h2,...

    css教程(附案例)免费下载

    padding:0; list-style:none;} .box{width:230px; height:240px; border:1px solid #D8D8D8; margin:0 auto; background:url("bg.jpg"); padding:60px 20px 0 420px;} .more{width:230px; height:18px; line-...

    H5+CSS3.zip

    css盒模型:块级元素,内联元素,内敛块状元素,none使元素隐身,设置宽度、高度、背景色、边框、圆角,padding内边距,margin外边距; css布局模型:流动模型flow,浮动模型float,层模型layer,层模型的绝对定位、...

    莽荒纪 模板CSS

    padding:0px;} body{font-size:12px;font-family:Arial;margin:0px;background:url("images/bg.gif") fixed;} a{color:#956839; text-decoration:none;} a:hover{ text-decoration:underline;} .w768{ width:768px; ...

    定义文本样式 css3与html5源码3种

    padding:8px 8px; background:#7FECAD url(images/green.gif) repeat-x; font-size:13px; text-align:left; font-weight:bold; color:#71790C; margin-bottom:12px; border-bottom:solid 1px #efefef; } dd ...

    JavaScript+CSS无限极分类效果完整实现方法

    本文实例讲述了JavaScript+CSS无限极分类效果...padding:20px;font:12px tahoma,宋体,sans-serif;} dt {font-size:22px;font-weight:bold;margin:0 0 0 15px;} dd {margin:0 0 0 15px;} h4 {margin:0;padding:0;font-

    右下角广告弹窗1.html

    style type="text/css"&gt; * {margin:0px;padding:0px;} html,body {height:100%;} body {font-size:14px; line-height:24px;} #tip {position: absolute;right: 0px;bottom: 0px;height: 0px;width: 180px;border: 1...

    Emmet命令大集(HTML+CSS+XSL)CHM

    Margin & Padding(边距&填充);Box Sizing(内边距);Font(字体);Text(文本);Background(背景);Color(颜色);Generated content(生成的内容);Outline(轮廓);Tables(表格);Border(边框);Lists(列表);Print...

    HealthSystem

    健康系统,档案系统 ... charset=utf-8" /&gt; ...&lt;style type="text/css"&gt; &lt;!-- *{margin:0;padding:0;border:0;} ul { margin: 0px; padding: 0px; list-style: none; } body,td,th { font-size: 12px;

    404页面自动跳转到首页

    &lt;style type="text/css"&gt; body {margin: 0px; padding:0px; font-family:"微软雅黑", Arial, "Trebuchet MS", Verdana, Georgia,Baskerville,Palatino,Times; font-size:16px;} div{margin-left:auto; margin-right:...

    基础jquery

    jquery基础知识:通过jquery对象进行css样式的设置,dom对象方法的控制,文档中有源码,希望对初级的jquery同学有用

    media-queries

    padding:16px 5% 10px 0; position:relative;} .nav-btn{ display:block; background:#1271A0; width:40px; height:40px; line-height:40px; position:absolute; right:10px; bottom:6px; text-align:center; ...

Global site tag (gtag.js) - Google Analytics