为什么需要样式表？
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+DIV笔记让您更快进入网页编程的世界。 -------------------------------------------------------------
根据pink老师的课程做的学习笔记 学习HTML、CSS以及HTML5 CSS3新增的属性、看完这篇文章你就学会了
java内容介绍 java编程可以分成三个方向： 1、java se (j2se)桌面开发 java中的基础中的基础 2、java ee (j2ee)web开发 3、java me (j2me)手机开发 ...1995 sun正式发布java第一个版本，目前最新是jdk7.0
零基础开始学习前端，HTML和CSS
零基础开始学习web，HTML和CSS
该资源包含“淘宝商城首页_开发项目（静态）”的...若想要理解项目中的重难点，请参考我的博客中的《HTML+CSS零基础学习笔记（五）— 模拟淘宝首页（静态）》一文。总结自《渡一教育_2020权威HTML+CSS零基础入学》。
课程中使用的所有英文单词都会逐一查询并记录，真正做到零基础入门学习，最适合初学者的教程，让你少走弯路！课程内容包括：1.CSS简介2.CSS基本用法3.选择器4.常用CSS属性5.盒子模型6.定位方式7.其他CSS属性8.页面...
│ │ └笔记.doc │ ├ │ │ ├[思库教育]第25集 斐波纳挈数列.mp4 │ │ └[思库教育]第26集 数组的遍历.avi │ ├ │ │ ├[思库教育]第27集 猴子吃桃.avi │ │ ├[思库教育]第28集 杨辉三角.avi │ │ ├[思库...
前端HTML，CSS，Sass JavaScript 解决freeCodeCamp和HackerRank挑战JavaScript算法 React体验一下React：构建您的第一个ToDo应用并将其托管在GitHub Pages上从零到英雄：React基础知识课程2020-FreeCodeCamp 移动的 ...
本套视频为传智2018web前端开发全套视频教程基础班+就业班，视频+源码+案例笔记，全套高清不加密~2018最新传智播客视频！...本套课程，特别适合零基础者进行系统学习前端！ 下载地址：txt文档中网盘链接
本套视频为传智2018web前端开发全套视频教程基础班+就业班，视频+源码+案例笔记，全套高清不加密~2018最新传智播客视频！...本套课程，特别适合零基础者进行系统学习前端！ 下载地址：txt文档网盘
课程中使用的所有英文单词都会逐一查询并记录，真正做到零基础入门学习，适合初学者的教程！课程内容包括：1.HTML简介、文档结构2.Sublime的使用3.常用标签4.超链接、表格、表单5.内嵌框架iframe6.HTML5简介、新特性...
本资源采用html5 css3 js 技术，使网页中由于多粒子在不断跳动，形成一个爱心，零基础小白可查看源代码进行学习，当然，也可以下载对自己的女神表白，话不多说，快来下载吧！！！！！
leetcode 530 每周算法 HTML CSS Javascript 前端构建工具 小游戏 框架 数据库 学习笔记 ...个人独白，记录学习经验，希望能改掉自己学完就扔的老毛病。...CSS ...从零搭建webpack配置系列 ...vue基础 ...学习笔记
个人学习笔记与博文 Menu Tools Plugin css-plugin js-plugin react-plugin python-plugin Framework css-ui-framework react-ui-framework Notes JavaScript Python html & css 前端工程 NodeJS 基础 Express KOA ...