CSS视屏学习笔记.docx
《CSS视屏学习笔记.docx》由会员分享，可在线阅读，更多相关《CSS视屏学习笔记.docx（18页珍藏版）》请在冰豆网上搜索。
CSS视屏学习笔记
CSS视屏学习笔记
第1章：
字体的相关设置
前面的相关介绍请看另一本笔记。
第1节：
字体的颜色设置
实例如下：
1.h2{
Color：
rgb（0%,0%80%）；
--括号里分别表示红色分量，绿色，和蓝色>
}
2.p{
Color：
#333333；
--十六进制表示>
}
3.span{
Color：
red；
}
效果如下：
第2节：
字体
1.font-size：
设置字体：
2.Font-weight：
定义粗细，blod和lighter
3.Font-style：
定义斜体italic为斜体，normal为正常的字体；
4.Text-decoration：
下滑线underline，顶划线overline，删除线线line-through，闪烁blink（只在fox浏览器中显示效果）
5.Text-tansform：
单词小写，capitalize首字母大写，lowercase全部小写，uppercase全部大写。
摸拟google标记：
代码：
文字字体
p{
font-size:
60px;
font-weight:
bold;
letter-spacing:
-13px;/*设置字体的间距*/
font-style:
italic;/*斜体*/
}
.span1{
color:
rgb（0%,10%,80%）;
}
.span2{
color:
red;
}
.span3{
color:
yellow;
}
.span4{
color:
rgb（0%,10%,80%）;
}
.span5{
color:
rgb（0%,500%,10%）;
}
.
G
o
o
g
l
e
第3节：
段落对齐方式
1.文字对齐方式：
vertical-align：
top，bottom，center，及顶对齐，底对齐，居中对齐
2.首字放大：
及
和联合起来实现的
效果图如下：
代码及注释：
文字字体
span{
font-size:
50px;
font-weight:
bold;
color:
blue;
float:
left;/*首字下沉*/
}
众人继续欣赏景色，发现温泉中云雾、五彩斑谰，原来温泉水中有种细菌
，它们的颜色能随水温改变。
常温时呈现黄褐色，温水中变成深红，热水则显碧绿，沸水中成为幽蓝
。
第二章：
图片的相关设置
第1节：
图片边框的设置
文字字体
.test{
border-style:
dotted;/*设置边框形状*/
border-color:
red;/*设置边框颜色*/
border-width:
4px;/*设置边框宽度*/
/*Border:
4pxreddotted;*/
/*可以用border-left/right/top/bottom设置一条边得边框*/
}
效果图：
实例2
效果图：
代码：
.test{
border-left-color:
red;/*对左边框颜色的设置*/
border-left-width:
10px;
border-left-style:
solid;
border-right:
10pxbluesolid;/*对右边框的设置*/
border-bottom:
10pxgraygroove;
border-top:
10px#CC00FFsolid;
float:
left;
}
：
图片的缩放
Width：
80px;设置图片的宽度，
Height:
60px;设置图片的高度
这里牙可以用百分比，不过显示时是浏览器的多少
效果图：
第2节：
图片的对齐方式
竖直对齐baseline;">方式:
baselinebaseline;">方式
控制对齐方式的是style="vertical-align:
baseline;"其值可以是：
baseline，baseline，bottom，middle，sub，
Super，text-bottom，text-top，top！
第3节：
图文混排
主要是在图片的的css样式中添加了float：
left；
代码：
文字字体
.test{
border:
4pxreddotted;
float:
left;
}
.test1{
font-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代码： .text{ border: 0pxwhitesolid; border-bottom: 1pxgraysolid; } .submit{ background-color: transparent; border: 0px; } Body中的代码 请输入您的姓名：
第4节： 实现表格直接输入 将表格的每一个单元格中嵌套输入框，同时在通过css样式去掉输入框 第4章： 页面和浏览器元素 第1节： 动态链接的三个状态 a{color: 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中的设置是原来的两组颜色对调； 代码： a{ color: red;/*深蓝*/ text-decoration: none; padding: 4px10px4px10px; border-top: 1pxsolid#EEEEEE;/*边框实现阴影效果*/ border-left: 1pxsolid#EEEEEE; border-bottom: 1pxsolid#717171; border-right: 1pxsolid#717171; background-color: #ecd8db; } a: hover{/*鼠标经过时的超链接*/ color: #821818;/*改变文字颜色*/ padding: 5px8px3px12px;/*改变文字位置*/ background-color: #e2c4c9;/*改变背景色*/ border-top: 1pxsolid#717171;/*边框变换，实现“按下去”的效果*/ border-left: 1pxsolid#717171; border-bottom: 1pxsolid#EEEEEE; border-right: 1pxsolid#EEEEEE; } 第3节： 浮雕式按钮： 与背景图片结合使用 第4节： 鼠标的变动 用css样式将你要设置的按钮的鼠标的样式进行简单的设置： 列a.help: hover{cursor: 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节： 项目列表 Ul表示的是无符号的列表，但是在css中可以该表符号 ul{list-style-type： decinal}显示为十进制 图片作为项目符号： ul{list-style-image： url（1.jpg）；} 此方法在ie和fi中显示不是一样的。 菜单的横竖转换： 在css中li{float： left；} 效果图： 代码：
Css样式： body{ background: #777; } #div1{ position: absolute; width: 200px; height: 300px; left: 100px; top: 50px; border: 1yellowdotted; } #div1ul{ list-style-type: circle; } #div1ulli{ margin: 10px0px0px0px; padding: 5px5px5px10px; border: 1pxredsolid; width: 130px; } #div2{ width: 200px; height: 300px; left: 350px; top: 50px; position: absolute; border: 1yellowdotted; } #div2ul{list-style-image: url（'1.jpg'）;} #div2ulli{ margin: 10px0px0px0px; padding: 5px5px5px10px; border: 1pxredsolid; width: 130px; } #div3{ width: 200px; height: 300px; left: 600px; top: 50px; position: absolute; border: 1yellowdotted; } #div3ul{list-style-type: none;} #div3a{ text-decoration: none;/*如果要显示效果则边框及大小的设置都在a中*/ border: 1pxwhitesolid; border-left: 12px#FA8072solid; margin: 10px0px0px0px; padding: 5px5px5px5px; color: #FF6347; width: 130px; } #div3a: hover{ color: #CCCCCC; background-color: #FF0000; } 流行的tap菜单： 2013518164923.jpg
展开阅读全文
相关搜索
|