字体样式
/* font-size:字体大小 字号 默认16px /
font-size: 12px;
/ 字体 */
font-family: “宋体”;
/* 字体粗细 */
font-weight :bold;
font-weight :400(400正常大小,700加粗效果);
/* 字体样式font-style 默认值normal,italic倾斜 /
font-style :italic;
/ 连写 顺序style weight size family字号和字体必须同时设置 */
font:italic 700 20px ‘宋体’;
/* css的层叠性,属性名相同时 后面写的样式会把前面的覆盖掉。属性名相同时 */
文本样式
font-size:20px;
/* text-indent:32px; px具有局限性,引入了em这个单位*/
text-indent: 2em;
文本对齐方式
.box1 {
/* 对齐方式text-align */
text-align: center;
}
.box2 {
width :300px;
height :400px;
background-color: antiquewhite;
text-align: center;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<img src="./map.jpg" alt="">
<p>我是文字</p>
文本修饰
/* 清除a链接默认样式 (默认样式有下划线蓝色字体 )/
/ text-decoration:none; 去下划线*/
/* text-decoration: line-through; /
/ text-decoration: underline;下划线 /
/ overline上划线 /
/ 清楚a链接默认样式 */
text-transform
ul li:nth-child(1){
text-transform: lowercase;
}
ul li:nth-child(2){
text-transform: uppercase;
}`
## 行高
1
line-height:50px;
}
div {
width:400px;
height:200px;
background-color:pink;
text-align:center;
<!-- 单行文本借助行高垂直居中 -->
line-height:200px;
}
背景相关
/* height: 3000px;
background-color: blue;
background-image: url(./map.jpg);
background-repeat:no-repeat;
background-attachment: fixed; */
/* background-size: cover */
文本溢出
/* overflow: auto;y轴滚动 */
/* hidden scroll(x轴滚动) */
= ## 列表样式
li {
/* 去除li默认样式 */
list-style: none;
list-style: circle;
list-style: decimal;
}
元素显示模式转换
display: inline-block;