CSS常见属性

CSS常见属性

文字属性

font-style

• 做用：规定文字样式
• 格式：font-style: italic;
• 取值：
  • normal：正常的，默认就是正常的
  • italic：倾斜的

font-weight

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

font-size

• 做用：规定文字大小
• 格式：font-size: 30px;
• 取值：px（像素 pixel）

font-family

• 做用：规定文字字体
• 格式：font-family: "楷体";
• 取值：各类字体名称
• 注意点：
  • 若是取值是中文， 须要用双引号或者单引号括起来
  • 设置的字体是用户电脑里面已经安装的字体

字体属性补充

• 若是设置的字体不存在，那么系统会使用默认的字体来显示
• 默认通常使用宋体
• 若是设置的字体不存在，而咱们又不想用默认的字体来显示，能够给字体设置备选方案
  • 格式：font-family: "字体1", "备选方案1", ... ;
• 若是想给中文和英文分别单独设置字体，怎么办？
  • 但凡是中文字体，里面都包含了英文
  • 但凡是英文字体，里面都没有包含中文
  • 也就是说中文字体能够处理英文，而英文字体不能处理中文
• 注意点：若是想给界面中的英文单独设置字体，那么英文的字体必须写在中文的前面

文字属性缩写

• 缩写格式：

  font: style weight size family;

• 例如：

  font: italic bold 10px "楷体";

• 注意点：

  • 在这种缩写格式中有的属性值能够省略，sytle 能够省略，weight 能够省略
  • 在这种缩写格式中 style 和 weight 的位置能够交换
  • 在这种缩写格式中有的属性值是不能够省略的，size 不能省略，family 不能省略
  • size 和 family 的位置是不能顺便乱放的，size 必定要写在 family 的前面，并且 size 和 family 必须写在全部属性的最后

文本属性

text-decoration

• 做用：给文本添加装饰
• 格式：text-decoration: underline;
• 取值：
  • underline 下划线
  • line-through 删除线
  • overline 上划线
  • none 什么都没有，最多见的用途就是用于去掉超连接的下划线

text-align

• 做用：设置文本水平对齐方式
• 格式：text-align: center;
• 取值：
  • left 左
  • right 右
  • center 中

text-indent

• 做用：设置文本缩进
• 格式：text-indent: 2em;
• 取值：2em，其中em是单位，一个 em 表明缩进一个文字的宽度

颜色属性

• 在 CSS 中经过 color 属性来修改文字颜色

• 格式：color: 值;

• 取值：

  • 颜色英文单词（通常状况下常见的颜色都有对应的英文单词，可是英文单词可以表达的颜色是有限制的，也就是说不是全部的颜色都可以经过英文单词来表达）

  • rgb（rgb其实就是三原色，其中 r (red 红色) 、g (green 绿色)、b (blue 蓝色)）

    • 格式：rgb(0, 0, 0)
    • 三个数字分别表明三原色的红色、绿色、蓝色显示的亮度
    • 这其中的每个数字它的取值是 0-255，0表明不发光，255表明发光，值越大就越亮

    红色: rgb(255,0,0);
    绿色: rgb(0,255,0);
    蓝色: rgb(0,0,255);
    黑色: rgb(0,0,0);
    白色: rgb(255,255,255);
    灰色: rgb(200,200,200);
    只要让红色/绿色/蓝色的值都同样就是灰色

  • rgba

    • rgba 中的 rgb 和前面讲解的同样，只不过多了一个 a

    • a 表明透明度，取值是 0-1，取值越小就越透明

    • 例如：

      color: rgba(255, 0, 0, 0.2);

  • 十六进制

    • 经过十六进制来表示颜色其实本质就是RGB
    • 十六进制中是经过每两位表示一个颜色
    • 例如：#FFEE00，FF表示R，EE表示G，00表示B
    • 在 CSS中 只要十六进制的颜色每两位的值都是同样的，那么就能够简写为一位，例如：#FFEE00 至关于 #FE0