前端----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>

效果如下：

大家举例的时候不要以京东为例，如果以京东为例就会发生跳转到另一个页面，我猜测应该是京东的页面会有一个新的GET请求，请读者牢记

前端----CSS嵌套方式，选择器，iframe相关推荐

二：前端css，即选择器
前端css: 1,css 的引入方式 2,css中选择器 1.基本选择器: /*标签选择器*/ /*类标签选择器,.类属性值重点知识*/ /*id选择器,#+id值,#id的值,不是id,重点知识* ...
CSS 导入方式选择器
一:基本了解 1.CSS,Cascading Style Sheet 层叠级联样式表 2.优势: 使得网页内容和表现样式分离使得网页结构表现形式统一,可以实现复用二:HTML中四种CSS导入方式 ...
前端css样式及选择器
标题: 1.scc概述 2.行内样式 3.内接样式 4.外接样式(链接式) 推荐使用 5.外接样式(导入式) 6.嵌套规则 7.css选择器 1.scc(Cascading Style Shee ...
html四种选择器的特点,css四种选择器总结
css 在网页开发中扮演着重要的角色,被誉为网页开发的三剑客,如果说html是人的外在器官部分,那css无疑是各个器官组成在一起然后表现出来,css又称样式重叠在网页排版布局中的地位举足轻重. 做为后 ...
黑马程序员前端-CSS背景：颜色、图片、平铺、背景图片位置、背景图像
前端学习笔记教程不定期更新中,传送门: 前端HTML第一天:什么是网页?什么是HTML?网页怎么形成? 黑马程序员前端-CSS入门总结黑马程序员前端-CSS之emmet语法黑马程序员前端-CSS的 ...
Java小白修炼手册--第三阶段--WebBasic( Web前端)--CSS
目录 WebBasic 网页编程基础 CSS: 引入方式: 选择器: 颜色赋值背景图片文本和字体相关元素显示方式display 圆角盒子模型 CSS的三大特性定位方式: 行内元素的垂直对齐 ...
黑马程序员前端-CSS练手之学成在线页面制作
前端学习笔记教程不定期更新中,传送门: 前端HTML第一天:什么是网页?什么是HTML?网页怎么形成? 黑马程序员前端-CSS入门总结黑马程序员前端-CSS之emmet语法黑马程序员前端-CSS的 ...
前端基础-CSS的各种选择器的特点以及CSS的三大特性
一. 基本选择器二. 后代选择器.子元素选择器三. 兄弟选择器四. 交集选择器与并集选择器五. 序列选择器六. 属性选择器七. 伪类选择器八. 伪元素选择器九. CSS三大特性一. ...
【前端学习笔记】(三)（CSS基础、选择器、字体和文本样式）
目录一.基础认知 1.1 CSS介绍 1.2 CSS语法规则 1.3 CSS常见属性 1.4 CSS引入方式 1.5 CSS常见三种引入方式的区别二.基础选择器 1.标签选择器 2.类选择器 3. ...

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

前端----CSS嵌套方式，选择器，iframe相关推荐

最新文章

热门文章