表现标准语言CSS3学习入门+导入方式

如何学习：

css是什么
css怎么用(快速入门)
css选择器（重点+难点）
美化网页（文字、阴影、超链接、列表、渐变...）
盒子模型
浮动
定位
网页动画（特效效果）

1.1 什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页）字体、颜色，边距、高度、宽度、背景图片、网页定位、网页浮动...

1.2 发展史

CSS1.0

CSS2.0 DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO

CSS2.1 浮动、定位

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

1.3 快速入门

style 注释方式为/* */

放到HTML文件内部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <!--规范 <style> 可以编写css代码,每一个声明，最好使用分号结尾。
  语法：
      选择器{
          声明1;
          声明2;
      }
  -->
  <style>
    h1{
        color: red;
    }
  </style>
</head>
<body>

  <h1>我是标题</h1>

</body>
</html>

与HTML分离

在html的同级目录下，建立css文件夹。

用link进行连接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <!--规范  link方式
  -->
  <link rel="stylesheet" href="css/Style.css">
</head>
<body>

  <h1>我是标题</h1>

</body>
</html>

h1{
    color: red;
}

css的优势

内容和表现分离
网页结构表现单一，可以实现复用
样式十分丰富
建议使用独立于html的css文件
利用SEO(Search Engine Optimization)：汉译为搜索引擎优化，容易被搜索引擎收录。

1.4四种css的导入方式

表现方式，就近原则！哪个离代码近，哪个就有优势。

行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style = "color: red">我是标题</h1>
</body>
</html>

style标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      /*  注释  */
    h1{
        color: red;
    }
  </style>
</head>
<body>

  <h1>我是标题</h1>

</body>
</html>

外部样式链接式link

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <!--规范  link方式
  -->
  <link rel="stylesheet" href="css/Style.css">
</head>
<body>

  <h1>我是标题</h1>

</body>
</html>

h1{
    color: red;
}

外部样式导入式@import 2.1中使用的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    @import url("css/style.css");
  </style>

</head>
<body>

<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 >我是标题</h1>
</body>
</html>