CSS:CSS介绍 & CSS与HTML结合方式

1 什么是CSS?

 

 

 CSS是指层叠样式表 cascading style sheets。

 通过CSS可以让我们定义HTML元素如何显示。

 CSS可以让我们原本HTML不能描述的效果,通过CSS描述出来。

 通过CSS描述我们的html页面,可以让我们的页面更加漂亮,可以提高工作效率。

 

2 CSS与HTML结合方式

第一种方式 内联/行内样式

就是在我们的HTML标签上通过style属性来引用CSS代码。

  优点:简单方便 ;

  缺点:只能对一个标签进行修饰。

 

 

 

第二种方式 内部样式表

我们通过<style>标签来声明我们的CSS. 通常<style>标签我们推荐写在head和body之间,也就是“脖子”的位置。
  优点:可以通过多个标签进行统一的样式设置
  缺点: 它只能在本页面上进行修饰
  语法: 选择器 {属性:值;属性:值}

 

 

 

 

第三种方式 外部样式表

我们需要单独定义一个CSS文件,注意CSS文件的后缀名就是.css

在项目根目录下,创建css目录,在css目录中创建css文件 css01.css

在<head>中使用标签引用外部的css文件

 

还可以使用另一种引入css文件的方式:

<style>
@import 'css/css01.css'
</style>

 

 

关于外部导入css使用与@import的区别?

1. 加载顺序不同 

  @import方式导入会先加载html,然后才导入css样式,那么如果网络条件不好,就会先看到没有 修饰的页面,然后才看到修饰后的页面

  如果使用link方式,它会先加载样式表,也就是说,我们看到的直接就是修饰的页面

 

2. @import方式导入css样式,它是不支持javascript的动态修改的。而link支持

 

三种样式表的优先级:满足就近原则

内联 > 内部 > 外部

 

posted @ 2021-08-09 20:09  Jasper2003  阅读(356)  评论(0编辑  收藏  举报