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
![【Python】由二维列表初始化导致修改元素时会修改相同位置元素的引用问题f = [[0] * len(matrix[0])] * len(matrix)](https://i-blog.csdnimg.cn/direct/c81cda599ce84d8db859f9a55c35beb6.png)
