HTML5 学习笔记 2017-02-14 am

字符实体

  • 在 html 中对空格/回车/tab 不敏感,会把多个空格/回车/tab 当作一个空格来处理
  • 什么是字符实体?
    在HTML 中有的字符是被 Html 保留的,有的 html 字符在 html 中是有特殊含义的,是不能在浏览器中直接显示出来的,那么这些东西要想显示出来必须通过字符实体
  • 空格   一个   就是一个空格,有多少个  就有多少个空格
  • < &lt;小于符号 < (less than)
  • > &gt;大于符号 > (greater than)
  • © &copy 版权符号

体验 CSS

  • 有一个标题(H1)还有一些段落(p)标题是居中的,段落也是居中的,所以我们可以设置 H 标签和 P 标签对的 align 属性等于 center 来实现
  • 标题和段落都有颜色,都有字体,都有大小,所以需要给文字包裹一个 font 标签,然后通过 font 标签来设置颜色和字体以及大小
  • 通过标签来修改样式的缺点
  • 需要记忆哪些标签有那些属性,如果该标签没有这个属性,那么设置了也没有效果
  • 当需求变更时我们需要修改大量的代码才能满足现有需求
  • HTML 只有一个作用就是用来添加语义
  • 所以在企业开发中修改样式都是交给 CSS 来做
  • 通过 CSS 来修改样式有什么好处?
  • 不用记忆哪些属性属于哪个标签
  • 当需求变更时我们不需要修改大量的代码就可以满足需求
  • 在前端开发中 CSS 只有一个作用,就是用来修改样式
<head>
        <style type="text/css">
                h1{
                    text-align:center;
                    color:red;
                    font-family:"微软雅黑";
                    }
        </style>
</head>

CSS 的格式

格式:

<style type="text/css">
        标签名称{
                      属性名称:属性对应的值;
                       ........
}
</style>

注意点:

  • style 标签必须写在 head 标签的开始标签和结束标签之间(也就是必须和 title 标签是兄弟关系)
  • style 标签中的 type 属性其实可以不用写,默认就是 type="text/css"
  • 设置样式时必须按照固定格式来设置 key:value;其中 : 和 ; 不能省略
  • CSS 怎么学
  • CSS 的学习一共分为两大部分,一个是 CSS 的属性,另一个是 CSS 选择器,也就是说这两部分学完 CSS 就没有别的东西了

文字属性

规定文字样式的属性
格式:font-style:italic;
取值:
nomal: 正常的,默认的就是正常的
italic: 倾斜的
快捷键:
fsi font-style:italic;
fsn font-style:nomal;

规定文字粗细的属性
格式:font-weight:bold;
单词取值:
bold 加粗
bolder 比加粗还粗
lighter 细线,默认就是细线
数字取值:100-900之间整百的数字
快捷键:
fw font-weight:;
fwb font-weight:bold;
fwbr font-weight:bolder;

规定文字大小的属性
格式:font-size:30px
单位: px (像素 pixel)
注意点
通过 font-size 设置大小一定要带单位也就是一定要写 px
快捷键:
fz font-size:;
fz30 font-size:30px;

规定文字字体的属性
格式:font-family:"楷体"
注意点

  • 如果取值是中文,需要用双引号或者单引号括起来
  • 设置的字体必须是用户电脑里已经安装的字体
    快捷键:
    ff font-family:;
<style type="text/css">
                p{
                  font-style:italic;
                  font-weight:bold;
                  font-size:10px;
                  font-family:"楷体"
                  }
</style>

