CSS介绍

Pizrim2025-08-20 12:02

CSS 基本介绍一

目录

css是网页设计的核心语言，负责将枯燥的HTML变得丰富多彩，本文将介绍css的一些用法。

一.快速入门

1.练习模式：

2.只需3步即可让HTML焕然一新：

html 复制代码 
<!-- 1. 创建HTML结构 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- 2. 添加style标签
规范，<style>可以编写css的代码
语法：选择器{
               声明1；
               声明2；
               声明3；
            }
-->
<style>
  /* 3. 编写CSS规则 */
  h1{
    color: red;
  }
</style>
</head>
<body>
<h1>我是标题1</h1>
</body>
</html>

效果如下：

二、CSS优势

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

三、四种导入方式

方式 示例
行内样式 <p style="color:red">
内部样式 <style>p{color:red}</style>
外部样式 <link href="style.css" rel="stylesheet">
@import导入 @import url('style.css');

1.若有多个导入样式，遵循就近原则

2.大型项目优先使用外部样式表

四、核心选择器详解

1. 三大基本选择器

选择器优先级：ID > 类 > 标签

标签选择器

**页面里直接用HTML标签名（比如<p>、<div>）当选择器，能选中页面里所有这个标签的元素。比如用<p>当选择器，页面里所有段落都会被选中。

css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器，可以选择页面上所有的这个标签的元素*/
        h1{
            color : #19e5d2;
            background: #3636d2;
            border-radius: 24px;
        }
        p{
            font-size:80px;
        }
    </style>
</head>
<body>
<h1>内容1</h1>
<h1>内容2</h1>
<p>内容3</p>
</body>
</html>

​ 效果如下：

类选择器

类选择器：给元素起个"类别名"（用class="类名"定义），选择时用.类名，能选中所有带这个类名的元素。

一个类名可以给多个元素用，一个元素也能有多个类名。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式    .class的名称{}
        好处：可以复用*/
        .q{
            color: deeppink;
        }
        .a{
            color: rgba(12, 211, 211, 0.71);
        }

    </style>

</head>
<body>
<h1 class="q">标题1</h1>
<h1 class="a">标题2</h1>
<h1 class="q">标题3</h1>
</body>
</html>

效果如下：

id选择器

​ 给元素起个"唯一名字"（用id="id名"定义）,选择时用#id名，一个id在页面里只能用一次，只能选中一个元素,必须保证全局唯一

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

<!-- id选择器，必须保证全局唯一-->
    <style>
        #q{
            color:#19e5d2;
        }
    </style>


</head>
<body>
<h1  id="q">标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>

</body>
</html>

效果如下：

2.层次选择器

后代选择器：在某个元素后面

用空格连接两个选择器，比如div p，选中div里所有的p标签，不管是儿子、孙子还是更深层的都算。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器*/
     body p{
          background: #3636d2;
      }
        </style>
</head>
<body>

<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
<p class="active">p7</p>
<p>p8</p>
</body>
</html>

如下：

子选择器：一代

用>连接两个选择器，比如body > p，只选中body直接包含的"亲儿子"p标签，孙子辈的p不算。

html 复制代码 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
 /*子选择器*/
      body>p {
          background: red;
      }
 </style>
</head>
<body>

<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
<p class="active">p7</p>
<p>p8</p>
</body>
</html>

相邻兄弟选择器：同辈，只有一个 ，相邻（向下）

用+连接，比如.active+p，选中紧挨着.active标签后面的那个p（必须是同一个父元素下，且紧挨着）

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*相邻兄弟选择器，只有一个 ，相邻（向下）*/
       .active+p{
          background:#19e5d2;
      }
      </style>
</head>
<body>

<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
<p class="active">p7</p>
<p>p8</p>
</body>
</html>

如下

通用兄弟选择器，当前元素中向下的所有兄弟元素

用连接，比如.activeP，选中.active标签后面所有同层级的p（同一个父元素下，不用紧挨着）。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
     /*通用兄弟选择器，当前元素中向下的所有兄弟元素*/
      .active~P{
          background: #3636d2;
      }
    </style>
</head>
<body>

<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
<p class="active">p7</p>
<p>p8</p>
</body>
</html>

效果如下：

3.属性选择器

