CSS常见属性

Paste_Image.png

文字属性

font-style

• 作用：规定文字样式
• 格式： font-style: italic;
• 取值:normal默认正常的 和 italic倾斜的
• 快捷键:
  • fs font-style: italic;
  • fsn font-style: normal;

font-weight

• 作用：规定文字粗细
• 格式： font-weight: bold;
• 取值:
  • 单词取值:bold 加粗、bolder 比加粗还要粗、lighter 细线， 默认就是细线
  • 数字取值：100-900之间整百的数字
• 快捷键：
  • fw font-weight:;
  • fwb font-weight: bold;
  • fwbr font-weight: bolder;

font-size

• 作用：规定文字大小
• 格式： font-size: 30px;
• 取值： px(像素 pixel)
• 快捷键：
  • fz font-size:;
  • fz30 font-size: 30px;

font-family

• 作用：规定文字字体
• 格式: font-family:"楷体";
• 取值: 各种字体名称
• 快捷键:ff font-family:;
• 注意点:
  • 如果取值是中文， 需要用双引号或者单引号括起来
  • 设置的字体必须是用户电脑里面已经安装的字体

字体属性补充

• 如果设置的字体不存在, 那么系统会使用默认的字体来显示
  • 默认一般使用宋体
• 如果设置的字体不存在, 而我们又不想用默认的字体来显示怎么办?
  • 可以给字体设置备选方案
  • 格式:font-family:"字体1", "备选方案1", ...;
• 如果想给中文和英文分别单独设置字体, 怎么办?

/*给英文和中文单独设置字体*/
font-family:Arial,"微软雅黑";

字体对应的英文
宋体 SimSun
黑体 SimHei
微软雅黑 Microsoft YaHei

• 在企业开发中最常见的字体有以下几个
  • 中文: 宋体/黑体/微软雅黑
  • 英文: "Times New Roman"/Arial

文字属性缩写

font: style weight size family;

例如：
font:italic bold 10px "微软雅黑";

注意：
size 和family不能省略 否则没有效果
size 和family位置不能乱放 size一定要在family的前面且family要放在所有属性的最后面

文本属性

text-decoration

• 作用: 给文本添加装饰

• 格式: text-decoration: underline;

• 取值:

  • underline 下划线
  • line-through 删除线
  • overline 上划线
  • none 什么都没有, 最常见的用途就是用于去掉超链接的下划线

• 快捷键:

  • td text-decoration: none;
  • tdu text-decoration: underline;
  • tdl text-decoration: line-through;
  • tdo text-decoration: overline;

text-align

• 作用: 设置文本水平对齐方式
• 格式: text-align: center;
• 取值:
  • left 左
  • right 右
  • center 中
• 快捷键:
  • ta text-align: left;
  • tar text-align: right;
  • tac text-align: center;

text-indent

• 作用: 设置文本缩进
• 格式: text-indent: 2em;
• 取值: 2em, 其中em是单位, 一个em代表缩进一个文字的宽度
• 快捷键:
  • ti text-indent:;
  • ti2e text-indent: 2em;

颜色属性

在CSS中如何通过color属性来修改文字颜色
有三种方式来表示

/*通过英文设置 但是颜色有限制*/
color: red;
/*通过RGB设置*/
color:rgb(200,200,200);
/*通过RGBA设置*/
color: rgba(200,200,200,0.8);
/*通过16进制设置*/
color: #FFFFff;