前言

哈喽同学们大家好，本节我们开始学习html5基础部分------CSS基础知识

作为基础章节，本节内容较为零散，灵活运用多加练习即可掌握。

思维导图

引入方式

css样式引用方法有三种，分别是内部，外部，内联。其中涉及到各选择器的优先级问题需要同学们灵活掌握。

以下代码为三种引入方式：

其中重点优先级问题：内联样式>内部>外部

权重比较公式：内联样式（1000）> id选择器（100）> class 选择器(10) > tag 选择器（1）

注意：权重相同情况下，后来者居上（谁在后面谁的优先级大）

常见样式

背景

结合代码自己练习即可

文本

效果图：

代码段：

<style>
h1 {/* color: red *//* color: rgba(255,255,255,1) */color: #ff0000;/* rgb: red green blue web三原色 *//* 像素点由4个值构成，red green blue alpha */}h2 {/* 字体大小 */font-size: 40px;/* 字体粗细  */font-weight: 100;/* 字体样式 */font-family: 'STSong','Microsoft YaHei','KaiTi';}p {height: 40px;line-height: 40px;background-color: pink;text-align: center;}/* 行高 默认是字体大小的1.2倍数 *//* 字体是相对于行高来居中的，当不给高度的时候，是行高撑开了高度 */div {background-color: skyblue;text-indent: 32px;/* 字体间距 */letter-spacing: 20px}a {/* 文本描述线 */text-decoration: none;}span {display: block;height: 30px;background-color: red;/* 英文大小写 */text-transform: capitalize;/* vertical-align: bottom; *//* 空白符 *//* pre 保留格式 *//* wrap 换行 */white-space: wrap;}h1, h2, p, span {/* 群组选择器 */color: gold}body>p {/* 子代选择器 */font-size: 26px;color: purple;}
</style>

<body><h1>西游记</h1><h2>人与自然和谐相处</h2><p>女儿国</p><div>鸳鸯双栖蝶双飞，满园春色惹人醉。鸳鸯双栖蝶双飞，满园春色惹人醉。鸳鸯双栖蝶双飞，满园春色惹人醉。鸳鸯双栖蝶双飞，满园春色惹人醉。鸳鸯双栖蝶双飞，满园春色惹人醉。鸳鸯双栖蝶双飞，满园春色惹人醉。</div><a href="http://www.jd.com">淘宝</a><br><span>good      GOOD study!good      GOOD study!good      GOOD study!</span><br><p>asdf   asdfasdf</p><div><p>123123</p><p>456456</p></div>
</body>

图文组合: