HTML学习笔记（三）css选择器

一、css的引入方式

1. 内联样式：
   内联样式表就是把css代码直接写在现有的HTML标签中
   缺点：样式与结构冗余
   优点：优先级较高

<div style="color:red">设置文字的颜色为红色</div>

样式的内容写在元素的开始标签里，并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。

这种样式只会对当前标签起作用，在测试的时候可以使用，不能对样式进行复用，不方便后期维护，不推荐使用

2. 内部样式表

缺点：样式的复用率较低
优点：样式与结构分离

<style type="text/css">    
  p{        
    color:red;        
    background-color:yellow;    
  }
</style>

将样式表编写到head中的style标签中
使用内部样式表，进一步将表现和结构分离，可以同时为多个元素设置样式，方便后期的维护

注意点:

• style标签要写在head标签的开始标签和结束标签之间(也就是和title标签是兄弟关系)

• style标签中的type属性其实可以不用写, 默认就是type=“text/css”

• 设置样式时必须按照固定的格式来设置. key: value;其中:不能省略, 分号大多数情况下也不能省略

3. 外部样式表
   （1）优点：样式与结构分离，解耦；样式的复用率高（框架:例如bootstrap）， 共用，定义好的css文件可以应用到多个页面中。
   将样式表编写到外部的CSS文件中，然后通过link标签将外部文件引入

<link rel="stylesheet" type="text/css" href="文件的路径"/>

将样式编写到外部样式表中，可以在不同的页面中使用同一个样式表，完全将表现和结构分离，方便后期的维护，推荐使用的方式
（2）@import url()，还可通过import方式导入CSS文件

@import引入方式会先加载html，再加载css；当网络环境较差时，会出导致页面效果较差的现象，所以该方式不建议使用；

<style>
	/*要写在style标签的最前面，否则不会生效 或者直接在外部css文件中直接使用*/
  @import url('./style.css');
</style>

4. 优先级
   行内样式>内部样式/外部引入

就近原则：哪一种设置方式距离元素最近，谁的优先级更高；

二、css选择器

1. 标签选择器

• 当前界面中所有标签都会被选中，不能被单独选择
• 藏得多深都会被选中
• 只要是html中的标签就可以做为标签选择器

标签名称{
	属性：值；
}