网站设计与建设层叠式样式表CSSPPT课件下载推荐.ppt
- 文档编号:15041012
- 上传时间:2022-10-27
- 格式:PPT
- 页数:32
- 大小:604.50KB
网站设计与建设层叠式样式表CSSPPT课件下载推荐.ppt
《网站设计与建设层叠式样式表CSSPPT课件下载推荐.ppt》由会员分享,可在线阅读,更多相关《网站设计与建设层叠式样式表CSSPPT课件下载推荐.ppt(32页珍藏版)》请在冰豆网上搜索。
12.3CSS基本语法nCSS的描述部分是由三部分组成的,分别是选择器、属性和属性值:
选择器(selector)属性(Property):
属性值(Value);
12.4CSS定义和使用方式定义和使用样式定义和使用样式的4种方法:
n外部样式表文件链接导入样式信息n内部样式表n内嵌样式内部样式表!
n内部样式表是写在HTML的里面的,只对所在的网页有效。
n使用内部样式表可能是使用样式最简单的方法。
n使用标记符在HTML文档的head部分放置信息。
n样式信息包含在注释标记符“”中内嵌样式n内嵌样式是混合在HTML标记里使用的,n用这种方法,可以很简单的对某个元素单独定义样式,只对所在的Tag有效。
n内嵌样式的使用是直接在HTML标记里加入style参数,而style参数的内容就是CSS的属性和值n只适合用于偶然的样式改变。
n最优先CSSCSS的一个的一个的一个的一个简单实简单实例例例例!
这这是一是一是一是一个使用个使用个使用个使用CSSCSS修修修修饰饰文字的文字的文字的文字的简单实简单实例例例例n在style参数后面的引号里的内容相当于在样式表大括号里的内容。
n注意:
style参数可以应用于任意BODY内的元素(包括BODY本身)。
n使用内嵌样式的好处是可以在一个单一标记符中指定一个属性集合,但只适合用于偶然的样式改变。
n外部文件*.css链入导入链接来自一个样式表metahttp-equiv=Content-Typecontent=text/html;
charset=gb2312CSSCSS的一个的一个的一个的一个简单实简单实例例例例计计算机科学与技算机科学与技算机科学与技算机科学与技术术学院学院学院学院spanstyle=background-color:
#ff0000;
color:
yellow;
font-size:
30pt这这是一个使用是一个使用是一个使用是一个使用CSSCSS修修修修饰饰文字的文字的文字的文字的简单实简单实例例例例一个一个一个一个CSSCSS文件文件文件文件链接来自一个样式表(续)sample-1505.css!
-导入样式信息:
仅适于IEmetahttp-equiv=Content-Typecontent=text/html;
charset=gb2312CSSCSS的一个的一个的一个的一个简单实简单实例例例例importurl(sample-1505.css);
importurl(sample-1505.css);
h1color:
redh1color:
red计计算机科学与技算机科学与技算机科学与技算机科学与技术术学院学院学院学院spanstyle=background-color:
30pt这这是一个使用是一个使用是一个使用是一个使用CSSCSS修修修修饰饰文字的文字的文字的文字的简单实简单实例例例例山山山山东东大学大学大学大学class和和id用法用法n如果不希望标记的所有样式都被修改n需要用到两个标记属性:
class和id。
nid选择器可以为标有特定id的HTML元素指定特定的样式。
n指定h1.titlefont-weight:
bolder;
text-align:
center;
h1#navigatorfont-size:
14px;
left;
演示CSS这是页面最上端的标题这是页面左侧标题,用来导航这是页面新闻的标题metahttp-equiv=Content-Typecontent=text/html;
charset=gb2312CSSCSS内联样式内联样式内联样式内联样式importurl(sample-1505.css);
red;
.mycolorcolor:
green;
font-family:
幼圆幼圆幼圆幼圆计算机科学与技术学院计算机科学与技术学院计算机科学与技术学院计算机科学与技术学院spanstyle=background-color:
font-spansize:
30ptspan用用用用CSSCSS内联样式内联样式内联样式内联样式未使用内联样式未使用内联样式未使用内联样式未使用内联样式山东大学山东大学山东大学山东大学使用自己定义的使用自己定义的使用自己定义的使用自己定义的绿色绿色绿色绿色n层叠性就是继承性,样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素n当样式表继承遇到冲突时,总是以最后定义的样式为准。
n样式(Styles)的优先级依次是内嵌样式、内部样式、外部样式、浏览器缺省。
125CSS样式n2011年6月发布为W3C推荐标准。
nCSS3里增加了不少功能,如:
“border-radius”、“text-shadow”、“transform”以及“transition”等。
nW3C于2011年9月开始设计CSS4CSS常用样式常用样式-
(1)CSS背景背景bodybackground-color:
yellowh1background-color:
#00ff00h2background-color:
transparentpbackground-color:
rgb(250,0,255)p.no2background-color:
gray;
padding:
100px;
这是标题1这是标题2这是段落这个段落设置了内边距CSS常用样式常用样式-
(2)CSS文本属性文本属性CSS常用样式常用样式-(3)CSS字体属性字体属性CSS框模型(BoxModel)n定了元素框处理元素内容、内边距、边框和外边距的方式。
nn.test_demooverflow:
scroll;
height:
120px;
width:
background:
#CCCCCC;
ndfdfdfsfsdfsdfsdffghfghfghfghfghfghfghfghfghfghfghnnmargin-left:
2cmnpadding:
1cmCSS定位定位nCSS为定位和浮动提供了一些属性,n利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,n还可以完成多年来通常需要使用多个表格才能完成的任务。
n定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
n所谓相对定位是指允许元素在相对于文档布局的原始位置上进行偏移;
n而绝对定位允许元素与原始的文档布局分离且任意定位。
n实现CSS的定位最终还是要靠属性,nCSS的定位属性:
position、left、top、width、height、overflow、z-index、visibility和position。
.right,.leftheight:
300px;
200px;
.rightfloat:
right;
#000000;
.leftfloat:
#009933;
.mainbackground:
#F60;
RIGHTLEFTMAIN
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网站 设计 建设 层叠 式样 CSS