css使用

一、什么是CSS


css 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
        }
    </style>
</head>
<body>

<div>Hello CSS</div>

</body>
</html>

二、CSS导入方式

CSS导入有三种方式


CSS导入方式代码

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

    <style>
      span{
        color: red;
      }
    </style>

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

</head>
<body>

  <!--内联样式-->
  <div style="color: red">Hello CSS</div>

  <!--内部样式-->
  <span>Hello CSS</span>

  <!--内部样式-->
  <p>Hello CSS</p>

</body>
</html>

CSS导入文件

css 复制代码
p{
    color: red;
}

三、CSS选择器


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

    <!--元素选择器-->
    <style>
      div{
        color:red;
      }

    /* id选择器 */
      #name{
        color: blue;
      }
    /* 类选择器 */
      .cls{
        color: pink;
      }
    </style>

</head>
<body>

<div>div1</div>
<div id="name">div2</div>
<div class="cls">div3</div>

<span class="cls">span</span>

</body>
</html>

四、CSS属性

https://www.w3school.com.cn

本文不作为重点。

相关推荐
骑自行车的码农7 分钟前
React短文系列 遍历fiber树 App的创建
前端·react.js
AskSky10 分钟前
为了搞一个完美的健身APP,我真是费尽心机
前端
斯~内克16 分钟前
基于Vue.js和PDF-Lib的条形码生成与批量打印方案
前端·vue.js·pdf
阴阳怪气乌托邦17 分钟前
别再啃OA代码了!低代码"搭积木"式搞数智化,我直接少写500行
前端·低代码
beelan21 分钟前
v-on的思考
前端
山河木马24 分钟前
前端学习C++之:.h(.hpp)与.cpp文件
前端·javascript·c++
用户92724725021924 分钟前
PHP + CSS + JS + JSON 数据采集与展示系统,支持伪静态
前端
努力只为躺平28 分钟前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript
李大玄30 分钟前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github
爱编程的喵31 分钟前
从DOM0到事件委托:揭秘JavaScript事件机制的性能密码
前端·javascript·dom