CSS基本知识点

基本样式以及使用：

Css单位：

1、元素定位的属性值：

1. Position：一个比较基础的属性。

用法：XML元素名{position:[absolute | relative | static ]}

Absolute：在一段文字中定义一个全新的容器，当XML元素的position值定义为absolute时，百偶是整个xml包含的部分将作为一个矩形容器来看待。该矩形容器独立于原始位置，一额度利于其他窗口。

Relative：该属性修饰的元素相对于文档中的原始位置而进行的偏移量。采用相对定位的元素本身就为其子元素提供定位的依据。它将按照xml文档中的定义的顺序跟在前面的元素后面，依次向下排。

Static：position的默认值，一个采用这种方式定位的元素不能被定为或二次定为，也不能为其子元素提供定位的一句。他将按照xml文档中定义的顺序，跟在前面的元素后面，依次向下排。

1. Top、left、width、heigh

用法：XML元素{属性:属性值}

属性值形式：数值、百分比、自动。Top、left表示该元素所在位置的左上角的坐标位置。如果此时position是absolute，则表示此坐标的位置是以浏览器窗口好额上一级元素的左上角为原点的。如果为relative，则表示以原始位置的左上角的原点来定义自己的位置，如果为static，则二者均不起作用。Width与height表示元素的宽度与高度。

2、长度值

1） 绝对长度单位：pc(pica) 12point pt(point) 1/72inch mm(millimeter)

cm(centimeter) in(inch)

2） 相对长度单位：px(pixe1) 代表屏幕上的一点 ex 表示字体中字母x的高度

em 表示字体的高度的单位

3） 百分比长度单位：一个比较特殊的单位，百分比的值是相应属性占该元素的元素的百分率。

3、颜色值

1）十六进制：#336699（格式） r-g-b

2） RGB：RGB的每个数值术语（0，255）

3） 颜色名称：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red ,silver, teal, white, yellow

4、URL值：background-image list-style-image list-style

 

文本显示的方式：就是在XML文档中该文本是否显示，如果显示，则以什么样式显示。

语法：XML元素{display:属性值}

属性值：

1. block：表示文本在页面中定义一个矩形区域，以块的形式显示出来。块的大小以来与文本中字符的数量与大小。其位置默认是左对齐。
2. line：表示文本在页面中以行的形式显示。以他作为属性值的元素字啊前后不会出现换行，只会在当前的行内加入新的内容和延伸，如果当前行显示不下，则会软断行到下一行显示。
3. list-item：表示文本在页面中以列表的形式显示出来。他和block显示的方式差不多，只不过文本的前面出现一个项目符号。列表的项目符号的默认外观是disc（实心圆）。用来设置项目符号属性是list-style-type。值：
   disc（实心圆）circle（空心圆）square（方块）decimal（十进制数）lower-roman(小写罗马数字) upper-roman（大写罗马数字）lower-alpha（小写英文字母）upperalpha（大写英文字母）
4. none 表述文本在页面中什么也不显示

标记名称#ID

 

字体显示方式：

1. font-family 用来设置一种字体的类型。实际上就是字体的名称。如果字体中有空格，则属性值需要用双引号括起来。
2. font-style：用来设置字体的风格。Normal、italic、oblique（另一种斜体形式）
3. font-variant：用来是指将正常文字缩小一半后大写显示。属性值：normal、small-caps
4. font-weight：用来设置字体的对比度和亮度。Normal、bold、bolder、lighter、100、200、300、……、900.其中900是最粗的字。
5. font-size：设置字体的代销。单位：pt(磅)。
6. font

注意：如果子标记不指定文本的字体，则会继承副标记的字体属性以及属性值。

 

文本控制：

1）text-align left right center justify（由左及右对齐）

2）text-indent 主要用来定义该元素的第一行的文本缩进量，单位px或pt。主要用于块级元素

3）text-transform：主要用来控制字母的大小写转换。属性值：uppercase、lowercase、capitalize、none

4）text-decoration 主要用来设置一些相关的特性，增加一些有趣的修饰。属性值：none、underline、overline、line-through、blink(闪烁)

5）vertical-align 主要用来设置文本的垂直对齐方式。属性值：baseline、sub、super、top、text-top、Middle、bottom、text-bottom。语法：XML元素{vertical:关键字、百分比}或者XML元素{vertical-align:关键字、百分比}

6）line-height：用来设定文本之间的行距。语法：XML元素{ line-height:数值 }

7）letter-spacing 控制字符之间的间隔。语法：XML元素{ letter-spacing:数值 }

 

边框方式：

1. border-style：设定文本使之具有文本框。属性：none、dotted（虚线）、dash（短线组成的虚线）、solid、double、groove（3D沟槽状边框）、ridge(3D脊状边框)、insert（3D内嵌边框）、outset（3D外嵌边框）
2. border-top-with：语法：XML元素{ border-top-with:数值 }
3. border-right-with：语法：XML元素{ border-right-with:数值 }
4. border-left-with：语法：XML元素{ border-left-with:数值 }
5. border-bottom-with：语法：XML元素{ border-bottom-with:数值 }
6. border-right：语法：XML元素{ border-right:数值 }
7. border-bottom：语法：XML元素{ border-bottom:数值 }
8. border-left：语法：XML元素{ border-left:数值 }
9. border-color：设定边框的颜色。语法：XML元素{ border-color:颜色 }，颜色可设置一个、两个（上下、左右）、四个

 

边缘样式：单位是像素

1. margin-top：语法：XML元素{ margin-top:数值 }
2. margin-right：语法：XML元素{ margin-right:数值 }
3. margin-bottom：语法：XML元素{ margin-bottom:数值 }
4. margin-left：语法：XML元素{ margin-left :数值 }

 

颜色好而背景样式：

1. 前景色：color
2. 背景色：

• Background-color：关键字：transparent（透明）或者颜色值
• Background-image：语法：XML元素{ Background-image :URL("index.gif") }
• Background-repeat：主要用来设置显示图片的大小小于提供背景的范围时候，该图片是怎样覆盖背景。关键字：repeat、repeat-x、repeat-y、no-repeat。
• Background-attachment：用来决定背景图像是否虽文本一起滚动。关键字：scroll、fixed。
• Background-position：用来确定北京图像相对于前景内容的位置。语法：XML元素{ Background-position:数值 | 百分比 | 关键字 }。关键字：top、bottom、center、left、right

 

设置鼠标：

语法：XML元素{ cursor :关键字 }。关键字：auto、help、wait、text、hand、move、default、ne-resize、nw-resize

 

层叠方式：语法：XML元素{ z-index 整数 或者 auto }整数值越大，越接近顶层。越小，越接近底层。