CSS语法规范
| <head> |
| <style> |
| h1{ |
| color:red; |
| font-size:12px; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>标题</h1> |
| </body> |
选择器 {一条或多条声明}
选择器和大括号中间最好加个空格
基础选择器
标签选择器
| <style> |
| p { |
| color: red; |
| } |
| <style> |
| |
| <p>12</p> |
| <p>12</p> |
| <p>12</p> |
| |
选择了所有的对应标签
类选择器
| .类 { |
| |
| } |
| <p class="类">123</p> |
长名词或词组可以使用中横线来给选择器命名 -
多类名选择器
id选择器
id只能调用一次,调用后别人无法使用
和类一样只能用英文,相比而言id用得少
通配符选择器
字体属性
字体
多个字体,如果前面的显示不出来会用后面的替换
文字大小
| body { |
| font-size:16px; |
| } |
| h { |
| font-size:16px; |
| } |
| body可选择所有主体,但是标题标签需要特别指定 |
字体粗细
文字样式
| font-style: |
| normal 正常 |
| italic 斜体 |
字体复合属性
| 格式:font: font-style font-weight font-size/line-height font-family; |
| font: italic 700 16px 'Microsoft yahei' |
顺序不能颠倒
文字大小和字体不能省略
文本属性
颜色
| color: pink; |
| color: #FF0000 |
| color: rgb(255,0,0)或者rgb(100%,0%,0%) |
对齐文本
| text-align: center |
| left right center |
用来设置水平对齐
装饰文本
| text-decoration: |
| none 默认 |
| underline 下划线 |
| overline 上划线 |
| line-through 删除线 |
文本缩进
| text-indent: |
| 让每个首行缩进 |
| em是一个相对单位,是当前元素的一个文字大小 |
行间距
行间距包括上间距,文本高度,下间距
16px为默认值
样式表
内部样式表
行内样式表
| <p style = "color: blue"></p> |
外部样式表
| 在HTML外部写一个CSS |
| <head> |
| <link rel="stylesheet" href="样式表名字.css"> |
| </head> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