CSS（层叠样式表）

最新推荐文章于 2024-01-09 20:49:39 发布

王大瑜

最新推荐文章于 2024-01-09 20:49:39 发布

阅读量220

点赞数 1

本文链接：https://blog.csdn.net/WangY321/article/details/88041157

版权

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
评论
CSS（层叠样式表）

**iframe**iframe是HTML标签，作用是文档中的文档，或者浮动的框架。iframe 元素会创建包含另外一个文档的内联框架。&lt;body&gt; &lt;iframe src="http://www.baidu.com" frameborder="1" width="800" height="500"&gt; &lt;/iframe&gt;&lt
复制链接

扫一扫