CSS学习（下）

2.4常用样式

CSS中常用样式包括背景,大小，文本，边距，边框，显示，定位等几大类

1.   背景

背景指DOM元素显示的背景，任何DOM元素都可以设置背景样式，如文字，按钮等，但我们一般仅为大范围的DOM元素设置背景，如整个HTML或body等，从而实现一种底层衬托的效果。

              Background-color： 用于设置背景颜色，RGB，十六进制，颜色名都可以。

       Background-image：用于设置背景图片，需要用url（）函数提供图片链接，使相对路径或互联网上可访问的图片链接都行。

       Background-repeat：当图片不足以覆盖DOM元素时，是否重复平铺。

Background-size：使图片作为背景时，背景图片的大小。

Background-position：使用图片作为背景图，如果图片大于背景，优先显示图片的哪一块。

 

        body

                {

                         background-color:rgb(150,234,213); //颜色设置背景色

                         background-image:url(test.jpg);//用图片设置背景色

                         background-repeat:no-repeat;//不重复平铺图片

                         background-size:cover;//使用长度或宽度一个铺满

                         background-attachment:fixed;// 图片不随界面滑动

                         background-position:center;

                }

2.   大小

每个DOM 元素都有自己的宽和高，即width和height。对于文本类标签则可以设置字体大小，即font-size。大小的单位有像素（px）和百分比（%）等，前者为绝对值，后者为相对于父元素的相对值。默认情况下，HTML的宽和高都是浏览器大小的100%

大小单位：px，%，em（一个标准字体大小）

3.   文本

Color ：文本的颜色，RGB,十六进制，颜色名都可以

Text-align: 文本居向，可以是left，right或center。

Text-decoration:文本是否有下画线，设为none，可以取消链接的默认下画线

Text-indent：文本首行缩进宽度。

Line-height：文本段落的行距。

Font-size：文本的大小，一般以像素（px）为单位

Font-family:文本的字体，可以同时设置多个值，浏览器将逐一尝试直到字体可用。

 

<style>

                h1

                {

                         color:green;

                         text-align:center;

                         text-decoration:none;

                         text-indent:1em;

                         line-height:1.2

                         font-size:22px

                         font-family:MicrosoftYahei;

               

                }

 

        </style>

 

 

4.   边距

边距主要包括margin和padding，margin是DOM元素四周外部的边距，padding 是DOM元素四周内部的边距，DOM元素的宽高包括padding但不包括margin。边距的单位可以是像素（px）或百分比（%）。提供一个值时代表上下左右四个方向，提供两个值时，第一个值代表上下，第二个值代表左右，提供4个值时，依次代表上，右，下，左。

P {

 margin：30 px 40px；

 padding： 5px

}

5.   边框

Margin和padding之间还存在一个边框即border，可以设置边框的粗细，线型，颜色，圆角和阴影。

div

{

         border：1px  solid  #ddd；

}

6.   显示

display 属性可以决定DOM元素的显示方式，可以设置为inline，block，inline-block等，分别对应内联元素，块级元素，内联块级元素，使用以下代码可将span设置为块级元素

 

7.   定位

Position即定位，是css 中非常重要的一项属性，决定了HTML页面中DOM元素的位置和布局。

2.5补充学习

:http://www.runoob.com/css/css-intro.html