css学习笔记（基础篇）

@CHARSET "UTF-8";.fontStyle{/* 字体声明的顺序 *//*font : font-style || font-variant || font-weight || font-size || line-height || font-family*/font-style: italic; /*该属性有：normal:正常，italic:斜体，*//*font-variant:small-caps;/*该属性有：normal:正常，small-caps:小型的大写字母字体，*/font-weight:bold; /*该属性有：normal:正常，bold:粗体，bolder:更粗，lighter:细体；或者用100-900之间的百位数表示*/font-size: x-large;/*该属性有：absolute-size:根据对象字体进行调节。xx-small,x-small,small,medium,large,x-large,xx-large*//*该属性有：relative-size:相对于父对像中字体尺寸进行相对调节，larger，smaller。*//*该属性有：number:百分数|浮点数字标识，前者相对父对象，后者则是自身大小；数字不可为负数*/ line-height: 110%; /*该属性有：normal:默认，length:百分数|浮点数字，允许为负数，其百分比取值是基于字体的高度尺寸*//*该属性用于检索或设置对象的行高，如行内包含多个对象，则应用最大行高。此时行高不可为负值。*//*该属性：-10%相当于110%*/ font-family:"宋体"; /*该属性标识显示文本的字体类型：name来表示*/ text-decoration: line-through; /*该属性设置对象中的文本装饰：none，underline:下划线，blink:闪烁，overline:上划线，line-through:贯穿线*//*该属性中的blink对于IE无效，其余属性兼容*/ text-transform: capitalize;/*该属性用于设置对象中的文本的大小写,captitalize:每个单词的首字母大写，uppercase:全大写，lowercase:全小写*//*text-transform: capitalize和font-variant：small-caps会冲突，显示的结果为全部大写，但首字母的大小要大一点，所以最好不要同时定义两者*/ /*letter-spacing: 10px;/*该属性用于设置对象中的文字之间的间隔*/ word-spacing: 10; /*该属性用于设置对象中的单词之间插入的空格数*/ /*该声明方式参数必须按照如上的排列顺序。每个参数仅允许有一个值。忽略的将使用其参数对应的独立属性的默认值。*//*font:caption; /*使用有标题的系统控件的文本字体*//*font:icon; /*使用图标标签的字体*//*font:menu; /*使用菜单的字体*//*font:message-box; /*使用信息对话框的文本字体*//*font:small-caption; /*使用小控件的字体*//*font:bar; /*使用窗口状态栏的字体*/}.textStyle{/*text-indent: -10px;/*该属性用于设置对象中的文本的缩进:length:百分数|浮点数字，允许为负数，*/ /*当为正数时，向内缩进，为负数时则向外突出，*/ text-align: justify;/*该属性用于设置对象中文本的对齐方式:left：左对齐，right:右对齐，center:居中，justify:两端对齐*/white-space: nowrap;/*该属性用于设置对象内空格的处理方式:normal:默认方式，pre:用等宽字体显示文本，nowrap：强制在同一行内显示所有文本。*/}.textStyle img{vertical-align: top;/*该属性用于设置对象内容的垂直对其方式*//*该属性注意作用于内联元素和单元格元素（inline-level and 'table-cell' elements ） *//* 该属性有：top : 将支持valign特性的对象的内容与对象顶端对齐，middle : 将支持valign特性的对象的内容与对象中部对齐，bottom : 　将支持valign特性的对象的文本与对象底端对齐，sub : 　垂直对齐文本的下标，super : 　垂直对齐文本的上标 */}.backgroundStyle{ /* background声明的顺序 */ /*background : background-color || background-image || background-repeat || background-attachment || background-position */ background-color: transparent; /*该属性用于设置对象的背景颜色,transparent:背景透明，color：颜色名称|颜色的数字表示*/ background-image: url("../images/002.gif"); /*该属性用于设置对象的背景图像,使用绝对或相对地址指定背景图像*/ background-repeat: no-repeat; /*该属性用于设置对象的背景图像是否及如何铺排:repeat:在纵向和横向上平铺,no-repeat:不平铺*//*repeat-x : 　背景图像在横向上平铺,repeat-y : 　背景图像在纵向平铺 */ background-attachment: scroll;/*该属性用于设置对象的背景图像是随对象内容滚动还是固定的*//*scroll : 背景图像随对象内容滚动,fixed : 背景图像固定 */ background-position: center top;/*该属性用于设置或检索对象的背景图像位置。必须先指定 background-image 属性。*//*该属性的表示方式有：length|length,position|position两种方式，即分别表示x轴，y轴上的位置*//*length值的可以是百分数和浮点数字，而position有：top | center | bottom | left | center | right*/ }.positionStyle{position: absolute;/*检索对象的定位方式,static:无特殊定位，遵循HTML定位规则；*//*absolute:对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位,其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框*//*relative:对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置*/ left:10px; /*x轴上的距离，只有在设置position为absolute或relative时才有效*/top:20px; /*y轴上的距离，只有在设置position为absolute或relative时才有效*//*right:20px; /*-x轴上的距离，只有在设置position为absolute或relative时才有效*//*bottom:30px; /*-y轴上的距离，只有在设置position为absolute或relative时才有效*/z-index: 10;/*检索或设置对象的层叠顺序:auto|number:无单位的整数值。可为负数*/}.dimensionStyle{width: 100px; /*设置对象宽度：auto，无特殊定位，根据HTML定位规则载文档流中分配， length :由浮点数字和单位标识符组成的长度值，或者百分数。百分数是基于父对象的宽度。不可为负数*/ height: 200px;/*设置对象高度：auto，无特殊定位，根据HTML定位规则载文档流中分配，length :由浮点数字和单位标识符组成的长度值，或者百分数。百分数是基于父对象的宽度。不可为负数*/}.parent{}.son1{clear: none;/*该属性的值指出了不允许有浮动对象的边:none:两边都可以有;both:不允许有;left:左边不能有;right:右边不能有*//*该属性控制的以自己为中心，相对而言的其他对象位于自己的左边，右边，或者两边，该属性关联float*/clip:rect(10px,auto,auto,20px); /*检索或设置对象的可视区域。区域外的部分是透明的:auto:不剪切，rect(依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值)*//*此属性定义了绝对(absolute)定位对象可视区域的尺寸。必须将 position 属性的值设为 absolute ，此属性方可使用*/visibility:hidden;/*设置或检索是否显示对象:visible:可见;hidden：隐藏,与 display 属性不同，此属性为隐藏的对象保留其占据的物理空间。*/}.son2{/* border声明的顺序 *//*border : border-width || border-style || border-color */border-width:medium;/*该属性用于设置变框宽度：medium:默认;thin:小于默认;thick:大于默认|length : 　由浮点数字和单位标识符组成的长度值。不可为负值*//*按上－右－下－左的顺序作用于四个边框,..*/border-style:ridge;/*该属性用于设置变框类型：none：无边框;hidden:隐藏边框;dotted:点线;dashed:虚线;solid:实线;double:双线*//*groove : 　根据border-color的值画3D凹槽 ;ridge : 　根据border-color的值画菱形边框;*//*inset : 　根据border-color的值画3D凹边 ;outset : 　根据border-color的值画3D凸边 *//*按上－右－下－左的顺序作用于四个边框,..。border-width不大于0，本属性将失去作用。*/border-color:#ff0000;/*该属性用于设置变框颜色：*//*按上－右－下－左的顺序作用于四个边框,..。border-width等于0或border-style为none，本属性将失去作用。*/ /*border:1px solid #ff0000;*/float:right; /*属性的值指出了对象是否及如何浮动:none:不浮动;left:浮在左边;right:浮在右边*//*该属性关联clear*/overflow:hidden;/*检索或设置当对象的内容超过其指定高度及宽度时如何管理内容*//*其取值分别为，visible :　 默认值。不剪切内容也不添加滚动条。假如显式声明此默认值，对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效 *//*auto: 在必需时对象内容才会被裁切或显示滚动条,hidden:不显示超过对象尺寸的内容,scroll:总是显示滚动条 */display:block;/*设置或检索对象是否及如何显示:none:不显示;block:显示*/margin: 20px; /*检索或设置对象四边的外延边距:将按上－右－下－左的顺序作用于四边。默认值为 0 0*//*如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。*//*内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute*//*注意：在IE4.0+中此属性不支持用于 td 和 th 对象*/ padding:5px; /*检索或设置对象四边的内补丁,对于 td 和 th 对象而言默认值为 1 。其他对象的默认值为 0 。*/ /*其余类似margin的特点，不在赘叙*/}.listsStyle{/*设置列表项目相关内容，主要应用于ol，ul，li标记上*//*list-style的声明顺序*//*list-style : list-style-image || list-style-position || list-style-type */list-style-image: url("../images/address.png");}.listStyle li{/*list-style-image: url("../images/address.png");*/list-style-position: inside;/*设置或检索作为对象的列表项标记如何根据文本排列*//*outside:默认值，列表项目标记放置在文本以外，且环绕文本不根据标记对齐*//*inside:列表项目标记放置在文本以内，且环绕文本根据标记对齐*/ list-style-type: circle; /*设置或检索对象的列表项所使用的预设标记*/ /*type的类型有：disc:默认值，实心圆;circle:空心圆;square:实心方块;decimal:阿拉伯数字*/ /*lower-roman:小写罗马数字;upper-roman:大写罗马数字;lower-alpha:小写英文字母;upper-alpha:大写英文字母;none:不使用项目符号*/ /*list-style-image 属性值为 none 或指定 url 地址的图片不能被显示时，此属性将发生作用。*/}