H5前端开发学习笔记

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

2018-07-09  本文已影响0人  夜莺之刃

本节内容

文字相关属性

规定文字样式的属性

font-style: inherit;

快捷键:fs

规定文字粗细的属性

 font-weight:bolder;

快捷键:fw

规定文字大小的属性

font-size: 30px;

快捷键:fz

规定文字字体的属性

font-family: 'console'

快捷键:ff

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

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

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

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

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

补充

企业开发中,最常用的字体:

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

注释:

/*  */

文字属性的简写

缩写格式:

font:style weight size family

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

注意点

文本属性

  1. 文本装饰属性
text-decoration: underline;

快捷键:td ,默认none

  1. 文本水平对齐属性
text-align: center

快捷键:ta

  1. 文本缩进属性
text-indent: 2em;

快捷键:ti

颜色控制属性

在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。
    • 注意点:
      • 若当前颜色对应的两位数字不一样,就不能简写;
      • 若两位相同的数字不是属于同一个颜色的,也不能简写。
上一篇 下一篇

猜你喜欢

热点阅读