站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
MolyX CSS教程
”
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
__NOTOC__ <span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>导航:</strong> [[MolyX手册|上一页]] | {{Template:MolyX导航}}</span> <div style="clear:both;"></div> [[CSS]]是Cascading Style Sheets(层叠样式表单)的简称。更多的人把它称作样式表。顾名思义,它是一种设计[[网页]]样式的工具。借助CSS的强大功能,网页将在您丰富的想象力下千变万化。 <div> [[Image:mx1.png]] </div> 看到上面的图片,您可能会认为这是用[[photoshop]]或者是其他图形处理软件制作的吧。可是上面的例子却完全是用CSS编写的。我们来看一下它的源代码 <pre> <html> <head> <title>css word</title> <style>//*CSS样式定义开始*// <!-- div {width:200; filter blur(add=true,direction=135,strengh=20); } //*定义DIV范围内的样式,包括宽度(width)、模糊滤镜属性(blur)*// --> </style>//*样式定义结束*// </head> <body> <div>//*以下的区域内采用<head>中<style>里面定义的格式*// <p style="font-size:48;font-style:bold; color:red;">hongen </p> //*定义字体样式(font-style),包括字体大小(size)、粗细(bold)、颜色 (color)*// </div> </body> </html> </pre> 上面的代码中以//*及*//显示的是注释部分,用于帮助您更好的理解代码的含义。上面的这一段代码产生的是如图2的效果。而其中字体的模糊效果就是运用了CSS的滤镜功能。滤镜功能是CSS非常有趣也非常吸引人的一个功能,我们将在后面的章节中介绍。 实际上CSS的代码都是由一些最基本的语句构成的。它的基本语句的结构是这样的: <pre> 选择符{属性:属性值} </pre> 看,是不是很简单,只有三部分。 我们结合上面的代码来讲解,比如上面代码的<head>…</head>中,使用<style>来指定样式。 一般说来,<style>下面的CSS语句是以注释语句的形式书写的,也就是上面代码中的<!-- … -->符号包含的部分。所以,上面的例子中定义页面样式的语句是: <pre> div{width:200;filter:blur(add=true,direction=35,strengh=20);} </pre> 在上面的语句中,DIV是选择符,选择符可以是[[HTML]]中任何的标识符,比如P、DIV、IMG甚至BODY都可以作为选择符。 这里用DIV做选择符,就是说在HTML中,编辑在<DIV>中的页面格式将以上面语句中大括号内定义的格式显示。 括号内的WIDTH和FILTER就是属性。 WIDTH定义了DIV区域内的页面的宽度,200是属性值。 FILTER定义了滤镜属性,BLUR是它的属性值,该属性值产生的是一种模糊效果,其小括号内定义的是BLUR属性值的一些参数。 ADD参数有两个值:True和False。分别指定图片是否被设置成模糊效果。 Direction参数是用来设置模糊的方向。0度代表垂直向上,然后每45度一个单位,例子中的135代表底部向右135度,每一个度数单位都代表一个模糊方向,如果您感兴趣的话,可以参照后面的讲解中详细的参数设定。 Strengh代表有多少像素的宽度将受到模糊影响,参数值是用整数来设置的。 我们看到除了在<HEAD>中有CSS 的定义,在<BODY>中也有一段CSS定义: <pre> <p style=“font-size:48;font-style:bold;color:red;”>hongen</p> </pre> 这里Style是内嵌到<P>中来定义该段落内的格式的。我们发现在<BODY>中的CSS语句与定义在<HEAD>中还有些不同,它是用< STYLE = >直接定义的。这种定义方法非常适用于编写的代码比较多的情况。 而上面的代码的CSS定义格式则非常适用于代码较少、结构较简单的情况。 按照CSS语句的基本格式,我们可以看出上面定义P段落内的CSS代码中font-size、font-style和color是属性,分别定义<P>中“hongen”字体的大小(size)、样式(style)和颜色(color); 而48、bold、red是属性值。意思是“hongen”将以48pt、粗体、红色的样式显示。由于整个段落是定义在<DIV>中的,所以hongen又将显示出<head>中定义的滤镜属性来。最终的结果就如同图2一样。 图1中的效果也是用很简单的CSS语句实现的,只是运用了CSS中的滤镜属性而已。 通过上面的讲解,我们可以看到用很简单的CSS语句就可以实现许多需要专业软件才可以达到的效果。利用属性可以设置字体、颜色、背景等页面格式;利用定位可以使页面布局更加规范、好看;利用滤镜可以使页面产生多媒体效果。 怎么样,CSS的功能是不是很强大,在下面的教程中我们将对它进行详细的讲解。 *'''[[MolyX 怎样编写CSS|怎样编写CSS]]''' *'''CSS属性''' :[[MolyX 字体属性|字体属性]] :[[MolyX 颜色和背景属性|颜色和背景属性]] :[[MolyX 文本属性|文本属性]] :[[MolyX “容器”属性|“容器”属性]] :[[MolyX 分级属性|分级属性]] :[[MolyX 鼠标属性|鼠标属性]] *'''CSS定位''' :[[MolyX 动态转换|动态转换]] :[[MolyX 空间定位|空间定位]] *'''CSS滤镜''' :[[MolyX_CSS滤镜 概述|概述]] :[[MolyX_CSS滤镜 alpha属性|alpha属性]] :[[MolyX_CSS滤镜 blur属性|blur属性]] :[[MolyX_CSS滤镜 Chroma属性|Chroma属性]] :[[MolyX_CSS滤镜 DropShadow属性|DropShadow属性]] :[[MolyX_CSS滤镜 FlipH、FlipV属性|FlipH、FlipV属性]] :[[MolyX_CSS滤镜 Gray属性|Gray属性]] :[[MolyX_CSS滤镜 Glow属性|Glow属性]] :[[MolyX_CSS滤镜 Invert属性|Invert属性]] :[[MolyX_CSS滤镜 Mask属性|Mask属性]] :[[MolyX_CSS滤镜 Shadow属性|Shadow属性]] :[[MolyX_CSS滤镜 Wave属性|Wave属性]] :[[MolyX_CSS滤镜 Xray属性|Xray属性]] [[category:MolyX手册]]
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)
本页使用的模板:
模板:MolyX导航
(
编辑
)