CSS入门

CSS入门

HTML中CSS的几种引入方式

1.内联引入
在元素上加属性style，格式如下：

缺点：
与HTML混合在一起，代码不美观
内联样式一次，只能对一个标签起作用，如果有多个相同属性样式，需要重复写很多
可维护性差
可复用性差

2.内嵌引入
在head中写style标签，style标签中写CSS内容，格式如下：

缺点：
可复用性差
维护性一般
与HTML混在一起，不美观
3. 外部引入
将CSS样式内容独立为.css文件，在HTML中通过link标签引入

好处：
将CSS与HTML独立出来，代码整洁
可复用性高
可维护性高
4. 导入
@import 导入文件， 不推荐使用，使用方式：

+ 引入方式的优先级
link与style内嵌同时存在，采用“就近原则”，后写的会将先写的覆盖掉内联的优先级要高于内嵌跟外部引入
+ @import与link的区别
link是HTML标签，@import只能在CSS中使用
link会在网页加载时同时加载，而@import需要网页完全载入才能加载
link无兼容问题，@import 是CSS2.1以后加入的，兼容性一般
link可以使用JS脚本控制，而@import不可以

选择器

1.标签选择器

2.class选择器
给元素添加class属性，然后在css中.class名{属性：属性}值}
class命名：多个单词的时候： word1-word2

3.ID选择器
给元素添加ID属性，在css中通过#id名{}设置样式。
一般不要用ID作为选择器，因为优先级比较高。

• 选择器的优先级
  !important>#id选择器>.class选择器>标签选择器>*

关系选择器

1.后代选择器（空格）

2.子级选择器（>）