每日分享：
不跟风
不要盲目追随，越是信息泛滥，越要保持清醒。
目录：
- css 的介绍
- css 的引入方式
- css 的选择器
层叠样式表，它是用来美化页面的一种语言
2. css的作用：- 美化界面，比如：设置标签文字大小、颜色、字体加粗等样式
- 控制页面布局，比如：设置浮动、定位样式
选择器{
样式规则
}
样式规则：
属性名1：属性值1
属性名2：属性值2
……
选择器：是用来选择标签的，选出来之后给标签添加样式
例：
div{
width:100px;
height:100px;
}
说明：
css是由两个主要的部分构成：选择器和一条或多条样式规则
4. 小结- css是层叠样式表，它是用来美化网页和控制页面布局的
- 定义css的语法格式是：选择器{样式规则}
css有三种引入方式：
- 行内式
- 内嵌式（内部样式）
- 外链式
直接在标签的style属性中添加css样式
例：
优点：方便、直观。
缺点：缺乏可重用性
2. 内嵌式（内部样式）在标签内加入标签，在标签中编写css代码
例：
h3{
color:red;
}
优点：在同一个页面内部便于复用和维护
缺点：在多个页面之间的可重用性不够高
3. 外链式将css代码写在一个单独的.css文件中，在标签中使用标签直接引入该文件到页面中
例：
优点：使得css样式与html页面分离，便于整个页面系统的规划和维护，可重用性高
缺点：css代码由于分离到单独的css文件，容易出现css代码过于集中，若维护不当则极易造成混乱
4. css引入方式的选择- 行内式几乎不用
- 一般用内嵌式和外链式
- css的引入有三种方式，分别是行内式、内嵌式、外链式
- 外链式在开发的时候会经常使用，最能体现div+css标签内容与显示样式分离的思想，也容易改版维护，代码看起来也是最美观的
css选择器是用来选择标签的，选出来之后给标签加样式
2. css选择器的种类- 标签选择器
- 类选择器
- 层级选择器（后代选择器）
- id选择器
- 组选择器
- 伪类选择器
根据标签来选择标签，以标签开头，这种选择器影响范围大，一般用来做一些通用设置
p{
color: red;
}
hello
4. 类选择器根据类名来选择标签，以 . 开头，一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器，多个类选择器需要使用空格分割，应用灵活，可复用，是css中应用最多的一种选择器
例：
.blue{color:blue}
.big{font-size:20px}
.box{width:100px;height:100px;background:gold}
这是一个div
这是一个标题
这是一个段落
根据层级关系选择后代标签，以选择器1 选择器2开头，主要应用在标签嵌套的结构中，减少命名
例：
div p{
color: red;
}
.con{width:300px;height:80px;background:green}
.con span{color:red}
.con .pink{color:pink}
.con .gold{color:gold}
hello
哈哈
百度
谷歌
你好
新浪注意：
层级关系不仅仅是父子关系，也可以是祖孙关系
6. id选择器根据id选择标签，以#开头，元素的id名称不能重复，所以id选择器只能应用于页面上的一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器
例：
#box{color:red}
这是一个段落标签
这是第二个段落标签
这是第三个段落标签
注意：
虽然给其他标签设置id=“box”也可以设置样式，但是不推荐，因为id是唯一的，以后js通过id只能获取一个唯一的标签对象
7. 组选择器根据组合选择器选择不同的标签，以，分割开，如果有公共的样式设置，可以使用组选择器
例：
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
这是第一个div
这是第二个div
这是第三个div用于向选择器添加特殊的效果，以：分割开，当用户和网站交互的时候改变显示效果可以使用伪类选择器
例：
.box1{width:100px;height:100px;background:gold;}
.box1:hover{width:300px;}
这是第一个div- css 选择器就是用来选择标签设置样式的
- 常用的css 选择器有6种：
- 标签选择器
- 类选择器
- 层级选择器（后代选择器）
- id选择器
- 组选择器
- 伪类选择器
