2-CSS样式学习笔记【适用于入门级别和进阶级别】.doc

CSS学习笔记【文档已保护，解除保护密码是(均为小写)：css】CSS样式剖析1. CSS简介：CSS- Cascading Style Sheets，层叠式样式表。该技术始于1996年，1998年5月，level2(水平) 成为了W3C 的新标准。CSS扩展了HTML的功能，CSS与HTML、脚本相结合，可以更加有效的实现对网页元素的布局、排版和显示效果的控制。 2. CSS特点： (1)标识语言，纯文本，可以使用各种文本编辑器编写； (Dreamweaver是首选) (2)CSS可以灵活的方式与HTML和脚本相结合；(3)易用性、高效率、一致性、可靠性、可维护性、可移植性；(3)CSS文件扩展名：css； (5)CSS文件亦需在Web浏览器上解释执行；（运行环境） (6)具有跨平台性。 3. CSS语法规则： （selector） 选择器(1)tag property:value;. /标签，属性：值 (2)tag.Classname property:value;./Class-selector，关联选择符 (3).Classmate property:value;./Class-selector，独立选择符 (4)tag#IDname property:value;./ID-selector，关联选择符 (5)#IDname property:value;./ID-selector，独立选择符 (6)归类规则： h1,pfont-family:黑体(7)继承规则： b标签设定的样式i标签内的元素将予以继承 (8)情景选择规则： 格式：情景标签 标识符属性：值；. 例： 带情景选择的样式表实例 p ifont-size:30pt;color:red 这是一个样式表实例 这是一个样式表实例 4. CSS与HTML结合方式：(1)内联： (2)嵌入： (3)链接外部样式表文件： (4)导入外部样式表文件： (5)外部样式表文件： 扩展名：.css 不能包含任何HTML标签 遵循CSS语法规则 5. CSS应用： (1) (2) (3) (4) (5)优先顺序： 内联样式最高； 其它，按层次处理。 l font 字体属性：font-family 1 font-family属性 font-family属性的应用效果将按照幼圆、隶书、宋体的顺序对字体进行设置 字体风格：font-style 字体风格通常指字型，主要有 正常，斜体，和偏斜体，分别对应值为normal,italic,oblique font-style属性 font-style属性的应用效果 这是normal风格 这是italic风格 这是oblique风格 字体变形：font-variant 字体变形具备如下属性：正常和小型大写字母两种，主要对英文字母有效果。对应值为normal,small-caps 字体加粗：font-weight 默认，粗体，特粗，细体和具体的值，分别对应参数值说明normal浏览器默认字体为7，字体粗细约为400bold粗体，字体粗细约为700bolder粗全再加粗，字体粗细约为900lighter比默认字体还细100900数字越小字体越细，数字越大字体越粗 font-variant属性 font-weight属性的应用效果 lighter normal bold bolder 字体粗细为100字体粗细为900 字号：font-size语法格式：font-size:|绝对尺寸举例： 使用绝对尺寸控制字号的大小 字号为5em 字号为5ex 字号为0.5in 字号为1cm 字号为10mm 字号为25pt 字号为25px 字号为2pc (2)关键字和相对尺寸举例： 使用关键字和相对尺寸控制字号大小 这是浏览器默认的字号 关键字为xx-small 关键字为x-small 关键字为small 关键字为medium 关键字为large 关键字为x-large 关键字为xx-large 相对尺寸为smaller 相对尺寸为larger (3)比例尺寸举例 使用比例尺寸控制字号大小 风格风格 文字的更改：text-transform 方便网页设计者控制字母的大小写。 文字的更改 uppercase:使所有字母大写显示 LOWERCASE：使所有字母小写显示 capitalize：词首字母大写 none：字母以正常形式显示 文字的修饰：text-decoration 格式：text-decoration:underline|overline|line-throungh|blink|none text-decoration属性 text-decoration属性的应用效果 此行文字加下划线 此行文字加顶线 此行文字加删除线 字体属性font：font： 字体风格|字体变形|字体加粗|字号/行高|字体 格式：font:font-family|font-style|font-variant|font-weight|font-size说明：字体属性主要用于不同字体属性的略写；可以同时设置多种属性；属性与属 性之间必须利用分号隔开。pfont:italic small-caps bold 22pt/54px 隶书,宋体l 控制图文布局 字距：letter-spacing word-spacing letter-spacing用于设置英文字母之间距离;word-spacing设置英文单词之间距离 word-spacing和letter-spacing属性 word-spacing和letter-spacing属性的应用效果 字母间距为4pt CSS的英文全称为Cascading Style Sheets 字母间距为正常 CSS的英文全称为Cascading Style Sheets 单词间距为10pt CSS的英文全称为Cascading Style Sheets 单词间距为正常 CSS的英文全称为Cascading Style Sheets 行距：line-height 数字行距：pfont-size:12pt;line-height:2;/12pt*2 单位行距：pline-height:9pt; 比例行距：pfont-size:10pt;line-height:140%;/10pt*140% 文本对齐格式：text-align：left|right|center|justify vertical-align：top|bottom|text-top|text-bottom|baseline|middle|sub|super说明：text-align属性用于文字水平对齐，但这个属性只用于整块内容，如：等;vertical-align属性用于控制文字或其它网页对象相对于母体对象的垂直位置。 vertical-align垂直对齐属性 vertical-align垂直对齐属性的应用 设置vertical-align属性显示结果 设置vertical-align属性显示结果 vertical-align:sub C+O2-CO2 vertical-align:super a2+b2 =c2 vertical-align:top vertical-align:text-top vertical-align:middle vertical-align:baseline vertical-align:bottom vertical-align:text-bottom 首行缩进text-indent:数字|百分比 text-indent属性 .indent1text-indent:30pt text-indent属性的应用效果 首行不缩进效果: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 首行缩进30pt: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa l 颜色及背景 颜色属性：color h1color:red h2color:#000080 背景颜色属性：background-color （默认为透明transparent） bodybackground-color:while h1background-color:#000080 背景图像属性：background-image 格式：background-image: url(图像文件名)|none(无) background-image属性 background-color属性的应用 春望 国破山河在，城春草木深。 感时花溅泪，恨别鸟惊心。 烽火连三月，家书抵万金。 白头搔更短，浑欲不胜簪。 背景图片重复属性：background-repeat 格式：background-repeat:repeat|repeat-x|repeat-y|no-repeat background-repeat属性 background-repeat属性设置背景图片横向重复 固定背景图片属性：background-attachment 格式：backfround-attachment:scroll|fixed background-attachment属性 background-attachment固定背景图片属性的应用 背景图片位置属性格式：background-position:|按百分比定位 格式：background-position:x% y% 按长度定位 格式：background-position:x y 按关键字定位 格式：background-position: top|center|bottom left|center|rightpbackground-position:70% 50%;repeat-y;url(.picsky.jpg) pbackground-position:70px 50px;url(.picsky.jpg) pbackground-position:right top;url(.picsky.jpg) background属性格式：background:背景颜色|背景图像|背景重复|背景附件|背景位置 bodybackground:#000080 url(tree.jpg) no-repeat bottom rightl 列表样式格式：list-style-type: disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none; list-style-image: url(图像文件名);list-style-position: inside|outside;list-style 属性：list-style: type值|image 值 |position 值 .itemlist-style:url(IMAGES/ITEM.GIF) insidel 美化网页与超链接的设置 网页链接属性anchor语法a:link尚未链接过的超链接文字的样式a:visited已链接过的超链接文字的样式a:active当鼠标单击超链后文字所显示的样式a:hover当鼠标拖动到超链上文字所显示的样式a在此属性内设置样式时，上述4种将同时引用此值 anchor属性 新浪网 网 易 雅 虎 光标属性：cursor 多变鼠标 鼠标显示效果 请把鼠标移动到下面文字上 手的形状 反方向 移动 求助 十字形 移动到文本上的那种效果 等待 向右箭头 向上箭头 向右上箭头 向左上箭头 向左箭头 向左下箭头 由系统自动给出效果 向右下箭头   滚动条属性：scrollbarscrollbar-3dlight-color:color说明：设置或检索滚动条亮边框颜色,对应的脚本特性为 scrollbar3dLightColor.div scrollbar-3dlight-color :threedhighlight; scrollbar-highlight-color:color说明：设置或检索滚动条3D界面的亮边(ThreedHighlight)颜色,对应的脚本特性为 scrollbarHighlightColor。div scrollbar-highlight-color :threedhighlight; scrollbar-face-color：color说明：设置或检索滚动条3D表面(ThreedFace)的颜色，对应的脚本特性为 scrollbarFaceColor。div scrollbar-face-color : threedface; scrollbar-arrow-color : color说明：设置或检索滚动条方向箭头的颜色。当滚动条出现但不可用时，此属性失效。对应的脚本特性为 scrollbarArrowColor。div scrollbar-arrow-color : buttontext; scrollbar-shadow-color：color说明：设置或检索滚动条3D界面的暗边(ThreedShadow)颜色。对应的脚本特性为 scrollbarShadowColor.div scrollbar-shadow-color :ThreedDarkShadow; scrollbar-darkshadow-color : color说明：设置或检索滚动条暗边框(ThreedDarkShadow)颜色。对应的脚本特性为 scrollbarDarkShadowColor.div scrollbar-darkshadow-color :threeddarkshadow; scrollbar-base-color : color说明：设置或检索滚动条基准颜色。其它界面颜色将据此自动调整。对应的脚本特性为 scrollbarBaseColor.div scrollbar-base-color : buttonface; scrollbar-track-color : color说明：设置或检索滚动条的拖动区域(TrackBar)颜色。对应的脚本特性为 scrollbarTrackColor.div scrollbar-track-color :ThreedDarkShadow; scrollbar属性 制作立体的滚动条效果 l DIV.span -图层标签：标签：用于定义网页上一个相对独立的区域（文本、图形、表格、媒体、窗体、等）。格式： . . . 图层：. -标签：和的区别：使上下文自动换行。格式： . . . 注：主要用于样式的应用。 l 边框、边界、填充样式 边框属性：border-width border-color border-style 格式： border-width:thin|medium|thick|数值 thin|medium|thick|数值. border-top-width:数值 border-bottom-width:数值 border-left-width:数值 border-right-width:数值 border-color:#rrggbb #rrggbb./*按顺时针分配*/ border-top-color:#rrggbb border-bottom-color:#rrggbb border-left-color:#rrggbb border-right-color:#rrggbb border-style:dotted|dashed|solid|double|groove|ridge|inset|outset border-top-style: border-bottom-style: border-left-style: border-right-style: border-style属性 设置边框线样式属性border-style 边框线样式为小点虚线 边框线样式为大点虚线 边框线样式为实线 边框线样式为双直线 边框线样式为3D凹线 边框线样式为3D凸线 边框线样式为3D框入线 边框线样式为3D隆起线 border属性：border:宽度|样式|颜色 bodyborder:12px solid red 边界属性：margin 格式：margin : auto | lengthmargin-top:宽度|百分比|auto margin-right:宽度|百分比|auto margin-bottom:宽度|百分比|auto margin-left:宽度|百分比|auto margin:宽度|百分比|auto 宽度|百分比|auto. margin属性 利用margin属性设置边界的值 花儿什么也没有。它们只有凋谢在风中的轻微、 凄楚而又无奈的吟怨，就像那受到了致命伤害的秋雁， 悲哀无助地发