日期：2020-10-02
作者：19届WY
标签：CSS长度单位，颜色单位，字体的分类，字体的样式，文本样式
一、长度单位
1、像素px
- 像素是我们在网页中使用的最多的一个单位，
- 一个像素就相当于我们屏幕中的一个小点，我们的屏幕实际上就是由这些像素点构成的。但是这些像素点，是不能直接看见。
- 不同显示器一个像素的大小也不相同，显示效果越好越清晰，像素就越小，反之像素越大。
2、百分比%
- 也可以将单位设置为一个百分比的形式，这样浏览器将会根据其父元素的样式来计算该值
- 使用百分比的好处是，当父元素的属性值发生变化时，子元素也会按照比例发生改变
- 在我们创建一个自适应的页面时，经常使用100%
3、em
- em和百分比类似，它是相对于当前元素的字体大小来计算的
- 1em = 1font-size
- 使用em时，当字体大小发生改变时，em也会随之改变
- 当设置字体相关的样式时，经常会使用em
<style type="text/css">
.box{
width:100px;
height:100px;
background-color: red;
}
.box1{
font-size: 10px;
width:1em;
height:50%;
background-color: yellow;
}
</style>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
二、颜色单位
1、颜色单位
-
在CSS可以直接使用颜色的单词来表示不用的颜色
-
也可以使用RGB值来表示不同的颜色
-
所谓的RGB值是指通过Red，Green，Blue三元色，通过这三种颜色的不同的浓度，来表示出不同的颜色
-
例子：rgb（红色的浓度，蓝色的浓度，绿色的浓度）；
-
颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有
-
浓度也可以采用一个百分数来设置，需要一个0%～100%之间的数字
-
使用百分数最终也会转换为0-255之间的数
0%表示0 100%表示255
2、十六进制RGB值
-
也可以使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样
-
只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色
-
每组表示一个颜色,第一组表示红色的浓度，范围00-ff
第二组表示绿色的浓度，范围00-ff
第三组表示蓝色的浓度，范围00-ff -
语法：#红色绿色蓝色
00-ff
00表示没有，相当于rgb中的0
ff表示最大，相当于rgb中的255扫描二维码关注公众号，回复： 11845109 查看本文章
-
红色：
#ff0000 -
像这种两位重复的颜色，可以简写
-
比如#ff0000可以写成#f00、
#abc #aabbc
background-color: #0000ff;
三、字体的分类
-
在网页中将字体分成五大类：
serif（衬线字体） sans-serif（非衬线字体） monospace(等宽字体) cursive（草书字体） fantasy(虚幻字体) -
可以将字体设置为这些大的分类。当设置成大的分类以后，浏览器会自动选择指定的字体并应用样式
<p style="font-size:50px;font-family:serif;">衬线字体，我是一段文字，ABCDEFG</p>
<p style="font-size:50px;font-family:sans-serif;">非衬线字体，我是一段文字，ABCDEFG</p>
<p style="font-size:50px;font-family:monospace;">等宽字体，我是一段文字，ABCDEFG</p>
<p style="font-size:50px;font-family:cursive;">草书字体，我是一段文字，ABCDEFG</p>
<p style="font-size:50px;font-family:fantasy;">虚幻字体，我是一段文字，ABCDEFG</p>
四、字体的样式
1、基本样式
- 设置字体颜色，使用color来设置文字的颜色
.p1{
color:red;
}
<body>
<p class="p1">
我是一个p标签,ABCDefg
</p>
</body>
/*下面这里相同*/
- 设置文字的大小,浏览器中一般默认的文字大小都是16px
- font-size设置的并不是文字本身的大小
- 在页面中，每个文字都是处在一个看不见的框中的
- 我们设置的font-size实际上是设置格的高度，并不是字体的大小
- 一般情况下文字都要比这个格小一些，又是也会比格大
- 根据字体不同，显示效果也不同
.p1{
font-size:20px;
}
- 通过font-family可以指定文字的字体
- 当采用某种字体时，如果浏览器支持则使用该字体，如果字体不支持，则使用默认字体
- 该样式可以同时指定多个字体，多个字体之间使用逗号分开
- 当采用多个字体时，浏览器会优先使用前边的字体
- 浏览器使用的字体就是计算机中的字体，如果计算机中有，则使用，如果没有则不用
- 在开发中，如果字体太奇怪，用的太少了，尽量不要使用，有可能用户的电脑没有，就不能达到想要的结果
.p1{
font-family: "curlz mt";
}
2、其他样式
-
font-style可以用来设置文字的斜体
-
可选值：
normal， 默认值，文字正常显示 italic 文字会以斜体显示 oblique 文字会以倾斜的效果显示 -
大部分浏览器不会对倾斜和斜体做区分，也就是说我们设置italic和oblique往往效果是一样的
-
一般我们只会使用italic
-
font-weight可以用来设置文本的加粗效果：
-
可选值：
normal，默认值，文字正常显示 bold，文字加粗显示 -
该样式也可以指定100-900之间的9个值
-
但是由于用户的计算机往往没有那么多级别的字体，所以达到我们想要的效果
-
也就是有200肯呢个比100粗，300可能比200粗，但也有可能是一样的
-
font-variant可以用来设置小型大写字母
-
可选值：
normal，默认值，文字正常显示 small-caps 文本以小型大写字母显示 -
小型大写字母:
将所有的小写字母都以大写字母形式显示，但是小写字母的大写， 要比大写字母的大小小一些 -
在CSS中还提供了样式叫font
-
使用该样式可以同时设置字体相关的所有样式
-
可以将字体样式的值，统一写在font样式中，不同的值之间用空格隔开
-
使用font设置字体样式时，斜体 加粗 小大字母 ，没有顺序要求，甚至可写可不写，
如果不写则使用默认值，但是要求文字的大小和字体必须写 -
大小必须是倒数第二个样式
-
实际上使用简写属性也会有一个比较好的性能
<style type="text/css">
.p1{
color:red;
font-size: 30px;
font-family:"微软雅黑";
font-style:italic;
font-variant:small-caps;
}
.p2{
/*设置一个文字大小*/
font-size: 30px;
/*设置一个字体*/
font-family:华文彩云;
/*设置文字斜体*/
font-style: italic;
/*设置文字加粗*/
font-weight: bold;
/*设置一个小型大写字母*/
font-variant: small-caps;
}
.p3{
font:italic small-caps bold 60px "微软雅黑";
}
</style>
<body>
<p class="p1">我是一段文字，ABCDEFG</p>
<p class="p1" style="font-style:oblique;">我是一段文字，ABCDEFGabcdegf</p>
<p class="p2">我是一段文字，ABCDEFGabcdegf</p>
<p class="p3">我是一段文字，ABCDEFGabcdegf</p>
</body>
五、行间距
1、设置行高
- 在CSS并没有为我们提供一个直接设置行间距的方式
- 我们只能通过设置行高来间接的设置行间距，行高越大间距越大
- 使用line-height来设置行高
- 行高类似我们上学单线本，单线本是一行一行，线与线之间的距离就是行高
- 网页中的文字实际上也是写在一个看不见的线中的，而文字默认在行高中垂直居中显示
- 行间距 = 行高 - 字体大小
.p1{
font-size: 20px;
line-height: 2;
}
-
通过设置line-height可以间接地设置行高
-
可以接收的值： 1、直接就收一个大小 2、可以指定一个百分数，则会相对于字体去计算行高 line-height: 200%; 3、可以直接传一个数值，则行高会设置为字体大小相应的倍数
2、单行文本的行高设置
- 对于单行文本来说，可以将行高设置为和父元素的高度一致
- 这样可以使单行文本在父元素中垂直居中
.box{
width:200px;
height:200px;
background-color: #bfa;
line-height: 200px;//和height一样，文字居中
}
3、font指定行高
-
在font中也可以指定行高
-
在字体后可以添加/行高，来指定行高，该值是可选的，如果不指定则会使用默认值
.p2{
/*line-height:50px;这句话写这里不生效*/
font:30px "微软雅黑";/*这里没有指定行高就会使用默认值，导致覆盖前面的值，所以把行高写后面*/
line-height:50px;
}
六、文本样式
1、text-transform
- text-transform可以用来设置文本的大小写
-
可选值： none 默认值，该怎么显示就怎么显示，不做任何处理 capitalize 单词的首字母大写 uppercase 所有的字母都大写 lowercase 所有的字母都小写
.p1{
text-transform:lowercase;
}
2、text-decoration
-
text-decoration可以用来设置文本的修饰
可选值： none:默认值，不添加任何修饰，正常显示 underline 为文本添加下划线 overline 为文本添加上划线 line-through 为文本添加删除线
3、超链接
- 超链接会默认添加下划线，也就是超链接的text-decoration的默认值是underline
- 如果需要去除超链接的下划线则需要将该样式设置为none
4、letter-spacing和word-spacing
- letter-spacing可以指定字符间距
- word-spacing可以设置单词之间的距离
实际上就是设置词与词之间空格的大小
.p3{
letter-spacing: 10px;
word-spacing: 32px;
}
5、text-align
-
text-align用于设置文本的对齐方式
可选值： left 默认值,文本靠左对齐 right ，文本靠右对齐 center，文本居中对齐 justify，两端对齐 - 通过调整文本之间的空格的大小，来达到一个两端对齐的目的
.p4{
text-align: right;
}
6、text-indent
- text-indent用来设置首行缩进
- 当给它指定一个正值时，会自动向右侧缩进指定的像素
- 当给它指定一个负值时，会自动向左侧缩进指定的像素
- 通过这种方式可以将一些不想显示的文字隐藏起来
.p5{
font-size: 20px;
text-indent: 2em;
}