【《CSS技术在网站设计中的应用分析》11000字（论文）】_第1页
【《CSS技术在网站设计中的应用分析》11000字（论文）】_第2页
【《CSS技术在网站设计中的应用分析》11000字（论文）】_第3页
【《CSS技术在网站设计中的应用分析》11000字（论文）】_第4页
【《CSS技术在网站设计中的应用分析》11000字（论文）】_第5页
已阅读5页，还剩33页未读， 继续免费阅读

下载本文档

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

文档简介

CSS技术在网站设计中的应用分析摘要：本文介绍网页技术相关背景和理论技术，了解网页开发设计过程的核心思想，探究CSS技术的基础和细节以及如何影响网页设计原理，举例说明相应的Web页面中CSS实例等，从而全面的了解CSS技术在网页设计中的特点和信息传递过程中的重要作用。关键词：CSS技术；网页设计；应用目录TOC\o"1-3"\h\u1引言 引言1.1研究背景和意义互联网技术的发展相比传统工业技术，其历史可以说是短暂的，但其展现出的价值却旗鼓相当甚至更大，发展速度也刷新了人类的想象，人类从互联网单机时代进入联网时代，从PC个人计算机时代到移动时代，仿佛就在昨天，互联网浏览的硬件设备逐渐变小，从计算机诞生时的庞然大物到今天的智能手机，运算性能也在翻倍增长，而在这个过程中，人类使用最多的网页Web应用还在发挥着不可磨灭的价值，虽然在技术层面Web应用也有相应的迭代升级，但很多基础技术的运用依然保留了下来，不像硬件设备那样被淘汰，这就要求了我们想要了解互联网技术，运用互联网技术，就必须先了解相应的网页设计技术，只有坚实的基础才能将互联网的价值发挥到最大。为了实现相应的网页设计，同时随着技术的进步发展，网页设计的流程趋向了标准化、模块化，期间出现了HTML、CSS这样支撑着所有网页能正常浏览的技术，纵观全球，网页应用无一例外不都基于HTML和CSS技术进行相应的设计开发。具体细分HTML和CSS技术可知，就HTML技术来讲，可以说，在不同的项目开发实现过程中，操作过程大致一致，如网页数据的浏览、网页数据的修改、网页数据的提交和网页数据的新增，HTML技术因为是网页浏览的第一层基石，其体现出的单一性和标准性才能保证全球范围内网页在不同的浏览器、国家、网络环境中的统一性，而CSS技术则不一样，可以说同样HTML代码的网站因为不同的CSS代码呈现出截然不同的网页效果和浏览效果.CSS技术在丰富网页内容样式的基础上，可有效的简化网页代码，帮助开发者避免琐碎的代码搭建工作，还可以提升网页的浏览速度，提升用户的浏览体验，这对于人机交互以及后期项目业务、内容发展等具有十分重要的积极影响。CSS技术在现今人类使用终端花样繁多的场景中具有不可忽视的作用，在常规的计算机浏览和现在越来越普遍的移动端浏览的统一性和兼容性方面Css技术发挥着独一无二的作用和价值，且现在优秀的编程人员和软件公司已经开发出相应的响应式框架，通过一套代码适用几乎所有设备的浏览，这不但方便了设备厂商的个性化产品生产，也让开发人员无需重复劳动，结束了不同的终端编写不同的网页页面代码的处境，从经济方面来讲，CSS技术已经为人类社会节省了大量的资金投入、研发成本还有维护成本。综上所述，研究CSS技术在网页设计中的应用有着必要的意义和作用。2网页相关技术介绍2.1HTML技术HTML(HyperTextMarkupLanguage)即超文本标记语言REF_Ref6756\r\h[1]，通过描述相应的标签文本来告诉浏览器等网页浏览应用显示相应的元素内容，在一系列相应的标签组合下构成一个基础的网页页面。从文件层面来说，一个HTML文档对应一个网页，HTML标签的集合构成了一个网页的全部内容。最新的HTML标记语言版本为HTML5，也就是俗称第五版超文本标记语言，于2014年10约被万维网联盟W3C正式发布，是一个开放式的标准协议REF_Ref6756\r\h[2]，可以通过它将互联网信息传递到智能手机或者其他无线终端中，目前市面上绝大部分浏览器都支持这一版本的HTML。其设计目的更多的是为了能在移动设备上支持多媒体资源，在屏幕尺寸较PC小的设备上为用户提供更优质的体验，也因此，HTML5新增了很多新元素，如强化表单元素功能，可以在网页中通过HTML标签直接添加丰富的各类多媒体资源而不需要引入第三方库，能用动态脚本语言在画布上进行绘制，支持2D和3D画图等。同时HTML5支持跨平台使用，在某一款厂商浏览器中开发出来的网页应用可以很容易的移植到其他的浏览器平台中，总的来说，新版的HTML提供了全新的网络标准，更友好的支持了设备之间的跨平台使用并即时更新，HTML5也为网页应用的开发可能性提升了一个新的高度。2.2CSS技术2.2.1CSS技术简介CSS(CascadingStyleSheets)指的是层叠样式表REF_Ref6756\r\h[3]，也被称作级联样式表，通过定义相应的样式表代码来描述在浏览器等应用程序中如何显示HTML元素，HTML标签只能根据其设置的位置来显示其预定义的格式，因为要统一标注所以并不能根据开发人员需要友好并具体的定义样式风格，从而无法出色的定制出不同的网页样式，这就导致了CSS技术的出现，它是在HTML的基础上对HTML上制定了一套完整的样式扩展标准，通过CSS，开发人员可以按需求定制页面的布局、颜色、格式以及其背景，从而对网页各处设置具体的样式。从设计角度来讲，CSS技术的出现直接为一行行HTML代码带去了艺术成分，让艺术展现在网页中成为了可能，同时，这也使得各类互联网公司能开发出具有差异化产品的基础，为市场竞争提供了相应的思路，用户也会被自己喜爱的样式类型网页所吸引。2.2.2CSS基本语法与实例从语法角度来讲，CSS层叠样式表的语法定义包括三个部分：选择器名、属性名、属性值。一段CSS规则如图2-1所示。图2-1CSS样式规则在上图中显示的选择器“h1”是CSS中的元素类型的名称，可以自定义名称也可以根据HTML标签命名，CSS会通过选择器向浏览器声明每个实例的显示样式，如以HTML标签命名，则默认相应的标签样式会自动加载为对应的CSS样式规则中定义的样式，且作用于网页中所有的“h1”元素,如图2-2所示。图2-2CSS选择器简单的选择器被分为以下几种：元素选择器，代码形式如“html{color:black;}”、“h1{color:blue;}”、“h2{color:silver;}”等此类元素标签名和属性及属性值组合成的代码。类选择器，代码形式如“.important{color:red;}”，由“.”加类名（可自定义）组合属性及属性值构成。具体HTML应用实例如“<pclass="important">”，通过类选择器定义“p”元素的样式为“color:red”。ID选择器，代码形式如“#intro{color:red;}”，由“#”加ID名（由HTML元素定义的ID决定）组合属性及属性值构成。具体HTML应用实例如“<pid="intro">”，通过ID选择器定义“p”元素的“id”为“intro”从而定义了“p”元素的样式为“color:red;”。属性选择器，代码形式如“*[title]{color:red;}”，其定义了包含标题“title”元素的所有元素变为红色。分组选择器，代码形式如“body,h2,p{color:gray;}”，其意义为设置“body”、“h2”、“p”元素为一组，这组的样式为“color:gray”。在图2-2中显示的属性代表了一个合法的标识符，它们是CSS语法中的关键，直接决定着样式的输出。属性规定了HTML元素格式修饰的内容，例如图2-2中显示的“color”是“h1”元素的颜色属性，“font-size”是“h1”元素的字体大小，在图2-2中“text-align”则代表着“h1”元素的排列位置。属性还有几个需要了解的部分为属性都有合法的属性值，即在CSS技术中预先定义好可以被计算机所理解的属性值，具体来说就是如大小类属性应输入相对应的大小属性值，像“font-size”属性只能输入“12px”这样显示像素大小的值而不能输入“twelve”或是“十二”。属性在没有被定义具体的属性值时需要输入相应的默认值，如“background.image”属性在没有具体图片链接表示其图片位置时要用“none”来表示。在CSS属性定义过程还有一个十分重要的注意点就是能否被下一级继承，具体用代码“<html><title></title><p>CSS样式表<em>继承特性</em>的演示代码</p></html>”来说明，此段代码中元素关系如图2-3所示。htmlhtmlbodyheadbodyheadptitleptitleemem图2-3元素关系另外属性能否设置百分值为属性值也是一大关键，百分数值的设置将决定计算机对百分数值的编译，也决定了属性的显示效果，这里要弄清楚两点，一是属性是否可以取百分数为值，如外边距属性“margin”可以取百分数值。二是百分数值如何被计算机编译显示，在外边距属性“margin”中属性值为百分数时，代表的意义为“margin”属性长度为相对于“margin”上级元素的长度。在实际开发中CSS代码会存入在“.css”后缀的CSS样式表中，且大部分CSS规则和HTML代码有着一一对应或者多个对应一个的关系，CSS样式HTML和CSS如图2-4所示，值得一提的是CSS支持在显示颜色属性时支持输入英文或者是十六进制代码输入。主要代码如下：<!DOCTYPEhtml><html><head> <metacharset=“utf-8”><title>css实例</title><style>body{background–color;#03s9f4;}h1{color:white;text-align:center;}P{font-family:“TimesNewRoman”;font-size:20px;color:white}</style></head><body><h1>css实例！</h1><p>这是一个段落。</p></body></html>图2-4HTML+CSS代码实例多个CSS样式代码可以在一个页面同时起作用，但是相同名字的CSS代码会由最后一个定义的CSS代码决定样式，也就是说在样式表中最新添加的CSS样式代码会覆盖之前的CSS样式代码，如图2-5所示，HTML标签“h1”样式由最初的白色覆盖成了新添加的黑色。主要代码如下：<!DOCTYPEhtml><html><head> <metacharset=“utf-8”><title>css实例</title><style>body{background–color;#2196f3db;}h1{color:white;text-align:center;}h1{color:black;text-align:center;{font-family:“TimesNewRoman”;font-size:20px;color:white}</style></head><body><h1>css实例！</h1><p>这是一个段落。</p></body></html>图2-5CSS代码覆盖实例但是如果在某一个标签下的元素定义样式则较对该元素单独定义的样式会浏览器优先输出，如“.aimg{}”表示链接型HTML元素中图片的样式，它会较“.img{}”这样单独定义图片元素的样式规则优先被浏览器输出。为了更直观的显CSS在HTML中起到的作用，这里通过同一个HTML代码不同的CSS样式组合了五个页面，如图2-6至图2-10示例所示。图2-6CSS代码示例一图2-7CSS代码示例二图2-8CSS代码示例三图2-9CSS代码示例四图2-10CSS代码示例五2.2.3CSS技术执行原理从浏览器角度而言，CSS是一种定义如字体、颜色、位置等样式结构的语言，CSS赋予了网页格式化的能力，而CSS在计算机中被执行的原理是什么呢？这需要从浏览器的渲染过程开始解读，浏览器的渲染过程如图2-11所示。DOMDOMHTMLParserLayoutHTMLDOMTreeHTMLParserLayoutHTMLDOMTreePaintingRenderTreeAttachmentPaintingRenderTreeAttachmentDisplayStyleSheetsCSSParserSDisplayStyleSheetsCSSParserStylerules图2-11浏览器渲染流程在图2-11中可以看出浏览器渲染的过程被分成了两条支线，一条是HTML解析器生成的文档对象模型也叫做DOM树，另一条是CSS解析器生成的CSS样式规则。两条线集结在一起形成新的对象，被称为RenderTree渲染树，最后结合网页布局显示在屏幕中呈现出来。这里需要重点研究的就是第二条支线，也就是CSS样式规则线，在浏览器中有相应的CSS模块负责CSS代码解析同时为网页计算出样式，CSS模块在浏览器运行过程中有几个特点，首先是网页中几乎一个元素对应一个样式甚至多个样式，所以CSS对象众多，这也就导致了计算量频繁，需要为每个元素计算样式，以“P”元素举例，在具体解析过程中，生成的对象如图2-12.P,div{P,div{Margin-top:3px;}.error{Color:red;}cssstyleSheetcssstyleSheetCSSRuleCSSRuleCSSRuleCSSRuleDeclarationSelectorsDeclarationSelectorssDeclarationSelectorsDeclarationSelectorssredcolor.error3pxMargin-topdivvvPredcolor.error3pxMargin-topdivvvP图2-12CSS具体解析流程图2-12中说明了每个CSS样式文件的每个选择器都会成为解析对象，每个对象都有相应的CSS规则，其当中包含着所要声明的对象。具体规则解释如图2-13所示。图2-13CSS规则解释浏览器通过解析相应的CSS样式从而自动生成代码，也就是说CSS样式表代码到了浏览器内部模块执行时其中的语法解析和词法解析会自动生成，在达到某一条件时通过回调函数返回代码,最终将样式表中所有的样式规则转化为浏览器中的内部模型CSSStyleRule对象并存储。进一步细化解析流程如下：首先浏览器通过调用CSSStyleSheet的相应函数，紧接着是CSS解析过程，这一步骤完成后，样式规则都存在对应的CSSStyleSheet对象当中。第一步只是转化成了相应的对象模型，还需要将这些对象具体化为CSS样式规则设置项，存储为相应的对象集合，抽象后称CSSRuleSet。CSSRuleSet有一个方法，可以把CSSStyleSheet里的样式规则转变为CSSRuleSet中的样式规则。每个页面中的元素样式都是在CSSRuleSet的基础上决定的。上述讲了浏览器中渲染过程中CSS样式表解析流程，下面是对CSS语法解析过程的研究。首先，浏览器中CSSStyleSheet对象是先被创建的。紧接着被存到CSS分析程序对象中的是CSSStyleSheet对象的指针，在分析过程中，程序识别出一个选择器，如“.class”,随后创建出一个CSS分析程序选择器。分析程序继续分析，当识别到另一个选择器时，修改之前的选择器，这个循环会持续到分析程序遇到逗号或者左大括号，如果碰到逗号，那么取出CSSParser的重用向量（向量是一个封装了动态大小数组的顺序容器。跟任意其它类型容器一样，它能够存放各种类型的对象。可以简单的认为，向量是一个能够存放任意类型的动态数组），然后将堆栈尾部的CSS分析程序选择器对象弹出存入向量中，再继续开始分析过程。如果碰到的是左大括号，则识别属性名称，将属性名称的哈希值存入到解释器堆栈中，在完成CSS属性解析后，再识别属性值，创建出CSS分析程序属性值对象，并将对象值存入解释器堆栈中。将属性和属性值弹出栈，创建CSS解析器对象，把属性和属性值存入到CSS解析器对象的成员变量中。如果在后续的分析中继续碰到属性名称，则继续循环这个过程，如果识别到右括号则将重用向量从堆栈中弹出，创建出CSS样式表规则对象，CSS样式表对象的选择符就是重用变量，样式值就是之前存储属性和属性值的CSS解析器中的变量。到了这个阶段，只需把CSS样式规则添加到CSSStyleSheet中后清除CSS分析器中的缓存结果即可，接下来，如果没有内容，则这个解析过程就完全结束，反之则重新开始解析直到没有内容为止。当上述过程彻底完成时，会生成CSS样式树，它被保存在文档对象上。为了更快的计算样式，必须对这些CSS样式进行重新组织。计算样式就是从CSS样式树中找出所有匹配相应元素的数据值。匹配会通过CSS选择器来验证，同时需要满足层叠规则。最终组成一个数组，在数组中记录了解析器的选择器名，选择器属性和属性值，以及权重。在CSS的加载过程中有三种加载方式，不同的CSS加载方式产生的样式规则，通过权重来确定谁覆盖谁。2.2.4CSS加载方式有三种加载样式表的方法：外部CSS、内部CSS、行内CSS，具体表现形式如下：外部CSS：通过引入外部CSS文件表，可以实现一张样式表修改整个网站的效果，外部样式表可以在任何文本编辑器中编写，同时必须以“.css”后缀名保存且外部样式表中不能包含任何HTML标签或是文件，如图2-14所示。与图中“mystyle.css”对应的样式文件代码为“body{background-color:lightblue;}h1{color:navy;margin-left:20px;}”。<!DOCTYPEhtml><html><head><linkrel=“stlyesheet”herf=“mystyle.css”></head><body><h1>这是头部</h1><p>头部文件</p></body></html>图2-14外部引入CSS样式内部CSS：某些HTML页面会拥有唯一的样式，这种情况下可以直接在HTML代码中使用内部样式表，位置在HTML中的“head”部分中建立“<style>”声明来定义，如图2-15。<!DOCTYPEhtml><html><head><style>body{background-color:#fff;}h1{color:#000;margin-left:40px;}</style></head><body><h1>这是头部</h1><p>头部文件</p></body></html>图2-15内部CSS样式行内CSS：行内样式也被称为内联样式，是单个元素唯一的样式，在使用过程中，需要将“style”声明添加到元素中，如图2-16所示。<!DOCTYPEhtml><html><body><h1style=“color:#000;”>这是头部</h1><pstyle=“color:red;”>头部文本</p></body></html>图2-16行内CSS2.2.5CSS盒子模型在网页开发技术的发展迭代过程汇总中，逐渐形成将HTML元素当做一个“盒子模型”的标准，顾名思义，“盒子模型”将HTML元素看做一个“盒子”将其包围封装起来，在“盒子”周边留下布局属性，包括：边距、边框，边距又被分为外边距、内边距。最终效果如图2-17所示。图2-17盒子模型2.2.6CSS定位CSS定位指的是通过CSS定位属性“\o"CSSposition属性"position”来对网页内的元素进行对应的定位布局。CSS定位的基本思想很简单，简单来说就是允许开发人员定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。从开发角度来说CSS定位功能为开发带去不可想象的便利，让开发过程中元素的位置控制得心应手，开发人员在符合规则的前提下按需求开发出具有特色的界面，这不仅方便了用户的使用操作体验，同时为网站前后端的交互提供了极大的便利，让数据传递更可靠高效。CSS定位中的具体属性和属性值如表2-1所示。属性描述position把元素放置到一个静态的、相对的、绝对的、或固定的位置中top定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移right定义了定位元素右外边距边界与其包含块右边界之间的偏移bottom定义了定位元素下外边距边界与其包含块下边界之间的偏移left定义了定位元素左外边距边界与其包含块下边界之间的偏移overflow设置当元素的内容溢出其区域时发生的事情clip设置元素的形状。元素被剪入这个形状之中，然后显示出来Vertical-align设置元素的垂直对齐方式z-index设置元素的堆叠顺序表2-1CSS定位属性与属性值CSS定位具体细分为普通流、浮动、绝对定位、相对定位。在没有专门设置定位属性前，HTML页面所有的元素均采用普通流定位，普通流定位即块级框按排列顺序一个接一个排列，框之间的距离由框的外边距计算而出。CSS相对定位是指：对一个HTML元素进行相对定位，它将出现在它所在的上级元素中，可以通过设置垂直或水平位置，让这个元素相对于它的上级元素进行移动。如图2-19所示。图2-18CSS相对定位CSS绝对定位是指设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。不管它在正常流中生成何种类型的框，元素定位后生成一个块级框。如图2-20所示。图2-19CSS绝对定位CSS浮动是指浮动的框向左右移动，直到它的外边缘碰到屏幕边缘或另一个浮动框的边框为止。如图2-21所示，当把框1设置为向右浮动时，它脱离普通流定位并且向右移动，直到它的右边缘碰到浏览器的右边缘。图2-20CSS元素右浮动如果页面内元素同时向左浮动，则页面会根据普通流的排序逐次浮动直到碰到浏览器边缘或是另一个浮动框边缘。如图2-21所示。图2-21CSS元素左浮动若元素在同时向左或右浮动时浏览器框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，排序靠后的元素会被排序靠前的元素“卡住”，如图2-22所示，框3被框1“卡住”。图2-22CSS浮动元素“卡住”示例2.2.7CSS伪类CSS伪类用于定义元素的特殊状态，如设置鼠标悬停在元素上时的样式，为已访问和未访问链接设置不同的样式，设置元素获得焦点时的样式，如图2-23所示。图2-23CSS伪类示例CSS伪类写法为常规选择器加上伪类选择器，如“a:hover”,所有CSS伪类如表2-2所示。选择器例子例子描述:activea:activ选择活动的链接。:checkedinput:checked选择每个被选中的<input>元素:disabledinput:disabled选择每个被禁用的<input>元素:emptyp:empty选择没有子元素的每个<p>元素:enabledinput:enabled选择每个已启用的<input>元素:first-childp:first-child选择作为其父的首个元素的每个<p>元素:first-of-typep:first-of-type选择作为其父的<p>元素的每个<p>元素:focusinput:focus选择获得焦点的<input>元素:hovera:hover选择鼠标悬停其上的链接:in-rangeinput:in-range选择具有指定范围内的值的<input>元素:invalidinput:invalid选择具有所有无效值的<input>元素:lang(language)p:lang(it)选择每个lang属性值以“it”开头的<p>元素:last-childp:last-child选择作为其父的最后一个子元素的每个<p>元素:last-of-typep:last-of-type选择作为其父的最后一个<p>元素的每个<p>元素:linka:link选择所有未被访问的链接:not(selector):not(p)选择每个非<p>元素的元素:nth-child(n)p:nth-child(2)选择作为其父的第二个子元素的每个<p>元素:nth-last-child(n)p:nth-last-child(2)选择作为其父的第二个元素的每个<p>元素,从最后一个子元素计数:nth-last-of-type(n)p:nth-last-of-type(2)选择作为其父的第二个<p>元素的每个<p>元素,从最后一个子元素计数:nth-of-type(n)p:nth-of-type选择作为其父的第二个元素的每个<p>元素。:only-of-typep:only-of-type选择作为其父的唯一<p>元素的每个<p>元素。:only-childp:only-child选择作为其父的唯一子元素的<p>元素。:optionalinput:optional选择不带“required”属性的<input>元素:out-of-rangeinput:out-of-range选择值在指定范围之外的<input>元素:read-onlyinput:read-only选择指定了“readonly”属性的<input>元素:read-writeinput:read-write选择不带“readonly”属性的<input>元素:requiredinput:required选择指定了“required”属性的<input>元素:rootroot选择元素的根元素:target#news:target选择当前活动的#news元素:validinput:valid选择所有具有有效值的<input>元素:visiteda:visited选择所有已访问的链接表2-2CSS伪类2.2.8CSS响应式设计CSS技术在如今移动端逐渐占屏幕大小领域主导位置的时代中也开发出了相适应的布局，通过在CSS样式表中定义不同浏览终端的样式来提升跨平台浏览时的体验度，这极大的提升了用户体验，增加了人性化，也成功让CSS胜任了今天的样式定义任务，保证了网站的舒适体验同时也保证了信息数据的正确输出。具体设计思路如图2-24，在图中可看出通过自适应网页的元素所呈现的“盒子模型”位置，来提升网页的可浏览性，同时保障数据的输出。图2-24响应式设计这里举例说明CSS响应设计具体实现过程，实例代码为:“<style>*{box-sizing:border-box;}.row::after{content:"";clear:both;display:table;}[class*="col-"]{float:left;padding:15px;}html{font-family:"LucidaSans",sans-serif;}.header{background-color:#9933cc;color:#ffffff;padding:15px;}.menuul{list-style-type:none;margin:0;padding:0;}.menuli{padding:8px;margin-bottom:7px;background-color:#33b5e5;color:#ffffff;box-shadow:01px3pxrgba(0,0,0,0.12),01px2pxrgba(0,0,0,0.24);}.menuli:hover{background-color:#0099cc;}.aside{background-color:#33b5e5;padding:15px;color:#ffffff;text-align:center;font-size:14px;box-shadow:01px3pxrgba(0,0,0,0.12),01px2pxrgba(0,0,0,0.24);}.footer{background-color:#0099cc;color:#ffffff;text-align:center;font-size:12px;padding:15px;}/*Formobilephones:*/[class*="col-"]{width:100%;}@mediaonlyscreenand(min-width:600px){/*针对平板电脑：*/.col-s-1{width:8.33%;}.col-s-2{width:16.66%;}.col-s-3{width:25%;}.col-s-4{width:33.33%;}.col-s-5{width:41.66%;}.col-s-6{width:50%;}.col-s-7{width:58.33%;}.col-s-8{width:66.66%;}.col-s-9{width:75%;}.col-s-10{width:83.33%;}.col-s-11{width:91.66%;}.col-s-12{width:100%;}}@mediaonlyscreenand(min-width:768px){/*针对桌面：*/.col-1{width:8.33%;}.col-2{width:16.66%;}.col-3{width:25%;}.col-4{width:33.33%;}.col-5{width:41.66%;}.col-6{width:50%;}.col-7{width:58.33%;}.col-8{width:66.66%;}.col-9{width:75%;}.col-10{width:83.33%;}.col-11{width:91.66%;}.col-12{width:100%;}}</style>”在不同设备中看到的效果如图2-25至图2-27所示所示。图2-25电脑端效果图2-26平板端效果图2-27手机端效果响应式网页设计会让网页不同的设备上浏览体验更佳，目前在开发领域，响应式开发也趋向普遍化和标准化。2.2.9CSS重点属性1.display属性：该属性规定是否显示元素或者如何显示元素，每个HTML元素都有一个默认的“display”值，具体取决于它的元素类型。大多数元素的默认“display”值为“block”或“inline”。如图2-28所示。图2-28display属性实例position属性：该属性主要用于规定应用于元素的定位方法的类型，其值有“static”、“relative”、“fixed”、“absolute”或“sticky”。当样式内容为“position:static；”时规定了HTML元素默认情况下的定位方式为静态。静态定位的元素不受top、bottom、left和right属性的影响且不会以任何特殊方式定位；它始终根据页面的正常流进行定位。当样式内容为“position:relative;”时元素相对于其正常位置进行定位。设置相对定位的元素的top、right、bottom和left属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。当样式内容为“position:fixed;”时的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。top、right、bottom和left属性用于定位此元素。固定定位的元素不会在页面中通常应放置的位置上留出空隙。当样式内容为“position:absolute;”时元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如fixed）。然而，如果绝对定位的元素没有祖先，它将使用文档主体“body”，并随页面滚动一起移动。被定位的元素是其位置除“static”以外的任何元素。当样式内容为“position:sticky;”时元素根据用户的滚动位置进行定位。粘性元素根据滚动位置在相对“relative”和固定“fixed”之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止，然后将其“粘贴”在适当的位置，比如“position:fixed”。clear属性：该属性指定了哪些元素可以浮动哪些需要被清除防止浮动影响其他元素，其可设置的属性值有“none”，作用为允许两侧都有浮动元素，是该属性的默认值；“left”，作用为左侧不允许浮动元素，“right”作用为右侧不允许浮动元素，“both”作用为左侧或右侧均不允许浮动元素。Clear属性最常见的位置在元素使用了float属性之后。2.2.10CSS特点总结丰富的样式定义CSS具有多种类的样式外观，不仅能设置文本和背景也可改变文本的修饰方式以及其他效果，还能为所有元素创建边框。易于使用和修改CSS可以把样式定义在html元素中的stly属性中、header部分里或者声明在专门的一个CSS文件中。CSS样式表可进行统一管理，除此外需要修改样式我们只需一个工作那就是在样式列表里找对应的样式声明修改一下就行。多页面应用我们想要在多个页面中使用同个CSS样式表，只需将样式表存在单独的一个CSS文件中即可。因为此时的CSS样式表在任何页面中都可用到，这样就能实现多个页面风格的统一。层叠这一特性举个例子来说就是一个站点中同一个CSS样式表用在多个页面中，其中的某个页面某个元素想使用其他样式时可针对这些样式单独定义一个样式表定义到页面中，最终在浏览器中看到的是最后设置的效果。页面压缩将样式的声明单独存到CSS样式表中不仅可以减少页面的体积，而且在加载页面时使用的时间也会减少。此外，样式表的复用更大程序的缩小了页面的体积，下载的时间变得更短。3HTML+CSS技术的实际应用下文将通过HTML和CSS技术结合来开发实例，以此进一步研究实际开发中CSS样式如何在HTML页面发挥作用。本文以健身器材购买网站主页设计为例，共有“网站首页”、“器材简介”、“产品中心”、“预订留言”四个界面,最终效果图如图3-1至图3-5所示。图3-1网站首页图3-2器材介绍页面图3-3产品中心图3-4预订留言页面3.1网页HTML布局代码设计网站首页HTML代码文件如图3-5所示。图3-5主页页HTML代码网站首页在没有加入CSS样式表时显示效果为图3-6所示。图3-6主页HTML代码呈现的效果通过进一步分析可知，网页头部代码如图3-7所示。图3-7网页头部代码在图3-7中可以看到通过“<head>”标签作为容器，包含了“<meta>”、“<title>”、“<link>”这几个头部元素，其中“<meta>”标签包含了网页的元数据，元数据不会显示在客户端，但是会被浏览器解析，这段代码向浏览器声明了网页内容形式为文本，编码方式为“gb2312”,也就是常说的中文简体编码，“<title>”标签向网页声明了网页标题为“健身器材”，在浏览器的标签页上会显示这个标题。3.2网页CSS代码设计另外网页头部文件通过引入外部

人人文库> 全部分类> 行业资料 > 工业设计

温馨提示

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

最新文档

评论

0/150

提交评论