Day03 Css基础1
一、Css基础知识
什么是css？
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML
或XML（标准通用标记语言的一个子集）。等文件样式的计算机语言。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素
进行格式化。
层叠样式表 --- 核心关键词
- 样式表：负责美化
- 层叠：样式不会被干掉而只会被覆盖
二、Css的使用方式
Css有三种使用方式。分别是在标签中使用Style属性、使用Style标签和建立一个.Css文件。
<!-- 使用css第一种方式 在标签中使用"style属性" -->
<!-- color:red ;改变字体颜色 -->
<h1 style="color:red;">Hello,World</h1>
<!-- css第二种使用方式 使用"style标签" -->
<style>
/*css注释*/
/*css选择器 */
p {
color: blue;
}
</style>
<!--第三种方式直接建立css文件后直接在文件中写css语句 -->
三、Css选择器
Css有三种选择器，分别是html标签选择器，class选择器和id选择器。这三种选择器均有各自的优缺点，在编写代码时需综合情况合理选择适合的选择器。
三种选择器的语法如下所示：
<style>
/*html标签选择器 ，直接选择html标签，他可以作用于文件中所有相同的标签，也因为这个他不够精确。*/
p {
color: red;
}
h6 {
color: blue;
}
/*id选择器，此时id名为d1，作用于唯一的id*/
#d1 {
color: green;
}
/*class选择器*/
/*class可以重复使用，多个class之间用空格隔开，此时class名为e1。作用于相同class的标签*/
.e1 {
color: blue;
}
</style>
当三种选择器发生冲突时，我们遵循的原则是：
谁更精确就听谁的。
如：
<style>
/*谁更精确就听谁的*/
div {
color: blue;
}
#test {
color: green;
}
.d1 {
color: red;
}
</style>
在html body内有一个p标签：
<body>
<p class="d1" id="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</body>
大家可以先预测一下之后运行代码核实一下。
四、通配符
通配符使用星号*表示，意思是“所有的”。他会选择页面中所有标签。
<style>
* {
/*通配符 选择网页中的所有标签*/
color: red;
}
</style>
五、div&Span标签
div和span都是无意义标签。
<div>标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
<div>标签常用于组合块级元素，以便通过 CSS来对这些元素进行格式化。主要是用来切割。
<span> 用于对文档中的行内元素进行组合。
<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。主要是针对于跨度。
通常用这两个标签来对网页进行模块划分。
<div>我是div标签</div>
<span>我是span标签</span>