CSS(层叠样式表)

**

iframe**

iframe是HTML标签,作用是文档中的文档,或者浮动的框架。iframe 元素会创建包含另外一个文档的内联框架。

<body>
	<iframe src="http://www.baidu.com" frameborder="1" width="800" height="500">
	</iframe>
</body>

iframe可以设置宽width和高height

CSS(层叠样式表)

1.CSS的概念及其介绍
CSS 指层叠样式表 (Cascading Style Sheets)
作用:美化HTML结构,重点:CSS可以很好的将结构内容和表现进行分离.
外部CSS文件更大的提高工作效力

2.CSS嵌入页面的方式
(1)内联样式:是指通过style属性 将样式属性写入到标签之中
color 设置文字的颜色,如: color:red;
font-size 设置文字的大小,如:font-size:12px;
font-family 设置文字的字体,如:font-family:‘微软雅黑’;
line-height 设置文字的行高,如:line-height:24px; (文本的垂直居中)
text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉 (overline上划线,underline下划线)
text-indent 设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进 24px
text-align 设置文字水平对齐方式,如 text-align:center 设置文字水平居中
块元素: 在网页中标签占据一行显示,这类型的元素称之为块元素p/h1
内联元素: 在网页中不会占据一行显示, 默认本身不能设置宽高, 其大小是由标签的内容决定.a标签

(2)内嵌样式:通过style标签将样式嵌入到head中
网页中最常用使用div布局
Div元素/标签:本身没有大小,但可以设置其大小,背景,等
1.标签选择器:是指标签通过元素的标签名字,来选中元素,从而设置属性

<a href="#" style="background-color: chocolate; 
 		font-family: '楷体'; 
 		font-size: 50px; 
 		text-decoration: none; 
 		border-style: solid; 
 		border-color: darkgreen; 
 		border-width: 10px; 
 		color: crimson; ">超链接</a>

2.id选择器:

<head>
  	<meta charset="UTF-8">
  	<title></title>
  	<style type="text/css">
  		a {
  			text-decoration: none;
  			font-family: "仿宋";
  			color: chocolate;
  			border-style: solid;
  			border-color: blue;
  			border-width: 5px;
  			font-size: 30px;
  			background-color: cornflowerblue;
  		}
  		</style>
  </head>

  <body bgcolor="azure">
  	<a href="#">超链接1</a>
  	<br />
  	<a href="#">超链接2</a>
  	<br />
  	<a href="#">超链接3</a>
  	<br />
  	<a href="#">超链接4</a>
  	</body>

3.类(class)选择器:

<head>
  	<meta charset="UTF-8">
  	<title></title>
  	<style>
  		div{
  			width: 300px;
  			height: 300px;
  		}
  		#div1{
  			border-style: solid;
  			border-color: chocolate;
  			border-width: 3px;
  			font-family: "新宋体";
  			font-size: 30px;
  			color: brown;
  		}
  		.div2{
  			border-style: dashed;
  			border-color: darkkhaki;
  			border-width: 5px;
  		}
  		.div02{
  			font-family: "仿宋";
  			font-size: 50px;
  			color: chartreuse;
  		}
  		.div3{
  			border-style: solid;
  			border-color: darkslateblue;
  			border-width: 7px;
  		}
  		#div4{
  			border: dashed 9px red;
  			font-family: "黑体";
  			font-size: 70px;
  			color: darkred;
  		}
  		</style>
  </head>
  <body>
  	<div id="div1">一二三四</div>
  	<div class="div2 div02">二二三四</div>
  	<div class="div3 div02">三二三四</div>
  	<div id="div4">四二三四</div>
  	</body>

4.后代选择器:

<div class="div5">
			<div>
				<ul>
					<li>
						<a href="#">一二三四</a>
					</li>
					<li>
						<a href="#">二二三四</a>
					</li>
					<li>
						<a href="#">三二三四</a>
					</li>
					<li>
						<a href="#">四二三四</a>
					</li>
				</ul>
			</div>
	</div>
.div5 {
  border: green 3px dashed;
  background-color: cornsilk;
  width: 300px;
  height: 200px;
  }

5.子代选择器:

<div class="div5">
  		<div>
  			<ul>
  				<li>
  					<a href="#">一二三四</a>
  				</li>
  				<li>
  					<a href="#">二二三四</a>
  				</li>
  				<li>
  					<a href="#">三二三四</a>
  				</li>
  				<li>
  					<a href="#">四二三四</a>
  				</li>
  			</ul>
  		</div>
  </div>
.div5>div>ul {
	border: 3px burlywood solid;
	background-color: mintcream;
}

6.组合选择器:

      <h1 id="h1">标题1</h1>
  	<p class="p1">段落</p>
  	<h2 id="h2">标题2</h2>
#h1,.p1,#h2 {
	font-family: "新宋体";
	font-size: 25px;
	color: cadetblue;
}

7.伪类选择器:

<a href="#" id="a3">超链接</a>

鼠标滑过链接

#a3:hover {
	color: cyan;
	font-size: 30px;
}

未访问链接

#a3:link {
	color: #7FFF00;
}

已选中的链接

#a3:active {
	color: #BDB76B;
}

已访问的链接

#a3:visited {
	color: #9932CC;
}

8.伪元素选择器:

<div class="div6">
			啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
		</div>

首行

.div6:first-line {
	font-size: 20px;
}

第一个字符

.div6:first-letter {
	font-size: 30px;
	font-family: "新宋体";
	color: dodgerblue;
}

之前插入内容

.div6:before {
	content: "123";
}

之后插入内容

.div6:after {
	content: "321";
}

(3)外联样式:通过link标签引入外部的css文件夹中css文件到head标签中。

<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/new_file.css" />
	</head>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值