根据元素的属性来选，比如input[type="text"]，选中所有type属性是text的输入框；a[href]选中所有带href属性的链接。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*属性选择器*/
        .demo a{
            float: left;
            display:block;
            height: 50px;
            width: 50px;
            background: #0eecd7;
            border-radius: 10px;
            text-align: center;
            color: #ce0b5d;
        }
        /*
      存在id属性的元素  a[]{}
        *=包含这个元素
        ^=以这个开头
        $=以这个结尾
        */
        a[id]{
            background: #ce0b5d;
        }
        a[class*="links"]{
            background: red;
        }
    </style>
</head>
<body>
<p class="demo"></p>
<a href="https://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank" title="test">2</a>
<a href="image/123.html" class="links item">3</a>
<a href="image/123.png" class="links item">4</a>
<a href="image/123.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
</body>
</html>

如下

五.字体样式

1.span标签

一个"小容器"标签，本身没啥样式，主要用来包裹一小段文字或内容，方便单独设置样式（比如给一句话里的几个字改颜色），不像div会换行。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1{
            font-size:50px;
        }
    </style>
</head>
<body>

欢迎学习<span id="title1">标签</span>
</body>
</html>

效果如下：

2.字体样式

控制文字本身的样子

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- font-family:字体
     font-size：字体大小
     font-weight;字体粗细
     color：字体颜色-->
    <style>
        body{
            font-family: Zapfino;
            color: #0be3c3;
        }
        h1{
            font-size:50px;
        }
        .p1{
            font-weight: bold;
        }



    </style>
</head>
<body>
<h1>背景故事</h1>
<p class="p1">
    2034年，人类首次接收到来自宇宙深处的讯息。这段来自深空文明的讯息并未能够被完整破译，这激发了人们对于宇宙和未知文明探索的好奇心，也衍生了各种有关于深空的传说，甚至影响了未来几十年人类历史的发展。 [2]
世界观</p>
<p>
    Evol：只体现在少数人身上的特殊能力。拥有Evol的极少数人被称为Evolver，即超进化人类。超前的自然进化的基因使得Evolver的某方面能力得到强化，超越一般人类。经过数百年的变迁，Evol的存在已经不是秘密。被提取并运用到生活各方面中的Evol基因，也在进一步改变世界。 [2]
</p>
</body>
</html>

3.文本样式

控制文字整体的排版和外观

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--颜色：
        单词
        RGB 0～F
        RGBA A：0～1
        text-align:排版，居中
        text-indent：2em;  段落首行缩进
        行高和块的高度一致，就可以上下居中
text-decoration: underline下划线
text-decoration: line-through中划线
 text-decoration: overline上划线

        -->
    <style>
        h1 {
            color:red;
            text-align: center;
        }
        p1{
            text-indent: 2em;
        }
        p2{
            background: #19e5d2;
            height:300px;
            line-height:300px;
        }
        .l1{
            text-decoration: underline;
        }
        .l2{
            text-decoration: line-through;
        }
        .l3{
                text-decoration: overline;
            }
    </style>
</head>
<body>
<h1>背景故事</h1>
<p class="p1">
    2034年，人类首次接收到来自宇宙深处的讯息。这段来自深空文明的讯息并未能够被完整破译，这激发了人们对于宇宙和未知文明探索的好奇心，也衍生了各种有关于深空的传说，甚至影响了未来几十年人类历史的发展。 [2]
    世界观</p>
<p class="p2">
    Evol：只体现在少数人身上的特殊能力。拥有Evol的极少数人被称为Evolver，即超进化人类。超前的自然进化的基因使得Evolver的某方面能力得到强化，超越一般人类。经过数百年的变迁，Evol的存在已经不是秘密。被提取并运用到生活各方面中的Evol基因，也在进一步改变世界。 [2]
</p>
<p class="l1">12345</p>
<p class="l2">12345</p>
<p class="l3">12345</p>
</body>
</html>

如下

样式继承：字体/文本属性自动继承

结语

CSS3现已支持动画、渐变、网格布局等高级特性，优秀的CSS代码应像好散文------清晰、简洁、富有表现力。

热门推荐
01UV安装并设置国内源02DeepSeek更新！速览DeepSeek V3.1新特性03Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code04KGG转MP3工具|非KGM文件|解密音频05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接06【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）072025最新国内服务器可用docker源仓库地址大全（2025年8月更新）08阿里开源首个图像生成基础模型——Qwen-Image本地部署教程，超强中文渲染能力刷新SOTA！09NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南10TRAE 规则（Rules）配置指南：个人习惯、团队规范与最佳实践