CSS-常见属性
Posted muzidaitou
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS-常见属性相关的知识，希望对你有一定的参考价值。
1.颜色属性
color属性定义文本的颜色，有4种格式：
（1）color:green
（2）color:#ff6600 简写式：color:#f60
（3）color:rgb(255,255,255)
红（R），绿（G），蓝（B）每个取值范围都是0~255
（4）color:rgba(255,255,255,1)
RGBA是代表Red、Green、Blue和Alpha（色彩空间）透明度
代码示例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS常见属性</title> 6 <style type="text/css"> 7 /* 8 pcolor:red 9 10 11 pcolor:#177199 12 pcolor:#ff(红) 66(绿) 00(蓝) 13 pcolor:#f(红) 6(绿) 0(蓝) 14 pcolor:#f60 15 16 17 pcolor:rgb红(r),绿(g),蓝(b) 0-255的取值范围 18 pcolor:rgb(255,0,0) 红色 19 pcolor:rgb(0,255,0) 蓝色 20 pcolor:rgb(0,0,255) 绿色 21 22 23 */ 24 .hacolor:rgb(255,0,0,1) 25 .hbcolor:rgb(255,0,0,0.8) 26 .hccolor:rgb(255,0,0,0.6) 27 .hdcolor:rgb(255,0,0,0.4) 28 .hecolor:rgb(255,0,0,0.2) 29 .hfcolor:rgb(255,0,0,0) 30 </style> 31 </head> 32 <body> 33 <p> 34 <h1 class="ha">台风要来了！</h1> 35 <h1 class="hb">台风要来了！</h1> 36 <h1 class="hc">台风要来了！</h1> 37 <h1 class="hd">台风要来了！</h1> 38 <h1 class="he">台风要来了！</h1> 39 <h1 class="hf">台风要来了！</h1> 40 </p> 41 </body> 42 </html>
2.字体属性
（1）font-size字体大小
| px | 设置一个固定的值 |
| % | 父元素的百分比 |
| smaller | 比父元素更小 |
| larger | 比父元素更大 |
| inherit | 继承父元素的大小 |
（2）font-family定义字体
font-family:Microsoft YaHei,serif;
可以使用","隔开，以确保当字体不存在时直接选择下一个。
字体可以上网搜一下其英文，比如微软雅黑--Microsoft YaHei
（3）font-weight字体加粗
normal（默认值）、bold（粗）、bolder（更粗）、lighter（更细）
400=normal，而700=bold，取值必须是100-900的整百数
（4）font-style字体样式
| normal | 正常（标准） |
| italic | 斜体 |
| oblique | 倾斜 |
| inherit | 继承 |
（5）font-variant小型大写字母显示文本
| normal | 标准 |
| small-caps | 小型大写字母显示文本 |
| inherit | 继承 |
3.背景属性
（1）背景颜色 background-color
（2）背景图片 background-image
background-image:url(图片路径)
background-image:none
（3）背景重复 background-repeat
| repeat | 重复平铺满 |
| repeat-x | 向x轴重复 |
| repeat-y | 向y轴重复 |
| no-repeat | 不重复 |
（4）背景位置background-position
横向(left,center,right)
纵向(top,center,bottom)
用数值表示
简写方式：
代码示例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>背景相关属性</title> 6 <style type="text/css"> 7 body 8 background:#f2f2f2 url(car.jpg) no-repeat 20px 20px 9 10 </style> 11 </head> 12 <body> 13 14 </body> 15 </html>
显示效果：
代码示例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>背景相关属性</title> 6 <style type="text/css"> 7 div 8 width: 600px; 9 height:400px; 10 background: #f2f2f2 url(car.jpg) no-repeat 20px 20px; 11 12 </style> 13 </head> 14 <body> 15 <div></div> 16 </body> 17 </html>
显示效果：
4.文本属性
（1）text-align 横向排列
值：left、center、right
（2）line-height 文本行高
| % | 基于字体大小的百分比行高 |
| 数值 | 基于像素设置固定值 |
（3）text-indent 首行缩进
| % | 父元素的百分比 |
| px | 固定值，默认0 |
| inherit | 继承 |
（4）letter-spacing 字符间距
| normal | 默认 |
| length | 设置具体的数值（可以是负值） |
| inherit | 继承 |
（5）word-spacing 单词间距
| normal | 标准间距 |
| px | 固定值 |
| inherit | 继承 |
（6）direction 文本方向
| rtl | 从左到右，默认值 |
| ltr | 从右到左 |
| inherit |
继承 |
（7）text-transform 文本大小写
| none | 默认 |
| capitalize | 每个单词首字母大写 |
| uppercase | 每个单词全部大写 |
| lowercase | 每个单词全部小写 |
| inherit | 继承 |
代码示例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文本属性</title> 6 <style type="text/css"> 7 div 8 width: 900px; 9 height: 300px; 10 11 p 12 text-align:left; 13 font-size:20px; 14 line-height: 40px; 15 text-indent: 40px; 16 letter-spacing:20px; 17 word-spacing: normal; 18 direction:ltr; 19 text-transform: capitalize; 20 21 </style> 22 </head> 23 <body> 24 <div> 25 <p>南京邮电大学南京邮电大学南京邮电大学南京邮电大学</p> 26 <p>nan jing you dian da xue</p> 27 </div> 28 </body> 29 </html>
5.边框属性
（1）边框风格 border-style
- border-style 统一风格（简写风格）
- 单独定义某一方向的边框样式：
| border-bottom-style | 下边框样式 |
| border-top-style | 上边框样式 |
| border-left-style | 左边框样式 |
| border-right-style | 右边框样式 |
- 边框风格样式的属性值：
| none | 无边框 |
| solid | 直线边框 |
| dashed | 虚线边框 |
| dotted | 点状边框 |
| double | 双线边框 |
| groove | 凸槽边框 |
| ridge | 垄状边框 |
| inset | inset边框 |
| outset | outset边框 |
| inherit | 继承 |
（2）边框宽度 border-width
- border-width 统一风格
- 单独风格：
| border-top-width | 上边框宽度 |
| border-bottom-width | 下边框宽度 |
| border-left-width | 左边框宽度 |
| border-right-width | 右边框宽度 |
- 边框宽度的属性值：
| thin | 细边框 |
| medium | 中等边框 |
| thick | 粗边框 |
| px | 固定值的边框 |
| inherit | 继承 |
（3）边框颜色 border-color
- border-color 统一风格
- 单独风格：
| border-top-color | 上边框颜色 |
| border-bottom-color | 下边框颜色 |
| border-left-color | 左边框颜色 |
| border-right-color | 右边框颜色 |
- 属性值：
| 颜色的名称 | red、green |
| RGB | rgb(255,255,0) |
| RGBA | rgba(255,255,0,0.1) |
| 十六进制 | #ff0、#ff0000 |
- 属性值的四种情况：
| 一个值 | border-color:(上、下、左、右); |
| 两个值 | border-color:(上下)(左右); |
| 三个值 | border-color:(上)(左、右)(下); |
| 四个值 | border-color:(上)(右)(下)(左) |
（4）简写方式
border:solid 2px #f60
代码示例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>边框属性</title> 6 <style type="text/css"> 7 div 8 width:50px; 9 height:50px; 10 float:left; 11 margin-right: 10px; 12 background-color: #f60; 13 border-width:medium; 14 border-color:rgb(0,0,255); 15 border-color:green blue yellow black; 16 17 .div0 18 border-style:solid; 19 border-width: 5px; 20 21 .div1 22 border-top-style: solid; 23 24 .div2 25 border-bottom-style: dashed; 26 27 .div3 28 border-left-style: dotted; 29 30 .div4 31 border-right-style:double; 32 33 .div5,.div6,.div7,.div8 34 width:80px; 35 height:30px; 36 37 border-width:20px; 38 background: none; 39 border-color: #ddd; 40 41 /* 42 border: solid 2px black 43 */ 44 45 .div5 46 border-style:groove; 47 48 .div6 49 border-style:ridge; 50 51 .div7 52 border-style:inset; 53 54 .div8 55 border-style:outset; 56 57 58 </style> 59 </head> 60 <body> 61 <div class="div0">div0</div> 62 <div class="div1">solid</div> 63 <div class="div2">dashed</div> 64 <div class="div3">dotted</div> 65 <div class="div4">double</div> 66 <div class="div5">凸槽边框</div> 67 <div class="div6">垄状边框</div> 68 <div class="div7">inset边框</div> 69 <div class="div8">outset边框</div> 70 <div class="div9"></div> 71 72 </body> 73 </html>
6.列表属性
（1）标记的类型 list-style-type
| none | 无标记 |
| disc | 默认，标记是实心圆 |
| circle | 标记是空心圆 |
| square | 标记是实心方块 |
| decimal | 标记是数字 |
| decimal-leading-zero | 0开头的数字标记（01，02，03等） |
| lower-roman | 小写罗马数字（i，ii,iii,iv,v等） |
| upper-roman | 大写罗马数字（I,II,III,IV,V等） |
| lower-alpha | 小写英文字母（a,b,c,d,e等） |
| upper-alpha | 大写英文字母(A,B,C,D,E等) |
| lower-greek | 小写希腊字母（α，β，γ等） |
| lower-latin | 小写拉丁字母（a,b,c,d,e等） |
| upper-latin | 大写拉丁字母(A,B,C,D,E等) |
| hebrew | 传统的希伯来编号方式 |
| armenian | 传统的亚美尼亚编号方式 |
| georgian | 传统的乔治亚编号方式（an,ban,gan等） |
| cjk-ideographic | 简单的表意数字 |
| hiragana | 标记是：a,i,u,e,o,ka,ki等（日文片假名） |
| katakana | 标记是：A,I,U,E,KA,KI等（日文片假名） |
| hiragana-iroha | 标记是：i,ro,ha,ni,ho,he,to等（日文片假名） |
| katakana-iroha | 标记是：I,RO,HA,NI,HO,HE,TO等（日文片假名） |
（2）标记的位置 list-style-position
| inside | 列表项目标记放置在文本以内，且环绕文本根据标记对齐。 |
| outside | 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。 |
| inherit | 规定应该从父元素继承list-style-position属性的值. |
（3）设置图像列表标记 list-style-image
| URL | 图像的路径 |
| none | 默认，无图形被显示 |
| inherit | 规定应该从父元素继承list-style-image属性的值 |
（4）简写方式 list-style
list-style:circle outside url(arr.png);
代码示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>列表属性</title> 6 <style> 7 /* 8 ol 9 list-style-type:circle 10 11 ul 12 list-style-type: disc; 13 14 15 ul.inside 16 list-style-position: inside 17 18 ul.outside 19 list-style-position: outside 20 21 22 ul.gif 23 list-style-image: url("arr.gif"); 24 25 ul.png 26 list-style-image: url("arr.png"); 27 28 */ 29 ul 30 list-style:circle outside url(arr.png); 31 32 </style> 33 </head> 34 <body> 35 <p>无序列表无序列表无序列表无序列表无序列表</p> 36 <ul class="gif"> 37 <li>无序列表</li> 38 <li>无序列表</li> 39 <li>无序列表</li> 40 <li>无序列表</li> 41 <li>无序列表 42 <ul class="png"> 43 <li>无序列表</li> 44 <li>无序列表</li> 45 <li>无序列表</li> 46 <li>无序列表</li> 47 <li>无序列表</li> 48 </ul> 49 </li> 50 </ul> 51 <p>无序列表无序列表无序列表无序列表无序列表</p> 52 <ul class="outside"> 53 <li>无序列表</li> 54 <li>无序列表</li> 55 <li>无序列表</li> 56 <li>无序列表</li> 57 <li>无序列表</li> 58 </ul> 59 60 <!--<ol>--> 61 <!--<li>无序列表</li>--> 62 <!--<li>无序列表</li>--> 63 <!--<li>无序列表</li>--> 64 <!--<li>无序列表</li>--> 65 <!--<li>无序列表</li>--> 66 <!--</ol>--> 67 68 </body> 69 </html>
以上是关于CSS-常见属性的主要内容，如果未能解决你的问题，请参考以下文章