一、文本与字体属性
1. 字体段落相关属性
<style>
/* font-size 改变字体大小 */
/* color 改变字体颜色 */
.a{
width: 900px;
font-size: 30px;
color: pink;
/* text-align 对齐方式
1. center 居中
2. left 左对齐 默认样式
3. right 右对齐
4. justify 两端对齐
如果让最后一行也实现两端对齐需要加一行代码 text-align-last: justify;
用于:实现水平居中
*/
text-align: justify;
text-align-last: justify;
/* line-height: 行高
用于:实现垂直居中 (行高 = 盒子高)
*/
/* line-height: 100px; */
/* text-indent 首行缩进
缩进2个字符时,值等于字体大小*2
*/
text-indent: 60px;
list-style li默认样式
none 去掉li的默认样式
}
.p{
/* height: 100px; */
/* line-height: 100px; */
/* font-size: 50px; */
background-color: yellowgreen;
}
/* text-decoration: none;
用于清除a标签的默认下划线
显示:a:hover{
text-decoration: underline;
}
*/
a{
text-decoration: none;
}
a:hover{
/* 定义文本下的一条线 */
/* text-decoration: underline; */
/* 定义文本上的一条线 */
/* text-decoration: overline; */
line-height: 80px;
/* 定义穿过文本的一条线(删除线 -- s 或 del 标签同样效果) */
text-decoration: line-through;
}
.English{
/* 定义每个单词以大写字母开头 */
/* text-transform: capitalize; */
/* 全部字母都大写 */
/* text-transform: uppercase; */
/* 全部字母都小写 */
/* text-transform: lowercase; */
}
</style>
2. bacground:背景
<style>
.bgbox{
/* width: 800px;
height: 800px; */
/* 定义背景颜色
background-color: blue;
/* 定义背景图片 */
/* background-image: url(../代码/img/a.jpg); */
/* background-repeat: no-repeat; */
/* 定义背景图片大小 */
background:pink url(../代码/img/a.jpg) no-repeat;
background-size: 100% 100%;
}
/* 行内元素 span a
行内块元素 img 表单元素 (input select textarea)
快级元素 div p h1-h6 ul li hr br
*/
/* .bgbox:hover .smallbox2{
display: block;
} */
.smallbox{
width: 300px;
height: 300px;
background-color: black;
/* display:
inline-block: 设置为行内块元素,宽高生效,不独占一行
block: 设置为块级元素,宽高生效,独占一行
inline: 设置为行内元素,宽高不生效
none: 隐藏
*/
/* display:inline */
}
.smallbox2{
background-color: gray;
}
.smallbox3{
background-color: #7a1919;
}
.smallbox2:hover+.smallbox3{
display:inline-block ;
}
.spanbox{
width: 100px;
height: 100px;
background-color: burlywood;
display:inline-block;
}
</style>
二、盒子模型
<style>
ul{
list-style:none;
background-color: rgb(8, 43, 43);
}
li{
width: 200px;
height:100px;
background-color: pink;
}
.li1{
/* 内边距 */
/* padding: 10px; */
padding-top: 10px;
padding-left: 20px;
padding-bottom: 30px;
padding-right: 40px;
/* 简写 */
/* 上下左右 */
padding: 10px 20px;
/* 上左右下 */
padding: 10px 20PX 30PX;
/* 上右下左 */
padding: 10px 20px 30px 40px;
}
.li2{
/* 外边距 */
margin: 10px;
}
/* margin塌陷问题
同级之间上下margin 取最大值
嵌套盒子,子盒子加margin-top不生效,需要给父盒子加padding或border
*/
.li3{
/* width: 0px;
height: 0px;
宽度样式颜色 */
/* 样式: */
/* solid 实线
dashed 虚线 */
/* 颜色 */
/* transparent 透明色 */
/* 设置四边边框 */
border: 10px solid red;
border-bottom: 10px dashed blue
}
.li4{
margin-top: 60x;
width: 200px;
height:200px;
border-radius:50%;
border: 1px solid blue;
}
</style>