CSS 介绍

简介: CSS介绍

原文链接:https://note.noxussj.top/part1/css3/css.html?source=aliyun

什么是 CSS?

CSS 指层叠样式表 (Cascading Style Sheets),理解为 CSS 样式就可以了。CSS 样式有什么作用呢?比如我们在页面中添加了一个 div ,我想给这个 div 设置宽度、高度、背景色、阴影、内容字体样式等等,就是通过 CSS 样式来实现。也就是丰富 HTML 标签的样式。

现实生活举例,body 里面的所有标签就像是不同的一个人,每个人的特征都不同。style 里面定义的每一个 .xxx 样式,就代表买了一件衣服。这个衣服你可以给任何一个人穿,也就是可以给任何一个标签使用。这个标签穿了衣服就会变得更好看。一个人可以穿多件衣服,也可以多个人穿同一件衣服。


CSS 结构

<html>    <head>        <title>我是网站标题</title>        <style>            .my-content {
                font-size: 30px;
                color: red;
            }
        </style>    </head>    <body>        <divclass="my-content">我是一个人,我穿了一件红色衣服(my-content)</div>    </body></html>

在演练场中操作一下


CSS 语法

语法规则:选择器 + 类名 + 样式体

例如:.my-content {}

解析:. 代表类选择器、 my-content 代表类名、{} 样式写在里面


颜色模式

CSS 中定义颜色使用十六进制( hex )表示法为红,绿,蓝的颜色值结合。可以是最低值是 0 ( 十六进制 00 )到最高值是 255 ( 十六进制 FF )。

模式名称 写法 简写
十六进制 HEX #aabbcc #abc
RGB rgb(170, 187, 204)
RGBA rgba(170, 187, 204, 0.5)


相关文章
|
2天前
|
人工智能 弹性计算 运维
|
24天前
|
Linux 程序员 数据格式
【2026最新】Notepad++下载、安装和使用一篇搞定(附中文版安装包)
Notepad++ 是一款免费开源、轻量高效的 Windows 文本编辑器,支持 C/Python/HTML 等 80+ 语言语法高亮、代码折叠、正则替换、编码转换及插件扩展,专为程序员与文本处理用户打造,完美替代系统记事本。(239字)
|
9天前
|
人工智能 缓存 安全
Claude Code 封号真实原因曝光,这次彻底不装了,直接针对国内开发者的账号下手?
Claude Code 封号潮背后:逆向扒出客户端隐写区域标记,Anthropic 政策收紧叠加 DeepSeek 7 月涨价,国产替代更紧迫。
|
14天前
|
人工智能 JSON 自然语言处理
让教学更智慧:用阿里云百炼工作流,自动生成中小学教材内容#小有可为#有温度的AI
通过可视化工作流编排,将大模型推理能力转化为标准化的教学内容生成引擎。教师只需输入教材标题和适用学段,即可自动获得结构完整、符合课程标准的章节内容,大幅降低备课门槛,助力教育资源均衡化。
502 127
|
18天前
|
存储 人工智能 监控
QoderWork完全指南:从入门到精通,把“AI实习生”变成你的全能工作搭档
阿里云2026年推出的桌面端AI工作助手QoderWork,不止聊天,更可动手干活:本地运行、安全可控,支持文件整理、数据分析、PPT生成、网页开发等;内置专家套件、多Agent协作与自定义Skills,让AI真正成为你身边的“AI实习生”。
|
8天前
|
人工智能 编解码 物联网
2026 最新Stable Diffusion 本地部署教程 下载安装使用详细图解(含官网安装包)
Stable Diffusion(SD)是2022年发布的开源文生图模型,由Stability AI等联合开发。支持文生图、图生图、局部重绘等,依托VAE降低算力需求,可在消费级显卡运行。本文提供秋葉aaaki制作的Windows整合包(含图形界面与插件),开箱即用,零配置启动。
|
9天前
|
人工智能 安全 程序员
终于,Claude Code 封号的原因被曝光了!竟然针对中国用户,植入隐形代码?!
通俗易懂地揭秘 Claude Code 封号的手段,分享一些自己对 AI 编程困境的思考,Codex、Cursor、DeepSeek、智谱 GLM、甚至是豆包,都有所行动了
506 1
|
10天前
|
人工智能 安全 Cloud Native
Higress 新发布:AI Gateway 能力增强,Gateway API 及其推理扩展持续打磨
增强 AI 网关能力,持续打磨 Gateway API 及其推理扩展。
424 125