css入门——声明属性

背景与宽高

        所有背影和宽度属性都不会继承。

        background-color：背景颜色值，默认值是透明色。可以直接用red等单词表示，也可以使用ff00aa类型的16进制颜色值表示，也可以使用rgb或者rgba等函数形式表示(注意：参数必须是10进制的，不能写成十六进制的)。如

h1 {      background-color: rgb(128,10,100);      }

       backgroud-image：背景图片，默认值是none。地址必须的url函数包裹。如

h1 {      background-image: url(http://pica.nipic.com/2008-03-19/2008319183523380_2.jpg);      }      span{      font-size: 50px;      background-image: url(./bg.png);      }

        background-repeat：背景重复方式。no-repeat不重复，repeat-x只在水平方向重复，repeat-y只在竖直方向重复，repeat水平竖直方向都重复。

        background-position：背景图片的位置，对背景颜色无效。可以用长度值，关键字以及百分比表示。

        长度值：图片左上角偏离屏幕左上角相应的长度，单位可以是cm,px等。

        百分比：它同时作用于图片和标签，表示与图像的百分比位置与标签的百分比位置对齐，如果只设置一个值，则表示水平方向，竖起方向为50%。如60% 40%，表示将图像的60% 40%的位置与标签的60% 40%位置对齐。

        关键字：如top center right left bottom等。其中top bottom垂直方向上，left right指水平方向上的。center即可指垂直方向，又可指水平方向。如果只指定一个值，另一个默认为center。

        background-attachment：设置在滚动时背景图片处理方式。fixed固定不动；scroll根据鼠标一齐滚动；inherit：从父元素继承。

        width与height：块级元素的宽度和高度。可以设置成固定数值，如500px，也可以设置成百分比如50%。

        overflow：子元素比父元素所占区域大时的处理方法。visible：子元素正常显示。hidden：隐藏掉子元素的走出区域。scroll：子元素可以滚动显示。auto：如果子元素超出父元素，则显示滚动条，否则正常显示。inherit：从父元素继承该属性的值。

        display：块级元素与内联元素相互转化。block：将内联元素转换为块级元素；inline：将内联元素转换为块级元素；inline-block：仍旧占一块区域(宽，高都有效)，但同一行可以放置其它元素。none：在页面不展示该元素。

文本

        font-size：字体大小。

        color：字体颜色。支持#rgb格式

        text-indent：文本缩进。可用百分比，指的是页面长度的百比分；可用px，em等做单位。也可使用负数。使用负数时可以形成“首行悬挂”的效果，但对于p标签来说，使用负数值时有可能使首行某些文本超出屏幕的显示范围。因此，需要再设置一些外边距或内边距。如下：

            text-indent: -5em;            padding-left: 5em;

        text-align：文本对齐方式。left：居左对齐；center：居中对齐；right：居右对齐。justify：分散对齐。与android中的alignParentLeft等属性相同。

        line-height：每行文本所占的高度。如果高度超出文字的调度，文本垂直居中显示。

        word-spacing：单词间距。判断是否是单词主要依赖于文本间是否有空格。如果两个汉字间有空格，那么该属性也会生效；如果无空格，那么不会生效。如：

<h1 class="suo">中文测试 是否适用于中文</h1>

css样式为

.suo {            background-color: red;            text-align: right;            line-height: 156px;            word-spacing: 50px;          }

效果为：

        letter-spacing：字母间隔。一个单词中每一个字母之间的间隔，可直接作用于汉字。

        text-decoration：文字修饰。none：不对文字进行任何修饰，默认时a标签会有下划线，可以通过该属性将下划线除掉。underline：对文字加下划线。line-through：对文本添加删除线；overline：在文本顶部添加横线；blink：使文本闪烁(chrome上使用无效)。可以同时使用多个属性值，多个属性可同时生效。如

text-decoration: underline overline line-through;

        font-family：字体。直接输入字体的中文名称即可。字体的属性值有可能有多个，多个字体之间用逗号隔开；某个字体可能由多个单词组成，此时需要用""将该字体名括起来。多个字体的选择规则为：只有在电脑上找不到本字体的字体库时，才会使用本字体。

        font-style：字体风格。italic：倾斜。oblique：同italic。

        font-weight：加粗。normal：正常；bold：加粗。

        text-transform：文本转换，对中文无效。uppercase：全部转换为大写；lowercase：全部转换为小写；capitalize：只对每一个单词的首字母转换为大写，其余字母保持不变。

定位

        元素在显示的时候都占据一个框的位置(即一个矩形)。所谓的定位就是允许定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

position

        用于选择定位的类型。

        static：元素框正常生成。

        relative：相对定位，相对于元素的原本位置进行上下左右地移动，它原本所占的位置仍旧保留。

       absolute：绝对定位，相对于其祖先元素中离该元素最近，并且拥有定位的的元素的左上角进行定位。它就像空投下来的一个元素，并不占据父元素的位置。如果所有的祖先都没有position属性，那么相对于body标签进行定位。如：

body {margin:0px;padding:50px;}#test1 {width:600px;height:600px;background:pink;padding:50px 50px;position:relative;}#test2 {width:500px;height:500px;background:green;padding:50px 50px;}#test3 {width:400px;height:400px;background:black;padding:50px 50px;}span{width:200px;height:200px;display:block;background:red;position:absolute;top:30px;}

        其中test1包括test2，test2包含test3，test3包含一个span。其效果如下(外面一边白边，指的是body)：

        fixed：绝对定位，基本类同于absolute，但有两点重要区别：1，fixed永远只相对于body。2，使用fixed定位后，元素会随着屏幕的滚动而滚动。

z-index

        重叠元素的堆放顺序。只在设置了相对，绝对或固定(fixed)定位后才有效。值大的元素会覆盖在值小的元素的上方。可为负值。

列表

        list-style：设置列表项前面的显示内容。none：清除列表项前面的黑点或者1,2,3等

杂项

内外边距

        padding，margin分别表示内边距和外边距，同android中的padding与margin一样。

        padding如果连写四个数值，分别表示上，右，下，左。如果数值不够四个，那么数据仍旧按上右下左进行赋值，没有的就取其对边的值。如果只设置一个值，那么代表四个边框都是该值。

        元素的宽度并不包含padding，假设width为100px，padding-left为10px，那么它实际占据的宽度为110px。

        一个元素实际占据空间为：高＝实际高+paddingTop+paddingBottom+marginTop+marginBottom+上边框厚度+下边框厚度；宽类似。

        上下相临的普通元素，它们的上下边距并不是直接相加，而是取其中较大的值，这种现象叫做marin重叠。如上元素的margin-bottom为80px，下元素的margin-top为50px，那么两个元素的上下边距为80px，而不是80+50＝130px。但如果两个元素都是浮动的，那么上下边距就是相加。

边框

        border：边框样式。none指的不设置边框。可以以#rgb形式指定颜色，也可指定样式。dotted：以点的形式；double：两条实线的形式；dashed：一条虚线；solid：一条实线；也可以多个属性值连写在一起(通过空格分开即可)。如：

border:10px #ff0000 solid;

第一个指边框的厚度，第二个指边框的颜色，第三个指边框的样式。如果想分别设置三个厚度，颜色与样式，可以通过border-width，border-color与border-style进行操作。

        border-left：跟border一样，只不过该属性只作用于块级元素的左边框。同理还有border-right，border-top，border-bottom，它们跟border-left一样。

浮动

        在块级元素的排列中，每一个块级元素都独占一行。使用浮动时，可使当前的块级元素漂浮在未使用浮动的块级元素的上面，这样它所占的区域就会被别的块级元素能占有。浮动的元素不会在普通流中占据位置。

        float：使当前的元素浮动。left：漂浮在父元素的右边；right：漂浮在父元素的右边。使用了浮动的元素会组成新的排列顺序，它们会水平紧挨着排列，直接放不才换一行。因此，如果想要所有的div显示在一行，可以为所有的div设置成浮动。这就达到了为display设置成inline-block的效果。

        clear：设置当前元素是否占领使用了浮动的元素的位置。left：不占领左浮动的元素的位置；right：不占领右浮动的元素的位置；both：不占领使用了浮动的元素的位置。both：不占领使用了浮动的元素的位置。

        由于浮动元素不在普通流中占据位置，所以当某个父元素的所有子元素都浮动后，该父元素的高度会变成0，对父元素所设置的css样式都没有地方生效。比如，想实现文本图片水平排列，外面有一圈边框的布局，其css样式应该如下：

<style type="text/css">.news {backgroud-color:red;border:1px solid #00FF00;}.news img {float:left;}.news p {float:right;}.news .cleardiv {clear:both;}</style></head><body><div class="news"><img src="0.jpg" /><p>some texsome textsome</p><div class="cleardiv"/></div></body>

        这里最后用了一个div来清除img和p元素的浮动。这个是必需的。

        通常也可以将整个div元素进行浮动，但div的兄弟元素就会受到影响。为了避免这种情况，需要对它的兄弟元素都进行浮动。然后找一个合适的地方，用一个空白的元素清除所有的浮动，如上面的最后一个div。

技巧

        1，文字上下居中：将line-height与height设置成相同高度即可。

        2，块级元素水平居中于父级元素：margin-left与margin-right都设置为auto即可。