博客列表 >链接与内联标签关联-css三种样式使用-盒子模型-2019年07月03日23时30分

链接与内联标签关联-css三种样式使用-盒子模型-2019年07月03日23时30分

无名氏_连的博客
无名氏_连的博客原创
2019年07月04日 00:42:08780浏览

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<title>7月3号作业</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/0703.css">
	<style>
		.blue{color: blue;}
	</style>
</head>
<body>

	<!-- 一、内联标签与a标签绑定 -->
	<a href="0702.html" target="zuoye02">0702作业</a>
	<iframe src="" name="zuoye02" frameborder="1" width="700px" height="300px"></iframe><hr>

	<!-- 二、css的内联、内部、外部样式使用例子 -->

	<!-- 1、内联样式 -->
	<p style="color: red;">红色</p>

	<!-- 2、内部样式	 -->
	<p class="blue">蓝色</p>

	<!-- 3、外部样式 -->
	<p id="yellow">黄色</p>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

以上代码知识点总结:

一、内联标签 iframe

    在页面使用<iframe>标签添加属性src="网址或文档"显示窗口内容,同时可以添加属性frameborder(边框)、width(宽)、height(高)进行设置,当iframe属性name值与a标签的属性tarset值一致时形成关联,点击a链接时则能在iframe窗口显示其内容。

二、CSS样式

    1、内联样式:在标签内添加style属性,并在引号内添加所需的属性样式。例:<a style="color:red;font-size:30px;">链接</a>

    2、内部样式:在head头部添加<style>标签内,使用选择器在style标签内对其样式属性进行设置。例:<head><style> p{color:pink;font-size:30px;} </style></head>

    3、外部样式:在head头部添加<link>标签进行css文件关联,其属性rel需是rel="stylesheet",属性type需是type="text/css",属性href对应css的文件名

    当使用内联样式时style只是标签内的一个属性,当使用内部样式时style是一个双标签元素。

    4、css样式执行顺序:内联>内部>外部,一切遵从就近原则;

        选择器顺序:ID>class;

三、盒子模型

    1、每个元素都是盒子模型

    2、每个盒子都是由content(内容)、margin(外边距)、border(边框)、padding(内边距)组成。

    3、盒子模型的结构:content在盒子中心位置,border将padding与margin分割,border与content之间的空间距离是padding,border外部是margin;padding与margin是透明状态,故margin无法显示实际空间距离。

    4、边框的样式:border-top(上边框线)、border-bottom(下边框线)、border-left(左边框线)、border-right(右边框线);边框的简写方法:border:边框宽度 线条(实线:solid) 颜色,例border:1px solid bule;

    5、外边距、内边距简写顺序:上右下左;例:margin:10px(上) 20px(右) 30px(下) 40px(左);补充:当简写只写两个值的顺序是上下 左右;例margin:10px(上下) 20px(左右)。


0703.png


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