CSS基础【2】：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