HTML+CSS开发（四）CSS控制

最新推荐文章于 2024-08-19 18:33:44 发布

weixin_33729196

最新推荐文章于 2024-08-19 18:33:44 发布

阅读量92

点赞数

文章标签：人工智能

原文链接：https://my.oschina.net/kun123/blog/920504

版权

为什么80%的码农都做不了架构师？>>>

一 CSS样式

1.背景

CSS 背景属性：

属性	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

<!DOCTYPE html>
<html>
<head>
	<title>CSS背景</title>
	<meta charset="utf-8">
	<style type="text/css">
		.div1{height: 300px;
			background-image: url(attachment.gif);
			background-attachment: fixed;
			background-color: red;
			background-repeat: repeat;
			background-position: center;

		}
	</style>
	<body>
		<div class="div1"></div>
	</body>
</html>

background-image可以取值：

值	描述
color_name	规定颜色值为颜色名称的背景颜色（比如 red）。
hex_number	规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
rgb_number	规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
transparent	默认。背景颜色为透明。
inherit	规定应该从父元素继承 background-color 属性的设置。

background-attachment可以取值：

值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承 background-attachment 属性的设置。

background-imag可以取值：

值	描述
url('URL')	指向图像的路径。
none	默认值。不显示背景图像。
inherit	规定应该从父元素继承 background-image 属性的设置。

background-repeat可以取值：

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

background-position可以取值：

值	描述
top left top center top right center left center center center right bottom left bottom center bottom right	如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。
x% y%	第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。

值

描述

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

如果您仅规定了一个关键词，那么第二个值将是"center"。

默认值：0% 0%。

x% y%

第一个值是水平位置，第二个值是垂直位置。

左上角是 0% 0%。右下角是 100% 100%。

如果您仅规定了一个值，另一个值将是 50%。

xpos ypos

第一个值是水平位置，第二个值是垂直位置。

左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。

如果您仅规定了一个值，另一个值将是50%。

您可以混合使用 % 和 position 值。

2.文本

3.字体

4.链接

5.列表

6.表格

7.轮廓

参考css手册

二 CSS定位

1.position:static定位

遵循HTML定位规则，位置正常显示。

2.position:relative定位

相对于正常显示的位置，偏移指定距离；如下，向右偏移30px。

<!DOCTYPE html>
<html>
<head>
	<title>CSS定位</title>
	<meta charset="utf-8">
	<style type="text/css">
		#span1{
			width: 200px;
			height: 200px;
			background: red;
			position: relative;
			right: 30px;
		}

	</style>
	<body>
		<span id="span1">span1</span>
	</body>
</html>

3.position:absolute定位

将元素脱离文档流，通过left，bottom，top，right等属性相对其包含块进行绝对定位；下例div1为包含块

<!DOCTYPE html>
<html>
<head>
	<title>CSS定位</title>
	<meta charset="utf-8">
	<style type="text/css">
		#div1 {
			height: 20px;
			background: green;
		}
		#span1{
			width: 200px;
			height: 200px;
			background: red;
			position: absolute;
			right: 30px;
		}

	</style>
	<body>
		<div id="div1">
			<span id="span1">span1</span>
		</div>	
	</body>
</html>

4.position:fixed定位

类似absolute定位，但其包含块是视窗。

5.float定位

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现的像浮动框不存在一样。

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 float 属性的值。

参考：float定位

三 CSS选择器

1.元素选择器

文档的元素即为选择器。

<!DOCTYPE html>
<html>
<head>
	<title>CSS选择器</title>
	<meta charset="utf-8">
	<style type="text/css">
		div {
			height: 20px;
			background: green;
		}

	</style>
	<body>
		<div>元素选择器</div>	
	</body>
</html>

2.类选择器

<!DOCTYPE html>
<html>
<head>
	<title>CSS选择器</title>
	<meta charset="utf-8">
	<style type="text/css">
		.div1 {
			height: 20px;
			background: green;
		}

	</style>
	<body>
		<div class="div1">类选择器</div>	
	</body>
</html>

3.id选择器

<!DOCTYPE html>
<html>
<head>
	<title>CSS选择器</title>
	<meta charset="utf-8">
	<style type="text/css">
		#div1 {
			height: 20px;
			background: green;
		}

	</style>
	<body>
		<div id="div1">类选择器</div>	
	</body>
</html>

4.属性选择器

<!DOCTYPE html>
<html>
<head>
	<title>CSS选择器</title>
	<meta charset="utf-8">
	<style type="text/css">
		[attr] {
			height: 20px;
			background: green;
		}

	</style>
	<body>
		<div id="div1" attr="属性选择器">属性选择器</div>	
	</body>
</html>

注：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

5.派生选择器

通过元素所在位置，定义选择器。

1.子元素选择器

