网页设计与制作CSS - 360文档中心

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

４、类选择符 <p class="second_para"> -------</p> .second_para{color:red;} .second_para{color:green;background-color:#e8d3e3;} 类选择符通过直接引用元素中类属性的值而产生效果。在这个引用前面总是一个句点 (.)，用它来标识一个类选择符。这个句点是必要的，因为它可以帮助类选择符与其他元素相区别。 p.second_para{color:green;background-color:#e8d3e3;} 样式只对类属性价为second_para的段落起作用．５、伪类选择符 :link:伪类适用于那些还未被访问的连接 :visited:伪类适用于用户已经访问过的连接 :hover伪类 :用于用户指向一个元素,但还没有激活它的时候 :active伪类适用于一个元素被用户激活的时候 :focus伪类适用于一个元素获得焦点（接受键盘事件或其它形式的文本输入）的时候
2、文档级样式表将样式表放在<head>内的<style>标签和(/style>结束标签之间，就会影响文档中所有相同标签的内容 <style>标签功能:定义文档级样式表属性: dir lang media title type <style>和</style>标签之间的所有内容都将被看作是样式规则的一部分 type属性级联样式表全部都是text/css类型;JavaScript样式表使用的类型则是text/javascript <html> <head> <title>Bach's home page</title> <style type="text/css"> h1{color:blue;font-style:italic} </style> <body> <h1>Bach's home page</h1> <p>Johann Sebastian Bach was a prolific composer.</p> </body> </html>
Байду номын сангаас
CSS元素分类
在CSS中，元素被分为三种类型: 块级元素: 诸如段落、标题、列表、表格、DIV和BODY等元素都是块级(block-level)元素。每个块级元素都从一个新行开始显示，而且其后的元素也需另起一行进行显示。内联元素: 如a, em, span元素及大多数的替换元素，如图像和表单输入元素。它们不必在新行上显示，也不强迫其他元素在新行上显示，而且可以作为任何其他元素的子元素。列表项元素在HTML中只包含li元素。它们类似于书签，用干特殊的表示场合(如圆点、字母或数字)。如果它们出现在某种有序列表中，则具有顺序性。如在有序列表中的列表项能依据它们的上下文自动编号。这几种元素占据了display属性值（Block、in1ine、list-item、none）四个值中的三个。如果将元素的display属性设成none，则元素的存在会被浏览器所忽略，而且也不被显示。 block元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度,<div>, <p>, <h1>, <form>等是块元素的
inline元素的特点是：和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。 <span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子用display: inline 或display: block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢？让一个inline元素从新行开始；让块元素和其他元素保持在一行上；控制inline元素的宽度；控制inline元素的高度；
样式是一个规则，告诉浏览器如何表现特定的HTML或XHTML标签中的内容。每个标签都有一系列相关的样式属性，它们的值决定了浏览器将如何显示这个标签。一条规则定义了标签中一个或几个属性的特定值。
将样式和标签结合起来的方式有三种:
内联样式表、文档级样式表，或者通过使用外部样式表。 1、内联样式(inline style)是连接样式和标签的最简单的方式，只需在标签中包含一个style属性，后面再跟一列属性及属性值即可。浏览器会根据样式属性及其值来表现标签中的内容。 <H1 style="color:blue">Bach's home page</H1> <H1 style="color:blue; font-style:italic">Bach's home page</H1> 因为内联样式会向其标签的定义中添加更多内容，所以它们难维护，也难以阅读。
样式语法：样式的语法( 规则) 样式规则至少由三个基本部分组成: 1、选择符selector：HTML或XHTML标记元素的名称， 2、大括号{ } 3、大括号{ }括起来并用分号分隔的样式列表（样式:”ＣＳＳ属性:属性值”） selector{propertyl:valuel;property2:value2;...} 例如：h1{color:purple;font-style:italic} 样式的种类：１、单个的简单选择符（只有一个标记） h1{color:blue;font-style:italic} ２分组选择符（集合选择符）具有相同样式的选择符可以写在一起，中间用逗号分开。如： h1,h2,h3{color:red;font-style:italic} 3、嵌套选择符（派生选择符/上下文选择符） EF 匹配元素 E 的任意后代元素 F p b{color:red} 将出现在p之内任何位置的b元素的文本颜色设置为红色 p b，h1 sub{color:green} 将出现在p之内任何位置的b元素和h1之内任何位置的sub元素的文本颜色设置为绿色
a {color:purple} a:link{color:red} a:visited{color:blue} a:hover{color:blue;} a:active{color:yellow} <a class="student" href="#">学生作品</a> a.student:visited{color:purple;} a.student:link,a.student:visited{color:red;} 注意a:hover必须放置在a:link和a:visited规则之后，否则层叠规则将隐藏a:hover的'color'属性。 6、伪元素 first-line伪元素:一个段落的第一个格式化的行应用特殊的样式 <P>This is a somewhat long HTML paragraph that will be broken into several lines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</P>. P:first-line { text-transform: uppercase;color:red;} :first-letter伪元素可以用于“词首(首字符或首字)” P:first-letter { color: green; font-size: 200%; font-style: italic;}
3、ID选择符 <p id="first_para"> 精通HTML语言，完全能手写HTML代码；<br> 熟练掌握ASP、ASP.Net、PHP,JAVA、JAVASCRIPT等技术；<br> 熟悉网站的管理、设计规划、前台、后台程序制作技术。<br> 熟练SQL server,Oracle 数据库管理系统,能够独立完成数据库的开发;<br> </p> #first_para{font-weight:bold} #first_para{font-weight:bold;letter-spacing:3px;} #first_para{font-weight:bold;letter-spacing:3px;font-family:"楷体_GB2312";} ID选择符的前面是#号 ID只能在某个HTML文档中出现一次，即ID名称（如first_para）不能重复４、类选择符 <p class="secobd_para"> 商务类人才可以分为五种：一是企业网络营销业务，包括利用网站为企业开拓网上业务、网络品牌管理、客户服务等；二是网上国际贸易，包括利用网络平台开发国际市场、进行国际贸易；<br> 三是新型网络服务商的内容服务，包括频道规划、信息管理、频道推广、客户服务等；四是电子商务支持系统的推广，负责销售电子商务系统和提供电子商务支持服务、客户管理等；五是创业，包括利用虚拟市场提供产品和服务，也可以直接为虚拟市场提供服务。对于这类人才，一方面要求他们是管理和营销的高手，同时也应熟悉网络虚拟市场下新的经济规律，另一方面他们必须掌握网络和电子商务平台的基本操作技术。 </p>
通配选择符 * *{ margin:0; padding:0; } 元素间的关系： <div title="这是一个div"> <h1>这是是h1的内容</h1> <p>这是一个段落p的内容<strong>这里是strong的内容</strong></p> </div> div同h1 和 p 形成“父/子”关系，div 是 h1 和 p 的“父元素”。 p 和strong 形成“父/子”关系，strong 的“父元素”是 p 。 h1,p,strong 都是 div 的“子元素” （三者都包含在 div 之内）div 是 h1 p strong 三者的“祖先”， div和strong并非“父/子”关系，而是“祖孙”关系，但 strong 依然是 div 的“子（孙）元素”。 h1 和 p 两者是相邻的 E > F （父子元素）匹配父元素 E 的任意子元素F 注释/**/ /*P{ background-color: #FFFF66 }*/
CSS（Cascading Stylesheets，层叠样式表）
CSS（Cascading Stylesheets，层叠样式表）是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。使用CSS能够简化网页的格式代码，加快下载显示的速度和减少需要上传的代码量，也减少了重复劳动的工作量．
3、链接式外部样式表当在文档的<head>标签中使用<link>标签 <html> <head> <title>Bach's home page</title> <link rel="stylesheet" href=“sheet1.css" type="text/css"> <link rel="stylesheet" href=“sheet2.css" type="text/css"> </head> <body> <h1>Bach's home page</h1> <p>Johann Sebastian Bach was a prolific composer. </p> </body> </html> link元素规定了：链接类型：指向“stylesheet”。通过“href”属性，指定了样式表的位置。链接的样式表的类型：“text/css”。
为网页上的元素精确地定位把网页上的内容结构和格式控制相分离．只要修改CSS样式表文件就可以改变整个站点的风格特色
CSS是一种样式表语言，用户可以使用它将样式（如：字体，间距及语音提示等）附加到结构化的文档（如：HTML文档和XML应用）中。由于CSS将文档呈现的样式和文档的内容相互分离，因此网页的写作和站点的维护得以简化。