CSS.docx
- 文档编号:5618096
- 上传时间:2022-12-29
- 格式:DOCX
- 页数:19
- 大小:61.52KB
CSS.docx
《CSS.docx》由会员分享,可在线阅读,更多相关《CSS.docx(19页珍藏版)》请在冰豆网上搜索。
CSS
1CSS概述
CSS(CascadingStyleSheet),中文译为层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
2CSS基本语法
2.1CSS选择器
2.1.1标记选择器
h1{
color:
red;
font-size:
25px;
}
2.1.2类别选择器
--
.one{
color:
red;/*红色*/
font-size:
18px;/*文字大小*/
}
.two{
color:
green;/*绿色*/
font-size:
20px;/*文字大小*/
}
.three{
color:
cyan;/*青色*/
font-size:
22px;/*文字大小*/
}
-->
2.1.3ID选择器
--
#one{
font-weight:
bold;/*粗体*/
}
#two{
font-size:
30px;/*字体大小*/
color:
#009900;/*颜色*/
}
-->
2.2选择器声明
2.2.1集体声明(2-6.html)
--
h1,h2,h3,h4,h5,p{/*集体声明*/
color:
purple;/*文字颜色*/
font-size:
15px;/*字体大小*/
}
h2.special,.special,#one{/*集体声明*/
text-decoration:
underline;/*下划线*/
}
-->
2.2.2选择器的嵌套(2-8.html)
--
pb{/*嵌套声明*/
color:
maroon;/*颜色*/
text-decoration:
underline;/*下划线*/
}
-->
3CSS文字效果
3.1CSS文字样式
⏹3.1.1字体(3-1.html)
⏹3.1.2文字大小(3-2.html)
⏹3.1.3文字颜色(3-5.html)
⏹3.1.4文字粗细(3-6.html)
⏹3.1.5斜体(3-7.html)
⏹3.1.6下划线、顶划线、删除线(3-8.html)
⏹3.1.7英文字母大小写(3-10.html)
3.2文字实例:
模拟Google公司logo
3-11.html
3.3CSS段落文字
⏹3.3.1段落水平对齐方式(3-13.html)
⏹3.3.2段落垂直对齐方式(3-14.html)
⏹3.3.3行间距、字间距(3-16.html)
⏹3.3.4首字放大(3-18.html)
3.4段落实例:
XX搜索
3-19.html
4CSS图片效果
4.1图片样式
⏹4.1.1图片边框(4-1.html)
⏹4.1.2图片缩放(4-4.html)
4.2图片对齐
⏹4.2.1横向对齐(4-6.html)
⏹4.2.2纵向对齐(4-7.html)
4.3图文混排
⏹4.3.1文字环绕(4-9.html)
⏹4.3.2设置图片与文字的间距
4.4图文实例:
八仙过海
5CSS页面背景
5.1背景颜色
⏹5.1.1页面背景色(5-1.html)
⏹5.1.2用背景色给页面分块(5-2.html)
5.2背景图片
⏹5.2.1页面的背景图(5-3.html)
body{
background-image:
url(03.jpg);/*页面背景图片*/
}
⏹5.2.2背景图片的重复(5-5.html)
--
body{
padding:
0px;
margin:
0px;
background-image:
url(bg8.gif);/*背景图片*/
background-repeat:
repeat-y;/*垂直方向重复*/
background-color:
#0066FF;/*背景颜色*/
}
-->
⏹5.2.3背景图片的位置(5-8.html)
--
body{
padding:
0px;
margin:
0px;
background-image:
url(bg4.jpg);/*背景图片*/
background-repeat:
no-repeat;/*不重复*/
background-position:
rightbottom;/*背景位置,右下*/
background-color:
#eeeee8;
}
-->
⏹5.2.4固定背景图片(5-10.html)
--
body{
padding:
0px;margin:
0px;
background-image:
url(bg6.jpg);/*背景图片*/
background-repeat:
no-repeat;/*不重复*/
background-attachment:
fixed;/*固定背景图片*/
}
-->
6CSS设置表格和表单样式
6.1控制表格
⏹6.1.1表格中的标记(6-1.html)
⏹6.1.2表格的颜色(6-2.html) -- .datalist{ color: #0046a6;/*表格文字颜色*/ background-color: #d2e8ff;/*表格背景色*/ font-family: Arial;/*表格字体*/ } .datalistcaption{ font-size: 18px;/*标题文字大小*/ font-weight: bold;/*标题文字粗体*/ } .datalistth{ color: #003e7e;/*行、列名称颜色*/ background-color: #7bb3ff;/*行、列名称的背景色*/ } --> ⏹6.1.3表格的边框 -- .datalist{ border: 1pxsolid#429fff;/*表格边框*/ font-family: Arial; border-collapse: collapse;/*边框重叠*/ } .datalistcaption{ padding-top: 3px; padding-bottom: 2px; font: bold1.1em; background-color: #f0f7ff; border: 1pxsolid#429fff;/*表格标题边框*/ } .datalistth{ border: 1pxsolid#429fff;/*行、列名称边框*/ background-color: #d2e8ff; font-weight: bold; padding-top: 4px;padding-bottom: 4px; padding-left: 10px;padding-right: 10px; text-align: center; } .datalisttd{ border: 1pxsolid#429fff;/*单元格边框*/ text-align: right; padding: 4px; } --> 6.2表格实例一: 隔行变色 ⏹6-4.html .datalisttr.altrow{ background-color: #c7e5ff;/*隔行变色*/ } 6.3CSS与表单 ⏹6.3.1表单中的元素(6-7.html) -- form{ border: 1pxdotted#AAAAAA; padding: 3px6px3px6px; margin: 0px; font: 14pxArial; } input{ color: #00008B; background-color: #ADD8E6; border: 1pxsolid#00008B; } select{ width: 80px; color: #00008B; background-color: #ADD8E6; border: 1pxsolid#00008B; } textarea{ width: 200px; height: 40px; color: #00008B; background-color: #ADD8E6; border: 1pxsolid#00008B; } --> ⏹6.3.2像文字一样的按钮(6-9.html) -- form{ margin: 0px;padding: 0px; font: 14px; } input{ font: 14pxArial; } .txt{ border-bottom: 1pxsolid#005aa7;/*下划线效果*/ color: #005aa7; border-top: 0px;border-left: 0px; border-right: 0px; background-color: transparent;/*背景色透明*/ } .btn{ background-color: transparent;/*背景色透明*/ border: 0px;/*边框取消*/ } --> 7页面和浏览器元素 7.1丰富的超链接特效 ⏹7.1.1动态超链接(7-1.html) -- a: link{/*超链接正常状态下的样式*/ color: #005799;/*深蓝*/ text-decoration: none;/*无下划线*/ } a: visited{/*访问过的超链接*/ color: #000000;/*黑色*/ text-decoration: none;/*无下划线*/ } a: hover{/*鼠标经过时的超链接*/ color: #FFFF00;/*黄色*/ text-decoration: underline;/*下划线*/ } --> ⏹7.1.2按钮式超链接(7-2.html) -- a{/*统一设置所有样式*/ font-family: Arial; font-size: .8em; text-align: center; margin: 3px; } a: link,a: visited{/*超链接正常状态、被访问过的样式*/ color: #A62020; padding: 4px10px4px10px; background-color: #ecd8db; text-decoration: none; border-top: 1pxsolid#EEEEEE;/*边框实现阴影效果*/ border-left: 1pxsolid#EEEEEE; border-bottom: 1pxsolid#717171; border-right: 1pxsolid#717171; } 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; } --> ⏹7.1.3浮雕式超链接(7-3.html) -- a{ width: 80px;height: 32px; padding-top: 10px; text-decoration: none; text-align: center; background: url(button1.jpg)no-repeat;/*超链接背景图片*/ } a: link{color: #654300;} a: visited{color: #654300;} a: hover{ color: #FFFFFF; text-decoration: none; background: url(button2.jpg)no-repeat;/*变换背景图片*/ } --> 7.2鼠标特效 ⏹CSS控制鼠标箭头(7-4.html) a.help: hover{/*“帮助”按钮的样式*/ cursor: help;/*变幻鼠标形状*/ } 7.3页面滚动条 ⏹7-5.html -- body{/*页面滚动条*/ background-color: #efe5e2; scrollbar-3dlight-color: #B0C4DE; scrollbar-arrow-color: #34547E;/*上下按钮上三角箭头的颜色*/ scrollbar-base-color: #FF0000;/*基调颜色*/ scrollbar-darkshadow-color: #1D4272;/*立体滚动条强阴影的颜色*/ scrollbar-face-color: #CFDFF4;/*立体滚动条凸出部分的颜色*/ scrollbar-highlight-color: #FFFFFF;/*滚动条空白部分的颜色*/ scrollbar-shadow-color: #5380BA;/*立体滚动条阴影的颜色)*/ } .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; } --> 8CSS制作实用菜单 8.1项目列表 ⏹8.1.1列表的符号(8-1.html) ul{ font-size: 0.9em; color: #00458c; list-style-type: decimal;/*项目编号*/ } ⏹8.1.2图片符号(8-3.html) ul{ font-family: Arial; font-size: 13px; color: #00458c; list-style-image: url(icon1.gif);/*图片符号*/ } 8.2无需表格的菜单 ⏹8-5.html -- body{ background-color: #ffdee0; } #navigation{ width: 200px; font-family: Arial; } #navigationul{ list-style-type: none;/*不显示项目符号*/ margin: 0px; padding: 0px; } #navigationli{ border-bottom: 1pxsolid#ED9F9F;/*添加下划线*/ } #navigationlia{ display: block;/*区块显示*/ padding: 5px5px5px0.5em; text-decoration: none; border-left: 11pxsolid#711515;/*左边的粗红边*/ border-right: 1pxsolid#711515;/*右侧阴影*/ } #navigationlia: link,#navigationlia: visited{ background-color: #c11136; color: #FFFFFF; } #navigationlia: hover{/*鼠标经过时*/ background-color: #990020;/*改变背景色*/ color: #ffff00;/*改变文字颜色*/ } --> 8.3菜单的横竖转换 ⏹8-6.html #navigationli{ float: left;/*水平显示各个项目*/ } #navigationlia{ display: block;/*区块显示*/ padding: 3px6px3px6px; text-decoration: none; border: 1pxsolid#711515; margin: 2px; } 8.4流行的Tab菜单 ⏹8.4.1网易、雅虎实例 ⏹8.4.28-9.html 9CSS滤镜的使用 9.1滤镜概述 CSS滤镜并不是浏览器的插件,也不符合CSS标准,而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的一类功能的集合。 由于浏览器IE有着很广的使用范围,因此CSS滤镜也被广大设计者所喜爱。 CSS滤镜的标识符是“filter”,总体上跟其它CSS语句一样,都十分简单:
filter: filtername(parameters); 也就是说,进行滤镜操作必须先定义filter,filtername是滤镜属性名,包括alpha、blur、chroma等多种属性,parameters是表示各个滤镜属性的参数,也正是这些参数决定了滤镜将以怎样的效果显示。 9.2~9.7滤镜实例 ⏹9.2Alpha通道(9-1.html) .alpha{ filter: alpha(opacity=50); } ⏹9.3Blur模糊(9-5.html) .blur{ filter: progid: DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false); } ⏹9.4透明色(9-7.html) .chroma{ filter: chroma(color=FF6800);/*去掉金黄色*/ } ⏹9.5Flip翻转(9-10.html) .flip1{ filter: fliph;/*水平翻转*/ } .flip2{ filter: flipv;/*竖直翻转*/ } .flip3{ filter: flipvfliph;/*水平、竖直同时翻转*/ } ⏹9.6遮罩(9-15.html) .mask{ filter: mask(color=#8888FF);/*遮罩效果*/ } ⏹9.7波浪(9-20.html) .wave1{ filter: wave(add=0,freq=2,lightstrength=70,phase=75,strength=4); } .wave2{ filter: wave(add=0,freq=4,lightstrength=20,phase=25,strength=5); } .wave3{ filter: wave(add=1,freq=4,lightstrength=60,phase=0,strength=6); }
滤镜的种类主要有如下几个常用的: 1.Alpha通道 2.移动模糊(MotionBlur) 3.透明色(Chroma) 4.下落阴影(DropShadow) 5.对称变换(Flip) 6.光晕(Glow) 7.灰度(Grayscale) 8.反色(Invert) 9.遮蔽(Mask) 10.阴影(Shadow) 11.波浪(Wave) 12.X光效果(X-ray) 1.alpha是来设置透明度的。 filter: alpha(opacity=opcity,finishopacity=finishopacity,style=style,startX=startX,startY=startY,finishX=finishX,finishY=finishY) Opacity代表透明度等级,可选值从0到100,0代表完全透明,100代表完全不透明。 Style参数指定了透明区域的形状特征。 其中0代表统一形状;1代表线形;2代表放射状;3代表长方形,当style为2或者3的时候,startX、startY等坐标参数便没有意义,都是以图片中心为起始,四周为结束。 Finishopacity是一个可选项,用来设置结束时的透明度,从而达到一种渐变效果,它的值也是从0到100。 StartX和StartY代表渐变透明效果的开始坐标,finishX和finishY代表渐变透明效果的结束坐标。 如果不设置透明渐变效果,那么只需设置opacity这一个参数就可以了。 2.Blur模糊 filter: blur(add=add,direction=direction,strength=strength); Add参数有两个参数值: tru
冰豆网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
关于本文
copyright@ 2008-2022 冰点文档网站版权所有 经营许可证编号:鄂ICP备2022015515号-1 |