css 常用的文本样式、选择器、浮动和定位的基本使用

常用的文本样式

　　~ color 设置文字的颜色

　　　　　　color：red

　　~ font-size 设置文字的大小

　　　　　　font-size：12px

　　~ font-family 设置文字的字体

　　　　　　font-family：微软雅黑

　　~ font-style 设置字体是否倾斜

　　　　　　font-style：“normal”   不倾斜

　　　　　　font-style：“italic”       倾斜

　　~ font-weight 设置文字是否加租

　　　　　　font-weight：bold　　加粗

　　　　　　font-weight：normal    不加粗

　　~ line-height 设置文字的行高

　　　　　　line-height：30px

　　~ font 设置文字的几个属性，顺序如下：font：是否加粗，字号/ 行高 ，字体；

　　　　　　font：normal   12px / 24px   ‘微软雅黑’

　　~ text-indent 设置文字首行缩进

　　　　　　text-indent：24px；设置文字首行缩进24px

　　~ text-align 设置文字水平对齐方式

　　　　　　text-align：center 设置文字水平居中

 

选择器

　　id 选择器

　　　　id 选择器前面都有一个 # 号，通过id名来选择元素，元素的id名称不能重复。所以一个样式设置项只能对应于页面上一个元素，一个ID只能在文档中使用一次，id 名一般给程序使用，所以不推荐在css设置样式时使用id作为选择器

　　类选择器

　　　　必须将class指定为一个适当的值，类名前有一个点号（·），通过class类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用

　　属性选择器

　　　　通过元素的属性进行选择，选择带name属性的 a 标签

　　　　

 

 　　包含选择器（层级选择器）

　　　　主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，也可通过层级防止命名冲突

　　组选择器

　　　　多个选择器，每个选择器之间用逗号隔开，如果有同样的样式设置，可使用组选择器

　　　　

              

 

 　　

　浮动

　　浮动的框可以向左向右移动，直到它的边缘碰到包含框或另一个浮动框的边框为止

　　float 属性实现元素的浮动

　　img { float：right； }

　　

 

 

 　　

　设置背景颜色

　　　　background-color 设置背景颜色，这是属性接受任何合法的颜色值

　设置背景图像

　　　　background-image：把图像放入背景，属性的默认值是none，表示背景上没有放置任何图像，如果需要设置一个背景图像，必须为这个属性设置一个URL值

　　　　

 

 

　 背景图平铺

　　　　使用background-repeat 属性可进行背景图平铺

　　　　repeat：导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样

　　　　repeat-x：图像只在水平上重复

　　　　repeat-y：图像只在垂直方向上重复

　　　　no-repeat：不允许图像在任何方向上平铺

　　       

 

定位

　　相对定位

　　在使用相对定位时，无论是否移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框

　　如果将top 设置为20px，那么框架在原位置顶部下面20 px的地方。如果left 设置为30 px，那么会在元素左边创建30 px的空间，也就是将元素向右移动

　　

 

 　　绝对定位

　　 绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流的位置

　　 因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这么框的堆放次序