CSS基础教程：文件夹结构、选择器与样式分离-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45975620/article/details/128733156

1.CSS文件夹规范格式

以下为文件夹规范格式：方便css与html分离

2.基本语法

    选择器：{
            声明1;
            声明2;
            声明3;
    }

每一个声明最好使用封号结尾。

3.快速入门

css与html不分离的情况：css代码可以写在style标签内。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: cornflowerblue;
        }
    </style>
</head>
<body>
<h1>
    这是标题
</h1>
</body>
</html>

CSS与html分离的情况：在新的css文件内写css代码，在html文件内添加link标签，引入css文件即可：

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

4.CSS优势

内容表现分离
网页结构表现统一，可以实现复用
样式丰富
建议html与css分离
利用SEO，容易被搜索引擎收录

5.CSS的导入方式

5.1 行内样式

不推荐这样写，但偶尔可以这样用

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

5.2 内部样式：style标签

<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    h1{
      color: aquamarine;
    }
  </style>
</head>

5.3 外部样式

在新的css文件内写css代码，在html文件内引入css文件

链接式：link标签导入（常用）

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

导入式：CSS2.1特有的（不常用）

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

优先级：就近原则

6.选择器

作用：选择页面上的某一个或某一类元素

6.1 基本选择器

6.1.1 标签选择器

  <style>
    /*标签选择器：会选择该页面上的所有该标签的元素*/
    h1{
      color: rebeccapurple;
    }
    p{
        font-size: 50px;
    }
  </style>

6.1.2 类选择器

  <style>
    /*类选择器：.
    格式：.class的名称{}
    好处：可以多个标签归类，可以复用，可跨标签
    */
    .biaoqian1{
        color: aquamarine;
    }
    .biaoqian2{
        color: rebeccapurple;
    }
  </style>

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*类选择器：.
    格式：.class的名称{}
    好处：可以多个标签归类，可以复用
    */
    .biaoqian1{
        color: aquamarine;
    }
    .biaoqian2{
        color: rebeccapurple;
    }
  </style>
</head>
<body>
<h1 class="biaoqian1">标题1</h1>
<h1 class="biaoqian2">标题2</h1>
<h1 class="biaoqian1">标题3</h1>
<p class="biaoqian1">标题p</p>
</body>
</html>

效果如下：
在这里插入图片描述

6.1.3 ID 选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*ID选择器:ID必须保证全局唯一！
    格式：#id名称{}
    */
    #biaoqian1{
        color: rebeccapurple;
    }
  </style>
</head>
<body>
<h1 id="biaoqian1">标题1</h1>
<h1 id="biaoqian2">标题2</h1>
<h1 id="biaoqian3">标题3</h1>
<h1 id="biaoqian4">标题4</h1>
<h1 id="biaoqian5">标题5</h1>
</body>
</html>