Can
Be Better

CSS相关

又要写CSS了,看来还是摆脱不了。然后继续总结一下CSS相关的某些内容。

一、选择器

1.集体声明

h1, h2, h3, h4, h5, p{			/* 集体声明 */
	color:purple;				/* 文字颜色 */
	font-size:15px;				/* 字体大小 */
}
h2.special, .special, #one{		/* 集体声明 */
	text-decoration:underline;	/* 下划线 */
}

2.选择器的嵌套

p b{							/* 嵌套声明 */
	color:maroon;				/* 颜色 */
	text-decoration:underline;	/* 下划线 */
}

二、CSS的继承

1.父子关系

h1{
	color:red;					/* 颜色 */
	text-decoration:underline;	/* 下划线 */
}
h1 em{							/* 嵌套选择器 */
	color:blue;				/* 颜色 */
	font-size:40px;				/* 字体大小 */
}

2.继承的运用

.li1{
	color:red;
}
.li2{
	color:blue;
}
.li1 ol li{						/* 利用CSS继承关系 */
	font-weight:bold;			/* 粗体 */
	text-decoration:underline;	/* 下划线 */
}
<body>
	<ul>
		<li class="li1">关系1
			<ul>
				<li>页面父子关系复杂时</li>
				<li>页面父子关系复杂时</li>
				<li>这里省略20个嵌套...</li>
			</ul>
			<ol>
				<li>页面父子关系复杂时</li>
				<li>页面父子关系复杂时</li>
				<li>这里省略20个嵌套...</li>
			</ol>
		</li>
		<li class="li2">关系2
			<ul>
				<li>页面父子关系复杂时</li>
				<li>页面父子关系复杂时</li>
				<li>这里省略20个嵌套...</li>
			</ul>
			<ol>
				<li>页面父子关系复杂时</li>
				<li>页面父子关系复杂时</li>
				<li>这里省略20个嵌套...</li>
			</ol>
		</li>
	</ul>

三、Margin与Padding

 

四、图片相关

1.边框

2.大小

img.test1{
	width:50%;		/* 相对宽度 */
}

3.对齐方式

	<tr><td style="text-align:left;"><img src="building.jpg"></td></tr>
	<tr><td style="text-align:center;"><img src="building.jpg"></td></tr>
	<tr><td style="text-align:right;"><img src="building.jpg"></td></tr>
	<p>竖直对齐<img src="donkey.jpg" style="vertical-align:baseline;">方式:baseline<img src="miki.jpg" style="vertical-align:baseline;">方式</p>
	<p>竖直对齐<img src="donkey.jpg" style="vertical-align:bottom;">方式:bottom<img src="miki.jpg" style="vertical-align:bottom;">方式</p>
	<p>竖直对齐<img src="donkey.jpg" style="vertical-align:middle;">方式:middle<img src="miki.jpg" style="vertical-align:middle;">方式</p>
	<p>竖直对齐<img src="donkey.jpg" style="vertical-align:sub;">方式:sub<img src="miki.jpg" style="vertical-align:sub;">方式</p>
	<p>竖直对齐<img src="donkey.jpg" style="vertical-align:super;">方式:super<img src="miki.jpg" style="vertical-align:super;">方式</p>
	<p>竖直对齐<img src="donkey.jpg" style="vertical-align:text-bottom;">方式:text-bottom<img src="miki.jpg" style="vertical-align:text-bottom;">方式</p>
	<p>竖直对齐<img src="donkey.jpg" style="vertical-align:text-top;">方式:text-top<img src="miki.jpg" style="vertical-align:text-top;">方式</p>
	<p>竖直对齐<img src="donkey.jpg" style="vertical-align:top">方式:top<img src="miki.jpg" style="vertical-align:top">方式</p>

五、背景相关

六、表格与表单

七、页面和浏览器元素

八、实用菜单

九、CSS与DIV定位

1.DIV盒子模型

其中就有Padding与Margin

区别就是每一个黄色块的距离是Margin 黄色块内的内容与border的距离是Padding

2.float定位

2.1 clear float

<html>
<head>
<title>float属性 clear</title>
<style type="text/css">
<!--
body{
	margin:5px;
	font-family:Arial;
	font-size:13px;
}
.block1{
	padding-left:10px;
	margin-right:10px;
	float:left;					/* 块1向左浮动 */
}
.block2{
	padding-right:10px;
	margin-left:10px;
	float:right;				/* 块2向右浮动 */
}
h3{
	background-color:#a5d1ff;	/* 标题的背景色 */
	border:1px dotted #222222;	/* 标题边框 */
	clear:both;					/* 清除两端的float影响 */
}
-->
</style>
   </head>
<body>
	<div class="block1"><img src="building2.jpg" border="0"></div>
	<div>对于一个网页设计者来说,HTML语言一定不会感到陌生,因为它是所有网页制作的基础。但是如果希望网页能够美观、大方,并且升级方便,维护轻松,那么仅仅HTML是不够的,CSS在这中间扮演着重要的角色。<br><br></div>
	<div class="block2"><img src="building3.jpg" border="0"></div>
	<div>CSS的引入随即引发了网页设计的一个又一个新高潮,使用CSS设计的优秀页面层出不穷。本章从CSS的基本概念出发,介绍CSS语言的特点,以及如何在网页中引入CSS,并对CSS进行初步的体验。</div>
	<h3>CSS的概念</h3>
	<div>CSS(Cascading Style Sheet),中文译为层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。</div>
</body>
</html>

3.Z-index

 

未经允许不得转载:最长的路 » CSS相关

相关推荐

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址