Web前端学习—基础篇(12)_CSS常用样式、文本文字属性、文本属性

前端学习——基础篇

四、CSS学习

4.4、css常用样式

4.4.1、文本文字属性

4.4.1.1、文字属性

photoshop中，窗口菜单--字符，打开字符面板

font-family属性 字体

• 如果字体是中文字体或字体中包含空格，则字体名称必须加引号
• 可以将多个字体名称作为一个回退系统，如果浏览器不支持第一种字体，则尝试下一种，多个字体之间用逗号隔开
• 中英文混排字体，英文字体放在前面
  font-family: Arial, "微软雅黑";

font-size属性 文字大小
属性值单位像素px

font-style属性 文字样式

• font-style: italic; 斜体字
• font-style: normal; 正常

font-weight属性 文字加粗 指定9级粗度，范围100~900之间

• font-weight: lighter; 更细 (100~300)
• font-weight: normal; 正常 (400)
• font-weight: bold; 加粗 (700)
• font-weight: bolder; 更粗 (900)

line-height属性 行高 文字在行高范围内垂直居中
属性值： 数值

.content1{
    line-height:2;	/*此时为字号的倍数，2就是2倍的font-size*/
}
.content2{
    line-height:20px;	/*此时单位为px,20像素的行高 *
}

​ 行高撑不起盒高(必须有内容，行高才能呈现)

photoshop中 视图菜单--标尺
参考线：在标尺上，按住鼠标左键，拖拽鼠标
按住alt键，滚动鼠标滚轮

font属性
font: [font-style] [font-weight] font-size[/line-height] font-family;
注意：简写要有效，必须要有font-size属性和font-family属性

4.4.1.2、文本属性

color属性 文字颜色

• 英文名称：red green blue black orange transparent(透明)
• 十六进制色值：#加六位十六进制数（0-9a-f）红色：#ff0000 -- #f00 #333444 #223344--#234
  ps中，英文状态i键，右键单击--拷贝颜色的十六进制代码
• rgb(r,g,b)：r-red红色，g-green 绿色，b-blue蓝色，取值范围0~255之间
• rgba(r,g,b,a)：r-red红色，g-green 绿色，b-blue蓝色，取值范围0_{255之间；a-alpha透明度取值0}1之间表示半透明效果，0表示完全透明，1表示完全不透明

text-align属性 文字水平对齐方式

• text-align: left; 默认值，水平居左
• text-align: center; 水平居中
• text-align: right; 水平居右
• text-align: justify; 分散对齐

text-indent属性 首行缩进
属性值单位px|em

text-indent: 100px;/* 向右缩进 */
text-indent: -100px;/* 向左缩进 */
text-indent: 2em;/* em单位表示字符宽度的倍数 */

text-decoration属性 文本装饰线

• text-decoration: underline; 下划线
• text-decoration: overline;/* 上划线 */
• text-decoration: line-through;/* 删除线 */
• text-decoration: none;/* 去掉文本装饰线 */

letter-spacing属性 字间距

word-spacing属性 词间距

text-transform属性 字母大小写转换

• text-transform: uppercase;/* 全大写 */
• text-transform: lowercase;/* 全小写 */
• text-transform: capitalize;/* 首字母大写 */

4.4.3、css长度单位

（1）px像素

• 相对于显示器的屏幕分辨率
• 值是固定
• 计算比较容易

（2）em

• 相对长度单位，相对于父元素的font-size属性值而言
• 值不固定
• 浏览器默认字号16px，未经调整的浏览器符合1em = 16px

（3）rem

• 相对长度单位，相对于根元素的font-size属性值而言
• 值不固定
• 浏览器默认字号16px，未经调整的浏览器符合1rem = 16px
• css3新增单位，在IE8及更早版本的浏览器中不兼容

（4）%

• 相对长度单位