为什么需要样式表？
1、HTML标签的外观样式比较单一
2、样式表可以美化网页，使页面更漂亮
3、样式表可以在多个页面中共享使用，提高工作效率
4、样式表能实现内容与样式的分离，方便团队开发
CSS基本语法：
一、<div>标签
<!--下面是div标签，只需要对div标签的控制就可以改变div标签内的其他标签-->
<div>
<h1>TEST</h1>
</div>
二、样式规则：
选择器{ 属性:属性值;}
p{
font-size:12px; <!--设置p元素的字体大小-->
font-family:"隶书"; <!--设置p元素的字体-->
}
三、样式表的基本结构：
<style type = "text/css">
p{
color:#ff0000;
font-size:24px;
font-family:"隶书";
}
</style>
四、选择器的分类：
1、标签选择器
2、类选择器
3、id选择器
<!--标签选择器-->
h1{
color: red;
}
<!--类选择器-->
<html>
<head>
<style type = "text/css">
.green{
color:#00f00;
font-family:"宋体";
}
</style>
</head>
<body>
</body>
</html>
<!--id选择器-->
<html>
<head>
<style type = "text/css">
#blue{
color:#0000ff;
font-family:"宋体";
}
</style>
</head>
<body>
<p id = "blue">低头思故乡
</body>
</html>
五、选择器的集体声明
<html>
<head>
<style type = "text/css">
h1,#two,.red{
color:#ff0000;
font-size:14px;
}
h2,h3{
color:#0000ff;
font-size:16px;
text-decoration:underline; <!--下划线-->
}
</style>
</head>
<body>
<h1>静夜思</h1>
<h2>床前明月光,</h2>
<p class ="red">疑是地上霜.</p>
<h3>举头望明月，</h3>
<p id ="two">低头思故乡。</p>
</body>
</html>
分享到：
相关推荐
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
【标题】中的“尚硅谷前端入门html+css零基础教程”指的是一个由尚硅谷教育机构提供的，面向初学者的前端开发课程，主要涵盖了HTML（超文本标记语言）和CSS（层叠样式表）的基础知识。这个教程是为那些对前端开发...
通过笔记和实例的实践，你可以逐步理解并掌握这些概念，从而从零开始建立起前端开发的能力。 在实际应用中，前端开发者通常会将HTML、CSS和JavaScript结合使用，构建功能丰富且美观的网页。例如，可以使用HTML创建...
尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】 本文适合前端菜鸟食用，小编自己整理的李立超老师视频的笔记，手打不易，那就望您每年快乐吧。逃） 一、进制 1.十进制（日常使用）： 特点：满10进1 计数：0 1 ...
本资源【html+css+js学习笔记.zip】是一个全面的前端开发学习资料包，旨在帮助初学者从零开始掌握HTML、CSS和JavaScript的基础知识。通过详尽的代码实例和知识点解释，学习者可以逐步搭建起坚实的Web开发基础。HTML...
总的来说，这个"CSS零基础入门视频课程"将引导初学者逐步探索CSS的世界，从最基础的概念到实用的技术，通过实际操作和理论学习相结合，让学习者具备创建美观、功能完备的网页样式的能力。记住，持续练习和实践是掌握...
Blueprint CSS Framework 是一个高效且实用的前端开发工具，旨在简化CSS编码过程，提高开发效率。这个框架提供了标准化的CSS规则，帮助开发者快速构建响应式和易于维护的网页设计。以下是对Blueprint CSS Framework...
这份文件是一份针对零基础学习者的前端学习笔记，主要围绕HTML（HyperText Markup Language，超文本标记语言）的基础知识进行了详尽的介绍。HTML是构成网页内容的基础，通过使用各种标签（TAGs）来定义不同的内容...
这个压缩包文件包含了一系列关于计算机软件编程学习的资源，特别是关注HTML、CSS、Linux和PHP这四个关键领域的知识。以下是对这些主题的详细说明： 1. **HTML**（HyperText Markup Language）：HTML是构建网页的...
本资源包含了 HTML、CSS 和 JavaScript 的详细学习笔记，适合初学者从零开始学习前端技术，同时也可作为有一定基础的开发者提升技能的参考资料。无论你是想入门还是进阶，这份学习笔记都能为你提供全面的指导和帮助...
本教程旨在帮助零基础的学员从头开始学习这两种关键技术，并通过实际项目加深理解。 HTML（HyperText Markup Language）是用于创建网页内容的标准标记语言。在"初识HTML"章节中，你将学习到HTML的基本概念，包括： ...
在IT行业中，网页设计是至关重要的一个领域，而`div+css`是构建现代网页布局的基础。本章节《杰诺Jero-学习笔记》之div+css 第二章，主要聚焦于利用HTML和CSS来创建网页布局，尤其强调了`div`元素与CSS样式的应用。...
这份“十几万字前端学习笔记.pdf”文件中的内容，涵盖了前端开发的核心知识点，主要围绕HTML、CSS、JavaScript等基础技术，以及现代前端技术栈中的工具和框架，如Vue.js和Webpack。此外，还涉及了一些前端工程实践...
根据pink老师的课程做的学习笔记 学习HTML、CSS以及HTML5 CSS3新增的属性、看完这篇文章你就学会了
本教程“HTML笔记,html零基础入门视频课程”是为初学者设计的一套系统学习资源，旨在帮助新手快速掌握HTML的基本概念和实际应用。 一、HTML基本结构 HTML文档由一系列的元素组成，这些元素通过标签来定义。每个HTML...
因此，我们将基于标题来构建一份假设性的IT零基础入门课程笔记的主要知识点概览。 ### IT零基础入门课程笔记 #### 一、计算机基础知识 1. **计算机硬件介绍**： - CPU（中央处理器） - 内存（RAM） - 存储设备...
零基础开始学习前端，HTML和CSS
零基础开始学习web，HTML和CSS
"模板"标签表明这是一个预设的设计框架，用户可以在此基础上快速构建自己的网站，无需从零开始设计。通常，这样的模板会包含完整的HTML结构和CSS样式，甚至JavaScript功能，以实现特定的交互效果。 【文件名称列表...