css3常用属性

一、文本和字体

1.给字体设置颜色：color：#f00;

2.给字体加粗：font-weight

   font-weight:normal;  /*比如标题标签hn默认是自动加粗的，可以用该属性去除标题加粗*/

   font-weight：bold； /*给字体加粗*/

3.设置字体大小：

  font-size：3.5em;或者16px;(px是以像素为大小单位；除px外，em也是一种文本大小单位，不同之处在于em是一种“ 动态变化 ”的大小。)

1em代表页面1个字符大小的基准值，这个基准值可以根据浏览器、用户自定义标准的不同而不同。h1的默认大小约为2em，也就是基准大小的两倍；

在制作网页时，如果对元素定位的精细程度要求比较高，则使用px这样的绝对单位比较佳，而当对字体大小的结构化管理比较高时，则可以考虑采用em这样的相对单位。

4.文字缩进：text-indent：2em;

如果缩进值用px来定义，则需要精确算好两个字符的宽度，且一旦段落的字体大小发生变化，缩进的大小也将随之出现偏差，最佳的方式是使用em，当设置缩进为2em时，不管字体大小是多少，段落将始终缩进两个字符；

5.行高：line-height：150%；/*设置行高为基准值的1.5倍*/

浏览器默认的行高较小，通常显得大段文字显得过于密集，增加行高有助于在文字中增加让人愉悦的空间。行高可以以像素作为单位，也可以以百分比（%）作为单位。

面试题：CSS中，line-height：150%与line-height：1.5有何差别？

答案：两者的差别在于其继承性。使用百分比时，会首先计算父元素的line-height的值，然后将这一像素值继承给子元素；而使用无单位的1.5时，则子元素先是继承1.5这个系数，再分别计算其对应的line-height像素值。

行高的另一种重要的功能是内容的垂直居中。使得行高等于容器的高度即可实现垂直居中；

6.设置字体：font-family:"Courier New";

Courier-New的字体中带有空格，在css中定义该值时需要加上双引号。

如果有多个字体，则可以在字体间用逗号加以分隔，如：font-family:Helvetion,Arial,sans-serif;此时浏览器将从前往后选用自体，如果缺少Helvetion，则选为Arial字体作为替代，以此类推；

CSS3可以在样式中自行定义并引入想要显示的字体，而不必像以往那样担心用户电脑中没有安装该字体。具体的做法时使用@font-face来声明一种自定义字体。

@font-face {

   font-family:Lato;

   src:url('lato-regular.ttf'),url('lato-regular.eot'),url('lato-regular.woff');

}

h1,p{

  font-family:Lato;

}

以上是通过font-family属性来将字体命名为Lato，然后用src属性引入字体的储存路径（在此准备了三种不同类型的字体文件，分别为 lato-regular.ttf ， lato-regular.eot ， lato-regular.woff ）。在定义好字体后，只需设置h1,p的字体为Lato即可；

不同的浏览器对web字体的支持并不相同，IE浏览器支持eot字体，Chrome、Safari、Firefox等浏览器支持ttf和woff字体。其中woff字体是最佳的格式，一方面他经过了有效的压缩来减少档案大小，另一方面他不包含加密，也不受DRM（数位著作权管理）限制；

当需要加粗字体时，需要专门设置自定义字体的加粗样式，并连接到相应的粗字体文件。

也可以在font声明中设置所有字体的属性：

h1{

 font:italic bold 50px/150% arial;

}

二、边框与背景

1 )border：5px dotted #fff;/*设置宽度为5px，样式为点线状，颜色为白色的边框*/

2)border-radius：50%； /*边框将显示为圆形*/

3)border-bottom：2px solid rgba(0,0,0,.5);

rgba(0,0,0,.5)是另一种颜色的表示方式，他的优点是能够设置半透明的颜色。

括号里的四个参数分别是R/G/B及透明值；前三者的取值范围为0至255，最后一位的取值范围是0至1，0为完全透明，1为完全不透明；

除此之外还可以用HSL（色相，饱和度，明都）来设置颜色，如红色：hsl(0,100%,50%);

4)background-size:150px 43px;/*设置背景图片的宽高*/

三、元素定位

1）css中元素有两大类：一种是块级元素，另一种是行内元素（内联元素）。

在css中，块级元素和行内元素是由display属性控制的；当属性值为block时为块级元素，属性值为inline时为行内元素。对行内元素来说，设置宽度和高度是无效的；

2）float：left;  设置元素的浮动方向；

     clear：both;  清除浮动；

3）position：relative；相对定位；默认的情况下，块级元素都采用relative的方式定位；它的位置根据上下文的位置变化而变化；

     position：absolute；绝对定位，该方式定位的元素将不占用“位置”。绝对定位的位置参照物就是元素的父元素。

    可以设置top，left，bottom，right等属性灵活的控制其显示的位置；

4）z-index:-1;  设置元素的深度小于页面的默认深度；值为-1，使元素深度小于页面默认为0的深度，使之显示在下方；

四、列表

<ul>

  <li></li>

   <li></li>

  <li></li>

  <li></li>

</ul>

1)当设置项目列表图时可以通过list-style-image:url(check.png);来实现；

2）当为每个列表项设置不同的列表图时，需要用到css3中的伪类原则器。

          first-child :  列表第一项元素；

          last-child：列表最后一项元素；

          nth-child(n):列表第n项元素；

***可以使用nth-child()来实现更加强大的选择功能；

     nth-child(-n+3):获取前三个元素；

     nth-child(n+3):获取除前三个以外的其他元素；

     nth-child(2n+1):将列表分为每两个一组，并获取每一组中的第一个元素，即奇数项；

     nth-child(4n+2):同理，将获取2,6,10个元素

五、阴影效果

text-shadow:0 8px 5px rgba(0,0,0,.5);  四个参数分别为x方向上的阴影位移，y方向上的阴影，阴影的模糊程度，以及阴影的颜色；

box-shadow:10px 10px 20px rgba(0,0,0,.5) inset;  阴影为内部阴影；默认的阴影是outset,外部阴影；

六、优先级

1.通用选择器。如*{ ...}优先级最低；

2.标签选择器。优先级高于通用选择器；

3.类选择器。优先级高于标签选择器；

4.伪类选择器。优先级高于类选择器；

5.ID选择器。优先级高于伪类选择器；