《CSS视屏学习笔记.doc》由会员分享，可在线阅读，更多相关《CSS视屏学习笔记.doc（20页珍藏版）》请在金锄头文库上搜索。
1、CSS视屏学习笔记第一章 ：字体的相关设置前面的相关介绍请看另一本笔记。第一节 ：字体的颜色设置实例如下：1. h2Color：rgb（0%,0%80%）； 2. pColor：#333333；3. spanColor：red；效果如下：第二节 ：字体1. font-size：设置字体：2. Font-weight：定义粗细，blod和lighter3. Font-style：定义斜体italic为斜体，normal为正常的字体；4. Text-decoration：下滑线underline，顶划线overline，删除线线line-through，闪烁blink(只在fox浏览器中显示效果)
2、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%);. Googl
3、e第三节 ：段落对齐方式1. 文字对齐方式：vertical-align：top，bottom，center，及顶对齐，底对齐，居中对齐2. 首字放大：及和联合起来实现的效果图如下：代码及注释：文字字体spanfont-size:50px;font-weight:bold;color:blue;float:left;/* 首字下沉 */ 众人继续欣赏景色，发现温泉中云雾、五彩斑谰，原来温泉水中有种细菌，它们的颜色能随水温改变。常温时呈现黄褐色，温水中变成深红，热水则显碧绿，沸水中成为幽蓝。 第二章：图片的相关设置第一节 ：图片边框的设置文字字体.testborder-style:dotted;
4、/*设置边框形状*/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 gro
5、ove;border-top:10px #CC00FF solid;float:left;：图片的缩放Width：80px ;设置图片的宽度，Height:60px;设置图片的高度这里牙可以用百分比，不过显示时是浏览器的多少效果图：第二节 ：图片的对齐方式竖直对齐方式:baseline方式控制对齐方式的是 style=vertical-align:baseline;其值可以是：baseline，baseline，bottom，middle，sub，Super，text-bottom，text-top，top！第三节 ：图文混排主要是在图片的的css样式中添加了float：left；代码：文字字
6、体.testborder:4px red dotted;float:left;.test1font-size:50px;font-weight:blod;line-height:1.2em;/*设置文字行距*/float:left; 总是在我有是的时候找我，我真的很少衡器！效果图：第四节 ：诗画效果 效果图：文字竖排显示代码：writing-mode:tb-rl;竖排文字间隔代码：line-height:30px;第三章 ：CSS设置表格和表单样式第一节 ：表格的标记 表行列第一行标题这些标记都是成对的！第二节 ：表格交互的变色利用css实现奇数行添加类寄存器Tr.altrow backgro
7、und-color：#777；第三节 ：CSS与表单下拉框：红绿蓝黄青紫复选框看书上网留言框：按钮：value的值为显示的值像文字一样的输入效果：效果：Css代码：.textborder:0px white solid;border-bottom:1px gray solid;.submitbackground-color:transparent;border:0px;Body中的代码请输入您的姓名：第四节 ：实现表格直接输入将表格的每一个单元格中嵌套输入框，同时在通过css样式去掉输入框第四章 ：页面和浏览器元素第一节 ：动态链接的三个状态acolor:red; text-decoratio
8、n:none;第一次访问时字体为红色，没有下划线；a:hover/* 鼠标移到连接上的样式 */color:red;/* 深蓝 */text-decoration:none;/* 无下划线 */a:visited/* 访问过的超链接 */color:#000000;/* 黑色 */text-decoration:none;/* 无下划线 */（无法显示）a:link/* 超链接正常状态下的样式 */color:red;/* 深蓝 */text-decoration:none;/* 无下划线 */（同上）第二节 ：按钮式的超链接效果图：注意事项：在显示这种效果时一定要注意在开始时上边框和左边框颜
9、色一致，下边框和右边框颜色一致，当鼠标移到选项上时在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-co
