H5前端开发学习笔记——0x08CSS属性

本节内容

• 课时61 文字相关属性(掌握)
• 课时62 字体属性补充(掌握)
• 课时63 文字属性的简写(掌握)
• 课时64 文本属性(掌握)
• 课时65 颜色控制属性上(理解)
• 课时66 颜色控制属性下(理解)

文字相关属性

规定文字样式的属性

font-style: inherit;

快捷键：fs

• normal:正常样式，默认值,快捷键：fsn
• italic:倾斜

规定文字粗细的属性

 font-weight:bolder;

快捷键：fw

• 单词取值
  • bold 加粗
  • bolder 加粗还要粗 快捷键：fwbr
  • lighter 细线，默认值
• 数值取值
  • 100到900之间，整百数字
  • 100 细线
  • 900 最粗
  • 一般用的比较少

规定文字大小的属性

font-size: 30px;

快捷键：fz

• 单位的像素，px，即pixel
• 通过它设置大小，一定要写px单位
• 快速编写：fz30

规定文字字体的属性

font-family: 'console'

快捷键：ff

• 若是中文字体名称，要用单或者双引号括起来
• 设置的字体要是用户电脑内有的字体

若字体用户电脑不存在怎么办

1. 不存在的话，默认是宋体显示
2. ff是支持备选字体的，若首选字体不存在，就选备选队列中的字体，只需要将这些字体用逗号分来罗列出来即可

font-family: '主选字体','备选1','备选2','备选3';

如何单独设置英文或者中文字体

• 但凡是中文字体，里面都包含英文
• 但凡是英文字体，里面都不包含中文

font-family: Arial, '微软雅黑';

这样，英文字体就是第一个字体，因为中文字体Arial不提供，就是用备选的微软雅黑字体

补充

企业开发中，最常用的字体：

• 中文：宋体，黑体，微软雅黑
• 英文：Times New Roman，Arial

还有就是，并不是名称就是英文名称就是英文字体，中文字体可是也有英文名字的，这都看能不能处理英文来辨别

• 宋体 SimSun
• 黑体 SimHei
• 微软雅黑 Microsoft YaHei

注释：

/*  */

文字属性的简写

缩写格式：

font:style weight size family

p{
    font:italic bold 40px "SimHei"
}

注意点

• 在缩写格式中，有的属性值可以省略，如style，weight。且style和weight是可以交换位置的
• 在缩写格式中，有的属性值是不可以省略的，size，family不能省略。且size和family是不能随便乱放的，size一定要在family之前，size和family必须写在所有属性之后

文本属性

1. 文本装饰属性

text-decoration: underline;

快捷键：td ，默认none

• underline 下划线，快捷键tdu
• line-through 删除线，快捷键tdl
• overline 上划线，快捷键：tdo
• none 清除所有的装饰，啥都没有，对a标签很有用，可以去超链接下划线

2. 文本水平对齐属性

text-align: center

快捷键：ta

• center 居中 tac
• left 左 tal
• right 右 tar

3. 文本缩进属性

text-indent: 2em;

快捷键：ti

• 2em 缩进两个文字，em是字体个数单位，单位可以是任何单位，比如px，快捷键：ti2e

颜色控制属性

在css中如何用color修改颜色

    color: red;
    color: rgb(red, green, blue);
    color: rgba(red, green, blue, alpha);
    color: #FF0000;
    color: #F00;

其赋值方式有以下5类：

1. 英文单词赋值
   • 一般情况下，常见颜色都有其英文单词，但并非所有的颜色英文单词都能表达，一般用于做调试
2. RGB赋值
   • 三原色
   • 格式rgb(255,0,0)
   • 那么这个格式中的数字就是用来设置各光源元件的亮度
   • 取值从0到255，越大越亮
   • 灰色咋调节？当rgb同数值，并且数值越大越白，越小越黑
     • 例如rgb（10,10,10）
3. RGBA赋值
   • 他是css3推出的
   • 其中A是透明度的意思，取值从0到1,1就是不透明，0就是透明
4. 十六进制赋值
   • 每两位就对应一个颜色，6位数字对应rgb的三个颜色
   • 16进制转换10进制公公式
     • 16进制的第一位*16 + 十六进制的第二位 = 十进制（本公式仅适用于颜色转换）
     • 15 == 1*16 + 5 = 21
   • 00 == 0(十进制)
   • FF == 255(十进制)
5. 十六进制缩写赋值
   • 只要十六进制颜色，每两位的值都是一样的，就可以简写。
   • 例如： #FFEE00 就可以简写成 #FE0。
   • 注意点：
     • 若当前颜色对应的两位数字不一样，就不能简写；
     • 若两位相同的数字不是属于同一个颜色的，也不能简写。