学习CSS时的个人笔记.doc

各种元素的属性（1）body元素background：定义body元素的背景图片bgcolor：定义body元素的背景颜色leftmargin：定义body元素与浏览器左边界的距离topmargin：定义body元素与浏览器上边界的距离class：链接级联样式style：直接定义级联样式（2）文本元素align：定义文本的水平对齐方式class：链接级联样式style：直接定义级联样式text：浏览器保持text文本的原有的格式输出（3）修饰元素hr元素l align：控制对齐方式l color：控制显示颜色l size：控制分隔线的高度l width：控制分隔线的宽度img元素l scr：指定图片所在的路径l alt：指定替代图片的文本l width：定义图片的宽度l height：定义图片的高度l align：定义图片的对齐方式l border：定义图片的边框（4）链接元素href：指定链接的路径target：指定链接的显示位置l _blank：浏览器在新的窗口打开链接页面l _self：在页面所在的窗口显示链接的页面（链接的默认值）l _parent：在父窗口中打开链接页面l _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命名参考结 构名 称主导航mainnav子导航subnav页 脚footer内 容content头 部header底 部footer商 标label标 题title顶导航topnav侧 栏sidebar左侧栏leftsidebar右侧栏rightsidebar标 志logo标 语banner子菜单submenu注 释note容 器container搜 索search登 录loginCSS样式表书写顺序显示属性（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：定义背景图片的重复性l repeat：背景图片执照从左到右，从上到下的顺序进行排列l no-repeat：背景图片不重复，没有定义位置时，默认出现在容器的左上角l repeat-x：背景图片横向排列，没有定义位置时，在容器顶部从左和右重复排列l repeat-y：背景图片纵向排列，没有定义位置时，在容器左侧从上向下重复排列background-position: 长度值 | 百分比值 | top | right |bottom | left | centerl top：背景图片出现在容器的上边l bottom：背景图片出现在容器的底边l left：背景图片出现在容器的左边l right：背景图片出现在容器的右边l center：背景图片的横向和纵向居中background-attachment: scroll | fixed ：定义图片的附件属性l scroll：背景图像随内容滚动l 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-groupl block：定义元素为块对象l inline：定义元素为内联对象l list-item：定义元素为列表项目l none：隐藏对象，同时元素所占有的空间也被清除visibility: visible | collapse | hiddenl visible：元素可见l hidden：元素不可见l collapse：隐藏表格中的行或列（4）浮动属性float: none | left | rightl none：元素不浮动l left：元素浮动在左侧l 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-latinl disc：实心圆l circle：空心圆l square：实心方块l decimal：阿拉伯数字l lower-roman：小写罗马数字l upper-roman：大写罗马数字l lower-alpha：小写英文字母l upper-alpha：大写英文字母l none：不使用项目符号(3)list-style-position: outside | insidel outside：项目符号放置在文本以外l inside：项目符号放置在方本以内(4)list-style-image: none | urll none：没有替换的图片l url：替换图片的路径（6）清除浮动clear: none | left | right | bothl none：允许两边都有浮动元素l left：不允许左边有浮动元素l right：不允许右边有浮动元素l 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 | outsetl none：没有边框即忽略所有边框的宽度l hidden：隐藏边框l dotted：点线l dashed：虚线l solid：实线l double：双线l groove：3D凹槽l ridge：菱形边框l inset：3D凹边l outset：3D凸边（4）边框宽度border-width: medium | thin | thick | 长度值l medium：默认值l thin：比默认值细l thick：比默认值粗l 长度值：可以使用所有长度值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 | collapsel separate：HTML默认设置，边框分开l collapse：边框合并（9）边界属性margin: auto | 长度值 | 百分比值margin: margin-top margin-right margin-bottom margin-left（10）固定大小overflow: visible | auto | hidden | scrolll visible：不剪切内容也不产生滚条l auto：在需要时产生滚条l hidden：不显示超出的内容部分l 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 ：控制页面中空白的显示方式l normal：默认值，忽略多余的空白l pre：不忽略多余的空白l nowrap：文本保持同一行显示，直到文本结束或者遇到br元素（13）文本的转换text-transform: none | uppercase | lowercase | capitalizel none：文本不进行大小写的转换l uppercase：转换成大写l lowercase：转换成小写l capitalize：文本中每个单词的第一个字母大写（14）字体的综合属性font: 字体选择 | 字体大小 | 字体加粗 | 字体变形 | 行高font-family: 字体名称 ：字体的选择属性font-size: small | medium | large | smaller | larger | 长度值 | 百分比值 ：字体的大小属性font-weight: normal | bold | bolder | lighter ：字体的加粗属性font-style: normal | italic | oblique ：字体样式