前端----CSS嵌套方式，选择器，iframe

115 阅读 0 评论 76 点赞

我是靠谱客的博主爱笑水壶，最近开发中收集的这篇文章主要介绍前端----CSS嵌套方式，选择器，iframe，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.CSS的三种嵌套方式（其实是四种，但是有2种是一样的效果）

CSS（Cascading Style Sheet－ “层叠样式表”或“级联样式单” ）
       制作网页时采用CSS技术，可以有效地对页面布局、字体、颜色、背景和其它效果实现更加精确的控制，
       可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
	“Cascading” 即在同一个Web文档中可以有多个样式表存在，根据所在的位置，拥有不同的优先级。优先级越高，就会被最后在显示时采用。
	从样式表插入的形式来看可以分为三种：
	1、内联式样式表：
       利用现有的HTML标记把特殊的样式加入到那些由标记控制的信息中。

	2、嵌入式样式表：

  	 嵌入到HTML文件的头部中去（<html>和<body>标记之间），使用<Style>…</Style>容器装载，例如：
	<style> p {color : blue ; font-weight : bold} </style>
  	  对页面中所有<p>标记都起作用。 

	3、外部式样式表：
       一种保存在外部的样式表文件，外部文件以.CSS为扩展名，例如:
    <link rel=stylesheet href="main-  sheet.css" type="text/css">

2.CSS选择器

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute\|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute=value*]	匹配属性值中包含指定值的每个元素。

下面是我写的例子：

/**demo.css**/
/*页面 分3类 固定宽度页面  流式页面  响应式页面  border:1px  solid black; 边框  margin: 100px auto;               居中 4个值：顺时针方向    margin:200px auto;  外边距   padding:10px;   内边距*/
/* 谁的规则越复杂，谁的优先级越高*/
/*E[ID]属性选择器*/
/* (.) 点是class选择器*/
/* #是id选择器*/
*{
      margin:0;
      padding:0;	  
}
/*html{
	margin:0;
	padding:0;
	font-size:16px;
	color:#000;
}*/
/*div{
	width:600px;
	height:600px;
	border:1px solid black
}
*/
/*
.demo_box{
	 width:1000px;
	 height:500px;
	 border:1px  solid black; 
	 margin: 100px auto;             
	 background:black;
	 color :#fff;
}
.chlid_box{
	width:100px;
	height:200px;
	border:1px dashed red;
	margin:200px auto;  
	padding:10px;   
	text-align: center;
}
.demo_box.chlid_box.demo_img{
	width:5px;
	height:5px;
	
}
*/
/*
div[id]{
	font-size : 4em;
	
}
*/
/*#demo{
	font-size : 4em;
}*/
/*
ul>div{
	font-size:2em;
}
*/
/*.item_box:before{
	font-size: 4em;
	content: url('#');
	
}
*/
/*li:hover{
	font-size: 2em;
}*/

.content_left{
   width: 19%;
   height: 500px;
   float: left;
   border: 1px solid #000;
   
}
.content_right{
	width:69%;
	height: 500px;
	float: left;
	border: 1px solid #000;
}

.demo_iframe{
	width:100%;
}

3.iframe的使用

Html5中的新特性

属性	值	描述
align	left right top middle bottom	不赞成使用。请使用样式代替。规定如何根据周围的元素来对齐此框架。
frameborder	1 0	规定是否显示框架周围的边框。
height	pixels %	规定 iframe 的高度。
longdesc	URL	规定一个页面，该页面包含了有关 iframe 的较长描述。
marginheight	pixels	定义 iframe 的顶部和底部的边距。
marginwidth	pixels	定义 iframe 的左侧和右侧的边距。
name	frame_name	规定 iframe 的名称。
sandbox	"" allow-forms allow-same-origin allow-scripts allow-top-navigation	启用一系列对 <iframe> 中内容的额外限制。
scrolling	yes no auto	规定是否在 iframe 中显示滚动条。
seamless	seamless	规定 <iframe> 看上去像是包含文档的一部分。
src	URL	规定在 iframe 中显示的文档的 URL。
srcdoc	HTML_code	规定在 <iframe> 中显示的页面的 HTML 内容。
width	pixels %	定义 iframe 的宽度。

下面是我写的例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link type="text/css" rel="stylesheet" href="demo.css">
	</head>
	<body>
		  
                     <!--
                     	<><frameset> 
                     	作者：offline
                     	时间：2018-07-09
                     	描述：不能放iframe 在frameset中
                     	 <frame></frame>	
		</frameset>
		<iframe></iframe>
                     -->
		 
		<div class="content_left">
<ul>
	       <li>
			<a href="http://taobao.com" target="demo_iframe">淘宝</a>
			</li>
			<li>
			<a href="http://www.w3school.com.cn" target="demo_iframe">W3</a>
			</li>
			<li>
            <a href ="http://www.baidu.com" target="demo_iframe">百度</a>
			</li>
</ul>
</div>
        <div class="content_right">
        	<iframe src ="http://www.baidu.com" name="demo_iframe"  class='demo_iframe' height="500" frameborder=0 />
        </div>

	</body>
</html>

效果如下：