CSS 学习day02

发表于

如何插入样式表

当读到一个样式表时，浏览器会根据它来格式化HTML 文档。插入样式表的方法有三种：

外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用\标签链接到样式表，\标签在文档的头部：

1
2
3
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

浏览器会从文件mystyle.css中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何html标签。样式表应该以.css扩展名进行保存。下面是一个样式表文件的例子：

1
2
3
4
5
6
7
8
9
hr {
	color: sienna;
	}
p {
	margin-left: 20px;
	}
body {
	background-image: url("images/back40.gif";)
	}

不要在属性值与单位之间留有空格。

内部样式表
当单个文档需要特殊的格式时，就应该使用内部样式表。可以用\标签在文档头部定义内部样式表。例如：

1
2
3
<p style="color:sienna;margin-left: 20px;">
test
</p>

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对h3选择器的三个属性：

1
2
3
4
5
h3 {
	color: red;
	text-align: left;
	font-size: 8pt;	
	}

而内部样式表拥有针对h3选择器的两个属性：

1
2
3
4
h3{
	text-align: right;
	font-size: 20pt;	
	}

假如拥有内部样式表的这个页面同时与外部样式表链接，那h3拥有的样式是：

1
2
3
color: red;
text-align: right;
font-size: 20pt;

即颜色属性会被继承于外部样式表，而文字排列(text-alignment)和字体尺寸(font-size)会被内部样式表中的规则取代。

CSS 背景

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。CSS 在这方面的能力远远在HTML 之上。

纯色背景

可以使用back-ground-color属性为元素设置背景色。这个属性接受任何合法的颜色值。
这条规则把元素的背景颜色设定为灰色：

1
2
3
4
p {
	background-color: gray;
	padding: 20px;
	}

background-color属性不能继承，其默认值为透明。

背景图像

要把图像放入背景，必须为这个属性设置一个url值：

1
2
3
body {
	background-image: url("/i/eg_bg_04.gif");	
	}

大多数背景都应用到body元素，不过并不仅限于此。
下面例子为一个段落应用了一个背景，而不会对文档的其他部分应用背景：

1
2
3
4
5
6
7
p.flower {
	background-image: url("/i/eg_bg_03.gif")	;
	}
还可以为行内元素设置背景图像，下面的例子为一个链接设置了背景图像：
a.radio {
		background-image: url("/i/eg_bg_03.gif");
	}

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<style type="text/css">
body {background-image:url(/i/eg_bg_04.gif);}
p.flower {background-image: url(/i/eg_bg_03.gif); padding: 20px;}
a.radio {background-image: url(/i/eg_bg_07.gif);  padding: 20px;}
</style>
</head>
<body>
<p class="flower">我是一个有花纹背景的段落。<a href="#" class="radio">我是一个有放射性背景的链接。</a></p>
<p><b>注释：</b>为了清晰地显示出段落和链接的背景图像，我们为它们设置了少许内边距。</p>
</body>
</html>

背景重复

如果需要在页面上对背景图片进行平铺，可以使用background-repeat 属性。
属性值repeat导致图像在水平垂直方向都平铺，repeat-x和repeat-y分别导致图像只在水平或者垂直方向上重复，no-repeat则不允许图像在任何方向上平铺。
默认的，背景图像将从一个元素的左上角开始。例如：

1
2
3
4
body {
	background-image: url("/i/eg_bg_03.gif");
	background-repeat: repeat-y;	
	}

背景定位

可以利用background-position属性改变图像
下面的例子在body元素中将背景图像居中：

1
2
3
4
5
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或者百分值，不同类型的值对于背景图像的放置会稍有差异。

背景关联

如果文档较长，那么文档向下滚动时，背景图像也会随之滚动，当文档滚动到超出图像位置的范围时，图像就会消失。
可以通过background-attachment属性防止这种滚动，通过这个属性，可以声明图像相对于可视范围是固定的，因此不会受到滚动的影响：

{
1
2
3
4
background-image: url("/i/ed_bg_03.gif");
background-repeat: no-repeat;
background-attachment: fixed;	
}

background-attachment属性默认的值是scroll，也就是说，在默认的情况下，背景会随文档滚动。

