html中怎么用typeScript HTML中怎么用css

转载

mob6454cc6d3e23 2023-09-06 12:19:35

文章标签 html中怎么用typeScript CSS html css 文章分类 TypeScript 前端开发

.html

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
	<h2>h2 tag</h2>
	<div class="class1">class1</div>
	<div class="class2">class2</div>
	<div id="main">
		<h2>h2 in main</h2>
	</div>
</body>
</html>

如何在 HTML 中应用 CSS

我们可以通过三种方式对 HTML 的内容作修饰。

index.css)。

<link rel="stylesheet" type="text/css" href="index.css">

第二种是在 HTML 文件头中嵌入 CSS 样式。

<style type="text/css">
	h2{font-size: 100px;}
</style>

第三种是直接写入标签中。

<div style="font-size:20px">Font-Size</div>

综合起来，HTML 可以是这样的 (选择一种方法即可)。鉴于方便修改的缘故，通常选择第一种方法。

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="index.css">
	<style type="text/css">
		h2{font-size: 100px;}
	</style>
</head>
<body>
	<h2>h2 tag</h2>
	<div style="font-size:20px">Font-Size</div>
</body>
</html>

如何选择要修饰的内容

修饰某一个或多个标签、标签内容有三种方式：直接通过标签名修饰、通过唯一的 ID 修饰、通过 class 修饰。首先，考虑修饰单一的标签、ID 和 class。

h2{font-size:100px;}            /* 通过标签 */
.class1{font-size:50px;}       /* 通过 class */
#main{background:gray;}        /* 通过 ID */

/* 内部元素以;分开，结尾可以不用; */

并列修饰(修饰多个)。

.class1,.class2,h2,div{font-size:100px;}

demo.html

#main h2{color: #980000;} /* main id 下的 h2 标签 */
div h2{color: #980000;}   /  * div 下的 h2 标签 */

对于嵌套的情况，可以是嵌套多层的、隔层的，并且可以标签名、ID、class 并用。

进阶：CSS样式的组织

对要实现的效果都胸有成竹之后，更多的考虑在于如何组织CSS。这里的组织指的是CSS的嵌套和分解，通过良好的组织达到较好的可读性和可维护性。这可以通过学习其他框架来提高这种组织的能力，比如 Bootstrap。通过学习Bootstrap至少可以让人发现两个值得关注的地方：元素的共性和特性的分解；元素嵌套关系的组织。

class 来修饰元素，其次是标签名。class