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 可省略
  • 利用文档样式表 可以统一设置、修改多个元素的相同样式
相关推荐
花生侠25 分钟前
记录:前端项目使用pnpm+husky(v9)+commitlint,提交代码格式化校验
前端
一涯32 分钟前
Cursor操作面板改为垂直
前端
我要让全世界知道我很低调39 分钟前
记一次 Vite 下的白屏优化
前端·css
1undefined241 分钟前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
蓝倾1 小时前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong1 小时前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹1 小时前
硬件产品研发管理工具实战指南
前端·python
用户3802258598241 小时前
vue3源码解析:依赖收集
前端·vue.js
WaiterL1 小时前
一文读懂 MCP 与 Agent
前端·人工智能·cursor