黑马程序员技术交流社区

标题: 【上海校区】列表，单位/颜色单位/字体样式 [打印本页]

作者: 不二晨 时间: 2019-1-18 10:09
标题: 【上海校区】列表，单位/颜色单位/字体样式
列表

1、无序列表
使用ul标签来创建一个无序列表
使用li在ul中创建一个一个的列表项，一个li就是一个列表项
通过type属性可以修改无序列表的项目符号，可选值：
disc：默认值，实心的圆点
square：实心的方块
circle：空心的圆圈
注意：默认的项目符号我们一般都不使用
如果需要设置项目符号，则可以采用为li设置背景图片的方式来设置
ul和li都是块元素
1
2
3
4
5
6
7
8
9
10
2.有序列表
使用ol标签来创建一个有序列表
使用li在ol中创建一个一个的列表项，一个li就是一个列表项
有序列表使用有序的序号作为项目符号
type属性，可以指定序号的类型，可选值：
1，默认值，使用阿拉伯数字
a/A，采用小写或大写字母作为序号
i/I，采用小写或大写的罗马数字作为序号
ol也是块元素
1
2
3
4
5
6
7
8
9
去掉项目符号
ul{
list-style: none;
}
1
2
3
4
3.定义列表
定义列表用来对一些词汇或内容进行定义
使用dl来创建一个定义列表，它有两个子标签
dt：被定义的内容
dd：对定义内容的描述
同样，dl、ul、ol之间都可以互相嵌套

1
2
3
4
5
6
7
列表之间都是可以互相嵌套，可以在无序列表中放个有序列表，也可以在有序列表中放一个无序列表
1
单位

（长度单位）

像素px
- 像素是我们在网页中使用得最多的一个单位
一个像素就相当于屏幕中的一个小点我们的屏幕实际上就是由这些像素点构成的但是这些像素点是不能直接看见的
- 不同显示器一个像素的大小也不相同显示效果越好、越清晰，像素就越小，反之像素越大
1
2
3
4
百分比%
- 也可以将单位设置为一个百分比的形式这样浏览器将会根据其父元素的样式来计算该值
- 使用百分比的好处是，当父元素的属性值发生变化时，子元素也会按照比例发生改变
- 在我们创建一个自适应的页面时，经常使用百分比作为单位
1
2
3
4
em
- em和百分比类似，它是相对于当前元素的字体大小来计算的
- 1em = 1font-size
- 使用em时，当字体大小发生改变时，em也会随之改变
- 当设置字体相关的样式时，经常会使用em
1
2
3
4
5
颜色的单位

在CSS可以直接使用颜色的单词来表示不同的颜色
红色：red
蓝色：blue
绿色：green
1
2
3
4
使用RGB值来表示不同的颜色
- 所谓的RGB值指的是通过Red Green Blue三元色
通过这三种颜色的不同的浓度，来表示出不同的颜色
- 例子：rgb(红色的浓度,绿色的浓度,蓝色的浓度);
1
2
3
4
颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有
1
浓度也可以采用一个百分数来设置，需要一个0% - 100%之间的数字
使用百分数最终也会转换为0-255之间的数
0%表示0
100%表示255
1
2
3
4
可以使用十六进制的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

字体的样式

设置字体颜色，使用color来设置文字的颜色
1
设置文字的大小，浏览器中一般默认的文字大小都是16px，
font-size设置的并不是文字本身的大小，
在页面中，每个文字都是处在一个看不见的框中的，
我们设置的font-size实际上是设置格的高度，并不是字体的大小，
一般情况下文字都要比这个格要小一些，也有时会比格大，根据字体的不同，显示效果也不同

通过font-family可以指定文字的字体当采用某种字体时，如果浏览器支持则使用该字体，如果字体不支持，则使用默认字体
该样式可以同时指定多个字体，多个字体之间使用“,”分开
当采用多个字体时，浏览器会优先使用前边的字体，如果前边没有，再尝试下一个
font-family: arial, 微软雅黑;

浏览器使用的字体默认就是计算机中的字体，如果计算机中有，则使用，如果没有就不用
在开发中，如果字体太奇怪，用的人太少了，尽量不要使用，有可能用户的电脑没有，就不能达到想要的效果
font-family: 华文彩云, arial, 微软雅黑;
---------------------
【转载，仅作分享，侵删】
作者：YRyr.*
原文：https://blog.csdn.net/weixin_43152725/article/details/85158559

作者: 不二晨 时间: 2019-1-23 17:23

奈斯，感谢分享

作者: 梦缠绕的时候 时间: 2019-1-24 17:51

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2