各种元素的属性(1)body元素background:定义body元素的背景图片bgcolor:定义body元素的背景颜色leftmargin:定义body元素与浏览器左边界的距离topmargin:定义body元素与浏览器上边界的距离class:链接级联样式style:直接定义级联样式(2)文本元素align:定义文本的水平对齐方式class:链接级联样式style:直接定义级联样式<pre>text</pre>:浏览器保持text文本的原有的格式输出(3)修饰元素hr元素align:控制对齐方式color:控制显示颜色size:控制分隔线的高度width:控制分隔线的宽度img元素scr:指定图片所在的路径alt:指定替代图片的文本width:定义图片的宽度height:定义图片的高度align:定义图片的对齐方式border:定义图片的边框(4)链接元素href:指定链接的路径target:指定链接的显示位置_blank:浏览器在新的窗口打开链接页面_self:在页面所在的窗口显示链接的页面(链接的默认值)_parent:在父窗口中打开链接页面_top:在本窗口中取代框架内容并打开链接页面(5)表单元素action:指定处理提交数据的的程序路径method:设置传送数据的方法id:用来标记表单class:使用级联样式控制表单的表现type:指定元素的类型size:指定表单的宽度border:指定表单的边框(5)表格元素table:用来定义一个表格tr:定义表格中的行元素td:定义表格中的单元格align:定义表格的水平对齐方式border:定义表格的边框bgcolor:定义表格的背景颜色background:定义表格的背景图片cellspacing:控制表格相邻单元格的间距cellpadding:单元格边缘和内容之间的距离valign:定义单元格中内容的垂直对齐方式width:定义表格或者单元格的宽度height:定义表格或者单元格的高度colspan:合并表格的列rowspan:合并表格的行CSS命名参考CSS样式表书写顺序显示属性(display list-style position float clear)自身属性(width height margin padding border background)文本属性(color font text-decoration text-align vertical-align white-space other content)应用样式的优先级最近最优先原则,是决定元素使用哪些属性的关键。
元素中直接使用的CSS > 页面头部调用的CSS > 链接形式调用的CSSID选择符> 类选择符> 类型选择符CSS基布局属性(1)定位属性(1)定位模式position: static | relative | absolute | fixed (不可继承)static:元素按照普通方式生成relative:元素将保持原来的大小偏移一定的距离absolute:元素将人页面元素中被告独立出来,使用边偏移进行定位fixed:元素将从页面元素中被独立出来,但其位置相对于屏幕本身,而不是文档的本身(2)边偏移top:定义元素相对于其父元素上边线的距离right:定义元素相对于父元素右边线的距离bottom:定义元素相对于父元素下边线的距离left:定义元素相对于父元素左边线的距离(3)层叠定位属性z-index:定义元素层叠的顺序(为没有单位的数字值)(2)页面的背景设定background: 背景颜色| 背景图像| 背景位置| 背景重复| 背景附件background-color:定义背景颜色background-image: url(图片路径):定义背景图片background-repeat: repeat | no-repeat | repeat-x | repeat-y:定义背景图片的重复性repeat:背景图片执照从左到右,从上到下的顺序进行排列no-repeat:背景图片不重复,没有定义位置时,默认出现在容器的左上角repeat-x:背景图片横向排列,没有定义位置时,在容器顶部从左和右重复排列repeat-y:背景图片纵向排列,没有定义位置时,在容器左侧从上向下重复排列background-position: 长度值| 百分比值| top | right |bottom | left | centertop:背景图片出现在容器的上边bottom:背景图片出现在容器的底边left:背景图片出现在容器的左边right:背景图片出现在容器的右边center:背景图片的横向和纵向居中background-attachment: scroll | fixed :定义图片的附件属性scroll:背景图像随内容滚动fixed:背景图像固定(3)控件内容显示属性display: block | none | inline | list-item | compact | marker | inline-table | run-in | table | table-caption | table-cell | table-column | table-column-group | table-footer-group |table-header-group | table-row | table-row-groupblock:定义元素为块对象inline:定义元素为内联对象list-item:定义元素为列表项目none:隐藏对象,同时元素所占有的空间也被清除visibility: visible | collapse | hiddenvisible:元素可见hidden:元素不可见collapse:隐藏表格中的行或列(4)浮动属性float: none | left | rightnone:元素不浮动left:元素浮动在左侧right:元素浮动在右侧(5)ul和li的样式(1)list-style属性list-style: list-style-type | list-style-image | list-style-position(2)list-style-type: disc | circle | square | decimal | lower-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latindisc:实心圆circle:空心圆square:实心方块decimal:阿拉伯数字lower-roman:小写罗马数字upper-roman:大写罗马数字lower-alpha:小写英文字母upper-alpha:大写英文字母none:不使用项目符号(3)list-style-position: outside | insideoutside:项目符号放置在文本以外inside:项目符号放置在方本以内(4)list-style-image: none | urlnone:没有替换的图片url:替换图片的路径(6)清除浮动clear: none | left | right | bothnone:允许两边都有浮动元素left:不允许左边有浮动元素right:不允许右边有浮动元素both:两边都不允许有浮动元素(7)补白属性padding: 长度值| 百分比值padding: padding-top padding-right padding-bottom padding-leftpadding-top:上侧补白属性padding-right:右侧补白属性padding-bottom:下侧补白属性padding-left:左侧补白属性(8)边框属性(1)边框的综合定义border: border-style border-width border-color(2)单侧边框的综合定义border-top: border-style border-width border-colorborder-right: border-style border-width border-colorborder-bottom: border-style border-width border-colorborder-left: border-style border-width border-color(3)边框样式border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outsetn one:没有边框即忽略所有边框的宽度h idden:隐藏边框d otted:点线d ashed:虚线s olid:实线d ouble:双线g roove:3D凹槽r idge:菱形边框i nset:3D凹边o utset:3D凸边(4)边框宽度border-width: medium | thin | thick | 长度值m edium:默认值t hin:比默认值细t hick:比默认值粗长度值:可以使用所有长度值border-width: border-top-width border-right-width border-bottom-width border-left-width(5)边框颜色border-color: border-top-color border-right-color border-bottom-color border-left-color (6)表格边框属性border-collapse: separate | collapses eparate:HTML默认设置,边框分开c ollapse:边框合并(9)边界属性margin: auto | 长度值| 百分比值margin: margin-top margin-right margin-bottom margin-left(10)固定大小overflow: visible | auto | hidden | scrollvisible:不剪切内容也不产生滚条auto:在需要时产生滚条hidden:不显示超出的内容部分scroll:总是显示滚条(11)文本的缩进和对齐text-indent: 长度值| 百分比值:控制段首缩进first-letter{属性:值}:控制段首字符下沉与大写text-align: left | center | right | justify :控制水平对齐方式vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | length :控制竖直对齐方式(12)行高与间隔line-height: normal | 长度值| 百分比值| 数字值:控制文本行与行之间的距离letter-spacing: normal | 长度值:控制中文文字之间的间距word-spacing: normal | 长度值:控制字母之间的间距white-spacing: normal | pre | nowrap :控制页面中空白的显示方式normal:默认值,忽略多余的空白pre:不忽略多余的空白nowrap:文本保持同一行显示,直到文本结束或者遇到br元素(13)文本的转换text-transform: none | uppercase | lowercase | capitalizenone:文本不进行大小写的转换uppercase:转换成大写lowercase:转换成小写capitalize:文本中每个单词的第一个字母大写(14)字体的综合属性font: 字体选择| 字体大小| 字体加粗| 字体变形| 行高font-family: 字体名称:字体的选择属性font-size: small | medium | large | smaller | larger | 长度值| 百分比值:字体的大小属性font-weight: normal | bold | bolder | lighter :字体的加粗属性font-style: normal | italic | oblique :字体样式属性font-variant: normal | small-caps :字体的变形属性normal:默认值字体不变形small-caps:使用小型大写字母text-decoration: none | underline | overline | line-through | blink :文本的修饰属性none:没有任何修饰underline:给文本增加下划线overline:给文本增加上划线line-through:给文本增加删除线blink:添加闪烁效果:link,:visited,:hover,:active :链接样式的顺序(没有访问过,内容访问后,鼠标悬停状态,内容被激活)cursor: auto | crosshair | default | hand | move | wait | text | w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize | pointer | url(url)auto:默认值,显示效果由用户所在的环境而定crosshair:鼠标显示为“十”字的形状default:鼠标显示为“箭头”的形状hand:鼠标显示为“手”的形状move:鼠标显示为有4个方向的“十字箭头”形状text:鼠标显示如大写“I”的形状。