HTML+CSS详细介绍（全）

最新推荐文章于 2024-03-27 10:41:56 发布

Debug_EDM

最新推荐文章于 2024-03-27 10:41:56 发布

阅读量2.4k

点赞数 1

分类专栏： HTML+CSS 面试题文章标签： html css java

本文链接：https://blog.csdn.net/debugEDM/article/details/107807426

版权

课程内容

HTML框架标签

常见的框

  	<frameset rows="20%,*" noresize = "noresize">
   <frame src="../index.html" name="top" />
     	<frameset cols="25%,*">
     		<frame src="http://www.baidu.com" name="left"/>
     		<frame src="https://weibo.com/" name="right"/>
    	</frameset>
  </frameset>

框架的概述：

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

使用框架的坏处：

开发人员必须同时跟踪更多的HTML文档
很难打印整张页面

框架标签的构成：

frameset -> frame

Frameset : 主要用于设置窗口的布局方式。

框架结构标签（）定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积

对于框架标签Frameset用cols和rows来设置每个框架所占的宽度和高度，在设置值时，多个窗口的值可以用所占百分比或者是窗口宽度的像素px来指定，多个值用逗号分隔，通常最后一个用*来自适应。

对于框架标签的子标签是frame：该标签的作用是设置每个窗口显示显示的页面文件地址，通过src属性来设置。

注意：如果要让框架设置窗口禁止拖放，在frameset 标签中加属性noresize = "noresize"

frame 标签的name属性设置该窗的名字，可以和a标签的target属性联合使用设置在框架中的超链接在指定的相同名称的框架窗口打开。

重要提示：不能将<body></body> 标签与<frameset></frameset> 标签同时使用！

DIV+css

div:

DIV 是division的缩写，可以认为他是一个图层，div本身没有大小也没有样式。如果需要给div设置样式，此时就需要依赖css,通过css可以精确的控制div，来进行页面的布局，或者页面的样式。

CSS概述

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 [2]

css的作用：主要用来美化html页面的，设置页面的样式的。

Css的三种引入方式

对于css的引入方式主要有：

行内式
内部式
外部式

行内式：

是将css样式通过html标签的style属性写在html标签的里面作为style属性的值。

语法格式： <标签 style=“样式属性1：属性值1；样式属性2：属性值2；…”></标签>

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>行内式</title>
	</head>
	<body>
		<div style="width: 300px; height: 200px; background-color: red;"></div>
	</body>
</html>

行内式的不足 : 将css和html 写在一起不利于样式和标签本身相分离，会降低页面的可读性、也不利于维护。通常在测试时使用行内式，其他的场景很少使用。

内部式：

在html文件中通过style标签，将css样式通过选择器找到对应标签设置标签的样式的方式。样式是放在style标签内。

<style>
    选择器{
    
        样式名1：样式值1；
         样式名2：样式值2；
         样式名3：样式值3；
         。。。。。。
    }
</style>

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内部式</title>
		<style>
			div{
    
				width: 400px;
				height: 200px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div></div>
		<hr />
		<div></div>
	</body>
</html>

不足：将css写入html文件，不利于样式和html相分离，同样不利于后期页面的维护。

优势：

相比较行内式，使用内部式，可以一次给多个标签设置样式；
可以不用跳转其他文件就可设置html的样式，比较直观，操作简便。

注意：内部式的style标签可以有多个，且可以放在任何位置，但是通常放在head标签内。

外部式：

单独的创建一个css文件，将样式写到css文件中，然后在html页面通过link标签的href属性来引入外部的css文件。

语法：

<link href="css文件地址" type="text/css" rel="stylesheet" ></link>

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内部式</title>
		<!-- rel 是引入样式的名字 href是引入外部样式的地址 type 设置引入文件的类型 -->
		<link rel="stylesheet" href="../css/div.css" type="text/css"/>
	</head> 
	<body>
		<div></div>
		<hr />
		<div></div>
	</body>
</html>

优势：

符合样式和html相分离的特点。
一个css文件可以在多个html中进行引入，有利于共享，减少重复。

不足：

操作的复杂度提升，增加开发难度。

三种引入方式的生效的优先级（面试）：

对于css的三种引入方式的优先级的遵循的原则是就近原则；

行内式 > 内部式 > 外部式（那个在后运行那个生效）。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
    
				width: 200px;
				height: 300px;
				background-color: red;
			}
		</style>
		
		<link rel="stylesheet" href="../css/div.css" />
	</head>
	<body>
		<div style="background: green;">
			
		</div>
	</body>
</html>

css文件：
div{
	width: 300px;
	height: 100px;
	background-color: greenyellow;
}v

三种引入方式的作用范围大小（面试）：

外部式 > 内部式 > 行内式。

CSS的语法规则

对于css的语法规则主要有两种写法：

第一种：

选择器{
   

属性名1: 属性值；
属性名2: 属性值2；  
.....
}

第二种写法：

选择器{属性名1: 属性值1；属性名2: 属性值2；…}

选择器

选择器是用来选中设置样式的标签的属性值，或者是标签名等、或者是属性值和标签名的组合。

css常见的选择器

ID选择器

使用html标签的通用属性id的值来选择标签，格式为：#id值

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ID选择器</title>
		<style>
			#di{
     /* id选择器*/
				width: 200px;
				height: 100px;
				background-color: #0000FF;
			}
		</style>
	</head>
	<body>
		<div id="di"></div>
	</body>
</html>

特点：设置样式的标签是唯一的，只能设置指定id值的标签。

类选择器

通过标签的通用属性class来选择一类标签。格式： .类值

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>class选择器</title>
		<style>
			.test{
    
				color: red;
				font-size: 30px;
				width: 300px;
				height: 100px;

最低0.47元/天解锁文章

Debug_EDM

关注

1
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS详细介绍（全）

课程内容HTML框架标签常见的框 <frameset rows="20%,*" noresize = "noresize"> <frame src="../index.html" name="top" /> <frameset cols="25%,*"> <frame src="http://www.baidu.com" name="left"/> <frame src="https://wei
复制链接

扫一扫