- 1、本文档共11页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
css解释
站点CSS案例: (淘宝ugg雪地靴特卖商城)
.center{text-align:center}
<h1 class="center">
this heading will be center-aligned
</h1>
<p calss="center">
this paragraph wil slso be center-aligned
</p>
.fancy td{
color:#f60;
background:#666;}
td.fancy{color:#f60;
background:#666;}
<td class="fancy">
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
</head>
hr{color:sienna;}
p{margin-left:20PX;}
body{background-image:url("images/back40.gif");}
<head>
<style type="text/css">
hr{color:sienna;}
p{margin-left:20px;}
body{background-image:url("images/back40.gif");}
</styke>
</head>
<p style="color:sienna;margin-left:20px">
this is a paragraph
</p>
例如,外部样式表拥有针对 h3 选择器的三个属性:
h3{color:red;
text-align:left;
font-size:8pt;}
而内部样式表拥有针对 h3 选择器的两个属性:
h3{text-align:right;
font-size:20pt;}
假如拥有内部样式表的这个页面同时与外部样式表链接,那么 h3 得到的样式是:
color:red;
text-align:right;
fontsize:20PT;
即颜色属性将被继承于外部样式表,而文字排列(text-alignment)和字体尺寸(font-size)会被内部样式表中的规则取代。
P{background-color:gray;}
p{background-color:gray; padding:20px;}
body{background-image:url(/i/eg_bg_04.gif);}
一个段落
p.flower{background-image:url(/i/eg_bg_03.gif);}
行内元素
a.radio{background-image:url(/i/eg_bg_03.gif);}
属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。
默认地,背景图像将从一个元素的左上角开始。请看下面的例子:
body{background-image:url(/i/eg_bg_03.gif);
background-repeat:repeat-y;}
可以利用 background-position 属性改变图像在背景中的位置。
背景定位
可以利用 background-position 属性改变图像在背景中的位置。
body{background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}
为 background-position 属性提供值有很多方法。首先,可以使用一些关键字:top、bottom、left、right 和 center。通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,如 100px 或 5cm,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
如果只出现一个关键字,则认为另一个关键字是 center。
所以,如果希望每个段落的中部上方出现一个图像,只需声明如下:
p{background-image:url('bgimg.gif');
background-repeat:no-repeat;
background-position:top;}
单一关键字 等价的关键字
center center center
top top center 或 center top
bottom bottom ce
您可能关注的文档
- 企业App如何转向单页设计?.doc
- 全面提升Web 2.0应用程序的性能1.doc
- 确保在浏览器设置中启用JavaScript.doc
- 日租系统.doc
- 如何在VS2005中调试JavaScript脚本.doc
- 软件工程师招聘需求.doc
- 三维动画工程师.doc
- 三种上传组件的使用与ajax上传.doc
- 十步学会用css%2bdiv建站.ppt
- 十个拥有丰富 UI 组的JavaScrip开发框架.doc
- 广东省东莞市社会工作者职业资格社会工作综合能力(初级)知识点汇总(含答案).docx
- 2022-2023年山东省聊城市导游资格全国导游基础知识专项练习(含答案).docx
- 福建省南平市导游资格全国导游基础知识知识点汇总(含答案).docx
- 四川省泸州市导游资格全国导游基础知识知识点汇总(含答案).docx
- 2022-2023年江苏省常州市导游资格导游业务.docx
- 河南省开封市导游资格导游业务知识点汇总(含答案).docx
- 黑龙江省黑河市社会工作者职业资格社会工作综合能力(初级)重点汇总(含答案).docx
- 2021-2022年山西省阳泉市社会工作者职业资格社会工作综合能力(初级)知识点汇总(含答案).docx
- 2022-2023年黑龙江省七台河市导游资格全国导游基础知识.docx
- 2022-2023年陕西省榆林市导游资格全国导游基础知识专项练习(含答案).docx
文档评论(0)