一、CSS字体属性
颜色（color）例， color: rgb(176, 79, 111,0.5); 0.5表示透明度
字体大小（ font-size） 例，font-size: 50px;
字体粗细（font-weight）例，font-weight: 200;（lighter，bold=700，bolder 由细到粗，也可以用数字）
字体样式（font-style）例，font-style: italic; italic表示斜体，normal表示默认
（font-family）例，font-family: 'Courier New', Courier, monospace;
二、背景属性
1. background-color: rgb(196, 147, 241); 颜色
2. background-image: url("1.jpg"); 图片
3. background-repeat: repeat-x; 平铺（ 向x方向平铺）
no-repeat（不平铺）
4. background-size: 600px 400px; 大小
background-size: 100% 100%;
background-size: cover;（覆盖 全屏）contain（适合大小）
5. background-position: left center; 位置
三、文本属性
text-align: center; 对齐方式（left right center）
text-decoration: underline; 修饰文本（ underline下划线、overline上划线、line-through删除线）
text-transform: capitalize; 大小写
capitalize（首字母大写）uppercase（全部大写）lowercase（全部小写）
4. text-indent: 30px; 缩进
四、表格属性
1.table,td{ 表格边框
border: 1px solid rgb(204, 171, 37);
}
2.table{ 折叠边框
border-collapse: collapse;
width: 500px; 边框宽度
height: 800px; 高度
}
3.td{ 文本对齐方式
text-align: center; （水平对齐方式）
vertical-align: center ; （垂直对齐方式）
padding: 20px; （表格填充）
background-color: aquamarine;（背景颜色）
color: brown;（字体颜色）
}
五、关系选择器
后代选择器 （后代中的某一标签生效）
例，ul li{ （ul下的li标签都生效）
color: rgb(109, 109, 228);
}
子代选择器（直接子元素生效）
例，div>p{ （只有div的儿子p生效）
color: rgb(250, 117, 117);
}
相邻兄弟选择器（相邻的兄弟元素，向下找）
例，h2+p{ （与h2相邻的p元素）
color: rgb(203, 130, 41);
}
通用兄弟选择器（选择所有兄弟元素，向下选择）
例，h3~p{ （h3下所有的p元素）
color: rgb(79, 223, 175);
}
六、css盒子模型（box model）
设计和布局，包括外边距，内边距，边框和实际内容（文本和图像）
div{
width: 300px;
height: 300px;
background-color: rgb(201, 147, 251);
padding: 30px 40px;（内边距 上下，左右）
padding-left: 30px;
padding-top: 20px;
padding-bottom: 40px;
padding-right: 20px;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
border:5px solid rgb(9, 9, 136);（边框 粗细，实线，颜色）
margin: 20px 20px;（外边距 上下，左右）
}
七、弹性盒子模型（在大的容器里）
<style>
.container{
width: 500px;
height: 300px;
background-color: rgb(255, 216, 168);
//父元素属性
display: flex; (开启弹性盒子模型）
flex-direction: row;（row水平方向，row-reverse水平翻转， column垂直， column-reverse垂直翻转）
justify-content: flex-start;（垂直方向上 flex-start靠上，flex-end靠下，center居中）
align-items: center;（水平方向 center居中）
}
.box1{
width: 100px;
height: 100px;
background-color: rgb(134, 15, 246);
//子元素属性（权重 2/5）
flex-grow: 2;
}
.box2{
width: 100px;
height: 100px;
background-color: rgb(1, 203, 189);
flex:2;
}
.box3{
width: 100px;
height: 100px;
background-color: rgb(246, 15, 77);
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
5495
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