CSS 背景实例

  • 设置背景颜色

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <html>
    <head>
    <style type="text/css">
    body {background-color: yellow}
    h1 {background-color: #00ff00}
    h2 {background-color: transparent}
    p {background-color: rgb(250,0,255)}
    p.no2 {background-color: gray; padding: 20px;}
    </style>
    </head>
    <body>
    <h1>这是标题 1</h1>
    <h2>这是标题 2</h2>
    <p>这是段落</p>
    <p class="no2">这个段落设置了内边距。</p>
    </body>
    </html>

  • 设置文本背景颜色

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <html>
    <head>
    <style type="text/css">
    span.highlight
    {
    background-color:yellow
    }
    </style>
    </head>
    <body>
    <p>
    <span class="highlight">这是文本。</span> 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 <span class="highlight">这是文本。</span>
    </p>
    </body>
    </html>

  • 设置图片背景

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <html>
    <head>
    <style type="text/css">
    body {background-image:url(/i/eg_bg_04.gif);}
    </style>
    </head>
    <body></body>
    </html>

  • 设置图片背景2

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <html>
    <head>
    <style type="text/css">
    body {background-image:url(/i/eg_bg_04.gif);}
    p.flower {background-image: url(/i/eg_bg_03.gif); padding: 20px;}
    a.radio {background-image: url(/i/eg_bg_07.gif);  padding: 20px;}
    </style>
    </head>
    <body>
    <p class="flower">我是一个有花纹背景的段落。<a href="#" class="radio">我是一个有放射性背景的链接。</a></p>
    <p><b>注释：</b>为了清晰地显示出段落和链接的背景图像，我们为它们设置了少许内边距。</p>
    </body>
    </html>

  • 平铺背景图片

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <html>
    <head>
    <style type="text/css">
    body
    { 
    background-image: 
    url(/i/eg_bg_03.gif);
    background-repeat: repeat
    }
    </style>
    </head>
    <body>
    </body>
    </html>

  • 垂直/水平 方向平铺

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <html>
    <head>
    <style type="text/css">
    body
    { 
    background-image: 
    url(/i/eg_bg_03.gif);
    background-repeat: repeat-y /*y表示水平方向,x表示垂直方向*/
    }
    </style>
    </head>
    <body>
    </body>
    </html>

  • 居中定位背景图片

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <html>
    <head>
    <style type="text/css">
    body
    { 
      background-image:url('/i/eg_bg_03.gif');
      background-repeat:no-repeat;
      background-attachment:fixed;
      background-position:center;
    }
    </style>
    </head>
    <body>
    <body>
    <p><b>提示：</b>您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。</p>
    </body>
    </body>
    </html>

  • 用%定位背景图片

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <html>
    <head>
    <style type="text/css">
    body
    { 
    background-image: url('/i/eg_bg_03.gif');
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position: 30% 20%;  /*如果是用像素来定位，替换成"50px 100px"即可*/
    }
    </style>
    </head>
    <body>
    <p><b>注释：</b>为了在 Mozilla 中实现此效果，background-attachment 属性必须设置为 "fixed"。</p>
    </body>
    </html>

  • 设置背景图片不跟随页面其他部分滚动

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <html>
    <head>
    <style type="text/css">
    body 
    {
    background-image:url(/i/eg_bg_02.gif);
    background-repeat:no-repeat;
    background-attachment:fixed /*其实有个attachment属性的fixed值就可以了*/
    }
    </style>
    </head>
    <body>
    <p>图像不会随页面的其余部分滚动。</p>
    <p>图像不会随页面的其余部分滚动。</p>
    <p>图像不会随页面的其余部分滚动。</p>
    <p>图像不会随页面的其余部分滚动。</p>
    <p>图像不会随页面的其余部分滚动。</p>
    <p>图像不会随页面的其余部分滚动。</p>
    <p>图像不会随页面的其余部分滚动。</p>
    <p>图像不会随页面的其余部分滚动。</p>
    <p>图像不会随页面的其余部分滚动。</p>
    <p>图像不会随页面的其余部分滚动。</p>
    <p>图像不会随页面的其余部分滚动。</p>
    <p>图像不会随页面的其余部分滚动。</p>
    <p>图像不会随页面的其余部分滚动。</p>
    <p>图像不会随页面的其余部分滚动。</p>
    <p>图像不会随页面的其余部分滚动。</p>
    <p>图像不会随页面的其余部分滚动。</p>
    <p>图像不会随页面的其余部分滚动。</p>
    <p>图像不会随页面的其余部分滚动。</p>
    <p>图像不会随页面的其余部分滚动。</p>
    <p>图像不会随页面的其余部分滚动。</p>
    <p>图像不会随页面的其余部分滚动。</p>
    <p>图像不会随页面的其余部分滚动。</p>
    <p>图像不会随页面的其余部分滚动。</p>
    <p>图像不会随页面的其余部分滚动。</p>
    </body>
    </html>

  • 所有背景属性在一个声明中 /啊，这个我喜欢/

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <html>
    <head>
    <style type="text/css">
    body {
    	background: #ff0000 url("/i/ed_bg_03.gif") no-repeat fixed center;	
    	}
    </style>
    </head>
    <body>
    <p>这是一些文本。</p>
    <p>这是一些文本。</p>
    <p>这是一些文本。</p>
    <p>这是一些文本。</p>
    <p>这是一些文本。</p>
    <p>这是一些文本。</p>
    <p>这是一些文本。</p>
    <p>这是一些文本。</p>
    <p>这是一些文本。</p>
    <p>这是一些文本。</p>
    <p>这是一些文本。</p>
    <p>这是一些文本。</p>
    <p>这是一些文本。</p>
    <p>这是一些文本。</p>
    <p>这是一些文本。</p>
    <p>这是一些文本。</p>
    <p>这是一些文本。</p>
    <p>这是一些文本。</p>
    <p>这是一些文本。</p>
    <p>这是一些文本。</p>
    <p>这是一些文本。</p>
    <p>这是一些文本。</p>
    <p>这是一些文本。</p>
    <p>这是一些文本。</p>
    </body>
    </html>