CSS学习（一）

恶龙咆大哮

已于 2022-02-28 17:08:31 修改

阅读量115

点赞数

CC 4.0 BY-SA版权

文章标签： css html sass

于 2022-02-27 20:17:36 首次发布

本文链接：https://blog.csdn.net/lhz1315937650/article/details/123168446

本文介绍了CSS的基本概念和作用，强调了其在网页美化和布局中的重要性。内容涵盖了CSS的语法规范，包括选择器和声明的使用。文章通过实例展示了标签选择器、类选择器、ID选择器和通配符选择器的运用，解释了它们各自的特点和应用场景，并强调了类选择器在实际开发中的常见应用。此外，还探讨了CSS代码风格的选择，如紧凑和展开书写以及样式空格的规范。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

{CSS简介和基础选择器}

一 CSS的简介

CSS主要使用场景是美化网页，布局页面的

1.1 HTML的局限性

HTML只关注内容，比如<h1>表示这是一个标题，<img>表示这是一个图片，<p>表示这是一个段落。在HTML标签中对每项内容的修改过于麻烦，同时代码段是无尽的臃肿

1.2 CSS是网页的美容师

CSS是层叠样式表的简称

1.HTML主要是写结构，来展示元素内容

2.CSS是用来美化网页的，布局作用。

3.CSS的价值，由HTML专注做结构，样式用CSS。即结构与样式分离

1.3 CSS的语法规范

CSS的语法规则由两个主要部分构成：选择器和一条或者多条声明。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>尝试使用css</title>
    <!-- css书写位置 -->
    <style>
        /* 选择器{样式} */
        p{
            color: red;
            font-size: 50px;  /* 修改文字为50像素 */
        }
    </style>
</head>
<!-- HTML书写位置 -->
<body>
    <p>你也别想活着</p>
</body>
</html>

1.选择器是用来指定CSS的样式的HTML标签（就像上面的p）

2.属性与属性值以“键值对”的形式出现。

3.属性与属性值之间用 : 来分割，在每一行的最后用；结束。

1.4 CSS代码风格（在实际开发中常使用的）

1. 样式格式的书写

1.紧凑书写

h1{color: red;font-size: 30px}

2.展开书写

h1{
    color: red;
    font-size: 30px
}

2. 样式大小的书写

h1{
    color: red;
}

H1{
    COLOR: RED;
}

一般来说选择器，属性和属性值全部使用小写字母。特殊情况除外。

3. 样式空格的书写

h1 {
    color: red;
}

1.在属性值前面，冒号后面加一个空格。

2.在选择器和大括号中间保留空格

二 CSS基础选择器的作用

2.1　CSS选择器的作用

选择器就是根据不同的需求把不同的标签选择出来。即选择标签。

2.2　选择器的分类

选择器分为基础选择器和复合选择器两个大类

1.基础选择器

基础选择器是由单个选择器组成

而基础选择器又包括：标签选择器，类选择器，id选择器和通配符选择器

标签选择器是指用HTML标签名称作为选择器，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>
    <style>
        /* 选择器{样式} */
        p{
        color: green;
        }
        div {
            color: blue;
        }
    </style>
</head>

<body>
    <p>男</p>
    <p>男</p>
    <p>男</p>
    <div>女</div>
    <div>女</div>
    <div>女</div>
</body>
</html>

作用：把一类标签全部选择出来，比如所有<div>标签。

优点：快速为页面中的同一类型的标签设置同样的样式。

缺点：不能设计差异化样式，只能选择全部的当前标签。

2.类选择器

用来差异化管理不同的标签，如果单独选一个或者几个标签，则使用类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>
    <style>
        /* 选择器{样式} */
        .red {
            color: red;
        }
    </style>
</head>

<body>
  <ul>
      <li class="red">你好</li>
      <li>他好</li>
      <li>我也好</li>
      <li>xxxxxx</li>
  </ul>
</body>
</html>

使用规则

.+类型名（.red) 如果想要使用在下放HTML中加入class=“类型名”

类型名是自己设置，类选择器在实际开发中最常用，不能使用纯数字，中文来命名。

类型选择器--多类名

给一个标签指定多个类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>
    <style>
        /* 选择器{样式} */
        .red {
            color: red;
        }
        .font{
            font-size: 600px;
        }
    </style>
</head>
<body>
  <ul>
      <div class="red font">你好</div>
      <div class="font">他好</div>

  </ul>
</body>
</html>

在标签class属性中可以写多个类名，但是不同类名之间用空格隔开