css在网页布局中的应用研究_第1页
css在网页布局中的应用研究_第2页
css在网页布局中的应用研究_第3页
css在网页布局中的应用研究_第4页
css在网页布局中的应用研究_第5页
已阅读5页，还剩1页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

css在网页布局中的应用研究

在互联网的大发展阶段，所有人都可以建立自己的网站。WYSIWYG编辑器使得几乎每个人都可以很容易地构建一个网站,而不用费心去学习HTML。但不幸的是,这种在使用上的便利却带来了一些蹩脚的代码,对可访问性造成了妨碍。HTML在设计方面表现出了它的局限性:开发者和设计者经常会故意错用HTML标签,特别是<table>标签,来克服HTML在版面和设计上的局限性。这种设计方式也会带来妨碍可访问性的代码。CSS是在20世纪末出现的,用来解决上述问题。通过使用CSS,可以将一个HTML文件的内容与有关它的表现形式或风格的信息分离开来。这样就可以应用准确的格式化并达到想要得到的版面设计,而无需使用可能会让屏幕阅读器和专门的浏览器软件产生困惑的HTML代码。CSS是CascadingStyleSheets(层叠样式表)的简称,CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。在标准网页设计中CSS负责网页内容(XHTML)的表现。CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.,可以通过简单的更改CSS文件改变网页的整体表现形式,可以减少设计工作量。所以它是每一个网页设计人员的必修课.,CSS是由W3C的CSS工作组产生和维护的。下面我们来讨论CSS的应用。1在网络中添加样本表的方法将样式表加入到网页中有三种方法。最接近目标的样式定义优先权越高,高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。1.1将其连接到外部示例文件例外函数可以先建立外部样式表文件,然后使用HTML的link对象连接css文件。代码如下:1.2生成内式表单可以在HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象来定义内部样式块定义方式如下:在这里将style对象的type属性设置为“text/css”,是允许不支持这类型的浏览器忽略样式表单。1.3样式表属性表属性内联定义是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下:<pstyle=“margin-left:0.5in;margin-right:0.5in”>这一行被增加了左右的外补丁<p>。2有待开发的表面元素可以通过设置各种外观属性如:ForeColor、BackColor、Height和Width来控制ASP.NET服务器控件的外观。此外,部分控件支持公开附加样式相关设置的样式对象。ASP.NET网页在运行时可以当作HTML页。因此可以使用级联样式表设置页上任何元素的外观。另外,还可以定义包括级联样式表设置的ASP.NET主题,然后将这些主题应用于页或网站。以下提供了关于直接设置样式的信息,包括在设计时以及通过编程方式时如何使用样式表。2.1配置信息的bold属性当页运行时,外观属性将根据用户浏览器的功能呈现。如果用户的浏览器支持级联样式表(CSS),外观属性将呈现为构成控件的HTML元素的样式属性。比如,如果定义了一个HyperlinkWeb服务器控件,并将其ForeColor属性设置为Red,将其Bold属性设置为true,将其Size属性设置为xx-small并且用户的浏览器支持样式表,则该控件呈现为:C#<aid=”hyperlink1”style=”color:red;font-size:xx-small;font-weigth:bold:”>Hyperlink</a>另一方面,如果用户浏览器不支持样式,控件将使用其他方式呈现,如<font>元素。以下显示了不支持样式的浏览器对于上例的呈现结果:C#<aid=”a1”><fontcolor=”red”size=”1”>Hyperlink</font></a>呈现结果取决于浏览器的属性的其他示例还有BorderWidth和BorderColor。部分外观属性,例如BorderStyle不使用样式将无法呈现。不支持样式的浏览器,因此会忽略这些属性。2.2模型生成的对象除了ForeColor和BackColor等外观属性之外,控件还会公开一个或多个样式对象,用于封装附加的外观属性。Font样式属性就是一个示例,它公开FontInfo类型的对象,这种类型的对象包含与字体有关的单个属性,如Size、Name和Bold。部分控件公开使得可以用于设置控件特定部分的外观的样式对象。例如,CalendarWeb服务器控件包含dayStyle(单独的日)、SelectedDayStyle(用户所选日、周或月)和WeekendDayStyle等样式对象。例如,使用SelectedDayStyle样式对象,可以设置用户所选的日的BackColor和ForeColor属性。大部分样式对象为Style或TableItemStyle类型的样式对象,原因是它们设置了表单元格的属性。Font属性的类型为FontInfo。2.3模型生成和生成在复杂的控件中,样式对象通常从其他样式对象继承特征。例如,在Calendar控件中,SelectedDayStyle对象以DayStyle对象为基础。如果不显式设置SelectedDayStyle的任何属性,它将继承DayStyle对象的特征。这一继承表示你所设置的样式对象属性具有优先级。例如,下面的列表显示Calendar控件样式对象属性的顺序,其中优先级最高的对象设置位于列表的最后。⑴基础Calendar控件的外观属性⑵DayStyle样式对象⑶WeekendDayStyle样式对象⑷OtherMonthDayStyle样式对象⑸TodayDayStyle样式对象⑹SelectedDayStyle样式对象当样式为容器元素和文本元素所共享时,会遇到一些困难。例如,假定控件有一个样式表,你想将文本样式属性应用于链接,将样式的其余部分应用于容器。可以使用控件的样式属性,如:菜单控件的MenuItemStyle或日历控件的TodayDayStyle来设置样式。但是,使用CssClass属性定义的样式时难度要大一些,因为ASP.NET无法了解服务器上的类的内容。ASP.NET将CssClass属性中定义的样式同时应用于文本和容器元素,并会添加内联样式,以消除双重应用的影响(双边框、字体倍增等)。控件样式的最佳设置方法是,使用该控件定义的样式属性,并在必要时使用样式表或内联样式对个别元素进行微调。若要重写控件的样式属性定义的样式,则需要在样式表或内联样式中使用importantCSS规则。下面的代码是在hovernodestyle元素上使用了CssClass属性。该类被定义了两次,分别被定义为myclass和a.myclass:visited,因此它重写了a:visited定义。如果使用级联样式表来自定义控件的外观,使用内联样式或单独的CSS文件,但二者不要同时使用。同时使用内联样式和单独的CSS文件可能会导致意外结果。2.4生成模型属性除外观属性和样式对象之外,控件还公开了两个允许你更直接操作CSS样式的属性:CssClass和Style,CssClass属性允许你将样式表类分配给控件。Style属性允许您将样式属性字符串设置为原样写入到控件。使用Style属性允许你设置没有通过其他属性公开的样式属性。Style属性公开你可以调用来直接设置样式的Add和Remove等方法的集合。在Style属性中作出的设置并未在相应的各个外观属性中反映出来。3对质粒生成和使用位置的判别Menu控件外观的各个方面都可以使用Menu控件的属性或级联样式表(CSS)来管理。通过了解属性控制呈现的哪些方面,可以定制菜单的外观。下面主要介绍由Menu控件公开的样式类型,并提供了一些使用Menu控件设置样式的最佳做法。可以直接在标记中设置各种样式的属性或使用样式表。CssClass属性可用于为菜单样式分配CSS类,该样式控制Menu控件外观的某些方面。下面的示例演示如何为许多Menu属性指定一个CssClass属性。最佳做法是在标记中指定内联样式或使用CssClass属性并使用样式表指定样式。不建议同时指定内联样式和使用样式表,因为可能会导致意外行为。3.1静态和动态菜单项的生成由此可见。完全静态的菜单显示整个菜单结构,用户可以单击其任何部分。动态显示意味着当鼠标指针置于某些项上时显示部分菜单结构;仅当用户将鼠标指针放置在父节点上时才会显示子菜单项。StaticDisplayLevels属性指示静态显示多少层菜单项。如果有四层菜单项,并且StaticDisplayLevels属性设置为3,则静态显示前三层,动态显示最后一层菜单项。若要控制菜单的静态部分的外观,可以在名称中使用包含单词“Static”的样式属性:⑴StaticMenuStyle⑵StaticMenuItemStyle⑶StaticSeletedStyle⑷StaticHoverStyle若要控制菜单的动态部分的外观,可以在名称中使用包含单词“Dynamic”的样式属性:⑴DynamicMenuStyle⑵DynamicMenuItemStyle⑶DynamicSelectedStyle⑷DynamicHoverStyleStaticMenuStyle和DynamicMenuStyle属性分别影响整组静态或动态菜单项。例如,如果使用DynamicMenuStyle属性指定一个边框,则整个动态区域将会有一个边框。StaticMenuItemStyle和DynamicMenuItemStyle属性与此行为相反。这两个属性影响单个菜单项。例如,如果使用DynamicMenuItemStyle属性指定一个边框,则每个动态菜单项都有它自己的边框。当鼠标指针置于菜单项上时,StaticSelectedStyle和DynamicSelectedStyle属性仅影响所选的菜单项,而StaticHoverStyle和DynamicHoverStyle属性影响菜单项的样式。3.2生成样式属性控制菜单项的外观的另一种方法是单独设置菜单结构中每层的样式。Menu控件具有多个充当样式集合的属性,这意味着这些属性可以包含菜单结构的每层的样式信息。可用于指定每层外观的样式属性在其名称中包含单词“Level”:⑴LeveMenuItemStyle⑵LeveSubMenuStyles⑶LeveSelectedStyles下面的示例创建一个四种样式的集合,这些样式适用于前四层菜单项,并且可以通过使用CssClass值在样式表中引用。集合中的第一种样式适用于第一层菜单项;第二种样式适用于第二层菜单项,依此类推。注意,层样式之间不存在任何继承,以便应用于一个层的样式不会影响后续层。下面的示例创建一个三种样式的集合,这些样式适用于前三层菜单项,并且可以在样式表中引用。3.3生成特定菜单所需的标记和样式表用于设置Menu控件格式的样式取决于对菜单项的外观进行控制的程度和位置。如果希望每个菜单项层都有一个一致的外观,则要使用LevelMenuItemStyles属性来设置每个菜单层的样式。如果希望所有静态菜单项的外观都相同,所有动态菜单项的外观也都相同,则可以使用StaticMenuItemStyle属性来控制所有静态菜单项的外观,使用DynamicMenuItemStyle属性来控制所有动态菜单项的外观。下面的示例演示创建特定菜单所需的标记和样式表内容。并且演示使用Menu控件时的一些最佳做法,包括:在标记中使用Menu控件属性font设置整个菜单的字体。(1)通过WidthMenu控件属性设置控件的宽度。(2)使用Leve

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论