css教程2——什么是css

1.1什么是CSS

        Cascading Style Sheet 层叠级联样式表

        CSS：表现（美化网页）

        字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动...

        下面举例如何查看网页的CSS：

1.打开网上中“开发人员工具”

2.以上便是HTML和CSS的代码 

 1.2CSS发展史

        CSS1.0

        CSS2.0  DIV(块)+CSS，HTML和CSS的分离思想，网页变得简单，SEO

        CSS2.1  浮动，定位

        CSS3.0  圆角，阴影，动画...  浏览器兼容性

1.3快速入门 

        CSS编译器推荐：IntelliJ IDEA 

        style基本样式：

但是不太建议这种样式，建议使用以下的样式： 

1. 新建一个stylesheet文件

         

2. 将原有style删除，把style里的内容添加到新建的stylesheet文件里，同时用上

<link rel="stylesheet" href="css/style.css">表示在HTML文档中引入了一个外部样式表文件，文件路径为"css/style.css"。

• rel 是 HTML 中的一个属性，用于定义与链接文档之间的关系
• href 是 HTML 中的一个属性，用于指定链接的目标地址

就像这样！！！ 

css的优势：

1. 内容和表现分离
2. 网页结构表现统一，可以实现复用
3. 样式十分的丰富
4. 建议使用独立于html的css文件
5. 利用SEO，容易被搜索引擎收录！

1.4，css的3种导入方式 

1.内部样式 

例如：

<style>
  h1{
    color:green;
  }
</style>

2.外部样式

例如：新建一个style文件（外部样式），利用link连接style

3.行内样式

例如：

<h1 style="color: red">我是标题</h1>

3种导入方式优先级：就近原则！！！ 谁离标题内容（我是标题）最近就是谁。例如上图里”我是标题“最近的是行内样式，所以最后效果会表现为行内样式效果，即为红色。

    下图为表现效果：

扩展：外部样式两种写法

1.链接式 ：

html

例如；<!--外部样式-->
<link rel="stylesheet" href="style.css">

2.导入式：

@import是css2.1特有的

例如：<!--导入式-->
<style>
    @import url("style.css");
</style>

二者区别：

• Link 是 HTML 中的标签，@import 是 CSS 中的规则。
• Link 用于引入外部样式表文件，@import 也是用于引入外部样式表文件。
• Link 必须出现在文档的 head 部分，@import 可以出现在 CSS 文件的任何位置。
• 通过 Link 引入的样式表文件会在页面加载时同时加载，而通过 @import 引入的样式表文件会在页面加载完成后加载