文本样式表

font简记法:必须先是字体大小,再是字体系列;行高为可选,但必须紧跟字体大小和斜杠后面。
line-height: //设置行高
font-family:Geneva,Tahoma,sans-serif;//指定替代字体,可以列举一种以上的字体。字体列表称为字体栈。通常至少包含三个字体:我们希望的字体、一个或几个替代字体,以及一个表示类属的标准字体。
虽然font-family属性是继承的,但有几个元素不会继承父元素的字体设置,其中有表单的select、textarea和input元素。不过可以强制它们继承父元素的字体设置。input,select、textarea{font-family:inherit;}

font-style:italic/oblique  //创建斜体
font-style:normal          //取消斜体
font-weight:bold/bolder/lighter或输入100—900之间的100的倍数,其中400代表正常粗细;700代表粗体。
font-weight:normal或400        //取消粗体,该属性是继承的。
font-size:单位可为px、em、rem(root em)、% 、pt(用做打印样式的单位)         当使用em单位时,最好在body元素上建立一个基准,即body{font-size:100%;}  100%等价于16px。
em设值:要指定的字体大小/父元素的字体大小 = 值
rem设值:要指定的字体大小/根元素字体大小 = 值  即要指定的字体大小/16 = 值  (该单位尚未得到广泛支持)

color:字体颜色。单位可以是颜色名称、十六进制值、RGB、HSL、RGBA和HSLA。除了link元素,其他元素都会继承body元素中的color属性。因此必须要显式设置link元素的color属性。

设置背景:background-color、background-image、background-repeat、background-attachment、background-position,background简记法

1、background:输入transparent或color值


2、background-image:url()或none(只有在覆盖应用背景图像的元素的样式时才会使用这个声明。)


3、background-repeat:repeat、repeat-x、repeat-y、no-repeat


4、min-height:100%;让html元素的最小高度为浏览器窗口高度的100%。


5、background-attachment:scroll、local、fixed  控制背景图像是否随页面滚动。


6、默认值
background-color:是transparent、background-image:是none、background-repeat:是repeat、background-attachment:是scroll、background-position:是0 0(等价于top left)。只有在需要覆盖其他样式规则的时候才会显式的指定默认值。
默认情况下,元素的背景会填充其内容和内边距(padding)所在的区域,并延伸到边框的边缘。可以通过background-clip改变这种规则。

7、background-clip和background-origin两个属性分别控制元素背景显示的范围和开始的位置。这两个属性都接受相同的值:content-box包含内容,padding-box包含内容和边距,border-border包含内容、内边距、和边框。background-clip的默认值为border-box,而background-origin的默认值则为padding-box。
background-size属性可以通过以下属性值控制背景图像的显示尺寸。
contain:在显示图像完整宽度和高度的情况下,尽可能地扩大图像的尺寸。使用该值,背景图像可能不会填充整个背景区域。
cover:在填充元素整个背景区域的情况下,让图像尽可能的小。使用该值,图像的一部分可能会超出元素的范围,因而不可见。
一个长度、百分数或auto:如background-size:250px 400px;

8、指定间距,length可以使用负数。
1)指定字间距,word-spacing:length
2)指定字偶距,letter-spacing:length
该两个属性的值还可能受到所选的对齐方式(用text-alignment设置)和字体系列的影响。要将字母间距和单词间距设为默认值,可以使用normal或0。

9、添加缩进,text-indent:length。默认情况下对em、strong、cite等内联元素没有效果。可以将他们改display值。使用负数会产生悬挂缩进。使用悬挂缩进时,可能还需要增加文字框周围的内边距或外边距,从而让容器可容纳伸到外边的文本。

10、文字对齐,text-align。该属性适用于盒模型的元素,但对短语内容元素(行内元素)不起作用,除非将它们的显示改为块级。

11、修改文本的大小写。text-transform:capitalize/uppercase/lowercase/none。

12、使用小型大写字母。font-variant:small-caps

13、装饰文本,text-decoration:underline、overline、line-through

14、设置空白属性。white-space:nowrap(显示不换行)/normal/pre(让浏览器显示原文本中所有的空格和回车)   让浏览器显示多个空白格和回车。






posted @ 2016-12-21 09:39  mumakiss  阅读(214)  评论(0编辑  收藏  举报