CSS样式表之常用文本属性
断更了两周了，因为纠结之后在学java啦，但是还是要把学过的前端知识更完
以下的一些文本属性是CSS最常用的属性：
【长度单位】：px(像素)
【颜色单位】：
十六进制：#ffffff 分别对应红绿蓝的比例；最常用
颜色名称：red
rgb颜色：rgb（255,255,255）
【尺度属性】：
width、min-width、max-width
height、min-height、max-width
【文本属性】：
1、字体字号型：
font-weight：字体粗细 ；bold加粗、lighter细体、100-900数值（其中400为正常，700=bold）
font-size：字体大小 **px、**%（浏览器默认字体大小的百分比，绝大部分默认16px）
font-family：字体族，设置字体。
多个字体样式之间用逗号分隔，浏览器解析时，从左往右依次解析，直到选择到可用字体；
一般前面使用具体名称，最后一个使用字体族类名称（常用字体族类：衬线体serif、非衬线体sans-serif[常用]、等宽体Monospace）
例如：font-family=Arial,'Microsoft Yahei',sans-serif;
font-style：字体样式
（了解）font缩写形式：font-style font-variant font-weight font-size/line-height font-family
》》使用注意事项：顺序必须严格按照上述顺序；多个样式之间用空格个分隔，而且font-size/line-height必须作为一对 用/分隔；
font-size和font-family必须指定，其他样式不指定将采用默认样式显示
》》例如：font: italic bold 75%/1.8 "microsoft yahei",sans-serif;
倾斜 加粗 字号/行高 字体族（微软雅黑，非衬线字体族）
2、字体颜色：
color
opacity：透明度 css3的新属性；调整时，控件及子空间均透明，而用 rgba调整时，只会使本控件透明，子空间不发生变化
3、行距、对齐等：
line-height：行高 写法：像素单位48px；不带px 正常行高的倍数；百分数
》》典型应用，调整空间中，文字垂直居中的方式：控件的heijht=控件的line-height
text-align：块级元素中，文字的水平对齐方式
letter-spacing：字符之间的距离
text-decoration：文本修饰 下划线underline;删除线line-through;上划线overline；none
overflow：控制超出范围文本的显示方式
auto 根据文字多少自动显示滚动条
scroll 显示滚动条
hidden 隐藏超出范围的部分
text-overflow：设置多于文字的显示方式
clip 裁剪；
ellipsis 省略号显示
【重点】让每行多余文字显示省略号：
white-space: nowrap; 如果是中文，需设置行末不断行
overflow: hidden; 设置超出控件范围隐藏
text-overflow: ellipsis; 设置多余文本省略号显示
white-space: nowrap; 设置中文不换行，显示滚动条
word-break:设置英文行末断行显示 break-all按字母断行；break-word按单词（空格）断行
text-shadow：文本阴影，有四个属性值：水平阴影距离；垂直阴影距离；阴影模糊距离；阴影颜色
例：text-shadow: 4px 4px 3px red;
text-indent：首行缩进，其他行正常，可用像素值调整缩进大小
text-stroke：描边 例如：-webkit-text-stroke: 1px blue;
1 <style type="text/css"> 2 .div1{ 3 width: 100px; 4 height: 50px; 5 background-color: rgb(0,255,0); 6 /*font: italic bold 75%/1.8 "microsoft yahei",sans-serif;*/ 7 font-weight: normal; /*字体粗细正常*/ 8 font-size: 18px; 9 font-family: "微软雅黑",sans-serif; 10 line-height: 50px; /*行高*/ 11 font-style: italic; 12 opacity: 0.5; /*整个div都透明，包括背景和字体等*/ 13 white-space: nowrap; 14 overflow: hidden; 15 text-overflow: ellipsis; 16 } 17 .div2{ 18 width: 200px; 19 height: 150px; 20 color: orange; 21 font-size: 35px; 22 font-weight: bold; 23 background-color: rgba(0,255,0,0.5); 24 /*只是背景色,即只改变要求改变的颜色和透明度*/ 25 line-height: 150px; 26 letter-spacing: 10px; 27 text-align: center; 28 /*text-decoration: underline;*/ 29 text-decoration: line-through; 30 text-shadow: 5px 5px 3px red; 31 /*字体阴影*/ 32 text-indent: 40px; 33 /*字体首行缩进40px*/ 34 -webkit-text-stroke: 1px blue; 35 /*字体描边*/ 36 overflow: auto; 37 /*超出字体的显示形式：自动*/ 38 white-space: nowrap; 39 /*不换行*/ 40 } 41 </style> 42 </head> 43 <body> 44 <div class="div1"> 45 我是第一港口股好了回家了给你明显 46 </div> 47 <div class="div2"> 48 49 我是第二个人哦 50 </div> 51 </body>
CSS常用属性还有背景，关于背景比较多，下一篇专门单独写一篇详细讲背景的内容
