css简介和属性
CSS指的是层叠样式表（Cascading Style Sheets）
样式定义如何显示HTML元素，通常存储在样式表中。
css使用方式#
内联式#
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联样式</title>
</head>
<body>
<p style="background: red"> I love China!</p>
</body>
</html>
内部样式#
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联样式</title> <style type="text/css"> p{ background: green; } </style> </head> <body> <p> I love China!</p> </body> </html>
外部样式#
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联样式</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p> I love China!</p>
</body>
</html>
CSS语法： #
selector {property : value;} 选择器{属性1：值1；属性2：值2；}
常用选择器： #
- .ClassSelector(类)
- #IdSelector(id)
- Selector(标签)
基本CSS属性： 背景，文本，字体，尺寸，边距和填充，边框#
background (背景)
- background-color 背景颜色
- background-image 背景图像
- background-repeat 背景平铺方式或重复
- background-attachment 背景图像是否固定或随平面滚动
- background-position 背景图像起始位置
Text(文本）
- color 颜色
- line-height 行高
- text-align 文本水平对齐方式
- vertical-align 文本垂直对齐方式
- Text-indent 首行缩进
- Text-shadow 字体阴影
- White-space 空白处理方式
- Word-spacing 字间距
Font
- Font-family 指定文本字体系列
- Font-size 指定文本字体大小
- Font-style 指定文本字体样式
- Font-weight 指定字体粗细
Dimension
- height 设置元素高度
- Line-height 行高
- max-height 元素最大高度
- max-width 元素最大宽度
- min-heigth 元素最小高度
- min-winth 元素最小宽度
- width 设置元素宽度
Margin&Padding
Margin
- Margin-top 上边距
- Margin-bottom 下边距
- Margin-left 左边距
- Margin-right 右边距
Padding
- Padding-yop 上填充
- Padding-bottom 下填充
- Padding-left 左填充
- Padding-right 右填充
Border
- Border-top 上边框
- Border-bottom 下边框
- Border-left 左边框
- Border-right 右边框
- Border-style 边框样式
- Border-width 边框宽度
- Border-color 边框颜色
【推荐】还在用 ECharts 开发大屏？试试这款永久免费的开源 BI 工具！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
· dotnet 源代码生成器分析器入门
· ASP.NET Core 模型验证消息的本地化新姿势
· 开发的设计和重构，为开发效率服务
· 从零开始开发一个 MCP Server！
· .NET 原生驾驭 AI 新基建实战系列（一）：向量数据库的应用与畅想
· Ai满嘴顺口溜，想考研？浪费我几个小时
· ThreeJs-16智慧城市项目（重磅以及未来发展ai）