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

本文不作为重点。

相关推荐
q567315236 分钟前
Koa+Puppeteer爬虫教程页面设计
javascript·css·爬虫
北北~Simple13 分钟前
第一次搭建数据库
服务器·前端·javascript·数据库
GanGuaGua20 分钟前
Vue3常用指令
前端·javascript·vue.js
欧阳天风20 分钟前
录音实时上传
前端·javascript
江号软件分享24 分钟前
从DNS到防火墙:NetDisabler多策略断网方法详解
前端
灵犀学长33 分钟前
解锁HTML5页面生命周期API:前端开发的新视角
前端·html·html5
江号软件分享42 分钟前
轻松解决Office版本冲突问题:卸载是关键
前端
致博软件F2BPM1 小时前
Element Plus和Ant Design Vue深度对比分析与选型指南
前端·javascript·vue.js
慧一居士2 小时前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead2 小时前
小哆啦解题记——两数失踪事件
前端·算法·面试