博客列表 >03 CSS基础

03 CSS基础

如水庵邸
如水庵邸原创
2019年09月05日 17:23:24513浏览

1、iframe内联标签的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>经销商管理系统</title>	
	</head>
	<body>
		<h2>经销商管理系统</h2>
		 <ul style="float:left">
		  <li><a href="jxsgl.html" target="main">经销商管理</a></li>
		  <li><a href="cpgl.html" target="main">产品管理</a></li>
		  <li><a href="ddgl.html" target="main">订单管理</a></li>
		 </ul>
		<iframe src="main.html" frameborder="1" width="400" height="300" name="main" style="float:left"></iframe>
	</body>
</html>

在后台管理系统中就会用到iframe标签,头部和左侧导航栏包括底部都是不变的,点击左侧导航栏的链接的时候在右侧框中就会显示相应的页面。


2、HTML5中的语义化标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>语义化标签的页面结构</title>	
	</head>
	<body>
	  <header>头部</header>
		  <nav>导航</nav>
		  <main>主体
		    <article>文章
			 <section>内容</section>
			</article>
		    <aside>边栏</aside>   
		  </main>
	 <footer>底部</footer>  	
	</body>
</html>

语义化的标签对搜索引擎很友好。

3、CSS样式的优先级

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS优先级</title>
		<!--外部样式-->
		<link rel="stylesheet" href="static/css/css1.css"/>
		<!--内部样式-->
		<style>
			P{color: blue;}
		</style>
	</head>
	<body>
		<!--内联样式-->
		<p style="color:red;">内联样式优先级最高</p>
		<p>内部样式优先级低于内联样式</p>
		<p>外部样式优先级最低</p>
	</body>
</html>

外部样式用link标签引入,例如<link rel="stylesheet" href="static/css/css1.css"/>;

内部样式用<style>标签写在html文档的头部,作用于当前文档。

内联样式用style=“”写在其他标签里面。

CSS优先级是内联样式>内部样式>外部样式。

4、CSS的选择器使用规则

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS选择器</title>
		<style>
			/*ID选择器*/
			#andy{
				color: red;
				}
			/*Class选择器*/
			.betty {
				color: green;
				}
			/*标签选择器*/
			p{
				color:blue;
				}
		</style>
	</head>
	<body>
		<p id="andy">id选择器级别最高</p>
		<p class="betty">类选择器级别次之</p>
		<p> 标签选择器级别最低</p>
	</body>
</html>

CSS中id选择器以#开头,可以选择一个元素;类选择器以.开头,可以选择一批元素;标签选择器则对所有该标签的元素都起作用。其优先级为id选择器最高,类选择器次之,标签选择器最低。

5、盒模型5大元素

一切皆是盒子。所有的元素都可以看作是盒子,除了类似br、hr这样的标签之外,能放内容的标签都可以看作盒子。

以下是一个抽象的盒子模型

cssmodel.jpg

一个盒子从内到外依次是content(内容),padding(内边距),border(边框),margin(外边距)。可以把盒子理解为一个包装盒,最里面的是物品(content),物品外面加了层泡沫保护(padding),然后放到了包装盒里(border),盒子之间的间隙就是margin。

盒子是块级元素,独占一行,支持宽度设置。

盒子可以设置6个属性:

(1) width: 宽度(水平方向)

(2) height: 高度(垂直方向)

(3)background-color: 背景 (默认透明)

(4)padding: 内边距, 内容与边框之间的填充区域

(5)border:  边框, 位于内外边距之间, 是可见元素,允许设置宽度, 样式和颜色

(6)margin: 外边距,决定当前盒子与其它盒子之间的位置与关系

根据属性的可见性可以分为二类:

(1) 可见的: width, height, border,其中border可以设置粗细,线型和颜色。

(2) 透明的: background, padding, margin,其中padding和margin只能设置宽度,不能设置高度和颜色。

在写属性值的时候,是按上右左下的顺序来排列的,也就是顺时针顺序,例如:

border-width:10px 20px 30px 40px;

表示上边框是10px,右边框是20px,下边框是30px,左边框是40px。

也可以进行简写,例如:

padding:10px 20px 30px;

表示上内边距是10px,左右内边距都是20px,下内边距是30px;

或者:

margin:10px 20px;

表示上下外边距是10px,左右外边距是20px。

总之第二个数字必定包含了右侧的属性值。

一个简单的实例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/style2.css">
    <title>盒模型</title>
<style>
.box1{
width:400px;
height:300px;
border:2px solid black;
background-color: aquamarine;
padding: 20px 10px;
}
.box2{
width:inherit;
height:inherit;
background-color: brown;
border-top:5px dashed red;
border-right:10px dotted green;
border-bottom: 5px double blue;
padding:10px;
}
</style>
</head>
<body>


<div>
    <div></div>
</div>


</body>

运行出来的效果是这样的

box1.png

box1的样子

box2.png

box2的宽度和高度都继承了box1,所以分别是400和300

2box.png

页面效果是这样的。

总结:

虽然这5个属性很简单,但是写起来很容易出错,特别是盒子套盒子。设置了padding之后,好像上和左是优先执行的,所以就会出现如上图的情况,因为box2继承了box1的宽和高,所以被box1的padding设置给向下向右挤了。还得多练习,多调试才行。




声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议