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

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

如何学习：

  1. css是什么

  2. css怎么用(快速入门)

  3. css选择器（重点+难点）

  4. 美化网页（文字、阴影、超链接、列表、渐变...）

  5. 盒子模型

  6. 浮动

  7. 定位

  8. 网页动画（特效效果）

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 注释方式为/* */

  1. 放到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>
  1. 与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的优势

  1. 内容和表现分离

  2. 网页结构表现单一，可以实现复用

  3. 样式十分丰富

  4. 建议使用独立于html的css文件

  5. 利用SEO(Search Engine Optimization)：汉译为搜索引擎优化，容易被搜索引擎收录。

1.4四种css的导入方式

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

  1. 行内样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style = "color: red">我是标题</h1>
</body>
</html>
  1. 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>
  1. 外部样式链接式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;
}
  1. 外部样式导入式@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>
posted @ 2022-10-12 17:14  林每天都要努力  阅读(72)  评论(0)    收藏  举报