CSS
在head中插入css
<link href="sometext.css" rel="stylesheet" />
body { margin: 0 auto; max-width: 40em; line-height: 125%; }
max-width:em是相对于其parent元素来设置字体大小的，一般都是以<body>的“font-size”为基准
margin:0 auto居中
margin-bottom：设置元素的下外边距。margin-left：设置元素的左外边距。margin-right：设置元素的右外边距。margin-top：设置元素的上外边距。
font-weight: bold 标题加粗
<section class="hero"> <div class="hero-body"> <p class="title"> Hero title </p> <p class="subtitle"> Hero subtitle </p> </div> </section>
CSS syntax
CSS 选择器
SELECTOR{
KEY: VALUE;
...
}
<!DOCTYPE html> <html> <head> <style> p.hometown { background:yellow; } </style> </head> <body> <p>My name is Donald.</p> <p class="hometown">I live in Ducksburg.</p> <p>My name is Dolly.</p> <p class="hometown">I also live in Ducksburg.</p> </body> </html>
这个的意思就是Style all <p> elements with class="hometown":
所以，
I live in Ducksburg.和
I also live in Ducksburg.
会变黄。
Values
color: red
background-color: #ff0000
border-color: rgba(255,0,0,1.0)
Box model
margin-top: 10px;
padding-left: 20px;
margin: 10px 5px 15px 20px;
border: 1px solid black
Units
dpi(ppi)
dots(points)per inch
PC screen: 72/96(Mac /Win defaults)
can be 120+ nowadays
mobile:200+
Absolute Lengths
px pixel
pt point
cm,in....
Relative Lengths
| Unit | Description | |
|---|---|---|
| em | Relative to the font-size of the element (2em means 2 times the size of the current font) | |
| ex | Relative to the x-height of the current font (rarely used) | |
| ch | Relative to width of the "0" (zero) | |
| rem | Relative to font-size of the root element | |
| vw | Relative to 1% of the width of the viewport* | |
| vh | Relative to 1% of the height of the viewport* | |
| vmin | Relative to 1% of viewport's* smaller dimension | |
| vmax | Relative to 1% of viewport's* larger dimension | |
| % | Relative to the parent element |
CSS grids
圣杯布局（Holy Grail Layout）
其指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。
Grid layout
<div class="container"> <p>child one</p> <p>child two</p> <p>child three</p> <p>child four</p> <p>child five</p> </div>
.container{ display: grid
grid-template-columns:200px 200px 200px//1fr 2fr
gap: 20px
}
grid 是一个 CSS 所有网格容器的简写属性，可以用来设置以下属性：
- 显式网格属性： grid-template-rows、grid-template-columns 和 grid-template-areas。(设置行列尺寸）
- 隐式网格属性： grid-auto-rows、grid-auto-columns 和 grid-auto-flow。
- 间距属性： grid-column-gap 和 grid-row-gap。
所以area那个属性其实是要交换位置的，1323变成1233
.unit.y3-tb2.cp20{
/*从9跨到12*就是从第9列开始跨到12列/
grid-column: 9/ span 4;
}
Responsive
/*1、当设备屏幕小于1180px时会采用该样式*/
@media screen and (max-width:1180px) { css codes }
/*1、当设备屏幕小于1180px大于400px时会采用该样式*/
@media screen and (max-width:1180px) and（min- width:400px）{ css codes }
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南