CSS视屏学习笔记.doc

CSS视屏学习笔记第1章 ：字体的相关设置前面的相关介绍请看另一本笔记。第1节 ：字体的颜色设置实例如下：1. h2Color：rgb（0%,0%80%）； 2. pColor：#333333；3. spanColor：red；效果如下：第2节 ：字体1. font-size：设置字体：2. Font-weight：定义粗细，blod和lighter3. Font-style：定义斜体italic为斜体，normal为正常的字体；4. Text-decoration：下滑线underline，顶划线overline，删除线线line-through，闪烁blink(只在fox浏览器中显示效果)5. Text-tansform：单词小写，capitalize首字母大写，lowercase全部小写，uppercase全部大写。摸拟google标记：代码：文字字体pfont-size:60px;font-weight:bold;letter-spacing:-13px;/*设置字体的间距*/font-style:italic;/*斜体*/.span1color:rgb(0%,10%,80%);.span2color:red;.span3color:yellow;.span4color:rgb(0%,10%,80%);.span5color:rgb(0%,500%,10%);. Google第3节 ：段落对齐方式1. 文字对齐方式：vertical-align：top，bottom，center，及顶对齐，底对齐，居中对齐2. 首字放大：及和联合起来实现的效果图如下：代码及注释：文字字体spanfont-size:50px;font-weight:bold;color:blue;float:left;/* 首字下沉 */ 众人继续欣赏景色，发现温泉中云雾、五彩斑谰，原来温泉水中有种细菌，它们的颜色能随水温改变。常温时呈现黄褐色，温水中变成深红，热水则显碧绿，沸水中成为幽蓝。 第二章：图片的相关设置第1节 ：图片边框的设置文字字体.testborder-style:dotted;/*设置边框形状*/border-color:red;/*设置边框颜色*/border-width:4px;/*设置边框宽度*/*Border:4px red dotted;*/*可以用border-left/right/top/bottom设置一条边得边框*/ 效果图：实例2效果图：代码：.testborder-left-color:red;/*对左边框颜色的设置*/border-left-width:10px;border-left-style:solid;border-right:10px blue solid;/*对右边框的设置*/border-bottom:10px gray groove;border-top:10px #CC00FF solid;float:left;：图片的缩放Width：80px ;设置图片的宽度，Height:60px;设置图片的高度这里牙可以用百分比，不过显示时是浏览器的多少效果图：第2节 ：图片的对齐方式竖直对齐方式:baseline方式控制对齐方式的是 style=vertical-align:baseline;其值可以是：baseline，baseline，bottom，middle，sub，Super，text-bottom，text-top，top！第3节 ：图文混排主要是在图片的的css样式中添加了float：left；代码：文字字体.testborder:4px red dotted;float:left;.test1font-size:50px;font-weight:blod;line-height:1.2em;/*设置文字行距*/float:left; 总是在我有是的时候找我，我真的很少衡器！效果图：第4节 ：诗画效果 效果图：文字竖排显示代码：writing-mode:tb-rl;竖排文字间隔代码：line-height:30px;第3章 ：CSS设置表格和表单样式第1节 ：表格的标记 表行列第一行标题这些标记都是成对的！第2节 ：表格交互的变色利用css实现奇数行添加类寄存器Tr.altrow background-color：#777；第3节 ：CSS与表单下拉框：红绿蓝黄青紫复选框看书上网留言框：按钮：value的值为显示的值像文字一样的输入效果：效果：Css代码：.textborder:0px white solid;border-bottom:1px gray solid;.submitbackground-color:transparent;border:0px;Body中的代码请输入您的姓名：第4节 ：实现表格直接输入将表格的每一个单元格中嵌套输入框，同时在通过css样式去掉输入框第4章 ：页面和浏览器元素第1节 ：动态链接的三个状态acolor:red; text-decoration:none;第一次访问时字体为红色，没有下划线；a:hover/* 鼠标移到连接上的样式 */color:red;/* 深蓝 */text-decoration:none;/* 无下划线 */a:visited/* 访问过的超链接 */color:#000000;/* 黑色 */text-decoration:none;/* 无下划线 */（无法显示）a:link/* 超链接正常状态下的样式 */color:red;/* 深蓝 */text-decoration:none;/* 无下划线 */（同上）第2节 ：按钮式的超链接效果图：注意事项：在显示这种效果时一定要注意在开始时上边框和左边框颜色一致，下边框和右边框颜色一致，当鼠标移到选项上时在css中的设置是原来的两组颜色对调；代码：acolor:red;/* 深蓝 */text-decoration:none;padding:4px 10px 4px 10px;border-top: 1px solid #EEEEEE;/* 边框实现阴影效果 */border-left: 1px solid #EEEEEE;border-bottom: 1px solid #717171;border-right: 1px solid #717171;background-color:#ecd8db;a:hover/* 鼠标经过时的超链接 */color:#821818;/* 改变文字颜色 */padding:5px 8px 3px 12px;/* 改变文字位置 */background-color:#e2c4c9;/* 改变背景色 */border-top: 1px solid #717171;/* 边框变换，实现“按下去”的效果 */border-left: 1px solid #717171;border-bottom: 1px solid #EEEEEE;border-right: 1px solid #EEEEEE;第3节 ：浮雕式按钮：与背景图片结合使用第4节 ：鼠标的变动 用css样式将你要设置的按钮的鼠标的样式进行简单的设置：列a.help:hovercursor:help;显示效果是在鼠标移到选项上时显示一个小问号在鼠标边上！滚动跳的设置（仅仅适合IE浏览器）效果图：设置滚动条的代码：.largetext /* 文本框滚动条 */scrollbar-3dlight-color: #B0C4DE;/* 左边和上边的颜色 */scrollbar-arrow-color:#FFFFFF;/* 小三角形按钮的颜色 */scrollbar-base-color: #8BA9CF;/* 基本底色*/scrollbar-darkshadow-color: #436DA3;/* 右边和下边的颜色 */scrollbar-face-color: #34547E;/*滚动条显示的颜色*/scrollbar-highlight-color: #E6ECF4;/*滑动按钮下底部的颜色*/scrollbar-shadow-color:#000000;/* 右边和下边倒影的颜色 */有滚动条的文本框第4章 ：制作菜单第1节 ：项目列表dsdfsdUl表示的是无符号的列表，但是在css中可以该表符号ullist-style-type：decinal显示为十进制图片作为项目符号：ullist-style-image：url（1.jpg）；此方法在ie和fi中显示不是一样的。菜单的横竖转换：在css中lifloat：left；效果图：代码：首页公司简介产品介绍相关链接在线咨询员工专场首页公司简介产品介绍相关链接在线咨询员工专场首页公司简介产品介绍相关链接在线咨询员工专场Css样式：bodybackground:#777;#div1position:absolute;width:200px;height:300px;left:100px;top:50px;border:1 yellow dotted;#div1 ullist-style-type:circle;#div1 ul limargin:10px 0px 0px 0px;padding:5px 5px 5px 10px;border:1px red solid;width:130px;#div2width:200px;height:300px;left:350px;top:50px;position:absolute;border:1 yellow dotted;#div2 ullist-style-image:url(1.jpg);#div2 ul limargin:10px 0px 0px 0px;padding:5px 5px 5px 10px;border:1px red solid;width:130px;#div3width:200px;height:300px;left:600px;top:50px;position:absolute;border:1 yellow dotted;#div3 ullist-style-type:none;#div3 atext-decor