2019-05-28列表 单位 颜色单位 字体单位 和字体样式

列表就相当于去超市购物时的那个购物清单,在HTML也可以创建列表,在网页中一共有三种列表:

1、无序列表

2、有序列表

3、定义列表

无序列表

无序列表

使用ul标签来创建一个无序列表

使用li在ul中创建一个一个的列表项,一个li就是一个列表项

通过type属性可以修改无序列表的项目符号,可选值:

disc:默认值,实心的圆点

square:实心的方块

circle:空心的圆圈

注意:默认的项目符号我们一般都不使用

如果需要设置项目符号,则可以采用为li设置背景图片的方式来设置

ul和li都是块元素

有序列表和无序列表类似,只不过它使用ol来代替ul

有序列表使用有序的序号作为项目符号

type属性,可以指定序号的类型,可选值:

1,默认值,使用阿拉伯数字

a/A,采用小写或大写字母作为序号

i/I,采用小写或大写的罗马数字作为序号

ol也是块元素

列表之间都是可以互相嵌套,可以在无序列表中放个有序列表,也可以在有序列表中放一个无序列表

定义列表用来对一些词汇或内容进行定义

使用dl来创建一个定义列表,它有两个子标签

dt:被定义的内容

dd:对定义内容的描述

同样,dl、ul、ol之间都可以互相嵌套

长度单位

像素px

- 像素是我们在网页中使用得最多的一个单位

一个像素就相当于屏幕中的一个小点

我们的屏幕实际上就是由这些像素点构成的

但是这些像素点是不能直接看见的

- 不同显示器一个像素的大小也不相同

显示效果越好、越清晰,像素就越小,反之像素越大

百分比%

- 也可以将单位设置为一个百分比的形式

这样浏览器将会根据其父元素的样式来计算该值

- 使用百分比的好处是,当父元素的属性值发生变化时,子元素也会按照比例发生改变

- 在我们创建一个自适应的页面时,经常使用百分比作为单位

em

- em和百分比类似,它是相对于当前元素的字体大小来计算的

- 1em = 1font-size

- 使用em时,当字体大小发生改变时,em也会随之改变

- 当设置字体相关的样式时,经常会使用em

颜色单位:

在CSS可以直接使用颜色的单词来表示不同的颜色

红色:red

蓝色:blue

绿色:green

 也可以使用RGB值来表示不同的颜色

 - 所谓的RGB值指的是通过Red Green Blue三元色,

 通过这三种颜色的不同的浓度,来表示出不同的颜色

 - 例子:rgb(红色的浓度,绿色的浓度,蓝色的浓度);

 - 颜色的浓度需要一个0-255之间的值,255表示最大,0表示没有

 - 浓度也可以采用一个百分数来设置,需要一个0% - 100%之间的数字

 使用百分数最终也会转换为0-255之间的数

 0%表示0

100%表示255

 也可以使用十六进制的rgb值来表示颜色,原理和上边RGB原理一样,只不过使用十六进制数来代替,使用三组两位的十六进制数组来表示一个颜色,每组表示一个颜色

第一组表示红色的浓度,范围00-ff

 第二组表示绿色的浓度,范围00-ff

第三组表示蓝色的浓度,范围00-ff

 语法:#红色绿色蓝色

 十六进制:

 0 1 2 3 4 5 6 7 8 9 a b c d e f

00 - ff

00表示没有,相当于rgb中的0

ff表示最大,相当于rgb中255

 红色:#ff0000

*像这种两位两位重复的颜色,可以简写

 比如:#ff0000 可以写成 #f00

 #abc  #aabbcc

background-color: rgb(161,187,215);

 background-color: rgb(100%,50%,50%);

 background-color: #0000ff

background-color: #00f

background-color: #084098

长度单位

像素px

- 像素是我们在网页中使用得最多的一个单位

一个像素就相当于屏幕中的一个小点

我们的屏幕实际上就是由这些像素点构成的

但是这些像素点是不能直接看见的

- 不同显示器一个像素的大小也不相同

显示效果越好、越清晰,像素就越小,反之像素越大

百分比%

- 也可以将单位设置为一个百分比的形式

这样浏览器将会根据其父元素的样式来计算该值

- 使用百分比的好处是,当父元素的属性值发生变化时,子元素也会按照比例发生改变

- 在我们创建一个自适应的页面时,经常使用百分比作为单位

em

- em和百分比类似,它是相对于当前元素的字体大小来计算的

- 1em = 1font-size

- 使用em时,当字体大小发生改变时,em也会随之改变

- 当设置字体相关的样式时,经常会使用em

可以将字体设置为这些大的分类,浏览器会自动选择指定的字体,并应用样式

一般会将字体的大分类,指定为font-family中的最后一个字体

font-style可以用来设置文字的斜体

- 可选值:

normal 默认值,文字正常显示

italic 文字会以斜体显示

oblique 文字会以倾斜的效果显示

- 大部分浏览器都不会对倾斜和斜体做区分,也就是说我们设置italic和oblique效果是一样的

- 一般我们只会使用italic

font-weight可以用来设置文本的加粗效果

- 可选值:

normal 默认值,文字正常显示

bold 文字加粗显示

该样式也可以指定100-900之间的9个值

但是由于用户的计算机往往没有这么多级别的字体,所以200有可能比100粗,但也有可能是一样的

font-variant可以用来设置小型大写字母

- 可选值:

normal 默认值,文字正常显示

small-caps 文本以小型大写字母显示

小型大写字母:

将所有的字母都以大写形式显示,但是小写字母的小型大写,要比大写字母小一些

设置一个文字大小

font-size: 50px;

设置一个字体

font-family: 华文彩云;

设置文字斜体

font-style: italic;

设置文字加粗

font-weight: bold;

设置一个小型大写字母

font-variant: small-caps;

通过设置line-height可以间接的设置行高

可以接收的值:

1.直接接收一个大小

2.可以指定一个百分数,则会相对于字体去计算行高

3.可以直接传一个数值,则行高会设置字体大小相应的倍数

text-transform可以用来设置文本的大小写

可选值:

none 默认值,该怎么显示就怎么显示,不做任何处理

capitalize 单词的首字母大写,通过空格来识别单词

uppercase 所有的字母都大写

lowercase 所有的字母都小写

text-decoration可以用来设置文本的修饰

可选值:

none:默认值,不添加任何修饰,正常显示

underline 为文本添加下划线

overline 为文本添加上划线

line-through 为文本添加删除线

超链接会默认添加下划线,也就是超链接的text-decoration的默认值是underline

如果需要去除超链接的下划线则需要将该样式设置为none

letter-spacing可以指定字符间距

letter-spacing: 10px;

word-spacing可以设置单词之间的距离,实际上就是设置词与词之间空格的大小

text-align用于设置文本的对齐方式

可选值:

left 默认值,文本靠左对齐

right 文本靠右对齐

center 文本居中对齐

justify 两端对齐

- 通过调整文本之间的空格的大小,来达到一个两端对齐的目的

text-indent用来设置首行缩进

这个值一般都会使用em作为单位

当给它指定一个正值时,会自动向右侧缩进指定的像素

如果为它指定一个负值,则会向左移动指定的像素

通过这种方式可以将一些不想显示的文字隐藏起来

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

推荐阅读更多精彩内容