开发者社区> linux_drv> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

如何在 HTML 中应用 CSS基础详解

简介:
+关注继续查看


接下来用这个 index.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至少可以让人发现两个值得关注的地方:元素的共性和特性的分解;元素嵌套关系的组织。

另外,为了保持与HTML尽量分离,通常是用元素的 class 来修饰元素,其次是标签名。class 里面样式的并列体现了样式的“分解”。

其他

  1. CSS 中用 /* */ 作为注释标记
  2. 修饰语句通过分号隔开 h2{font-size:100px;color:red;}
  3. 查看 HTML 内容的 CSS 修饰:在浏览器中右键选择检查元素,可以实现查看、修改、添加
  4. Firefox 提供了 3D 查看效果来查看 HTML 的层结构
  5. 由于浏览器解析不同,需要考虑 CSS 样式的兼容性,为多个浏览器适配
  6. 考虑 CSS 之间是否会存在冲突。比如,通过标签设置为一种颜色,但是在另外的地方又通过 ID 设置为另外一种颜色。这可能使得修饰达不到预期的效果。
  7. CSS 样式的精简。通过适当的分解 CSS,通过并列嵌套等修饰内容,减少冗余的 CSS。
  8. CSS 一方面可以实现基本的对内容的修饰,也可以实现与用户的交互响应。
  9. 一个标签中的多个 class 通过空格来分开,比如 <div class="class1 class2></div>"
  10. 子选择器 body > div > div > blockquote{ margin-left: 30px; }
  11. 兄弟选择器 .post h1 + p:first-line{ font-variant: small-caps; }.post h1 ~ p{...}
  12. 属性选择器 div[class*="post"]{color: #EEE;}input[type="text"]{width=200px;}
  13. 伪元素 ul li:first-child{...}ul li:nth-child(2n+1){...}.clearfix:after{clear:both;},a:active{...}p:first-letter{...}.post > p:first-of-type:first-line{...},input:not([type="submit"]){...}, …。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
HTML5应用框架-Lavaca介绍
Lavaca是一个全功能的HTML5应用框架,专注于快速、简便的构建Web应用。Lavaca是一个完整的构建系统,内建了配置以适应于不同的环境。随着构建系统打包HTML、CSS和JavaScript,还有一个JavaScript文档生成根据,一个单元测试框架和数个通用的JavaScript库。
635 0
HTML5应用框架-Lavaca介绍
版权声明:本文为博主chszs的原创文章,未经博主允许不得转载。 https://blog.csdn.net/chszs/article/details/8498780 HTML5应用框架-Lavaca介绍 作者:chszs,转载需注明。
580 0
《HTML 5+CSS 3入门经典》——导读
本书按照学习HTML和CSS的最佳结构来分配章节,共分为4篇20章,其中,前三篇可以使读者掌握HTML 和CSS的编程知识,第四篇可以使读者学习实现一个由HTML 5+CSS 3 组成的静态网站的开发过程。
867 0
《HTML 5+CSS 3入门经典》——第3章 你很重要——HTML 5 中的表单
本节书摘来自华章计算机《HTML 5+CSS 3入门经典》一书中的第3章,作者:管媛辉 潘凯华著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
918 0
《HTML 5+CSS 3入门经典》——3.5 小结
本节书摘来自华章计算机《HTML 5+CSS 3入门经典》一书中的第3章,第3.5节,作者:管媛辉 潘凯华著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
937 0
《HTML 5+CSS 3入门经典》——2.5 小结
本节书摘来自华章计算机《HTML 5+CSS 3入门经典》一书中的第2章,第2.5节,作者:管媛辉 潘凯华著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
905 0
《HTML 5+CSS 3入门经典》——2.4 上机实践
本节书摘来自华章计算机《HTML 5+CSS 3入门经典》一书中的第2章,第2.4节,作者:管媛辉 潘凯华著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1058 0
+关注
201
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载