CSS概述

什么是css?

css全称是Cascading Style Sheet的缩写,层叠样式表,是对html进行样式修饰语言。多个不同的样式修饰同一个html时,样式冲突的部分会使用优先级高的样式,不冲突的部分共同修饰

css的作用

  • 可以让html变的更加炫酷
  • 便于后期维护,html的内容与样式相分离
  • 提高代码的复用性,同一个样式可以应用于多个html中

CSS代码需要嵌入在html中,没有 HTML 代码,CSS代码是无效的。

css的引入方式

1.内嵌样式,不建议使用
把css的代码嵌入到html标签中

<div style="color:red;font-size: 100px;">你是百年难遇的编程奇才</div>

语法:
style="样式名 1:样式值 1; 样式名 2:样式值 2;"

2.内部样式,内容多的情况下不建议使用
在head标签中使用style标签进行css的引入

<style type="text/css">
    div{color:red;font-size: 100px;}
</style>

使用style标签进行css的引入,在style标签中编写css

    <style type="text/css">

type:告知浏览器使用css解析器去解析

3.链入外部样式,建议使用
将css样式在一个单独css文件编写,可以被html引用,下面代码引入名为style.css的文件

<link rel="stylesheet" type="text/css" href="style.css"/>

将html和css分离,可以提高css的复用,利于后期维护

4.@import方式,不建议使用

<style type="text/css">
    @import url("css地址");
</style>

link与@import方式的区别:

  • link所有浏览器都支持 import部分低版本IE不支持
  • import方式是等待html加载完毕之后在加载
  • import方式不支持js的动态修改