多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
## 13.4.1.概念 属性就是特征,就是描述性信息。就像人的特征信息有:姓名,性别,学历,年龄,身高,体重等等。 每个特征自然具有相应的特征值(数据)。 属性名和数据值,构成“一对”,通常会称为“名值对”。 css属性跟html属性对比如下: ``` html的属性写法: <标签名 属性1=”值1” 属性2=”值2” ...... > css的属性写法: 选择器{ 属性1:值2; 属性2:值2; ...... } ``` ## 13.4.2.属性总览 手册: 《CSS2.1中文完全参考手册.chm》 《CSS3.0(飘零雾雨版v4.2.4).chm》 各种属性大致分类如下: ![](https://img.kancloud.cn/f5/1a/f51aaf6d13276248d0d9c07f880701d1_256x368.png) ## 13.4.3.简单常用的几个css属性: ``` 1. color: 文字颜色(前景色) 2. font-size: 文字大小【px】 3. font-family: 字体,比如:微软雅黑, 黑体,宋体,仿宋体,”Times New Roman” 4. font-style: 就是设置字形是”正体”还是“斜体”(italic) 5. font-weight: 设置是否粗体【100-900】 6. background: 背景色 7. border: 设置边框 8. text-decoration: 【underline下划线,line-through中划线,overline上划线,none不设置】设置“装饰线”(下划线,中划线,上划线) 9. text-align: 对齐 10. line-height:行高 11. width: 宽 12. height: 高 ``` ![](https://img.kancloud.cn/8b/6c/8b6cb3bd3da9028f9bd720164aee3476_810x433.png) ### 13.4.3.1.Font简写: ![](https://img.kancloud.cn/bc/7d/bc7d71c8370fe52e4e5e957af16e94cc_828x270.png) ### 13.4.3.2.Color:颜色 ![](https://img.kancloud.cn/aa/a6/aaa60a74dcfcd91efbad76a411a3220a_824x174.png) ## 13.4.4.颜色 ### 13.4.4.1.预定义方式: 英文单词: red, blue, green, yellow, pink, purple ![](https://img.kancloud.cn/18/f9/18f904a9670b4e68afb152db638b30f8_819x88.png) ### 13.4.4.2.十六进制方式 ![](https://img.kancloud.cn/a9/f4/a9f42138d880292cbf42977319c086f3_827x131.png) 进制表示法: ![](https://img.kancloud.cn/8a/61/8a61a91b7471bc15c47b1123de2d6066_1275x392.png) 16进制表示法: 形式:#6个16进制数字! 前两个数字表示“红的配比”,中间两数字表示绿的配比,后两个数字表示蓝的配比。 举例: ``` color: #FF0000; color: #0F0000; color: #110000; color: #123456; color: #008800; color: #0000FF; ``` ### 13.4.4.3.RGB方式 ![](https://img.kancloud.cn/34/33/34336f69a64d8c06fb43645ded1bef67_812x249.png) RGB表示法: 将一个颜色,使用红(R,red), 绿(G,green), 蓝(B,blue)来表示。 这3个叫做“基本颜色”,都按0-255分为256个层级。 所有颜色,都可以使用这3个颜色的不同层级(配比)来调配而成。 形式:rgb(红的配比, 绿的配比,蓝的配比); 举例: ``` color: rgb(100, 30, 70), color: rgb(255, 0, 0) //这是红色 color: rgb(0,255, 0); //这是绿色 color:rgb(0, 0, 255); //蓝色 color:rgb(255, 255, 0); //黄色 ``` ### 13.4.4.4.RGBA方式: ![](https://img.kancloud.cn/1f/d3/1fd32e4a3a7584e6c6ff89997a64932d_810x134.png) RGBA表示法: A代表“透明度”,值从0到1的小数。0表示全透明。1表示不透明,此时就是RGB颜色 形式:rgba(红的配比, 绿的配比,蓝的配比,透明度); 举例: ``` color: rgba(100, 30, 70, 0.5), color: rgba(255, 0, 0, 0.66) //这是红色 ```