2015/04/30CSS学习记录

最新推荐文章于 2024-09-24 12:57:22 发布

mingzishisha

最新推荐文章于 2024-09-24 12:57:22 发布

阅读量217

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/mingzishisha/article/details/45395715

版权

3 篇文章 0 订阅

订阅专栏

一.CSS创建

插入样式表方法

①外部样式表

样式需要应用到多个页面时使用，在文档的头部使用<link>标签

<head>

</head>

不要在属性值与单位之间留有空格。假如你使用 "margin-left: 20 px" 而不是 "margin-left: 20px" ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。

②内部样式表

当单个文档需要特殊样式时使用，使用<style>标签在文档头部定义内部样式表

<head>
<style>
body{
background-color:#b0c4de;
}
</style>

③内联样式表

仅需在一个元素上应用一次时使用内联样式，在相关标签使用<style>属性

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

④多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

二.CSS background

CSS 属性定义背影效果:

1.background-color:背景颜色

<style>
body
{
background-color:#b0c4de;
}
</style>

颜色定义方式：① #b0c4de②rgb(255,6,5)③颜色名称 red

2.background-image:背景图片

<pre name="code" class="html">body 
{
background-color:#cccccc;
background-image:url('paper.gif');
}

①背景图像在水平方向平铺：background-repeat:repeat-x;

②背景图像只展示一次，不进行水平或者垂直方向平铺：background-repeat:no-repeat;

③背景图片进行定位：background-position:right top;在右上角

④背景图片设置不会随着页面的滚动而滚动（位置固定）：background-attachment:fixed;

3.简写背景属性

<style>
body
{
background:#ffffff url('img_tree.png') no-repeat right top;
margin-right:200px;
}
</style>

简写顺序：background-color background-image background-repeat background- attachment background-position

关注

专栏目录