CSS基础

最新推荐文章于 2025-06-12 10:53:35 发布

天演L

最新推荐文章于 2025-06-12 10:53:35 发布

阅读量330

点赞数 1

分类专栏：前端文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/weixin_61611746/article/details/132158014

版权

前端专栏收录该内容

14 篇文章

订阅专栏

本文介绍了CSS的基础概念，包括层叠原理、选择器（标签、类、ID、属性、伪类和组合选择器）的使用，以及内联、内部和外部样式的应用。还展示了浏览器开发者工具的使用。通过实例详细讲解了CSS的好处和不同引入方式。

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

1.CSS的概述

CSS（Cascading Style Sheets）：层叠样式表

层叠：多个样式可以作用在同一个html的元素上，同时生效

用于设置和布局网页的一种计算机语言。告知浏览器如何渲染觉醒页面元素

CSS的组成

选择器：选择HTML元素的方式。可使用标签名，class属性值，id值等多种方式（筛选具有相似特征的元素）

样式声明：用于给HTML元素设置具体的样式。格式是属性名：属性值

格式：

选择器{
   属性名:属性值;
   属性名:属性值;
   属性名:属性值;
}

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

css注释

/*  ... */

只在css作用域可用

html注释为

<!-- ... -->

入门案例

实现步骤：

1.新建一个html文件

2.在<body>标签中编写一个<h1>标签，内容为：我真帅

3.在<head>标签中编写一个<style>标签

4.为<h1>标签设置样式：颜色为红色，字体大小为100px

5通过浏览器打开页面查看效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入门案例</title>
    <style>
      h1{
        color: red;
        font-size: 100px;
      }
    </style>
</head>
<body>
<h1>我真帅</h1>
</body>
</html>

浏览器开发者工具

打开浏览器，鼠标右键点检查

CSS好处：

1. 功能强大

2. 将内容展示和样式控制分离

降低耦合度。解耦

让分工协作更容易

提高开发效率

2.CSS的引入方式

1.内联样式

在标签内使用style属性控制样式，只能影响当前这一行

格式：

<标签 style="属性名:属性值; 属性名:属性值;">内容<标签>
<h1 style="color:red; font-size: 100px;">hello css</h1>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 style="color:red; font-size: 100px;">hello css</h1>
</body>
</html>

2.内部样式

在head标签内，定义style标签，style标签的标签体内容就是css代码，可以影响当前文件

格式：

<head>
    <style>
        选择器{
            属性名:属性值;
            属性名:属性值;
        }
    </style>
</head>

<style>
    div{
      color:blue;
      font-size: 20px;
    }
 </style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      color:blue;
      font-size: 20px;
    }
  </style>

</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

3.外部样式

定义css资源文件。在head标签内，定义<link>标签，引入外部的资源文件(独立css文件)，可以影响不同的文件

格式：

<link rel="stylesheet" href="css文件">

例：

css文件：

div{
    color: red;
    font-size: 20px;
}

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="css/01.css">
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

3.CSS选择器

一个HTML文件中会有很多个元素，如果想对不同的元素添加不同的样式，就需要使用选择器，选择器就是用来选择指定的元素的（筛选具有相似特征的元素）

1.基本选择器

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      /*元素选择器*/
      div{
        color: red;
      }
      /*类选择器*/
      .cls{
        color: blue;
       }
      /*id选择器*/
      #d1{
        color: green;
      }
      #d2{
        color: pink;
      }
    </style>
</head>
<body>
<div>div1</div>

<div class="cls">div2</div>
<div class="cls">div3</div>

<div id="d1">div4</div>
<div id="d2">div5</div>
</body>
</html>

2.属性选择器

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      [type]{
        color: red;
      }
      [type=password]{
        color: blue;
      }
    </style>
</head>
<body>
用户名：<input type="text"/> <br>
密码：<input type="password"/> <br>
邮箱：<input type="email"/> <br>
</body>
</html>

3.伪类选择器

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      /*去下划线*/
      a{
        text-decoration: none;
      }
      /*未访问状态*/
      a:link{
        color: black;
      }
      /*已访问状态*/
      a:visited{
        color: blue;
      }
      /*鼠标悬浮的状态*/
      a:hover{
        color: red;
      }
      /*已选中的状态*/
      a:active{
        color: yellow;
      }
    </style>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>

4.组合选择器

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      /*后代选择器*/
      .center li{
        color: red;
      }

      /*分组选择器*/
      span,p{
        color: blue;
      }
    </style>
</head>
<body>
<div class="top">
  <ol>
    <li>aa</li>
    <li>bb</li>
  </ol>
</div>

<div class="center">
  <ol>
    <li>cc</li>
    <li>dd</li>
  </ol>
</div>

<span>span</span> <br>
<p>段落</p>
</body>
</html>