HTML/CSS3

1.CSS

  • CSS的作用在于在HTML的基础上(决定网页的内容和结构)对网页进行排版布局 对网页中的元素提供样式 使得网页显得更加精美
  • CSS全称是cascading style sheets 即层叠样式表
  • CSS样式的书写格式:样式名: 样式值
    • 例如:color: red
    • 建议:之后进行空格
  • CSS样式应用到html元素的三种方法
    • 内联样式(inline style)
    • 文档样式表(document style sheet)
    • 外部样式表(external style sheet)

2.内联样式

  • 实现:将CSS样式作为元素的style属性值
    • 例如:<div style="color: blue; background-color: red;">文字内容</div>
    • 多个CSS样式在属性值中以;进行隔开 而且建议每个CSS样式之后都加上;

3.文档样式表

  • 实现:将CSS样式内置head元素的style元素中
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            color: blue;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
</body>
</html>
  • style元素中type属性的默认值为text/css 可省略
  • 利用文档样式表 可以统一设置、修改多个元素的相同样式
相关推荐
东风破_15 分钟前
React 自定义 Hook 实战:封装鼠标坐标与副作用清理
前端
bonechips16 分钟前
useRef + Web Worker:React 中的多线程计算
前端·javascript
Sterting17 分钟前
第 10 节:异步请求与 Axios —— 前端与后端
前端
Coder_Ke20 分钟前
源码没错,API 却“失踪”了:微信开发者工具的一次作用域背刺
前端
渣波25 分钟前
从“迷路”到“瞬移”:彻底搞懂 React Router 的 `useLocation` 与 `useNavigate`
前端·javascript
申君健248641827720225 分钟前
WebGPU 开发入门:从设备初始化到渲染一帧
前端
橘子星26 分钟前
React Context + 自定义 Hooks:告别 Props 地狱,一行代码跨层级传数据
前端·javascript
moMo26 分钟前
前端路由,其实就是三个对象在演戏
前端·react.js
用户29307509766927 分钟前
React 自定义 Hooks 实战:用 useMouse 理解响应式封装
前端
触底反弹29 分钟前
🔥 别再只用 useRef 拿 DOM 了!这 5 个实战场景让你彻底理解它(附源码解析 + 面试题)
前端·javascript·react.js