字体属性补充

  • 如果设置的字体不存在,那么系统会使用默认的字体来显示,默认宋体

  • 如果设置的字体不存在,而我们又不想用默认的字体来显示怎么办?可以给字体设置备选方案
    格式:font-family:"字体1","备选方案1", ...;

  • 如果想给中文和英文分别单独设置字体,怎么办?

  • 但凡是中文字体,里面都包含了引文

  • 但凡是英文字体,里面都没有包含中文

  • 也就是说中文字体可以处理英文,而英文字体不能处理中文
    注意点:
    如果想给界面中的英文单词设置字体,那么英文的字体必须写在中文的前面

  • 补充:在企业开发中最常见的字体有以下几个

  • 中文:宋体/黑体/微软雅黑

  • 英文:Times New Roman /Arial

  • 还需要知道一点就是,并不是名称是英文就一定是英文字体,因为中文字体其实都有自己的英文名称,所以是不是中文字体主要看能不能处理中文
    宋体: SimSun
    黑体: SimHei
    微软雅黑:Microsoft YaHei

文字属性的缩写

缩写格式

font:style weight size family;

例如

font:italic bold 10px "楷体"

注意点

  • 在这种缩写格式中有的属性可以省略,style weight可以省略
  • 在这种缩写格式中 style 和 weight 的位置可以交换
  • 在这种缩写格式中有的属性不能省略,size family 不能省略
  • size 和 family 的位置是不能随便乱放的,size 一定要写在 family 的前面,而且 size 和 family 必须写在所有属性的最后

文本属性

  • 文本装饰的属性
    格式:text-decoration:underline;

取值:
underline 下划线
line-through 删除线
overline 上划线
none 什么都没有,最常用的用途就是去掉 a 标签的下划线

快捷键:
td text-decoration:none;
tdu text-decoration:underline;
tdl text-decoration:line-through;
tdo text-decoration:overline;

  • 文本水平对齐属性
    格式:text-align:right;

取值:
left 左
right 右
center 中

快捷键
ta text-align:;
tar text-align:right;
tal text-align:left;
tac text-align:center;

  • 文本缩进的属性
    格式:text-indent:2em;

取值:
2em,其中 em 是单位,一个 em 代表缩进一个文字的宽度

快捷键:
ti text-indent:;
ti2e text-indent:2em;

颜色属性

  • 在 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);

  • 在前端开发中其实并不常用黑色,只要让红绿蓝的值一样就是灰色,而且如果这三个值越小那么就越偏黑色,越大就越偏白色
    例如:color: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

  • 什么是十六进制,十六进制和十进制一样都是一种计数方式,在十进制中取值范围0-9逢十进一,在十六进制中取值范围0-F,逢十六进一

  • 十六进制和十进制转换的公式,用十六进制第一位*16 + 十六进制第二位 = 十进制

  • 十六进制的缩写,在 CSS 中只要十六进制的颜色每两位的值都是一样的,那么可以简写为一位
    例如:#ffee00 = #fe0
    注意点

  • 如果当前颜色对应的两位数字不一样,那么不能简写,#123456

  • 如果两位相同的数字不是属于同一个颜色那么不能简写,#122334

  • 关于为什么 rgb/rgba 每一个通道取值是0-255,因为我们的电脑显示器分24位和32位,rgb 每一个通道占8个二进制位,8个二进制位范围是0-11111111(二进制 2的8次方-1=255),32位对应的 rgba。
  • 关于为什么用十六进制表示,十六进制范围是0-F 转化成二进制范围就是0-1111,两位十六进制的范围就是0-FF 转化成二进制就是0-11111111,一位十六进制最大可以代表四位二进制,对应0-255 取值
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,968评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,601评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,220评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,416评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,425评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,144评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,432评论 3 401
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,088评论 0 261
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,586评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,028评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,137评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,783评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,343评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,333评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,559评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,595评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,901评论 2 345

推荐阅读更多精彩内容

  • FreeCodeCamp - HTML5 and CSS 发现原来在另外一台电脑学 FreeCodeCamp 的时...
    付林恒阅读 9,340评论 2 17
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,808评论 0 6
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 1,985评论 1 4
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,061评论 0 40
  • https://segmentfault.com/q/1010000002955089 审查元素查看,添加时,会不...
    凯旋阅读 180评论 0 0