<!DOCTYPE html>
<html>
<head>
	<title>CSS选择器</title>
	<meta charset="utf-8">
	<style type="text/css">
		#div1 > p {
			background: red;
		}
	</style>
	<body>
		<div id="div1">
				<p>子元素</p>
			<div>
				<p>后代元素</p>
			</div>
		</div>
	</body>
</html>

2.后代元素选择器

<!DOCTYPE html>
<html>
<head>
	<title>CSS选择器</title>
	<meta charset="utf-8">
	<style type="text/css">
		#div1 p {
			background: red;
		}
	</style>
	<body>
		<div id="div1">
				<p>子元素</p>
			<div>
				<p>后代元素</p>
			</div>
		</div>
	</body>
</html>

3.相邻兄弟选择器

可以选择紧接在另一个元素后的元素，且二者拥有共同的父元素。

<!DOCTYPE html>
<html>
<head>
	<title>CSS选择器</title>
	<meta charset="utf-8">
	<style type="text/css">
		#div1 div + p {
			background: red;
		}
	</style>
	<body>
		<div id="div1">
			<div>
				<p>后代元素</p>
			</div>
			<p>兄弟元素</p>
		</div>
	</body>
</html>

6.选择器分组

要求h2元素和p段落都是灰色：

h2, p {color:gray;}

7.通配符选择器

<!DOCTYPE html>
<html>
<head>
	<title>CSS选择器</title>
	<meta charset="utf-8">
	<style type="text/css">
		*#important{background: red;}
	</style>
	<body>
		<h1 id="important">通配选择器</h1>
		<p id="important">通配选择器</p>
		<p id="p1">通配选择器</p>
	</body>
</html>

8.伪类

用于向选择器中添加特殊效果。

W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。

属性	描述	CSS
:active	向被激活的元素添加样式。	1
:focus	向拥有键盘输入焦点的元素添加样式。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的链接添加样式。	1
:visited	向已被访问的链接添加样式。	1
:first-child	向元素的第一个子元素添加样式。	2
:lang	向带有指定 lang 属性的元素添加样式。	2

<!DOCTYPE html>
<html>
<head>
	<title>CSS选择器</title>
	<meta charset="utf-8">
	<style type="text/css">
		a:link {color: #FF0000}
		a:visited {color: #00FF00}
		a:hover {color: #FF00FF}
		a:active {color: #0000FF}
	</style>
	<body>
		<a href="about:blank">伪元素</a>
	</body>
</html>

注：a:hover必须位于a:link和a:visited之后才有效；a:active必须位于a:hover之后才有效；伪类对大小写不敏感。

9 伪元素

向某些选择器添加样式。

W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。

属性	描述	CSS
:first-letter	向文本的第一个字母添加特殊样式。	1
:first-line	向文本的首行添加特殊样式。	1
:before	在元素之前添加内容。	2
:after	在元素之后添加内容。	2

<!DOCTYPE html>
<html>
<head>
	<title>CSS选择器</title>
	<meta charset="utf-8">
	<style type="text/css">
		#p1:first-line {background: red;}
		#p3:first-letter {color:orange;}
		#p3:before {content: '插入before '}
		#p3:after {content: ' 插入after'}
	</style>
	<body>
		<div>
			<p id="p1">测试first-line</p>
			<p id="p3">测试first-letter</p>
		</div>
	</body>
</html>

四高级应用

1.对齐

1.使用margin对齐元素

把左和右外边距设置为 auto，规定的是均等地分配可用的外边距：

<!DOCTYPE html>
<html>
<head>
	<title>CSS对齐</title>
	<meta charset="utf-8">
	<style type="text/css">
		.div1{
			width: 70%;
			text-align: center;
			margin:auto;
		}
	</style>
	<body>
		<div class="div1">使用margin居中对齐</div>
	</body>
</html>

2.使用position对齐元素

<!DOCTYPE html>
<html>
<head>
	<title>CSS对齐</title>
	<meta charset="utf-8">
	<style type="text/css">
		.div1{
			text-align: center;
			position: absolute;
			width: 50%;
			margin-left: 25%;
			background-color: red;
		}
	</style>
	<body>
		<div class="div1">使用margin居中对齐</div>
	</body>
</html>

3.使用float对齐元素

<!DOCTYPE html>
<html>
<head>
	<title>CSS对齐</title>
	<meta charset="utf-8">
	<style type="text/css">
		.div1{
			text-align: center;
			width: 50%;
			float: right;
			background-color: red;
		}
	</style>
	<body>
		<div class="div1">使用margin居中对齐</div>
	</body>
</html>

2.分类属性

属性	描述
clear	设置一个元素的侧面是否允许其他的浮动元素。
cursor	规定当指向某元素之上时显示的指针类型。
display	设置是否及如何显示元素。
float	定义元素在哪个方向浮动。
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
visibility	设置元素是否可见或不可见。