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标签很有用,可以去超链接下划线
  1. 文本水平对齐属性
text-align: center

快捷键:ta

  • center 居中 tac
  • left 左 tal
  • right 右 tar
  1. 文本缩进属性
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。
    • 注意点:
      • 若当前颜色对应的两位数字不一样,就不能简写;
      • 若两位相同的数字不是属于同一个颜色的,也不能简写。
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 197,814评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,124评论 2 375
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 144,814评论 0 327
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,924评论 1 268
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,815评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,562评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,944评论 3 388
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,582评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,859评论 1 293
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,881评论 2 314
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,700评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,493评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,943评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,115评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,413评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,978评论 2 343
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,182评论 2 339

推荐阅读更多精彩内容

  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,298评论 2 66
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    X先生_未知数的X阅读 15,962评论 3 119
  • 字符实体 在 html 中对空格/回车/tab 不敏感,会把多个空格/回车/tab 当作一个空格来处理 什么是字符...
    GodlinE阅读 345评论 0 0
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,324评论 0 7
  • 开门见山,直入主题。 至于Angluar程序架构和搭建环境,这里不多说 要实现星级评分需要解决6个问题 就是效果图...
    南蓝NL阅读 1,042评论 0 0