1、字体处理
div {
font-size: 30px;
/* 字体大小 */
font-weight: bold;
/* 加粗 */
font-style: normal;
/* 斜体 */
font-family: cursive;
/* 字体类型 */
color: #f40;
/* 上色 */
}
2、三原色
光学三原色rgb 红绿蓝
每一项范围0-f
#000000 --- 黑色
#ffffff --- 白色
r g b
00-ff 00-ff 00-ff
3、画三角形
width: 10px;
height: 10px;
border: 100px solid black;
border-left-color: red;
border-right-color: red;
border-top-color: transparent;
/* 透明色 */
4、企业级开发经验
- 行级元素 (inline) :内容决定元素所占位置,不可以通过css调整宽高
- span、del、em
- 块级元素 (block) :可以独占一行,通过css调整宽高。
- div、ul、li、ol、address
- 内联元素 (inline-block) :内容决定大小、可以改变宽高
- img
- 总结:凡是带有inline属性的元素都具有文字特性 比如img的分隔符问题。。解决方式将其去掉间隙。写成一行。
- 注意:所有的标签都有自己原始的margin、padding值。要初始化。
5、开发思路 先定义css 后html
html模版:
<div class="red size1"></div>
<div class="green size2"></div>
<div class="gray size3"></div>
css模版:
/* 便于多种组合 */
.red {
background-color: red;
}
.green {
background-color: green;
}
.gray {
background-color: gray;
}
.size1 {
width: 100px;
height: 100px;
}
.size2 {
width: 200px;
height: 200px;
}
.size3 {
width: 300px;
height: 300px;
}