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- /*该属性有：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 :由浮点数字和单位标识符组成的长度值，或者百分数。百分数是基于父对象的宽度。不可为负数*/ /*设置对象高度：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 地址的图片不能被显示时，此属性将发生作用。*/ }