CSS 属性有很多, 可以参考文档 CSS 参考手册
1. 字体属性
设置字体
- 多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )
- 如果字体名有空格, 使用引号包裹.
- 建议使用常见字体, 否则兼容性不好.
<style>
.one {
font-family:"Microsoft YaHei";
}
.two {
font-family:"宋体";
}
</style>
<p class="one">这是微软雅黑</p>
<p class="two">这是宋体</p>
大小
p {
font-size: 20px;
}- 可以给 body 标签使用
- font-size 要注意单位 px 不要忘记
<style>
.one {
font-size: larger;
}
.two {
font-size: 10px;
}
</style>
<p class="one">大大大大大</p>
<p class="two">小小小小小</p>
粗细
p {
font-weight: bold;
font-weight: 700;
}可以使用数字表示粗细，取值范围是 100 -> 900，700 == bold, 400 == normal 即不变粗。
<style>
.one {
font-weight: 900;
}
.two {
font-weight: 100;
}
</style>
<p class="one">粗粗粗</p>
<p class="two">细细细</p>
文字样式
p {
/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;
} <style>
.one {
font-style: italic;
}
.two {
font-style: normal;
}
</style>
<p class="one">倾斜</p>
<p class="two">正常</p>
2. 文本属性
文本颜色
认识 RGB
我们的显示器是由很多很多的 "像素" 构成的. 每个像素视为一个点, 这个点就能反映出一个具体的颜色. 我们使用 R (red), G (green), B (blue) 的方式表示颜色(色光三原色). 三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果. 计算机中针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示 为 00-FF). 数值越大, 表示该分量的颜色就越浓. 255, 255, 255 就表示白色; 0, 0, 0 就表示黑色.
设置文本颜色
color 属性值的写法:
- 预定义的颜色值(直接是单词)
color: red;- [最常用] 十六进制形式
color: #ff0000;
- RGB 方式
color: rgb(255, 0, 0);鼠标悬停在 vscode 的颜色上, 会出现颜色选择器, 可以手动调整颜色.
文本对齐
控制文字图片等元素水平方向的对齐.
text-align: [值];
- center: 居中对齐
- left: 左对齐
- right: 右对齐
<style>
.one {
text-align: left;
font-size: 40px;
}
.two {
text-align:center;
font-size: 40px;
}
.three {
text-align:right;
font-size: 40px;
}
</style>
<p class="one">左对齐</p>
<p class="two">居中对齐</p>
<p class="three">右对齐</p>
文本装饰
text-decoration: [值];- underline 下划线. [常用]
- none 啥都没有. 可以给 a 标签去掉下划线.
- overline 上划线. [不常用]
- line-through 删除线 [不常用]
<style>
.one {
text-decoration:underline;
}
.two {
text-decoration:none;
}
.three {
text-decoration:overline;
}
.four {
text-decoration:line-through;
}
</style>
<p class="one">下划线</p>
<a class="two" href="#">啥都没有</a>
<p class="three">上划线</p>
<p class="four">删除线</p>
文本缩进
控制段落的 首行 缩进 (其他行不影响)
text-indent: [值];- 单位可以使用 px 或者 em，使用 em 作为单位更好，1 个 em 就是当前元素的文字大小.
- 缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)
<style>
.one {
text-indent: 2em;
}
.two {
text-indent: -2em;
}
</style>
<p class="one">正常缩进</p>
<p class="two">反向缩进</p>
3. 背景属性
背景颜色
background-color: [指定颜色] <style>
.one {
background-color:red;
}
.two {
background-color:green;
}
</style>
<div class="one">红色背景</div>
<div class="two">绿色背景</div>
背景图片
background-image: url(图片路径);注意:
1. url 可以是绝对路径, 也可以是相对路径
2. url 上可以加引号, 也可以不加.
<style>
.one {
background-image: url(https://pic.ntimg.cn/20110719/7170514_162629143000_2.jpg);
height:400px;
}
</style>
<div class="one"></div>
背景平铺
background-repeat: [平铺方式]
- repeat: 平铺，默认是 repeat.
- no-repeat: 不平铺
- repeat-x: 水平平铺
- repeat-y: 垂直平铺
<style>
.one {
background-image: url(https://pic.ntimg.cn/20110719/7170514_162629143000_2.jpg);
height:200px;
background-size:150px;
background-repeat: no-repeat;
font-size: 50px;
text-align: center;
}
.two {
background-image: url(https://pic.ntimg.cn/20110719/7170514_162629143000_2.jpg);
height:200px;
background-size:150px;
background-repeat:repeat-x;
font-size: 50px;
text-align: center;
}
.three {
background-image: url(https://pic.ntimg.cn/20110719/7170514_162629143000_2.jpg);
height:200px;
background-size:150px;
background-repeat:repeat-y;
font-size: 50px;
text-align: center;
}
</style>
<div class="one">不平铺</div>
<div class="two">水平平铺</div>
<div class="three">垂直平铺</div>
背景位置
background-position: x y;参数有三种风格:
- 方位名词: (top, left, right, bottom)
- 精确单位: 坐标或者百分比(以左上角为原点)
- 混合单位: 同时包含方位名词和精确单位
<style>
.one {
background-image: url(https://pic.ntimg.cn/20110719/7170514_162629143000_2.jpg);
height:200px;
background-size:150px;
background-repeat: no-repeat;
background-position: center;
}
</style>
<div class="one">背景居中</div>
背景尺寸
background-size: length|percentage|cover|contain;- lenth:填具体的数值,如 40px 60px 表示宽度为 40px, 高度为 60px。
- percentage:填百分比,按照父元素的尺寸设置。
- cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无 法显示在背景定位区域中。
- contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
4. 圆角矩形
基本用法
border-radius: length;
length 是内切圆的半径. 数值越大, 弧线越强烈
<style>
.one {
height: 200px;
width:400px;
border: 2px solid red;
border-radius: 10px;
}
</style>
<div class="one"></div>
生成圆形
让 border-radius 的值为正方形宽度的一半即可.
<style>
.one {
height: 200px;
width: 200px;
border: 2px solid red;
border-radius: 50%;
}
</style>
<div class="one"></div>
5. 盒模型
每一个 HTML 元素就相当于是一个矩形的 "盒子"，这个盒子由这几个部分构成：
- 边框 border
- 内容 content
- 内边距 padding
- 外边距 margin
边框
基础属性
- 粗细: border-width
- 样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
- 颜色: border-color
<style>
.one {
height: 200px;
width:200px;
border-width: 10px;
border-color: blue;
border-style: solid;
</style>
<div class="one">边框测试</div>
支持简写, 没有顺序要求
border: 10px solid blue;
内边距
默认内容是顶着边框来放置的,用 padding 来控制这个距离。可以给四个方向都加上边距 padding-top, padding-bottom, padding-left, padding-right。也可以把多个方向的 padding 合并到一起：
padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)
此时可以看到带有了一个绿色的内边距.
外边距
控制盒子和盒子之间的距离，可以给四个方向都加上边距 margin-top，margin-bottom，margin-left，margin-right。也可以把多个方向的 margin 合并到一起：
margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40
![[SAP ABAP] 清空ABAP变量](https://i-blog.csdnimg.cn/direct/e665b67746b042879002d438fe3c001e.png)
